このブログは、WordPressを利用し、テーマは「YOKO by ELMASTUDIO」を使わせてもらっています。
ご存知の通り、WordPressはバージョン3から本格的に子テーマでの運用ができるようになっていて、元のテーマが配布元でバージョンアップされても、自分で作成したカスタマイズ要素を引き継ぐことができます。
ビジネス的な運用であれば、自分(または所属する企業など)で一から作成したテーマを元に、子テーマでカスタマイズして、運用するなどということもできるので、テンプレート化してバリエーションを増やす場合などは、かなり重宝する機能ではないかと思います。
子テーマ運用の基本
「WordPress,子テーマ」などのキーワードで、Google検索をすれば沢山のテクニックが見つけられると思います。子テーマ運用の手順は次のような流れになります。
- 使いたいテーマを決める。子テーマ対応のテーマが沢山配布されていますので、お好みを探してください。
- テーマを「wp-content > themes」フォルダにアップロード(元テーマ)
- 同「wp-content > themes」フォルダに、自分のテーマフォルダを作成(カスタマイズ用テーマ)
- 自分のテーマ用フォルダに「style.css」を作成し、元テーマを指定
- ダッシュボードから、「外観 > テーマ」で、自分フォルダを選択
自分のテーマフォルダに入れるstyle.cssの指定
[css]
/*
Theme Name: anque-themes
Theme URI: http://anque-mix.com
Author: @hrtr149
Author URI: http://anque-mix.com
Template: yoko
Version: 1.0
*/
[/css]
下から2行目の「Template」項目を、元テーマフォルダ名にすれば大丈夫。
このstyle.cssに続けて自分のカスタマイズを加えていけば、反映されます。細かいところを変更いく場合は、元テーマの構造などをちゃんと理解しておかないと、崩れたりする原因になりますので、注意してください。
元のテーマのデザインをいったん丸ごと引用して、書き換える場合
[css]
/*
Theme Name: anque-themes
Theme URI: http://anque-mix.com
Author: @hrtr149
Author URI: http://anque-mix.com
Template: yoko
Version: 1.0
*/
@import url(‘../yoko/style.css’);
body {/*
……………………….上書きしていく
*/}
[/css]
自分のstyle.cssファイルの先頭で、元テーマのstyle.cssを読み込んでしまうと、変更箇所の記述だけでカスタマイズしていくことができますね。
僕の場合は、このような状態で全体的にどの部分にどんな(id,class)が割り当てられているかを見つつ、修正しています。