WordPress 子テーマ の作り方

WordPress で テーマ を カスタマイズ する時、子テーマ (child theme) を作成するのをおすすめします。

子テーマ とは、別の テーマ (親テーマ)の機能を継承し、その機能にさらに機能を追加したりその機能を調整したりすることのできるテーマです。
親テーマをいじらずに カスタマイズ でき、親テーマをアップデートしても、子テーマは書き換えられることがないので、カスタマイズ を保持できます。

WordPress logo 缶バッジ風

では、子テーマ の作成方法を順を追って説明します。
例として、WordPress 3.0 のデフォルトテーマの Twenty Eleven の 子テーマ を作成します。

1. wp-content/themes ディレクトリ内に 子テーマ 用のディレクトリを作成します。

  • wp-content
    • themes
      • twentyeleven
      • twntyeleven-child (ディレクトリ新規作成)

この時ディレクトリ名は、ディレクトリに使用出来る文字を使えばなんでも良いのですが、子テーマだとわかるようにしておいたほうが、あとから見てわかりやすいので良いでしょう。
例では、 twntyeleven-child にしています。

2. 1で作成したディレクトリ内に style.css を作成します。

  • wp-content
    • themes
      • twentyeleven
      • twntyeleven-child
        • style.css (CSSファイル新規作成)

ファイルの内容は、下記のようにします。

/*
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を記述するか、同ディレクトリに別ファイルを作成して、

@import url ('別ファイル名');

と記述します。

3. 更にカスタマイズする時は、 functions.php を 1で作成したディレクトリ内に作成します。

  • wp-content
    • themes
      • twentyeleven
      • twntyeleven-child
        • style.css
        • functions.php (phpファイル新規作成)

functions.php で、add_filter や add_action などを使用して、テーマをカスタマイズしていきます。 (次回以降に簡単な例をのせてみたいと思います。)

親テーマのテンプレートファイルを 子テーマ のディレクトリ内にコピペして、そのテンプレートファイルを変更してもカスタマイズできますが、そうすると、親テーマをアップデートした時、アップデートで変更された点が反映されなかったり、予期せぬエラーが出たりするリスクが上がります。

できるだけ、functions.php を用いてテーマカスタマイズするようにしましょう。

4. WordPress の管理画面で、 子テーマ を有効化します。

WordPress の管理画面にログインして、外観 -> テーマ に移動します。
利用可能なテーマ の中に、先ほど作成した style.css 内に記述した 子テーマの名前 のテーマがあるので、有効化をクリックします。

以上で、完了です。

  • 人気ブログランキングへ
  • FC2ランキングへ
  • ブログランキング・にほんブログ村へ
  • おきてがみ

関連記事

カテゴリー:WordPress
タグ: , , ,

4 Trackbacks

コメントを残す