[WordPress基本]カスタマイズの前に子テーマを!!
WordPressを始めた方は、ご存じでしょう。
Pluginと同時に、テーマが割と頻繁に更新されることを。
デフォルトのままで利用している場合は、問題ないのですが、
文字の大きさ、行間、見出しのフォントファミリー、大きさなどデザイン面に加え、機能的なカスタマイズを加えて、デフォルトのテンプレートに書き加えている場合、テーマが制作者によって更新され、自身も管理画面から更新してしまうと、せっかく書き加えたコードが全て上書きされてしまいます。
しかしながら、「子テーマ」を作成しておいて、そこにカスタマイズしたい内容を書き加えていくと、上記のような上書きを避けられます。
使い出すと、「このテーマ(テンプレート)、気に入ってるんだけど、ここを自分用にカスタマイズしたい。他のブログを参考に自分も同じような機能を付けたい。」と思うことは、ままあるものです。
そんな時に、子テーマの作成法を覚えておくと助かります。
1.子テーマを作成するメリット
- 親テーマからデザインや機能の全てを引き継ぐ。
- 子テーマを準備すると、オリジナルのテーマ(親テーマ)のテンプレートを直接、編集せずにカスタマイズできる。
- オリジナルテーマである親テーマがアップデートしても、子テーマ内でカスタマイズしたテンプレートファイルは影響を受けない。
- また、子テーマはオリジナル・テーマ開発にも役立ちます。
オリジナル・テーマ開発している際、ルーティン化されたスタイルや機能を親テーマとして設定しておき、案件毎に子テーマでバリエーションを付けていくというWordPressのテーマ(テンプレート)開発の効率化が図れます。
2.子テーマと親テーマの関係
WordPressでは、子テーマが存在する場合、子テーマ内のテンプレートファイルが優先して使用される。
一旦、子テーマを読み込んだ後、子テーマにないものは、親テーマで補完する。
親テーマにしかないファイルは親テーマのものが使用され、親テーマと子テーマの両方にあるものは、子テーマのものが使用される。
ただし、functions.php だけ特殊で、親テーマのfunctions.php が読み込まれる直前に、子テーマのfunctions.php が読み込まれる。
functions.phpの場合は、親テーマのfunctions.phpの直前に子テーマのfunctions.phpが読み込まれ、結合され、子テーマフォルダのfunctions.phpと親テーマフォルダ内のfunctions.phpの両方が有効になる。
3.子テーマの作り方
最小限、必要なファイルは、style.cssのみ。
3.1子テーマのファイルを入れるフォルダを作成
ディレクトリ[・・・・・/wp-content/themes]フォルダに子テーマフォルダを作成。
3.2子テーマのstyle.cssの作成
図を参考に、子テーマのstyle.cssを作成する。
図にはインポートする親テーマとしてtwentyelevenとして記述しています。
@import url(‘以下は、1つ上のフォルダ(../)にあるtwentyelevenフォルダ内のstyle.css.を参照するようにという意味です。
[html]
/*
Theme Name:
Theme URI:
Description:
Author URI:
Author:
Version:
Template:
*/
@import url(‘../ /style.css’);[/html]
コピペできるようにしておきました。
文字コードをUTF-8にするのを忘れずに。
これらは、全て記述する必要なく必須となっているTheme Name,Templateと@import url(‘../ /style.css’);だけでもよいようです。
Templateは、親テーマの名称ではなく、ディレクトリ名であるので、注意を。
また、子テーマの名称は、自分でこれが子テーマだとわかれば何でもいいと思います。
一般には、○○○(親テーマ名) child等が利用されているようです。
Theme Name | 子テーマの名称 |
Theme URI | 子テーマのURL |
Description | テーマの説明文 |
Author | テーマ作成者の名前 |
Autor URI | テーマ作成者のURL |
Template | 親テーマのディレクトリ名 (大文字と小文字を区別する必要あり) |
Version | 子テーマのバージョン |
3.3作成した style.css をアップロード
1で作成した子テーマのファイルを入れる子フォルダに style.css のみをアップロード。
3.4管理画面の【外観>テーマ】で子テーマを有効化
親テーマとデザイン等が同じになっていれば、OK.
4.子テーマを使ったカスタマイズの方法
子テーマは、親テーマの機能、デザインを引き継ぐので、全てのファイルを入れる必要は無い。
カスタマイズしたいファイルのみ入れること。
カスタマイズしないファイルは入れる必要は無い。
style.css
要素レベルで親テーマのstyle.cssを継承。
変更したい、追加したいタグだけ@import以降に記述。
CSSには「後から記述した設定が優先される」というルールがあるので、子テーマのstyle.cssで@importよりも後に新しい設定を記述すると、親テーマの設定を上書きできる。
functins.php
追加したいタグだけ記述。
子テーマのfunctins.phpで定義された関数
↓
親テーマで定義された関数と重複しないことが必要。
関数の二重定義
PHPでは、既に定義されている関数を新たに定義しようとすると、二重定義となりエラーとなる。
function_exists関数を利用することで、子テーマからの関数の再定義ができる。
その他のindex.php,single.phpなどのファイル
全てコピーしてカスタマイズを加える必要がある。