WordPressで使いたい配布テーマを元に、子テーマ運用するメモ

このブログは、WordPressを利用し、テーマは「YOKO by ELMASTUDIO」を使わせてもらっています。
ご存知の通り、WordPressはバージョン3から本格的に子テーマでの運用ができるようになっていて、元のテーマが配布元でバージョンアップされても、自分で作成したカスタマイズ要素を引き継ぐことができます。

ビジネス的な運用であれば、自分(または所属する企業など)で一から作成したテーマを元に、子テーマでカスタマイズして、運用するなどということもできるので、テンプレート化してバリエーションを増やす場合などは、かなり重宝する機能ではないかと思います。

子テーマ運用の基本

「WordPress,子テーマ」などのキーワードで、Google検索をすれば沢山のテクニックが見つけられると思います。子テーマ運用の手順は次のような流れになります。

  1. 使いたいテーマを決める。子テーマ対応のテーマが沢山配布されていますので、お好みを探してください。
  2. テーマを「wp-content > themes」フォルダにアップロード(元テーマ)
  3. 同「wp-content > themes」フォルダに、自分のテーマフォルダを作成(カスタマイズ用テーマ)
  4. 自分のテーマ用フォルダに「style.css」を作成し、元テーマを指定
  5. ダッシュボードから、「外観 > テーマ」で、自分フォルダを選択

自分のテーマフォルダに入れる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)が割り当てられているかを見つつ、修正しています。

スポンサードリンク

SNSでもご購読できます。

Loading Facebook Comments ...

コメントを残す

*