is_homeなどの条件分岐でカテゴリー毎や固定ページに画像を表示させる｜WordPressでビジネスサイトをつくろう【第14回】

前回は「query_posts」を使用してループで記事を呼び出す際に、特定のカテゴリーのみを表示させたり、表示件数を制御したりしました。

こうすることで複数のフォーマットで構成されるビジネスサイトで適切にページあった内容を表示させることができました。

今回は、そのような複数のフォーマットの中で特定のカテゴリーや固定ページ、またはTOPページなど場所によってグラフィク画像を適切に表示させる条件分岐をまとめてみたいと思います。

こうすることでビジネスサイトでもオリジナルブログでも自分で設定しないでも適切に自動表示させるなどができるので運用更新が少し楽になります。

画像をページ毎に変更する方法はたくさんありますが、今回はif文だけでできる簡単な記述で行なってみます。

この方法は非常にシンプルですがWordPressを利用する場合に最も基本的な考え方の1つになりますので初めて行う際でも簡単に使えますので是非覚えて使っていきましょう！

ページの内容に沿ったグラフィック画像を表示する

ビジネスサイトでよく見るものとしてTOPページなどには大きめなグラフィックイメージをいれてサイトのPRエリアとして使用したり、高さのサイズを小さくしてそのページの見出しとなるようなグラフィックイメージを使用する場合がよくあります。

今回作成したビジネスサイトの形でも現在いるページがわかりやすいように設定しました。

実際のサイトはこちらからご覧になれます。

http://wordpress-book.webdesignmatome.com/

各ページを見ていただくとグローバルナビゲーションの下にグラフィク画像があります。

これらは手作業ではじめにテンプレートファイルに設定することも可能ですが、今回は条件分岐文を使用してそのページの特性を判別して自動的に振り分けるようにしてみたいとおもいます。

ホームかどうかを判別するis-home()

表示を切り替えるにはif文を利用しますが、ここでの条件分岐は「is_home()」テンプレートタグを利用します。

コピー用

<?php if(is_home()): ?>
//ホームであればここに記述したものを実行
<?php else: ?>
//それ以外ではここに記述したものを実行
<?php endif; ?>

「is_home()」はサイトのホーム（メイン）ページなら「true」を返し、それ以外ならば「false」を返します。

つまり、現在表示しているページがトップページかどうかを教えてくれるタグになります。

これを利用し、ホームならメイングラフィックを、それ以外なら別のグラフィックを表示するように記述するとホームのみ違う画像を表示させることができます。

このif文の形はJavaScriptを勉強したことのある人でしたら馴染みのある記述だともいます。

コピー用

var i = 0;
//変数iを宣言し、初期値に0を代入
if(i==0){
//変数が0だった場合にここに記述したものを実行
}else{
//それ以外ではここに記述したものを実行
}

WordPressではphpの記述方法になっているだけでif文での条件分岐は簡単でよく使う記述になります。

今回はこの記述をheader.php内に記述します。header.phpはすべてのファイルで読み込みますので、共通部分としてそこに条件分岐させることによってページ属性にあわせて自動的に振り分けをさせます。

トップページではメイングラフィックが、それ以外のページではお知らせ用のグラフィックが表示されます。

コピー用

<?php if(is_home()): ?>
<img src="<?php bloginfo('template_url'); ?>/images/gra_main.jpg" width="960" height="300" alt="" />
<?php else: ?>
<img src="<?php bloginfo('template_url'); ?>/images/gra_news.jpg" width="960" height="70" alt="" />
<?php endif; ?>

こうすることでニュースページに入った際は自動的にテンプレートとしてはcategory.phpを使用していますが、そこではHOMEではないのでelseに記述したニュースの画像が表示されます。

特定のカテゴリーかどうかを判別するis_category

先ほどはHOME以外はすべてニュースの画像としてしまいましたが、今回のサンプルサイトではカテゴリーはニュースの他に製品情報などがあります。

そうなるとニュースページと製品情報ページはフォーマットが異なりますし、見出し画像も違うものを使用する形になります。

そこでカテゴリーを判別するための「is_category」を使用します。

これは特定のカテゴリースラッグ名を入れることによって、そのカテゴリーの際に画像を表示させたりすることができます。

コピー用

<?php if(is_home()): ?>
//ホームであればここに記述したものを実行
<?php elseif(is_category( 'products' ) ): ?>
//カテゴリースラッグが「products」であればここに記述したものを実行
<?php else: ?>
//それ以外ではここに記述したものを実行
<?php endif; ?>

ホームページであれば True、そうでなければ elseifの条件式でカテゴリースラッグが「products」であるかを判別し、それでもなかったらfalse

こうすることで特定のカテゴリーを条件式の中にいれることができます。

こちらもJavascriptのif/elseif/ese文と考え方は同じになります。

is_category内に複数のカテゴリーを設定する場合

このようにカテゴリーをis_categoryで判別することはできましたが、複数まとめて設定したいときがあります。

その場合は配列を利用することで複数のカテゴリースラッグをまとめて定義して判別することが可能です。

コピー用

<?php elseif(is_category( array('products','products_a',
'products_b','products_c','products_d') )): ?>

（）がおおくなりますので色つけしてみましたが、このようにすることで複数のカテゴリーをまとめて設定することができます。

今回は製品情報のA～Dはまとめて設定してもよかったので一個づつ定義するよりもまとめることで画像を変更する場合なども便利です。

特定のカテゴリーの個別投稿ページかどうかを判別するin_category

カテゴリーの判別は「is_category」を使用しましたが、カテゴリーの詳細ページである部分（single.php）は該当ではないため、このままでは詳細ページがelseで設定した画像になってしまいます。

そこでカテゴリーの個別投稿ページの判別に「in_category」を使用します。

こうすることでカテゴリーの個別投稿ページを変更することができます。

ここではis_categoryと同じ画像を使用する場合は先程の記述に追加することができます。

コピー用

<?php elseif(is_category( array('products','products_a',
'products_b','products_c','products_d') ) ||
in_category( array('products','products_a','products_b',
'products_c','products_d') ) ): ?>

同時に設定させる場合には「||」という記号を使うことで、またはという形にすることができます。

「A || B」と記述することでAまたはBの時にというように条件式内に2つの条件を入れることができます。

こちらも同じ画像を使用する際にまとめて設定できるので便利です。

特定の固定ページかどうかを判別するis_page

固定ページの判別には「is_page」を使用します。

こちらもカテゴリー同様に複数の場合は配列を使用してまとめて設定することができます。

コピー用

//固定ページのスラッグ名「contact」の場合
<?php elseif(is_page( 'contact' ) ): ?>
//固定ページのスラッグ名「company」と「access」の場合
<?php elseif(is_page( array('company','access')) ): ?>

固定ページは投稿と違い単体ですのでこちらのみで設定可能です。

その他の判別

今回のサンプルサイトではその他に、ページがなかった場合の404ページと検索結果のページがあります。

404ページの判別には「is_404」を使用します。

検索結果の判別には「is_search()」を使用します。

コピー用

//404ページの場合
<?php elseif(is_404()): ?>
//検索結果ページの場合
<?php elseif( is_search() ): ?>

またカスタム投稿タイプ（（topics）という名前で設定）を作成した場合はこのようになります。

「is_post_type_archive」はカスタム投稿タイプアーカイブページか調べます。

「is_singular()」は個別投稿ページ・固定ページ・添付ファイルページが表示されている場合にTRUEを返します。

また、タクソノミーの一覧ページが表示されている場合を判断するには｢is_tax()｣を利用します。

｢is_tax(‘topicscat’)｣とすることでトピックスカテゴリーの場合を判断することができます。

用途にあわせて他にもさまざまな条件分岐のタグが用意されていますのでやりたいことにあわせて調べて行きましょう。

●条件分岐タグ – WordPress Codex 日本語版
http://wpdocs.sourceforge.jp/Conditional_Tags

今回は以上になります。

今回とりあえたサンプルは、WordPressでビジネスサイトでよく使用する表現をすべてまとめた著書「WordPress 3.x 現場のワークフローで覚えるビジネスサイト制作」のサンプルを使用しています。本書ではサイト作りのすべてのソースコードを用意して迷うことなくWordPressでビジネスサイト作るの工程を学べる内容となっております。

どのようなページを作れるかなどは、こちらにサンプルサイトと本の内容をまとめてありますのでWordPressでのサイト作りに興味を持ちましたら是非こちらもご覧ください。

http://www.html5-memo.com/other/wordpress-book/