Webサイトを制作していて、固定ページ毎にデザインを変えたい場合があります。
当サイトも、構造的にWebセクションとMusicセクションで分けていますが、それぞれ色を変えています。
というわけで、いくつかの方法がある中から、比較的使いやすい方法を2つ程書いてみたいと思います。
body_class関数を使う
WordPress標準テーマのTwenty Ten、Twenty ElevenやTwenty Twelveでも使われている方法です。
というか、WordPressならこれを使うのが基本的な方法なのではないかと思います。
まず、bodyタグ部分に、以下のようにbody_class関数を追加します。
<body <?php body_class(); ?>>これだけで、bodyタグのclassに「home」とか「single」とか「post」「page」などが設定されます。以下が、実際に出力されるコード例です。
<body class="home blog">ここで設定される値について詳しく知りたい方はWordPress Codexのbody_classページをご覧ください。
で、この関数は「body_class( ‘blue’ )」のように引数を文字列で与えると、それがそのままclassに追加されます。
<body class="home blog blue">なので、これを利用します。bodyタグ直前で条件分岐しつつ、classを与えるという方法になると思います。例えば以下の様なコードです。
<?php
if( is_page( array(32,105) ) ) {
$class = 'bule';
} elseif( is_page( array(5,45) ) ) {
$class = 'red';
}
?>
<body <?php body_class( $class ); ?>>
あとは以下のようにclass名がblueとredで別な指定をすれば、固定ページ毎にデザインを変えられます。
.blue body {
background-color: #00f;
}
.red body {
background-color: #f00;
}ちなみに上記のPHPコード及びCSSを追加すると、ページIDが32と105の固定ページは背景が青になり、ページIDが5と45の場合は背景が赤になります。
get_header関数を使う
ほとんどの場合、body_class関数を使う方法で可能なのではないかと思います。
が、ページ毎にもっとカスタマイズをしたい場合もあります。例えばメニュー項目も変えたり、headタグ内の記述を変えたいというような時です。
そんな場合にはget_header関数を使います。
get_header関数は、以下のコード例のように引数に文字列を与えることが出来ます。
get_header('blue');こうすると、header.phpではなくて、header-blue.phpを読み込もうとします。
なので、header-blue.phpファイルを作って、その中で読み込むcssを変える（例えばstyle-blue.cssなど）ことが出来ます。更に、ここで前述のbody_class関数を使うという方法もありますね。
ファイルは、以下の様なものを新たに作成する必要があります。そして、固定ページ編集画面のテンプレート選択で、作成したページテンプレートを選択します。
header-blue.php (blue専用のヘッダーファイル) page-blue.php (blue専用の固定ページテンプレート) style-blue.css (blue専用のCSSファイル)
こちらの方が、作成しなければならないファイルが増えるため、作業の手間としては多くなります。
が、かなり自由度も上がることから、固定ページ毎にデザインや機能を大きく変えたい場合にはこちらの方法を使う必要があります。
ちなみにget_footer関数も同様で、「get_footer(‘blue’);」とすると、footer-blue.phpを読み込むので、フッター部もページ毎に変えることも可能です。
おわりに
あまり規模の大きくないWebサイトを制作する場合でしたら、固定ページ毎にデザインや機能を変えるということは必要無いと思います。
が、少し大きなサイトですと、結構使うことが多いです。特に2番目の方法を使って、メニューを変えるなどの目的で。読み込むJSファイルをページ毎に切り替えるというような目的でも使います。
ついでにですが、get_header関数やget_footer関数だけではなく、get_sidebar関数も引数を与えることで、sidebar.phpとは別の「sidebar-(引数).php」というファイルを読み込むことができます。またget_template_part関数も同様ですね。
慣れると実はあまり難しいことではないですが、WordPress使い始めだとなかなか難しいかもしれませんので、参考にして頂ければ幸いです。
ピンバック: WordPressで固定ページのテンプレート毎にページデザインを変える方法を2つほどsand a lot | sand a lot Web & Music Create [札幌] | 雑多ブログ