WordPressテーマの選択インストール「第3回」
テーマは別に決まりはないので使いやすいのを選択する。
親テーマをインストール
カスタマイズする際は「子テーマ」と呼ばれるテーマを別途作成します。
利用したい既存のWordPressテーマをインストールたら、カスタマイズしていきます。カスタマイズする際は「子テーマ」と呼ばれるテーマを別途作成します。
1. 子テーマのフォルダーを作成
親テーマ(既存のテーマ)と同じ階層である /wp-content/themes に新しいフォルダーを作成します。フォルダーの名前は「親テーマ名-child」などにしておくとわかりやすいです。
2. style.css
作成した子テーマフォルダー内に「style.css」という名前でCSSファイルを作成します。作成した style.css に以下のコードを記述します。
01
02
03
04
05
06
07
08
09
10
11
12
13
|
/* Theme Name: Twenty Fifteen Child Theme URI: http://example.com/twenty-fifteen-child/ Description: Twenty Fifteen Child Theme Author: John Doe Author URI: http://example.com Template: twentyfifteen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-fifteen-child */ |
これらは子テーマの情報として認識されます。各項目はサイトに合わせて書き換えてください。特に必要なのは以下の2つ:
- Theme Name … 子テーマの名前(例:Twenty Fifteen Child)
- Template … 親テーマのフォルダ名(例:twentyfifteen)
スペルミスでもうまく認識されないので、きちんと確認して記述します。これらの2つ以外はなくても認識されます。
3. functions.php
続いて子テーマフォルダー内に functions.php というPHPファイルを作成します。functions.php に以下のコードを記述して、子テーマを認識させます。
1
2
3
4
5
6
7
8
|
<?php add_action( 'wp_enqueue_scripts' , 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'parent-style' , get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style' , get_stylesheet_directory_uri() . '/style.css' , array ( 'parent-style' ) ); } ?> |
4. 子テーマを有効化する
これだけで子テーマが利用できるようになりました!管理画面から 外観 > テーマ に進むと、子テーマが表示されています。有効化すれば子テーマの設定完了です!
しかし、この流れだと何も変更していないので、本当に子テーマが利用できているのかわかりませんね…。試しに style.css のコメントアウトしたテーマ情報の下に body { background: pink; } と記述してCSSファイルを更新してみてください。
1
2
3
4
5
|
/*
Theme Name: Twenty Fifteen Child
Template: twentyfifteen
*/
body { background: pink; }
|
サイトを更新すると背景色がピンク色になっているはずです。子テーマが有効化されていることが確認できたら、このコードは削除しておいてください。
子テーマ商品登録前に済ませておく設定
1.ダッシューボード >> 外観 >> カスタマイズ を表示
2.レイアウト >> 関連記事の関連付け の設定はタグに関連付けに、表示数は24に
3.その下のナビの表示も設定
4.画像 >> アイキャッチを自動設定 にチェックを入れる
チェックを入れておくと商品登録した時点で自動的に商品のメイン画像をアイキャッチ画像として登録してくれます。
5.画像 >> 画像リンク拡大効果のタイプ の変更