（前口上が長いので、とりあえずタイトル通りのカスタマイズの方法だけ知りたいという方は、四段落ほど飛ばして読んで下さい）
WordPressカスタマイズ、ダッシュボードの左メニューからの設定変更を初級編とするならば、さしずめ中級編はCSSを用いた各要素の表示変更といったところでしょうか。静的ページのCSSによるレイアウトに習熟された方でも、いつも通りの手順でCSSをいじったが反映されない、あるいはダッシュボードで促されるままアップデートをしたら、苦労して設定したスタイルが無効になったなどなど、トラブルに直面して初めてWordPressが一筋縄でいかないという事に気付く筈です。まさにそこからが中級編の入り口で、中級編以降のカスタマイズには、WordPressの仕組みの一定以上の理解が必要とされるのです。
WordPressでは、一つのページを作るのに様々なディレクトリの様々なファイルを参照し、それらを決められた優先順位で読み込んで表示します。スタイルシートについてもそれは同様ですが、スタイルシートの性質として、同じ要素に対するスタイル指定は後に宣言された方を優先とするという原則と、idやクラスなど具体性のある宣言を優先するという原則があります。ゆえに、特定の要素について最終的に有効になっているスタイルがどのファイルのどこで宣言されたものかが判別できないと、現在のスタイルを変更しようと思っても変更の箇所がわかりません。
要素に実際どういったスタイルが有効になっているのかは、CSSの熟練者にとっては常識ですが、ブラウザの機能を使って調べられます。SafariやChromeなどのWebKit系ブラウザであれば、要素の上で右クリックし”要素の詳細を表示”を選択すると、”webインスペクタ”ウィンドウが現れるので、右側の”一致したCSSルール”という部分に注目します。画像の例ではp要素に適用されたルールが列挙されていますが、line-heightについてはcore.cssというファイルの250行目で宣言されたものの、同じcore.cssの1350行目でより具体的なルールが宣言されたため、効果が打ち消されていることがわかります。
Firefoxの場合も、右クリック→”要素を調査”で同様の機能を使うことができます。
さて、ブラウザの機能で宣言の位置が特定できたら、その箇所を変更することでスタイルの変更も有効になります。WordPressでは、大抵の場合最終的に有効になっているスタイルは、ルートディレクトリからwp-content→themes→現在使用中のテーマ名のディレクトリ、と階層を下ってその中にある、style.cssというファイルで宣言されています。つまり導入しているテーマに付随したCSSなのですが、このファイルをいじれば、とりあえずスタイルの変更ができることが多いと覚えておいて下さい。
しかしながら、このstyle.cssを直接いじっての変更は非推奨です。というのも、不具合が起きてしまったときにその原因が果たしてテーマ自体の問題なのか、あるいは加えた変更の問題なのか、が判別しづらくなります。また、テーマをアップデートする際にはこのstyle.cssごとアップデートされることになるので、アップデート毎に変更部分がリセットされてしまいます。
そういった問題を回避する方法として、WordPress3.0以降のヴァージョンには子テーマという仕組みが存在します。これにより現在有効になっているテーマを直接変更することなく、任意の部分のみに変更を付け足すことができます。また、ファイルとしては親テーマのパッケージの外部に置く形となるので、親テーマのファイルがアップデートされても影響を受けません。
具体的な設定方法を見ていきましょう。まずは子テーマのディレクトリを用意し、その中にstyle.cssというファイルを作ります。今回はmystiqueテーマの子テーマとしてchildtheme1というテーマを作るとします。style.cssの先頭に最低限以下の記述があれば、子テーマとして機能します。
/*
Theme Name: childtheme1
Template: mystique
*/ |
/*
Theme Name: childtheme1
Template: mystique
*/
CSSのコメント行を使って、まずテーマ名と継承元テーマ名を宣言します。通常のスタイル宣言と違いコロンの左側にスペースは許されないので注意して下さい。またTemplateのラベルに指定する値は、親テーマの名称ではなく、themesディレクトリ下の親テーマのディレクトリ名です。大文字小文字の区別もあるので注意を払って下さい。
ともあれ、これで子テーマとして認識されるようになりました。ダッシュボードの左メニューの”外観”から”テーマ”を選ぶと、この子テーマが通常のテーマと同様選択できるようになっています。子テーマを選択すると、親テーマのファイルはそのままにstyle.cssのみ親テーマのではなく子テーマのものを読み込むようになります。
先程のstyle.cssに少し肉付けをしましょう。まず、子テーマのstyle.cssではスタイルの記述が行われていないので、このまま読み込むとテーマの表示が滅茶苦茶になってしまうはずです。親テーマのstyle.cssの記述を継承するための記述を行います。
/*
Theme Name: childtheme1
Template: mystique
*/
@import url('../mystique/style.css'); |
/*
Theme Name: childtheme1
Template: mystique
*/
@import url('../mystique/style.css');
@import宣言に親テーマのパスを与えます。注意すべきなのは、子テーマのstyle.cssからの相対パスを与えるということです。
これで親テーマのスタイルを丸ごと読み込みました。さて、先述のCSSのルール、後から宣言した方を優先というものを思い出して下さい。つまり@import宣言の後でスタイルの設定を行えば、既に親テーマのstyle.cssで同じ要素に対する設定がされていても、自動的に子テーマのものが優先されるということです。
/*
Theme Name: childtheme1
Template: mystique
*/
@import url('../mystique/style.css');
#none{
display : none;
} |
/*
Theme Name: childtheme1
Template: mystique
*/
@import url('../mystique/style.css');
#none{
display : none;
}
このように書くと、idがnoneの要素が親テーマでどのように設定されていようと表示されなくなります。仕組みがわかれば、あとはつらつらといつも通りのCSS編集ができますね。
以上が子テーマのカスタマイズ（CSS編）です。子テーマではスタイルの変更以外にも、親テーマのもつテンプレートやウィジェットなども置き換え／追加することができます。そちらはPHPの知識が必要となってきますので、いずれ詳しく紹介したいと思います。
