MENU

【WordPress×PHP】条件分岐タグでページを判定する方法

【WordPress×PHP】条件分岐タグでページを判定する方法
目次

はじめに

【WordPress×PHP】ループの仕組みをSWELLで解説では、WordPressがURLに合わせて記事を取り出し、ループで1件ずつ表示する仕組みを解説しました。

今回は、「いま表示しているのは、どんなページか」を判定する条件分岐タグを解説します。「投稿ページだけに表示したい」「お問い合わせページでは表示したくない」といったカスタマイズは、ほとんどが条件分岐タグで書けます。ローカル環境で、どのページで何がtrueになるのかを一つずつ確かめました。

このシリーズの全15回の構成は、第1回の記事の冒頭にまとめています。

条件分岐タグとは?

条件分岐タグは、いま表示しているページの種類を調べて、trueかfalseを返すWordPressの関数です。is_single()やis_page()のように、名前がis_で始まるものが中心です。

【PHP】if文による条件分岐を解説で解説したif文と組み合わせて使います。

if ( is_single() ) {
	// 投稿ページのときだけ実行される
}

テンプレートタグ(第5回)が「記事の情報」を取り出す関数だったのに対して、条件分岐タグは「ページの種類」を調べる関数です。

主な条件分岐タグとページの対応

ローカル環境で、ページの種類ごとに、主な条件分岐タグのうちtrueになったものを調べました(設定は「トップページの表示:最新の投稿」)。

表示したページtrueになった条件分岐タグ
トップページis_front_page()、is_home()
トップページの2ページ目is_front_page()、is_home()、is_paged()
投稿ページis_singular()、is_single()
固定ページis_singular()、is_page()
カテゴリーの一覧ページis_archive()、is_category()
タグの一覧ページis_archive()、is_tag()
検索結果のページis_search()
存在しないURLis_404()

それぞれの意味は次のとおりです。

条件分岐タグtrueになるページ
is_single()投稿ページ
is_page()固定ページ
is_singular()投稿ページ・固定ページなど、記事を1件だけ表示するページ
is_category()カテゴリーの一覧ページ
is_tag()タグの一覧ページ
is_archive()カテゴリー・タグ・日付などの一覧ページ全般
is_search()検索結果のページ
is_404()存在しないURLのページ
is_paged()一覧ページの2ページ目以降

is_singular()はis_single()とis_page()をまとめたもの、is_archive()はis_category()やis_tag()をまとめたもの、と考えると覚えやすくなります。

条件分岐タグとページの対応図。is_singularの中にis_single(投稿ページ)とis_page(固定ページ)、is_archiveの中にis_category(カテゴリー)とis_tag(タグ)が含まれ、ほかにis_front_page・is_home(トップページ)、is_search(検索結果)、is_404(存在しないURL)がある

is_front_page()とis_home()の違い

上の表では、トップページでis_front_page()とis_home()の両方がtrueになりました。この2つは名前が似ていますが、意味が違います。

  • is_front_page():サイトのトップページかどうか
  • is_home():投稿の一覧ページかどうか

管理画面の「設定」→「表示設定」で、「ホームページの表示」を「固定ページ」にして、ホームページに「ホーム」、投稿ページに「ブログ」という固定ページを選んで試したところ、結果が分かれました。

「ホームページの表示」の設定トップページ(/)投稿ページ(/blog/)
最新の投稿is_front_page()、is_home()(なし)
固定ページis_front_page()、is_singular()、is_page()is_home()
is_front_pageとis_homeの違い。「最新の投稿」の設定では、トップページで両方trueになる。「固定ページ」の設定では、トップページはis_front_page、投稿一覧の/blog/はis_homeがtrueになる

トップページを固定ページにしているサイトで、トップページだけに何かを表示したいときは、is_home()ではなくis_front_page()を使います。

引数で特定のページを判定する

is_single()やis_page()には、引数でページを指定できます。投稿ID・スラッグ(URLの一部)・タイトルのどれでも指定できます。

is_single( 19 );         // 投稿IDが19の投稿ページ
is_single( 'kiji-a' );   // スラッグが kiji-a の投稿ページ
is_page( 'contact' );    // スラッグが contact の固定ページ
is_category( 'php' );    // スラッグが php のカテゴリーの一覧ページ

ローカル環境で、スラッグがkiji-a、タイトルが「記事A」、投稿IDが19の投稿ページを開いて試すと、is_single( 19 )・is_single( 'kiji-a' )・is_single( '記事A' )のどれもtrueになりました。別の投稿ページでは、すべてfalseでした。

タイトルは後から変えることが多いので、スラッグかIDで指定するのがおすすめです。

in_category()とis_category()の違い

「PHPカテゴリーの記事だけに表示したい」とき、is_category( 'php' )を使うと失敗します。is_category()は「カテゴリーの一覧ページか」を調べる関数なので、投稿ページではfalseになるためです。

投稿ページで「この記事がPHPカテゴリーに属しているか」を調べるときは、in_category()を使います。

関数調べる対象PHPカテゴリーの記事の投稿ページPHPカテゴリーの一覧ページ
is_category( 'php' )表示中のページfalsetrue
in_category( 'php' )いまの記事truetrue

一覧ページでもin_category()がtrueになったのは、第6回で解説した「いまの記事」(一覧の1件目)を調べているためです。in_category()は、投稿ページかループの中で使うのが基本です。タグの場合も同じく、is_tag()とhas_tag()の関係になります。

SWELLでの使われ方

SWELLのlib/output.phpには、記事ごとに設定できる「カスタムCSS」を出力する処理があり、条件分岐タグが使われています(一部を省略しています)。

function output_meta_custom_css() {
	$css      = '';
	$is_plane = false;

	if ( is_single() || is_page() || is_home() ) {
		$the_ID   = get_queried_object_id();
		$css      = get_post_meta( $the_ID, 'swell_meta_css', true );
		// …
	}
	// …
}

||(または)でつないで、「投稿ページ・固定ページ・投稿の一覧ページのときだけ、そのページに設定されたCSSを取り出す」という処理になっています。カテゴリーの一覧ページなどには記事ごとの設定がないので、取り出さないようにしているわけです。||や&&、!は【PHP】演算子の種類と使い方を解説で解説した論理演算子です。

注意:判定できるのはメインクエリのあと

条件分岐タグは、WordPressがURLを読み取って、メインクエリで記事を取り出したあとでないと、正しく判定できません。

投稿ページを開き、いくつかのタイミングでis_single()の結果を記録したところ、次のようになりました。

調べたタイミングis_single()の結果
functions.phpの一番外側false
initフックfalse
wpフックtrue
template_redirectフックtrue
WordPressの処理の流れと条件分岐タグが使えるタイミング。functions.phpの読み込みとinitの時点ではまだ判定できずfalse、メインクエリの実行後のwp・template_redirect・テンプレートの時点ではtrueになる

functions.phpが読み込まれる時点では、まだどのページを表示するか決まっていないため、投稿ページでもfalseになります。functions.phpで条件分岐タグを使うときは、第4回で紹介したフックの中、それもwp以降に実行されるフック(template_redirect・wp_enqueue_scripts・wp_footerなど)の中で使いましょう。

実務サンプル:特定カテゴリーの記事だけにシリーズの案内を表示する

ここまでの内容を使って、「PHP」カテゴリー(スラッグphp)の記事だけ、タイトルの上にシリーズの案内を表示してみましょう。

子テーマのfunctions.phpに、次のコードを追加します。

/**
 * PHPカテゴリーの記事だけ、タイトルの上にシリーズの案内を表示する
 */
add_action( 'swell_before_post_head', function( $post_id ) {
	if ( ! in_category( 'php', $post_id ) ) {
		return;
	}

	$link = get_term_link( 'php', 'category' );

	echo '<p class="kurumico-series-note">この記事は「PHP」シリーズの1本です。'
		. '<a href="' . esc_url( $link ) . '">シリーズの記事一覧はこちら</a></p>';
} );

子テーマのstyle.cssには、次のCSSを追加します。

.kurumico-series-note {
	padding: 1em;
	margin-bottom: 2em;
	background: #e3f2fd;
	border-left: 4px solid #1565c0;
	font-size: .9em;
}

PHPカテゴリーの記事を開くと、タイトルの上に次のように表示されました。ほかのカテゴリーの記事や固定ページには表示されません。

SWELLの投稿ページ。タイトル「記事A」の上に「この記事は「PHP」シリーズの1本です。シリーズの記事一覧はこちら」という案内が表示されている

コードのポイントは次のとおりです。

  • swell_before_post_headは、第5回でも使った、SWELLが記事のタイトル部分の直前に用意しているフック
  • 投稿ページで「この記事のカテゴリー」を調べるので、is_category()ではなくin_category()を使う
  • in_category()の2つ目の引数に$post_idを渡して、調べる記事をはっきり指定している
  • get_term_link()で、PHPカテゴリーの一覧ページのURLを取り出している

'php'の部分を、自分のサイトのカテゴリーのスラッグに変えれば、そのまま使えます。

よくある質問・エラー対処

Q. 複数のページをまとめて判定したいです

→ is_page( [ 'contact', 'about' ] )のように、配列で複数のスラッグやIDを渡せます。種類の違うページをまとめるときは、is_single() || is_page()のように||でつなぎます。


Q. 特定の固定ページだけにCSSを読み込みたいです

→ wp_enqueue_scriptsフックの中で、if ( is_page( 'contact' ) )のように判定してから、wp_enqueue_style()でCSSを読み込みます。wp_enqueue_scriptsはメインクエリのあとに実行されるので、条件分岐タグが正しく動きます。


Q. 条件分岐タグが常にfalseになります

→ 判定しているタイミングが早すぎる可能性があります。functions.phpの一番外側やinitフックでは、どのページでもfalseになります。wp以降のフックの中に移してください。

おわりに(まとめ)

まとめ

条件分岐タグを使えば、ページの種類に合わせて処理を出し分けられます。

  • ✅ 条件分岐タグは、ページの種類を調べてtrueかfalseを返す関数
  • ✅ is_singularは投稿ページと固定ページ、is_archiveは一覧ページ全般をまとめて判定する
  • ✅ is_front_pageはトップページ、is_homeは投稿の一覧ページ
  • ✅ 引数でIDやスラッグを渡すと、特定のページだけを判定できる
  • ✅ 記事のカテゴリーを調べるときは、is_categoryではなくin_categoryを使う
  • ✅ 条件分岐タグは、wp以降のフックやテンプレートの中で使う

次回は、SWELLのコードに出てくる「->」と「::」の書き方、オブジェクトの基礎について解説します。

次回は、オブジェクトの基礎(-> と ::)について解説予定です。

この記事が、少しでも誰かのお役に立てれば幸いです。

関連記事

当サイトの記事で使用したVBAなどのサンプルをDLできます

この記事のサンプルはありません!

ダウンロードページへは下のカードをクリックすればジャンプできます。
よろしければご利用ください!


【CSS】テキスト関連プロパティについて基本解説|Webの基礎


よかったらシェアしてね!
  • URLをコピーしました!
目次