MENTAやTimeTicketでZoomオンライン指導・メンタリングを行っています。
WordPressやHTMLサイトのトラブル、SEO対策のご相談、HTML・CSS・WordPressなどのレクチャーなどが可能です。


TwentyFourteenの子テーマを作ってみた件!カスタマイズの内容によっては『子テーマ』を作りましょう!

いざ!WordPressのカスタマイズ!

さて、どんな風にカスタマイズしたいか。

その内容によっては、『子テーマ』を作った方が良いこともあります。

icons-php

・そもそも子テーマって?

・なんで子テーマを作るの?

・子テーマのメリットは?

といった部分を解説して行きたいと思います。

そもそも子テーマって?

子テーマとは、既存のテーマを親に持つテーマです。
って、そのままですね。。

親・子という関係で表現されていますが、子テーマにあるファイルが優先的に読み込まれます。(同名のファイルが上書きされる)

なんで子テーマを作るの?

カスタマイズの内容によっては、テンプレートファイル(header.phpやpage.phpなど。)に直接手を入れなくてはなりません。

もちろん、テーマ編集から、直接ファイルを編集することも可能ですが、テーマをアップグレードすると、せっかく記述した内容が水の泡になってしまいます。

しかし、テーマのアップグレードにはバグを修正する内容が含まれていることもあるので、アップグレードはしたい!

そんな時に便利なのがこの『子テーマ』なんですね。

子テーマのメリットは?

ズバリ、親テーマをそのままにした状態で、そのテーマをカスタマイズできるという点です。

・親テーマにあるheader.phpだけカスタマイズしたい

・親テーマのCSSを読み込みつつ、上書きしたい

そんな時に導入しましょう。

子テーマのfunction.phpには注意

function.phpに関しては注意が必要です。
エラーがおきる可能性もあります。
こちらの記事が参考になりました。
http://presentnote.com/child-theme-customaize-functions-php/

さて、twentyfourteenの子テーマの作り方ですが、やってみると拍子抜けするくらい簡単です。
ノンプログラマーの僕でも簡単に導入できました。

CSSの上書き用に最低限必要なのは
・子テーマ用のフォルダ(任意の名前でOK)
・style.css
・(screenshot.pngがあれば 外観 > テーマ のアイキャッチ画像にそれが表示されます)
これだけで大丈夫です。

wp-content/themes ディレクトリの中にこれらをUPします。

themes-child

themes-child01

style.cssの記述は

/*
Theme Name:Root-013
Description:Root-013 twentyfourteen子テーマ
Template:twentyfourteen
*/
@import url('../twentyfourteen/style.css');

たったこれだけ!
あとはどんどん上書きしたいCSSを追加していくだけです!

もし、header.phpを変更したいときなどは、親テーマのheader.phpを子テーマにコピーしてそれを編集しましょう!

PHPファイルをカスタマイズしたいなら、子テーマ!と憶えておけば間違いないですね!

おすすめコンテンツ

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA