WordPressカスタマイズ事例

デザインの子テーマをつくる

デザインテーマを外のサイトから購入した場合など、大元のファイルは残しつつ自作のカスタマイズを加えたいときがあります。
そんなときに役に立つのが、「子テーマ」機能。
WordPress標準機能で、親テーマのスタイルやプログラムを継承して使うことができます。

準備は簡単。
子テーマのディレクトリを用意して、その中に style.css を置き、次のように記述します。

/*
Theme Name: kaizaTheme_child
Template: kaizaTheme
*/

これで、kaizaTheme_child というテーマが kaizaTheme を継承した子テーマとして定義されました。
 
次に子テーマディレクトリにfunction.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 が読み込まれるようになります。
 
さて、ここまでで準備完了です。
あとは子テーマ内で自由にテンプレートを作っていけばいいのですが、注意点2点。

  1. 親テーマと同ディレクトリ同名のテンプレートファイルを子テーマで作った時は子テーマのほうが採用される(ただし、function.php 以外)
  2. 親テーマと子テーマの function.php で同じfunction名の機能を記述するとエラーが出る(上書きしないどころか、エラーまで出します)

1のほうは、親子関係がある以上そうなんだろうと察しがつきますが、2のほうは知らないとハマります。
これの回避の方法は簡単なので覚えておいてください。

親テーマのほうの function.php で機能を記述するときは、同じfunction名が子テーマにないかどうかのチェックを入れることです。

if ( ! function_exists( 'display_news' ) ){
function display_news() {
//処理
}
add_shortcode('display_news', 'display_news');
}

というように。

分かってしまえば簡単です。
おまじないのように、前後に

if ( ! function_exists( 'XXXX' ) ){
}

と入れればいいだけです。


関連するWordPressカスタマイズ事例