WWordPressカスタマイズ事例
デザインの子テーマをつくる
デザインテーマを外のサイトから購入した場合など、大元のファイルは残しつつ自作のカスタマイズを加えたいときがあります。
そんなときに役に立つのが、「子テーマ」機能。
WordPress標準機能で、親テーマのスタイルやプログラムを継承して使うことができます。
準備は簡単。
子テーマのディレクトリを用意して、その中に style.css を置き、次のように記述します。
1 2 3 4 | /*Theme Name: kaizaTheme_childTemplate: kaizaTheme*/ |
これで、kaizaTheme_child というテーマが kaizaTheme を継承した子テーマとして定義されました。
次に子テーマディレクトリにfunctions.phpを置き、次のように記述します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );}//上の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 が読み込まれるようになります。
さて、ここまでで準備完了です。
あとは子テーマ内で自由にテンプレートを作っていけばいいのですが、注意点２点。
- 親テーマと同ディレクトリ同名のテンプレートファイルを子テーマで作った時は子テーマのほうが採用される（ただし、functions.php 以外）
- 親テーマと子テーマの functions.php で同じfunction名の機能を記述するとエラーが出る（上書きしないどころか、エラーまで出します）
1のほうは、親子関係がある以上そうなんだろうと察しがつきますが、2のほうは知らないとハマります。
これの回避の方法は簡単なので覚えておいてください。
親テーマのほうの functions.php で機能を記述するときは、同じfunction名が子テーマにないかどうかのチェックを入れることです。
1 2 3 4 5 6 7 8 | if ( ! function_exists( 'display_news' ) ){ function display_news() { //処理 } add_shortcode('display_news', 'display_news');} |
というように。
分かってしまえば簡単です。
おまじないのように、前後に
1 2 3 | if ( ! function_exists( 'XXXX' ) ){} |
と入れればいいだけです。
【100ウェブ新着情報メルマガ】
WordPressカスタマイズ事例やウェブ制作ノウハウの新着情報、お役立ち情報を
リアルタイムにメルマガ配信！
S100ウェブの制作・開発案件紹介
100ウェブで手がけた制作・開発案件を一部、ご紹介。
クライアントからご相談いただいた内容とその実装におけるポイント、工期、予算について確認いただけます。
Cとりあえずは100ウェブに相談してみよう
【テレワーク実施中 
につきお電話転送中】
コール中1秒程度無音状態になりますがそのままお待ちください。
0120-555-875受付時間
平日 10:00～18:00
- 東 京03-6361-0717
- 大 阪06-7878-8049
- 名古屋052-747-5650
- 福 岡092-600-1156
- 仙 台022-706-2450
- 金 沢0120-555-875
- 札 幌0120-555-875
メールでのお問い合わせ
メールでのお問い合わせでも
1営業日以内にご連絡いたします。
