この記事は公開から9年、最終更新日からも9年経過しています。内容が古くなっている可能性があります。
小テーマを有効に使う
目次
概要
WordPressはテーマがたくさん自由に選べてとても便利なのですが、それでも、カスタマイズしたくなる時があります。
そんな時、小テーマを作成すると、カスタマイズした箇所は小テーマ内で管理出来るので、例えば、親テーマがアップグレードしたときや、カスタマイズした部分をいったんやめて元に戻したいときにとても便利です。
※小テーマの存在は、最近知ったのですが、以前、カスタマイズしたことを忘れて、勢いでテーマのアップグレードをしてしまったために、もういちど、同じカスタマイズのコードを記述するという苦い経験があります。
小テーマの作りかたと使用方法をまとめます。
前提
・本投稿では、CSSをカスタマイズしたい時の例を記載します。
・phpをカスタマイズする例については、次の投稿「フッターにウィジェットを追加する方法」で合わせて記載します。
・今回は、テーマ、BizVektorを利用した際の実際のコードと表示例を記載します。
・BizVektorは公式マニュアルの通りに記述しない部分もあるので注意が必要です。
公式マニュアル
これについては、WordPress公式オンラインマニュアルに基本的なことは記載されています。但し、少し情報が古いようです。
子テーマ – WordPress Codex 日本語版
小テーマの作成、適用
・親テーマと同じ階層に任意の名称のフォルダを作成します。今回は、biz-vektor-childとします。
・小テーマで必須なのは、style.cssだけということなので、biz-vektor-childフォルダの中に、style.cssを作成します。
・style.cssに以下の内容を記載します。準備したstyle.cssが親テーマの内容を継承するものである事を宣言します。
/*
Theme Name: BizVektorChild
Theme URI: http://bizvektor.com
Template: biz-vektor
Description:
Author: yjnkmr
Tags:
Version: 0.1.0
*/
・親テーマのスタイルシートをインポートする設定を記述します。これは親テーマのスタイルシートをそのまま置き換える(上書き、オーバーライドする)ためだと思われます。
@import url(‘../biz-vektor/style.css’);
※公式マニュアルより引用
@import ルールの注意
このシナリオでは親テーマのスタイルをほんの少しだけ変更したいのであって、すべてを放棄するわけではありません。子テーマは親テーマの style.css をオーバーライドするので親テーマのスタイルシートに子テーマのスタイルシートを追加するため、@import ルールを明示します。このルールがないと子テーマは指定したサイトタイトルの色以外のスタイルがまったく適用されません。 親テーマのスタイルを継承せず、子テーマ独自のスタイルを使用する場合は、@import ルールを書く必要はありません。
※ところが、BizVektorでは、@importしないで！って書いてあります。のでここでは記述しないことにします。このあたりについてはテーマによって方法が異なると思われますので、要注意ですね。
高度なカスタマイズの仕様 | 設定ガイド | BizVektor [ ビズベクトル ] スマホ対応無料WordPressテーマ（テンプレート）
※BizVektorの場合は親テーマのcssを style.css に書いているわけではないので、
@import url(“../*******/style.css”);
と記載する必要はありません。むしろ記載しないで下さい。
・ダッシュボード › テーマ で新しいテーマを有効化します
実際に、小テーマでカスタマイズしてみます
小テーマ適用前のヘッダー右上の電話番号部分の色を変更してみたいと思います。
カスタマイズする前
カスタマイズ内容
該当箇所は、id=header かつ id=headContact かつ id=headContactTel で指定されている箇所ですので、
style.cssに以下の記述を追加します。
#header #headContact #headContactTel { color: blue; background-color: #aaa; }
カスタマイズ後
無事、小テーマの内容が反映されました
備考
もっと早く気づいておけばよかったです。
お疲れ様でした。
