今さら聞けない、WordPressのテーマをいじる時の子テーマとは何?

さて、いつまでも初心者です、ともいってられないので、現在使用中のテーマ「Twenty Twelve」を少しずついじっていこうと思い、ネット上を色々彷徨っていたら、何やら気になる単語が。

子テーマ

修正する場合は子テーマを作った方が良いと言う説明が出てきました。

何となくの理解ですが、子テーマを作って、そちらで修正しておけば、元のテーマが例えばバージョンアップ等で上書きしても、修正内容が保持されるということですね。

「WordPress Codex 日本語版」にもありました。

以下、「子テーマ – WordPress Codex 日本語版」を参照してます。

詳細はそちらにまかせるとして、最小構成は style.css ファイルのみでも可能ということなので、とりあえずstyle.cssのみ、子テーマを作ってみようと思います。
実際にそこまで必要なのかどうかは分かりませんが、せっかくですからやってみましょう。

まずは、ディレクトリ構造。現在使用中のテーマは「Twenty Twelve」です。

wp-content
→themes (すべてのテーマが入るディレクトリ)
→フォルダ作成。例)twentytwelve-child (子テーマ自身のディレクトリ; 名称は自由)…親テーマと同階層
→スタイルシート作成。style.css (子テーマに必須; 名称は style.css)

(画面は「ロリポップ!FTP」より)
20130212themes_folder

20130212themes_file

そして、子テーマの style.css記述例ですが、詳しくは「子テーマ – WordPress Codex 日本語版」参照ということで,次のように必須項目のみ記述しました。

/*
Theme Name: Twentytwelve Child
Template: twentytwelve
*/

ここで、Templateとは親テーマのディレクトリ名で、 大文字小文字を区別するので、間違わないように注意ですね。

さらにこの下に、@import ルールで親テーマのスタイルシートをインポートする記述を追加します。
(このあたりは、内容までは理解できません(汗) 記述通りに作業するしかないですね〜)

/*
Theme Name: Twentytwelve Child
Template: twentytwelve
*/

@import url(‘../twentytwelve/style.css’);

これで、親テーマのスタイルを継承して、そこに子テーマの内容を適用させる形になるんですね。

で、これ以降にカスタマイズしたい箇所のidやclassを指定して、変更内容を記述していくと、その箇所だけが親テーマに適用されるというわけですね。

テーマの適用は、当サイトはマルチサイト機能を有効にしているので、表示が違うかもしれませんが、ダッシュボードの子テーマが表示されるので(今回は「Twentytwelve Child」)、それを有効化すると適用されます。

20130212themes_child

管理画面にはプレビューがありませんが、サイトは表示されているので、ひとまず終了ということで。

functions.phpやテンプレートファイルも、子テーマとして扱えるらしいですが、ちょっとまだ手が出ませんね。
そのうちに機会があればということで、今回はCSSファイルだけにしておきます。

そういえば、私はニフティのココログを長く(今も)利用しているのですが、htmlやcssを直接編集することができるのは、ココログプロ等の上級のプランだけで、それ以外は「カスタムCSSを編集」という、スタイルシートを追加してブログのデザインをカスタマイズできるという機能を使うんですよね。
ちょうどそれとおなじようなことなのかな、これは。

ということで、これからちょっとずつ、できる範囲でテーマをカスタマイズしていきたいと思います。

※こちらのサイトも参考にさせていただきました。ありがとうございます。
【重要】WordPressテンプレートのカスタマイズ前に子テーマをつくる方法 …
子テーマやカスタマイズの基本の基本についてちょっとおさらいしてみる

スポンサーリンク

フォローをお願いします