WordPress子テーマ作成のポイント

Tips

WordPressのテーマには様々なものが無料、有料を問わず存在します。これらを上手に活用してサイトを作成することはそのサイトの成功に繋がるでしょう。なぜなら、デザインをあれこれ迷ってテーマを一から作ることは時間の無駄でしかありません。要はコンテツの出来が良いかどうかなのです。コンテンツ作りに時間を割くようにして、テーマのデザインは本当にコンテンツにあったものかどうか、また本当にユーザーが使いやすいものかどうかをアナリティクスなどの結果を分析してさらにカスタマイズを加えた方が効率的だと言えます。

けれども既存のテーマをそのまま使用することは稀でしょう。自分のサイトに合わせた多少のカスタマイズが必要になります。
その際、既存のテーマを直接編集してカスタマイズするのではなく、子テーマを作成してカスタマイズすることになります。既存のテーマは時々バーションアップする事があるからです。もしテーマの作者がバージョンアップしたならカスタマイズした内容は無残に消え去り、新しくバージョンアップした内容に書き換わってしまいます。
子テーマを作成することで親テーマをバージョンアップされても子テーマの変更はそのままの状態にすることができるわけです。

子テーマは、既存のテーマ(親テーマ)の機能とスタイルを継承することができます。WordPressでは親テーマを直接変更するのではなく、子テーマを作成することが推奨されています。

スポンサーリンク

子テーマ作成のポイント

子テーマを作成するには決まった方法があります。まずは必須のものを揃えます。

子テーマ作成に必要なもの

  1. 子テーマディレクトリ作成
  2. style.cssを子テーマにも用意して子テーマである記述をする
  3. functions.phpを子テーマにも用意する

子テーマディレクトリの名前は「親テーマの名前-child」とします。例えば親テーマのディレクトリ名が「twentyseventeen」なら子テーマは「twentyseventeen-child」とします。

styl.cssには先頭に次のコメントアウトを入れます。Theme Nameはわかりやすい名前をつけます。Templateは親テンプレートのフォルダ名を入れます。大文字小文字も区別しますので注意してください。また、親テーマのテーマ名ではありませんので間違えないようにしてください。以下の例は必須の内容です。

/*
 Theme Name:   Twenty Seventeen Child
 Template:     twentyseventeen
*/

その他次の項目を付け加えることもできます。
Theme URI、Description、Author、Author URI、Version、License、License URI、Tags、Text Domain

functions.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を継承して子テーマでcssを変更したい場合はその仕組みを作る必要があります。
以前は子テーマのstyle.cssで親テーマのstyle.cssをimportする方法を取っていましたが、現在は非推奨のようです。そのため、functions.phpに上記の記述をして親テーマのcssを継承するようにします。

子テーマのカスタマイズ

上記の設定を行うことにより、CSSやindex.phpなどのテンプレートは基本的にまず親テーマの内容が読み込まれて、その次に子テーマの内容が読み込まれます。
そのためカスタマイズしたい内容や親テーマの内容を打ち消したい内容は親テーマと同じファイルを子テーマにも用意して訂正したい部分や加筆したい部分を記述していきます。

ただし、注意しなければならないのはfuncitons.phpだけは振る舞いが違います。まず子テーマのfunctions.phpが読み込まれて、親テーマのfunctions.phpが読み込まれます。そのため子テーマのfunctions.phpで変更を行ってもうまく動きませんしエラーになる場合もあります。

ただし、親テーマのfuctions.php内に以下の記述があるとラッキーです。(example_templateは例です)

if ( ! function_exists( 'example_template' ) ) { 
          function example_template (){} //functionの記述 
 }

この記述の中に書かれたfunctionは子テーマでオーバーライドできます。使用するテーマにこの記述があるかどうかしっかりと確認して子テーマの functions.php を記述します。

もし上記の記述がない場合はちょっと面倒になります。その辺はまた別途まとめておきたいと思います。
親テーマのfunctions.php後に子テーマの関数を実行させる

タイトルとURLをコピーしました