is_homeなどの条件分岐でカテゴリ毎や固定ページに画像を表示させる | デザインってオモシロイ -MdN Design Interactive-

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

2020.8.8 SAT

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

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

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

解説:(有)ムーニーワークス ハヤシユタカ

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

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

ページ毎に使用しているグラフィックイメージ (▲クリックして拡大)

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

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

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

表示を切り替えるにはif文を利用しますが、ここでの条件分岐は「is_home()」テンプレートタグを利用します。
if文を使用してホームかそうでないかを判別 (▲クリックして拡大)

if文を使用してホームかそうでないかを判別 (▲クリックして拡大)

○コピー用
<?php if(is_home()): ?>
//ホームであればここに記述したものを実行
<?php else: ?>
//それ以外はここに記述したものを実行
<?php endif; ?>
is_home()」はサイトのホーム(メイン)ページなら「true」を返し、それ以外ならば「false」を返します。つまり、現在表示しているページがトップページかどうかを教えてくれるタグになります。 これを利用し、ホームならメイングラフィックを、それ以外なら別のグラフィックを表示するように記述するとホームのみ違う画像を表示させることができます。

このif文の形はJavaScriptを勉強したことのある人でしたら馴染みのある記述だと思います。
JavaScriptでのif/else文の基本文 (▲クリックして拡大)

JavaScriptでのif/else文の基本文 (▲クリックして拡大)

○コピー用
var i = 0;
//変数iを宣言し、初期値に0を代入
if(i==0){
//変数が0だった場合にはここに記述したものを実行
}else{
//それ以外はここに記述したものを実行
WordPressではphpの記述方法になっているだけでif文での条件分岐は簡単でよく使う記述になります。

今回はこの記述をheader.php内に記述します。header.phpはすべてのファイルで読み込みますので、共通部分としてそこに条件分岐させることによってページ属性にあわせて自動的に振り分けをさせます。
(▲クリックして拡大) <span style="color: #ff0000;">トップページではメイングラフィックが、それ以外のページでは</span> <span style="color: #ff0000;">お知らせ用のグラフィックが表示されます</span>

(▲クリックして拡大)
トップページではメイングラフィックが、それ以外のページでは
お知らせ用のグラフィックが表示されます

○コピー用
<?php if(is_home()): ?>
<img src="<?php bloginfo('template_url'); ?>/images/gra_main.jpg" width="960" heigh="300" alt="" />
<?php else: ?>
<img src="<?php bloginfo('template_url'); ?>/images/gra_news.jpg" width="960" heigh="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; ?>
if文を使用してホームかそうでないかを判別ホームページであれば 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_categor

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

is_categoryとin_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」を使用します。こちらもカテゴリ同様に複数の場合は配列を使用してまとめて設定することができます。
is_pageで固定ページを設定 (▲クリックして拡大)

is_pageで固定ページを設定 (▲クリックして拡大)

○コピー用
//固定ページのスラッグ名「contact」の場合
<?php elseif(is_page( 'contact' ) ): ?>
//固定ページのスラッグ名「campany」と「access」の場合
<?php elseif(is_page( array'campany','access')) ): ?>
固定ページは投稿と違い単体ですのでこちらのみで設定可能です。

その他の判別

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

404ページと検索結果のページを設定 (▲クリックして拡大)

○コピー用
//404ページの場合
<?php elseif(is_404()): ?>
//検索結果ページの場合
<?php elseif(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を簡単により場所を正確に読み込む方法について解説していきたいと思います。



●本連載で使用しているサンプルサイトをゼロから作成できる書籍

本書では、(X)HTML+CSSでサイトをつくることはできるものの、「ゼロからのWordPressサイト構築は未経験」、「PHPなどのプログラムはあまりわからない」という方のために、WordPressでビジネスサイトを構築する手法をステップ・バイ・ステップ形式で解説しています。作成するサンプルサイトには、ニュースページ、製品情報ページ、会社概要ページ、お問い合せフォームといったクライアントワークに欠かせない要素が盛り込まれています。

サンプルデータと掲載コードもダウンロードできるので、PHP言語に不慣れな方でも順を追ってステップを進めていけば、WordPressのしくみからテンプレートタグの使い方、カスタム投稿タイプ、固定ページなど、WordPressサイトの制作に必要な知識と技術を身につけられます。
Profile
【林 豊】 1999年よりデジタルハリウッドでWEBコースの講師を担当、2001年に有限会社ムーニーワークス(http://www.moonyworks.com/)を立ち上げWEBの企画・制作、セミナー講師やWEB運用の企業研修なども行っている。

●HTML5でサイトをつくろう:http://www.html5-memo.com/
●Webデザインクリップ:http://webdesignmatome.com/
●jQurey mobileでサイトをつくろうjQuery Mobile:http://jquerymobile-memo.co/

【著書・共著】
●WordPress 3.x 現場のワークフローで覚えるビジ?ネスサイト制作 (2012/9/20)
●WebデザイナーのためのHTML5入門 (2012/08)
●ポケット詳解 jQuery Mobile辞典 (2012/05)
●すべての人に知っておいてほしい HTML5 & CSS3 の基本原則(2012/10/20)
●すべての人に知っておいてほしい スタイルシートデザインの基本原則(2012/5/25)
twitter facebook このエントリーをはてなブックマークに追加 RSS

こんな記事も読まれています

この連載のすべての記事

アクセスランキング

7.27-8.2

MdN BOOKS|デザインの本

Pick upコンテンツ

現在