WordPress子テーマの作り方

2018/12/14 WordPress

すでにあるテーマのカスタマイズは子テーマを作成して行うと親テーマのファイルをいじる必要がなくなるため、テーマのバージョンを更新する時などに変更が上書きされる心配がなくなります。テーマをカスタマイズするときは子テーマを作成するのが基本です。
そんな子テーマの作り方メモです。

子テーマの構成はとても簡単

子テーマの置き場所は他のテーマと同じく(WordPress環境)/wp-content/themes配下に子テーマ用のフォルダを作成します。そこにstyle.cssファイルを入れれば、テーマ一覧に子テーマが表示されて選べるようになります。
style.cssは以下のように記述します。

/*
Theme Name: Twenty Sixteen Child
Theme URI: http://example.com/twenty-sixteen-child/
Description: Twenty Sixteen Child Theme
Author: Magonote
Author URI: http://example.com
Template: twentysixteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

ファイル先頭からスタイルシートヘッダで始めます。このコメント内にある「Theme Name」「Template」行の記載は必須となります。「Template」行には親テーマのディレクトリ名を記載してください。これで「Template」行に記載した親テーマを引き継ぐ「Theme Name」の子テーマであることが認識されます。このstyle.cssファイルがあれば子テーマと認識されるのですが、このままではスタイルシートが正しく読み込まれません。親テーマと子テーマのスタイルシートをキューに入れる必要があります。まずはスタイルシートを継承させるために、親テーマのスタイルシートをwp_enqueue_script()を使ってキューに入れます。そのためfunction.phpを作成する必要があります。他のテーマと同様に（<?php）で始めて、親テーマのスタイルシートをキューに入れるために以下を記述します。

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

通常は子テーマのスタイルシートは自動的に読み込まれますが、そうでない場合は子テーマのスタイルシートも以下のようにキューに入れます。

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' ));
}

親テーマの依存関係に’parent-style’を設定すると子テーマのスタイルシートは親テーマのあとで読み込まれます。子テーマのスタイルシートをキューに入れるコードを記述するときは、親テーマのあとに記述します。

結果的に子テーマ作成時に必須となるファイルはstyle.cssとfunction.phpです。
これで子テーマを有効にできます。管理画面＞外観＞テーマで子テーマが表示されていることを確認して有効化してください。

子テーマを有効化したあとは、メニュー (外観 > メニュー または 外観 > カスタマイズ > メニュー) およびテーマのオプション (背景やヘッダイメージ) を保存し直す必要があります。

テンプレートファイルのカスタマイズ

他のテンプレートファイルも同様に同名のファイルは上書きします。単純に同じ名前のファイルを子テーマディレクトリに置くことで、サイトがロードされると親テーマディレクトリ内の同名のファイルは上書きされます。例えば、header.phpやfooter.phpを子テーマディレクトリに置くと、ヘッダーやフッターの処理時に子テーマディレクトリ内のファイルが使用されます。上書きされるため、元の処理をカスタマイズしたい場合は、対象のファイルを親テーマから子テーマディレクトリにコピーしてカスタマイズします。

function.phpについて

style.cssや他のテンプレートファイルと違い、function.phpファイルだけは上書きされず親のfunction.phpに追加して読み込まれます。正確には、子テーマのfunction.php→親テーマのfunction.phpの順に読み込まれます。このため、親のfunction.phpにある関数を子テーマのfunction.phpに定義することで親の関数を置換できます。ただし、親のfunction.php内で関数を記述するときに、条件付きで定義されている関数だけ子テーマでも同じ名前の関数を使用（つまり置換）できます。条件とは以下のように「対象の関数がなければ関数を定義する」という書き方です。

if ( ! function_exists( 'theme_special_nav' ) ) {
    function theme_special_nav() {
        // 何かする。
    }
}

つまり、親テーマの直前に子テーマのfunction.phpが読み込まれるので、先にロードされるため親のfunction.php内では定義されないということですね。言い換えると上記の記述で定義されていない関数は、子テーマで同じ名前の関数を定義することができません。それでは、親のfunction.php内にある条件付きでない同じ名前の関数をカスタマイズしたい時はどうすればいいでしょうか。

この場合は、大きく２つのパターンで処理します。

「add_action」アクションフックされている処理をカスタマイズする場合

「remove_action」でフックを解除し、別の関数名で「add_action」することで処理を書き換えます。例えば以下のようにadd_actionされている処理をカスタマイズするときは、

add_action( 'wp_head', 'twentysixteen_javascript_detection', 0 );

これを一度remove_actionで解除します。

function remove_parent_action() {
    remove_action( 'wp_head', 'twentysixteen_javascript_detection', 0 );
}
add_action(‘init’, ‘remove_parent_action’);

次にカスタマイズ処理をadd_actionでフックします。

function customize_child() {
    // カスタマイズ処理
}
add_action(‘wp_head’, ‘customise_child’, 0);

アクションフックされていない処理をカスタマイズする場合

「after_setup_theme」を「add_action」することで処理をカスタマイズします。つまり全てのテーマ処理が完了したあとでadd_actionで処理をカスタマイズします。例えば以下を子テーマのfunction.phpに記述します。

function twentysixteen_setup_child() {
    // カスタマイズ処理
}
add_action(‘after_setup_theme’, ‘twentysixteen_setup_child’);

もし処理がカスタマイズできない場合はすでに「after_setup_theme」がフックされていて、その中にカスタマイズしたい処理があることが多いです。親のfunction.phpが読み込まれる時に処理されるのでカスタマイズが反映されません。。この場合は、add_actionの３つ目の引数に優先順位を設定するのですが、この値を高くすれば処理が反映されます。

これで子テーマを作って一通りのカスタマイズはできるかと思います。

参考：WordPress Codex 日本語版　子テーマについて詳細

シェアする

, ,