子テーマを作ってカスタマイズ!
テーマをカスタマイズしたいけれど、更新すると変更箇所が上書きされてしまう!
そんなことも「子テーマ」を作れば解決できるということで、早速実践。
子テーマを作る!
子テーマを作ると言っても、大したことではなかったです(^^)
親テーマと同じ階層に子テーマのフォルダを作り、「style.css」ファイルを新たに作成。
wp-content /themes /「親テーマ」フォルダ←この階層にフォルダ作成
wp-content /themes /「子テーマ」フォルダ
子テーマの「style.css」ファイルに以下を記述。
--------------------
/*
Theme Name: 【子テーマの名前】
Description: 【「親テーマ名」の子テーマとか】
Author: 【自分】
Template: 【親テーマの名前】
※ここはコメントアウトされているので、テーマ名さえきちんと書いておけば、あまり気にしなくていい。
*/
@import url("../「親テーマ名」/style.css");
--------------------
@import urlで親子を結びつけるようです。
ここまでできたら、ダッシュボードのテーマで子テーマを有効化すればOK!
function.php以外は親テーマのファイルをコピペしてカスタマイズしていけば上書きされる様子。
子テーマのCSSが効いていない!
デバイス別にスタイルシートが設定されているテーマでは子テーマのCSSが効かないことがあるらしい。
調べたところ、header.phpで親テーマのCSSを指定されているため、該当箇所を修正するとのこと。
親テーマでbloginfo(‘template_url’)が、WP3.0の時点では推奨されていないので子テーマの読み込みに使えないということで、まずは親テーマのheader.phpの該当箇所を下記の通り修正。
【親テーマ】
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.css" />
↓
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css" />
次に、子テーマのCSSを読ませるために、子テーマのheader.php該当箇所を下記の通り修正。
【子テーマ】
親テーマのファイルコピーを使用する場合・・・
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.css" />もしくは、
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css" />
↓
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css" />
以上で、私は無事に子テーマのCSSを有効にできました!
ついでにですが、子テーマでの画像urlの書き方は、bloginfo(‘template_url’);ではなく、
bloginfo('stylesheet_directory');
を使うようです。
bloginfo(‘template_url’);だと親テーマのファイルを読みに行くみたい。