is_homeなどの条件分岐でカテゴリ毎や固定ページに画像を表示させる

前回は「query_posts」を使用してループで記事を呼び出す際に、特定のカテゴリのみを表示させたり、表示件数を制御することで、複数のフォーマットで構成されるビジネスサイトで適切にページあった内容を表示させる解説を行いました。今回は、そのような複数のフォーマットの中で特定のカテゴリーや固定ページ、またはTOPページなど場所によってグラフィク画像を適切に表示させる条件分岐をまとめてみたいと思います。

こうすることで、ビジネスサイトでもオリジナルブログでも自分で設定しなくても適切に自動表示させるなどができるので運用更新が少し楽になります。画像をページ毎に変更する方法はたくさんありますが、今回はif文だけでできる簡単な記述で行なっています。この方法は非常にシンプルですが、WordPressを利用する場合に最も基本的な考え方のひとつになりますので、是非覚えて使っていきましょう！

解説：（有）ムーニーワークス　ハヤシユタカ

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

実際のサイトはこちらからご覧になれます。
URL:http://wordpress-book.webdesignmatome.com/

各ページを見ていただくとグローバルナビゲーションの下にグラフィク画像があります。これらは手作業ではじめにテンプレートファイルに設定することも可能ですが、今回は条件分岐文を使用してそのページの特性を判別して自動的に振り分けるようにしてみたいと思います。

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

「is_home()」はサイトのホーム（メイン）ページなら「true」を返し、それ以外ならば「false」を返します。つまり、現在表示しているページがトップページかどうかを教えてくれるタグになります。 これを利用し、ホームならメイングラフィックを、それ以外なら別のグラフィックを表示するように記述するとホームのみ違う画像を表示させることができます。

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

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

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

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

先ほどはHOME以外はすべてニュースの画像としてしまいましたが、今回のサンプルサイトではカテゴリはニュースの他に製品情報などがあります。そうなるとニュースページと製品情報ページはフォーマットが異なりますし、見出し画像も違うものを使用する形になります。そこでカテゴリを判別するための「is_category」を使用します。これは特定のカテゴリスラッグ名を入れることによって、そのカテゴリの際に画像を表示させたりすることができます。

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

こうすることで特定のカテゴリを条件式の中にいれることができます。
こちらもJavascriptのif/elseif/ese文と考え方は同じになります。

このようにカテゴリをis_categoryで判別することはできましたが、複数まとめて設定したいときがあります。その場合は配列を利用することで複数のカテゴリスラッグをまとめて定義して判別することが可能です。

（）が多くなりますので色つけしてみましたが、このようにすることで複数のカテゴリをまとめて設定することができます。今回は製品情報のA～Dはまとめて設定してもよかったので一個づつ定義するよりもまとめることで画像を変更する場合なども便利です。

カテゴリの判別は「is_category」を使用しましたが、カテゴリの詳細ページである部分（single.php）は該当ではないため、このままでは詳細ページがelseで設定した画像になってしまいます。そこでカテゴリの個別投稿ページの判別に「in_category」を使用します。こうすることでカテゴリの個別投稿ページを変更することができます。ここではis_categoryと同じ画像を使用する場合は先程の記述に追加することができます。

同時に設定させる場合には「||」という記号を使うことで、またはという形にすることができます。「A || B」と記述することでAまたはBの時にというように条件式内に2つの条件を入れることができます。こちらも同じ画像を使用する際にまとめて設定できるので便利です。

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

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

今回のサンプルサイトではその他に、ページがなかった場合の404ページと検索結果のページがあります。
404ページの判別には「is_404」を使用します。検索結果の判別には「is_search()」を使用します。

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

「is_post_type_archive」はカスタム投稿タイプアーカイブページか調べます。「is_singular()」は個別投稿ページ・固定ページ・添付ファイルページが表示されている場合にTRUEを返します。また、タクソノミーの一覧ページが表示されている場合を判断するには｢is_tax()｣を利用します。｢is_tax('topicscat')｣とすることでトピックスカテゴリの場合を判断することができます。

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

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

 

今回は以上になります。

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

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

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

次回は、プラグインを使用してGoogleMapsを簡単により場所を正確に読み込む方法について解説していきたいと思います。

---