WordPress で テーマ を カスタマイズ する時、子テーマ (child theme) を作成するのをおすすめします。
子テーマ とは、別の テーマ (親テーマ)の機能を継承し、その機能にさらに機能を追加したりその機能を調整したりすることのできるテーマです。
親テーマをいじらずに カスタマイズ でき、親テーマをアップデートしても、子テーマは書き換えられることがないので、カスタマイズ を保持できます。
では、子テーマ の作成方法を順を追って説明します。
例として、WordPress 3.0 のデフォルトテーマの Twenty Eleven の 子テーマ を作成します。
1. wp-content/themes ディレクトリ内に 子テーマ 用のディレクトリを作成します。
- wp-content
- themes
- twentyeleven
- twntyeleven-child (ディレクトリ新規作成)
- themes
この時ディレクトリ名は、ディレクトリに使用出来る文字を使えばなんでも良いのですが、子テーマだとわかるようにしておいたほうが、あとから見てわかりやすいので良いでしょう。
例では、 twntyeleven-child にしています。
2. 1で作成したディレクトリ内に style.css を作成します。
- wp-content
- themes
- twentyeleven
- twntyeleven-child
- style.css (CSSファイル新規作成)
- themes
ファイルの内容は、下記のようにします。
1 2 3 4 5 6 7 8 9 10 11 |
/* Theme Name: Twenty Eleven Child Theme Theme URI: http://example.com/themes/twentyeleven-child-theme Author: hogetaro Author URI: http://example.com/ Description: Child theme for the Twenty Eleven theme for WordPress Template: twentyeleven Version: 0.0.1 */ @import url('../twentyeleven/style.css'); |
Theme name 子テーマの名前 (必須)
Theme URI 子テーマのURL
Auther 子テーマの作者
Auther URI 子テーマの作者のホームページ
Description 子テーマの説明
Template 親テーマ名 (必須)
Version 子テーマのバージョン
上記のうち、必須は Theme name と Template の2項目だけです。
子テーマを公開するつもりのない場合は、必須項目のみでOKです。
あとは、子テーマをたくさん作って後々どんな子テーマだったかわからなくなりそうな時は、 Description を追加したり、バージョンで変更を管理したい時は、 Version を追加したりします。
11行目は、親テーマのCSSを引き継ぐ場合に記述します。
CSSをカスタマイズする時は、12行目以降にCSSを記述するか、同ディレクトリに別ファイルを作成して、
1 |
@import url ('別ファイル名'); |
と記述します。
3. 更にカスタマイズする時は、 functions.php を 1で作成したディレクトリ内に作成します。
- wp-content
- themes
- twentyeleven
- twntyeleven-child
- style.css
- functions.php (phpファイル新規作成)
- themes
functions.php で、add_filter や add_action などを使用して、テーマをカスタマイズしていきます。 (次回以降に簡単な例をのせてみたいと思います。)
親テーマのテンプレートファイルを 子テーマ のディレクトリ内にコピペして、そのテンプレートファイルを変更してもカスタマイズできますが、そうすると、親テーマをアップデートした時、アップデートで変更された点が反映されなかったり、予期せぬエラーが出たりするリスクが上がります。
できるだけ、functions.php を用いてテーマカスタマイズするようにしましょう。
4. WordPress の管理画面で、 子テーマ を有効化します。
WordPress の管理画面にログインして、外観 -> テーマ に移動します。
利用可能なテーマ の中に、先ほど作成した style.css 内に記述した 子テーマの名前 のテーマがあるので、有効化をクリックします。
以上で、完了です。
4 Trackbacks
[…] 子テーマの作り方。 参考ブログ → http://blog1.dd-company.com/ → http://presentnote.com/ […]
[…] WordPress 子テーマ の作り方 | WEBデザイン&WEBプログラミング -sei2の日記- […]
[…] 【参考サイト】 WordPress 子テーマ の作り方(SEI2の日記) […]
[…] WordPress 子テーマ の作り方 | WEBデザイン&WEBプログラミング -sei2の日記- […]