これまでBizVektorのカスタマイズは、直接ファイルを書き換える方法で行ってきた。しかし、BizVektorのアップデートは頻繁に行われており、アップデートを反映させるとカスタマイズもすべてやり直すことになる。1月末のアップデートでは「CSS関連のディレクトリ構造を変更」したということで、カスタマイズする場所が見つからないという現象が出てきた。他のことに手を取られていたことから、β8バージョンにアップロードしないままでいたが、前からやりたかった子テーマに取り組むこととした。
初回は子テーマの作成方法について
バージョンアップで変更すべき部分が分からなくなった
BizVektorはなかなか良く出来たThemeだが、やはり部分的に手直ししたいところがある。一番気になったのは、サイドバーの幅であった。「BizVektorのカスタマイズ①」で書いたとおり、デフォルトの幅は220pxに設定されていた。Adsenseの250×250pxサイズの広告を入れたいと思ったのがBizVektorをカスタマイズしようとしたそもそもの始まりであった。子テーマは親となるBizVektorの設定を上書きすることから、アップデートの度にカスタマイズをやり直す必要がなくなる。β8へのバージョンアップに伴い、「BizVektorのカスタマイズ①」で書いた方法ではサイドバーの幅を変更することが出来なくなったようである。いい機会だから子テーマを作ることで対応することとした。
子テーマを置くディレクトリーの作成
子テーマという名称は、別に親となるThemeが存在しているところから来ている。しかし、基本的には他のThemeと同じく、Themeとしての機能は全て備えている。但し、その大部分は親テーマに依存しており、最初に親テーマの設定を読み込むことから始まる。従って、子テーマを置く場所は親テーマと同じ場所となる。具体的には、
public_html⇒wp-content⇒themes⇒bizvektor<–このフォルダと同じ場所
フォルダ名は任意・・・・・・ここではbiz-childとしておく。
ベースとなるstyle.cssファイルの作成
biz-childのフォルダには最低限、style.cssのファイルがあれば良い。最大、通常のThemeが持つファイルを全て持つことが可能だが、子テーマの趣旨から言ってstyle.cssのみで事足りるものと思われる。style.cssのヘッダー部分に記述する内容は、以下のような項目がある。この中で必須なのは子テーマ名と親テーマ名の二つ。
- Theme Name ———-(必須)子テーマ名
- Theme URI ————(任意) 子テーマのウェブページ
- Description ————(任意) テーマの説明
- Author URI————(任意) 作者のウェブページ
- Author —————–(任意) 作者の名前
- Template————— (必須) 親テーマ名（親テーマがあるフォルダ名：大文字小文字は区別する）
- Version —————-(任意) 子テーマのバージョン
以上は子テーマに関する情報であり、これらはブラウザの「ソースを表示」で誰もが見ることが出来ることを念頭において記述することになる。子テーマのstyle.cssとして最低限必要なのは、親テーマのstyle.cssが置いてあるURLである。BizVektorの場合、以下のような記述となる。
@import url(‘../biz-vektor/style.css’);
私の場合、取り敢えずベースとなるstyle.cssとして記述したのは、以下のようなものであった。
/*
Theme Name: biz-child
Template: biz-vektor
*/
@import url('../biz-vektor/style.css');
子テーマの有効化
作成した子テーマのstyle.cssを先に作成したbiz-childのフォルダにアップロードし、WordPressの外観⇒テーマに行くと、以下のように表示されるハズである。
下の画像がない部分が子テーマであり、これを有効化すれば親テーマで表示されていたままの状態で表示される。親のstyle.cssをそのまま使っており、何の変更も加えないまま使っているので当然のことである。
スクリーンショットの表示
子テーマのベースとなるstyle.cssを作成したが、上のThemeを有効化する画面で画像が表示されないのはいまひとつ気に入らない。スクリーンショットというらしいが、それを表示させるのは簡単であった。私の場合はメインサイトのBizVektorをカスタマイズしていることから、それをPrint Screenして取り込み、横幅を500pxに縮小した画像を作成した。そのファイルの名前をscreenshot.pngとし、style.cssを置いたbiz-childに入れるだけで良い。
