タグ

ブックマーク / tcd-theme.com (8)

  • 【JavaScriptの実践】スライドショーの作り方 – ワードプレステーマTCD

    スライドショーとは、画像が一定の時間ごとに切り替わる機能で、JavaScriptの基知識があればスライドショーを作ること自体難しくありません。 jQueryなどでも簡単に実装できますが、まずは素のJavaScript(Vanilla JSとも呼ばれる)を使って理解を深めることで、他のライブラリやフレームワークを使用するときに役立ちます。 今回は、再生・停止機能ボタンを付けたスライドショーを実装していきます。 デモ 今回は、このようなスライドショーを実際に作っていきます。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Beutiful Four Seasons</title> <link rel="stylesheet" href="styles.css" /> <script src="script.js"></s

    【JavaScriptの実践】スライドショーの作り方 – ワードプレステーマTCD
  • WordPressの子テーマを作る理由と子テーマを自作する方法 – ワードプレステーマTCD

    子テーマ制作に必要なものとは? 子テーマを自前で用意する場合、子テーマの要素となるファイルを先に作る必要があります。そこで利用するファイルは主に2つ。 functions.phpWordPressに機能を追加する役割(プラグインのような機能)をもつ。子テーマにおいては親テーマのfunctions.phpにある記述は上書きし、ない記述は追加します。 style.css:テーマのデザインスタイルを追加します。子テーマにおいては親テーマのstyle.cssにある記述は上書きし、ない記述は追加します。 これ以外にもファイルごとに細かくカスタマイズしたい場合は、header.phpやindex.phpなど、親テーマにおいて変更したいファイルを子テーマに作って記述を変更、追記していきますが、便宜上、基的なカスタマイズに絞ってご紹介していきます。 自前で子テーマを用意する方法 自前で子テーマを用意す

    WordPressの子テーマを作る理由と子テーマを自作する方法 – ワードプレステーマTCD
  • WordPressでファビコンを設定する方法 – ワードプレステーマTCD

    2021/4/30 情報を更新いたしました。 ブラウザタブやブックマークしたサイトにロゴのようなものが表示されるのを見たことがありませんか?このアイコンを「ファビコン(favicon)」といいます。 スマホなど他のデバイスでもファビコンはブラウザ内で使われます。 ファビコンの有無はSEOにはそれほど関係がないと考えがちですが、サイトのブランディングや、クリック率UPには効果があるとも言われています。 この記事ではファビコンの作り方やWordPressでの設定方法を解説します。ここでは、ファビコンの作成方法から設置方法、おすすめのプラグインの紹介をいたします。 ファビコンを用意する ファビコンを用意するには、2つの方法があります。1つ目は自分で作る方法。2つ目はフリー素材サイトからダウンロードして使う方法です。 オリジナルにしたい方は自作すると良いでしょう。自作すると言っても画像編集ソフトが

    WordPressでファビコンを設定する方法 – ワードプレステーマTCD
  • これは使える!JetPackプラグインのおすすめ機能 – ワードプレステーマTCD

    「Jetpack」のインストール 管理画面から「Jetpack」を検索してインストールして下さい。 もしくは、下記のサイトからプラグインをダウンロードし、wp-content/pluginsディレクトリにインストールしてください。 Jetpack インストール後、管理画面の【プラグイン】より【Jetpack】を有効化してください。有効化するとプラグインの画面に変わります。プラグインの画面上部に「Jetpackがもうすぐお使いいただけます」という表示が現れ、WordPress.comと連携というボタンが表示されるようになっています。JetpackをWordPress.comと連携するのは、WordPress.com APIを利用する必要があるからです。 ボタンをクリックして、次の画面に進んでください。 ■ WordPress.comアカウント作成済み・接続済みの場合 既にWordPress.

    これは使える!JetPackプラグインのおすすめ機能 – ワードプレステーマTCD
  • 誰でも簡単にできる、WordPressを別ドメインに移設する方法

    WordPress - 大全集 2015.09.11 2017.08.26 誰でも簡単にできる、WordPressを別ドメインに移設する方法 WordPressでサイト制作を行っていると、はじめは仮ドメインに設置 → 公開のタイミングでドメインに切り替えるという作業が必要になることがあります。 また、先の記事で紹介したテスト環境から番環境に移設する時にも必要な工程です。 XAMPPを用いてテスト環境を構築する方法 MAMPを用いてテスト環境を構築する方法 移設の難しさ しかしながら、初めてこの作業を行うと結構苦労します。 移設を行う場合の一番の問題点は、公開URLが変更になることです。 公開URLが変更になることで下記のような問題点が起こります。 公開URLの設定が正しくないとWordPressの管理画面にログインができなくなる。 テーマファイルのCSSJavaScriptが読み込ま

    誰でも簡単にできる、WordPressを別ドメインに移設する方法
  • 様々なコンテンツを簡単に記事に埋め込めるプラグイン「WP Canvas – Shortcodes」 – ワードプレステーマTCD

    WordPressの記事にちょっと凝ったデザインのパーツを入れようとすると、スタイルシートを設定したり画像を作ったりと、案外手間が掛かることがあります。そんなときに、簡単に様々なパーツを埋め込めるのが、今回紹介するプラグインの「WP Canvas – Shortcodes」です。 このプラグインひとつで記事内に追加出来る項目は以下の通り。 アコーディオン タブ トグル カラムとセクション お客様の声 ボーダー ボタン Full Width 通知 Googleマップ ソーシャルアイコン プログレスバー 価格表 フラグ付きの画像 ハイライト カウントダウン RSVP カスタムHTML コードスニペット 任意の投稿の表示 様々な種類のアイコン プラグインのインストール 下記のURLからプラグインをダウンロードして、wp-content/pluginsディレクトリにインストール。その後、管理画面か

    様々なコンテンツを簡単に記事に埋め込めるプラグイン「WP Canvas – Shortcodes」 – ワードプレステーマTCD
  • PHPの知識不要!ショートコードを手軽に使用できるプラグイン「Post Snippets」 – ワードプレステーマTCD

    サイトやブログを運営していると、頻繁に使用する文章やHTMLコードが出てくると思います。 そういった共通のコンテンツをその都度入力することに煩わしさを感じることもありますよね。 WordPressでは、あらかじめよく使う定型文やコードを登録しておき投稿画面から呼び出せる「ショートコード」という機能が備わっていますが、PHPの知識が必要な点や、直接テーマファイルへ書き込む必要がある点から少々敷居が高かったりします。 そこで非常に便利なのが今回ご紹介する「Post Snippets」です。このプラグインを使用することで、テーマファイルに直接手を加えることなく手軽にショートコードを使用することができます。 「Post Snippets」のインストール 下記のサイトからプラグインをダウンロード。wp-content/pluginsディレクトリにインストール後、管理画面から有効化してください。 Po

    PHPの知識不要!ショートコードを手軽に使用できるプラグイン「Post Snippets」 – ワードプレステーマTCD
  • スタイリッシュな製品レビュー記事が簡単に作れるプラグイン「WP Product Review」 – ワードプレステーマTCD

    WordPressでレビューを主体にした記事やサイトを作るときに、少しでも見た目にこだわりたいときがあります。そんなときに役に立つのが、今回ご紹介するプラグインの「WP Product Review」です。 シンプルな設定で、見た目もかっこよくグラフやコメント、アフィリエイトのリンク等も挿入することができます。 プラグインのインストール 下記のURLからプラグインをダウンロードして、wp-content/pluginsディレクトリにインストール。その後、管理画面から有効化してください。 WP Product Review プラグインの使い方 プラグインを有効化したら、特別なセッティングをする必要もなくいきなり利用することができます。 まず新規投稿で記事を作成します。投稿画面内に「Product Review Extra Settings」という項目が増えていますので、「Yes」にチェックを

    スタイリッシュな製品レビュー記事が簡単に作れるプラグイン「WP Product Review」 – ワードプレステーマTCD
  • 1