このブログは今後は更新されません。FE.labsにてWordPress向けの記事も更新してゆきますのでよろしくお願いします。
今後このドメインは、ファーストエレメントのWordPress関連業務のブランドサイトとして近くリニューアルする予定です(2012/8/24)。
カテゴリ&タグ&カスタムフィールド&年月&キーワードで絞り込み検索ができるプラグイン『FE Advanced Search』

表示されるページによって、HTMLを部分書き換え。1つのテンプレートで。

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

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


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

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

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

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

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

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

このエントリーをはてなブックマークに追加

コメント/質問お待ちしています

トラックバックURL:
http://wpcms.jp/148/trackback/

CATEGORY

ARCHIVE

2017年11月
« 12月    
 1234
567891011
12131415161718
19202122232425
2627282930