WordPressのテンプレートタグで条件分岐を愉しむ（実例あり）

ブログシステムの枠を超え、今や世界で最も利用されているCMS（コンテンツマネジメントシステム）として不動の地位を築いたWordPress。
ナチュラロジーでも設立当初からたくさんのWordPress構築案件に携わってきましたが、特にこの数年でご依頼が急増し、現在では自社独自のフレームワークを開発するなど、弊社のWeb関連事業の中でも主軸なものとなりました。

ところで、あるとき、Googleアナリティクスを見てると「WordPress トップページのみ」とか「WP トップページのみ表示しない」とか、それ系のキーワードで当サイトに訪れてる方々がチラホラいらっしゃることに気づきました。
えーっと。あの、あれです。なんというか、そんな記事、書いた記憶がないです。

このままだとせっかく来ていただいた方々を欺いてるようで申し訳ないので、今回は、恐らくそれらのキーワードで意図しているであろう「WordPressの条件分岐」について説明したいと思います。

そもそも条件分岐って何なんすか

一般的に言う「条件分岐」というのは、プログラミング用語で言う「分岐命令」の一つで、その名の通り「もし（if）XならYする、そうじゃなければ（else）Zする」という条件に応じた命令を行うことです。
今回はWordPressのお話なので、PHPという前提で進めますが、例えば

if (相手 == 福岡人) {
  echo 'しゃれとんしゃーね';
} else {
  echo 'しゃれてるね';
}

みたいな形で記述することができます（※実際には「相手 == 福岡人」なんて条件では動きません）。

また、複数の条件がある場合はelseifを使って

if (相手 == 福岡人) {
  echo 'バリしゃれとんしゃーね';
} elseif (相手 == 熊本人) {
  echo 'たいがしゃれとんなぁるね';
} else {
  echo 'とてもしゃれてるね';
}

といった感じで細かい分岐を行うことができます。

また、and（&&）やor（||）といった「論理演算子」を使って、2つの組み合わせ条件を指定することもできます。
長くなるので、詳しくは、PHPの公式ドキュメンテーションにてご参照ください。

WordPressの条件分岐タグ

WordPressはPHPで動いているので、当然ながらテーマ（テンプレート）内でも上記のような条件分岐が至るところで使われることになります。
ただ、WordPressには専用のテンプレートタグが用意されているので、よりシンプルな構文で条件を指定することができます。

条件分岐タグ – WordPress Codex

基本的に、テンプレートタグでの条件分岐は「is_」または「has_」で始まるようになっています（例外あり）。
簡単な英語ですが、isは「～である」、hasは「～がある」と大雑把にご理解いただいて構いません。

例えば、

is_front_page()

は「フロントページ（トップページ）である」、

is_category(12)

は「カテゴリIDが12である」、

has_post_thumbnail()

は「アイキャッチ画像がある」といった感じです。
超捗りますね。

といわけで、ここからはテーマ開発を行う上で使える実例を挙げて説明していきます。

実例1. トップページのみ表示、それ以外は非表示

「トップページだけヘッダにバナーを」なんて場合に使えます。

<?php if (is_front_page()) : ?>
  // トップページのみ表示する処理
<?php endif; ?>

よく似たタグで

is_home()

というものがありますが、この2つは管理画面の「設定 > 表示設定」で「フロントページの表示」をどう設定しているかで使い分ける必要があります。

  • 「最新の投稿（デフォルト）」のまま → is_front_pageとis_homeの両方
  • 「固定ページ」の「フロントページ」に指定したトップページ → is_front_page
  • 「固定ページ」の「投稿ページ」に指定したページ（ブログのトップ） → is_home

ややこしいので、いわゆる「トップページ」といった場合にはまずis_front_pageを試してみましょう。

実例2. トップページのみ非表示、それ以外は表示

実例1の逆です。「トップページで“Home”とだけ表示されたパンくずリスト（Breadcrumb）を消したい」なんて場合に。

<?php if (!is_front_page()) : ?>
  // トップページのみ非表示にする処理
<?php endif; ?>

論理演算子「!」を使えば簡単に条件がひっくり返ります。

実例3. 特定の固定ページのみ非表示、それ以外は表示

例えば、「CTAボタンを全ページに表示するけど、問い合わせページだけには必要ない」なんて場合。

<?php if (!is_page(12)) : ?>
  // IDが12のページ以外で表示する処理
<?php endif; ?>

ちなみに、このパラメータはID以外にタイトルやスラッグなどでも指定できます。

is_page('お問い合わせ')

とすれば「お問い合わせ」というタイトルのページを指定します。

実例4. 投稿にアイキャッチ画像があれば表示

アーカイブページでよく実装する分岐命令ですね。

if (has_post_thumbnail()) {
  echo get_the_post_thumbnail($post_id, 'medium');
}

これでmediumサイズのアイキャッチ画像（サムネイル）が出力されます。
これを応用して、

if (has_post_thumbnail()) {
  echo get_the_post_thumbnail($post_id, 'medium');
}
else {
  echo '<img src="no-image.png" alt="No image">';
}

とelseを追加すれば、アイキャッチ画像がない場合に任意のノーイメージ画像を表示することもできますね。

さいごに

こういった条件に応じた処理を命令するというロジックは、本来ディベロッパーやエンジニアが使用する「開発言語」に限られたものでした。
しかし近年ではSassなどのスタイルシート言語でもこの条件分岐や繰り返し処理といった制御が導入されたことで、いわゆるWebデザイナーやコーダーにとっても身近な構文となりました。
HTML5/CSS3が主流となった現在では、もはや「マークアップ言語」も開発言語の一つであると言えそうです。

今回は、「検索でのアクセス流入が先行で、そのキーワードを満たす記事を後発的に書く」という不思議な投稿でしたが、そんなフライング訪問をされた方々にも納得のいく内容であれば幸いです。

すべての記事