タグとCSSとの関連性がだいぶ判ってきたので、もうすこし大胆にデザインをいじってみたくなってきた。
そこで、デザインをいじる際にWordPressで推奨されている子テーマを作成してのカスタマイズに挑戦してみた。
実は以前にちょっとだけ挑戦してたんだけど、うまく子テーマが機能せず ブログのデザインがテキストベースになっちゃって 慌てて元に戻した経緯もあったりする。
目次
子テーマの作成
作成といっても、難しいことは何もない。しかるべき場所にディレクトリを作成して、最小限必要なファイルを作成するだけでOK。
１．子テーマ名でディレクトリ作成
WordPressのインストール下の以下ディレクトリに
/wp-content/themes/子テーマ名
となるようにディレクトリを作成する。この時、子テーマ名は 親テーマ名_child と作成することを推奨されています。
*子テーマ名は次で作成するstyle.cssで記入します。
２．直下に必要ファイルの作成
１．で作成したディレクトリ内に以下２つのファイルを作成
- style.css
ブログのデザインを決定しているスタイルシート。
動作としては親テーマのstyle.cssに続けて読み込まれる為、子テーマのstyle.cssに書き込まれたスタイルが優先される原理。
なので、このファイルには変更部のスタイルのみ記載していけばOK。 - functions.php
ブログの動作をつかさどるメインのプログラムファイル。
＊ファイル名が functions.php ということに注意。自分はfunction.phpとしていて動かずハマリましたので・・・
３．ファイルに必要最小限の記述を
style.css への記述
|
1 2 3 4 |
/* Template:first Theme Name:first_child */ |
Template: には、自分が作成しようとしてる親テーマのディレクトリ名を記載
Theme Name: には、１． で作成した子テーマディレクトリ名を記載
functions.php への記述
|
1 2 3 4 5 |
<?php add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); } |
通常はこの記述で子テーマの style.css は自動で読み込まれるらしいのですが、自分の環境ではダメでした。
その場合は、こちらの記述で。
|
1 2 3 4 5 6 7 8 9 |
<?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') ); } |
子テーマのstyle.css の読み込みを明示するかしないか の差らしいので、むしろ明示してあるこちらの記述を使う方が、変な心配がなくて安心。
詳細な説明や、style.css への本来記述すべき内容などは以下へ
WordPress Codex 日本語版 – 子テーマ
４．子テーマの所有者とグループを変更
意外と忘れがちなのがコレ。スーパーユーザーでファイルの作成などを行ってた場合は 子テーマディレクトリ以下について 所有者と所属グループを apache に変更しておきます。
そう、私は これをし忘れて2度目のハマリに陥ったのです・・・
|
1 |
# chown -R apache:apache /wp-content/themes/子テーマディレクトリ |
子テーマの適用
テーマの編集から確認
ダッシュボードのテーマの編集から、作成したテーマの編集画面を出すと 設定がうまくいってれば、
「この子テーマは親テーマ ○○○のテンプレートを引き継ぎます。」
と表示されているハズです。
ライブプレビューで確認
ダッシュボード – 外観 – テーマ の一覧から 作成した子テーマ に ライブプレビュー のボタンが表示されてるので、押して 表示状態を確認します。
問題ないようなら、子テーマを選択して適用します。
ただし、このカスタマイズ画面から変更した設定内容は初期値に戻るようなので 子テーマを適用したあとは再度設定が必要です。
デザインの変更
以降のデザインの変更は、子テーマ の 編集 から style.css に必要項目を記入していけばOKです。
又、その他ファイルの編集をしたい場合は 必要ファイルを親テーマから子テーマへコピーして、子テーマ側のファイルを変更していけばOKです。
親テーマと子テーマに同名ファイルが有る場合は、子テーマ側のファイルが有効となり実行されます。
＊ただし、functions.php だけは、コピーでの変更はできません。必要に応じて WordPress Codex 日本語版 を読むべし。
