WPCMS.jp

WordPressの「テンプレートタグ（コンディショナルタグ）」を使って、１つのテンプレートで、ページ毎に複数のデザインを見せる方法。

■使用例：
「本」「DVD」「ゲーム」というメニューがあって、今DVDのページが開いていれば、メニュー部分の「DVD」にだけ背景画像を設定する。

　
■使用するタグ：
is_single()　　※ is_page、is_categoryなども同様
現在のページが、ある特定のページかどうか状態を判断するタグ。カッコの中に記事IDやページ名（スラッグ）を入れて指定する。

■手順：
１．あらかじめスタイルシートで、背景のないidと背景があるidを作成しておき、例えば名称を
　背景なし：menu_dvd
　背景あり：menu_dvd_alt
にしておく。altの方に背景を設定する。その他のメニューも同様。

２．以下のようにliタグにidを設定し、「_alt」の部分をphpで囲って、現在のページを判断させる。
＜li id=”menu_book＜？php if(is_single(’1′)) { echo ‘_alt’;}？＞”＞＜a href=”/book/”＞本＜/a＞＜/li＞
＜li id=”menu_dvd＜？php if(is_single(’2′)) { echo ‘_alt’;}？＞”＞＜a href=”/dvd/”＞DVD＜/a＞＜/li＞
＜li id=”menu_game＜？php if(is_single(’3′)) { echo ‘_alt’;}？＞”＞＜a href=”/game/”＞ゲーム＜/a＞＜/li＞

DVDの場合、もし現在のページが記事ID＝2だったら、id名のmenu_dvdに「_alt」が付け足される。それ以外の場合は何も挿入されません。他のメニューも同様。
これによって、動的にliのid名を書き換えて、摘要するCSSを変えています。
なお、is_singleの頭に「!」を付けて !is_single(’2′) とすると、「DVDページでない場合」という意味になります。「～以外」という指定が出来るのは結構便利でよく使うのではと思います。

ページ全体を囲むboxなどのidをページによって変えてやれば、背景画像を差し替えてイメージを大きく変えることができる…テンプレートは１つだけで。今回は単にidの名称を一部付け足して摘要するCSSを変えただけだけれど、もちろんecho ‘ ‘の中に書けば、どんな量のHTMLでも吐き出すことができる。echoで単純にHTMLを書き出すのではなく、ファンクションを実行してその結果を埋め込むこともできる。

テンプレートを複製した方が早いこともあるが、そうするとメニュー名や埋め込んだ画像のパスを変えたりといった時に、テンプレートの数だけ修正しなければならなくなり後々メンテナンスに手間がかかる。

この現在のページの状態を見る「コンディショナル・タグ」と呼ばれるis_single、is_category、is_archiveなどのタグを使いこなせば、テンプレートを節約し、かつ見せ方にかなりバリエーションを与えることができます。

本家Conditional Tags 解説ページ
日本語テンプレートタグ解説ページ ※コンディショナルタグの解説はまだありません。

タグ: ゲーム, デザイン

ツイート