【WordPress】トップページにのみ表示する方法｜is_front_pageとis_homeの違い・CSS・ウィジェット

WordPress

WordPressで特定のコンテンツをトップページにだけ表示する方法を解説します。is_front_page()とis_home()の違い（「ホームページの表示」設定で挙動が変わる）を整理し、テンプレートでの条件分岐、CSSのbodyクラス、ウィジェットの出し分けまで紹介します。

2023.08.122026.07.02

バナーやお知らせなどをトップページにだけ表示したいことはよくあります。WordPressでは条件分岐タグ is_front_page() で実現できますが、「ホームページの表示」設定によって is_home() との判定が変わる点が最大のつまずきどころです。この記事では、その違いの整理から、テンプレート・CSS・ウィジェットでの実装までを解説します。

この記事でわかること

is_front_page() と is_home() の違い（設定で挙動が変わる）
テンプレートで条件分岐して表示する
CSS（bodyクラス）で見た目だけ切り替える
ウィジェットをトップページだけに出す

まず理解する：is_front_page() と is_home() の違い
テンプレートで条件分岐して表示する
CSSでトップページだけスタイルを変える
ウィジェットをトップページだけに表示する
関連カスタマイズ
よくある質問（FAQ）
まとめ

まず理解する：is_front_page() と is_home() の違い

2つの条件分岐タグは、管理画面の「設定 → 表示設定 → ホームページの表示」によって判定されるページが変わります。

ホームページの表示	is_front_page()	is_home()
最新の投稿（既定）	トップページで true	トップページで true（両方true）
固定ページを指定	フロントに指定した固定ページで true	「投稿ページ」に指定したブログ一覧で true

「サイトの顔」なら is_front_page()
「トップページにのみ表示」の意図がサイトの入り口（フロントページ）なら、設定に関わらず is_front_page() を使えば意図どおりに動きます。is_home() は「ブログ記事一覧のページ」を指すため、固定ページをフロントにしている場合は別のページで true になります。

テンプレートで条件分岐して表示する

テーマのテンプレート（header.php や front-page.php など）で、is_front_page() を使って出し分けます。

PHP：トップページでのみ表示する

<?php if (is_front_page()) : ?>
  <div class="top-banner">
    <p>このコンテンツはトップページでのみ表示されます。</p>
  </div>
<?php endif; ?>

逆に「トップページ以外で表示」なら if (!is_front_page()) と否定にします。

管理画面の「テーマファイルエディター」での直接編集は避ける
管理画面からのテンプレート編集は、構文エラー1つでサイト全体が表示不能（白画面）になる危険があります。編集は子テーマのファイルをローカルのエディタで行い、FTP等でアップロードするのが安全です。テンプレートの種類は、トップページなら front-page.php（最優先）→ home.php → index.php の順に使われます。

CSSでトップページだけスタイルを変える

WordPressは body_class() を使うテーマなら、フロントページの <body> に home クラスを自動で付与します。これを起点に、CSSだけで表示を切り替えられます。

CSS：トップページだけ表示する

.special-content {
  display: none; /* 通常ページでは非表示 */
}

.home .special-content {
  display: block; /* トップページだけ表示 */
}

CSSの非表示は「隠すだけ」
display: none でもHTMLは全ページに出力されたままです。読み込み量は減らず、ソースを見れば内容も見えます。会員限定情報などの出し分けには使わず、見た目の制御だけに使ってください。確実に出し分けたい場合は前章のPHP条件分岐を使います。

ウィジェットをトップページだけに表示する

ウィジェット単位で出し分けたい場合は、「Widget Logic」などのプラグインでウィジェットごとに is_front_page() の条件を設定するか、トップページ専用のウィジェットエリアを登録して front-page.php だけで読み込む方法があります。実装の詳細はウィジェットエリアを条件付きで出し分ける方法、サイドバーウィジェットをページごとに出し分ける方法を参照してください。

よくある質問（FAQ）

Qis_home() と is_front_page() はどちらを使えばよいですか？

A「サイトの入り口（トップページ）で表示したい」なら is_front_page() です。「ホームページの表示」が最新の投稿なら両方トップページで true になりますが、固定ページをフロントにすると is_home() は「投稿ページ」（ブログ一覧）で true になり、フロントページでは false です。

Qfunctions.php でトップページ判定するとうまく動きません。

A条件分岐タグはクエリ確定後でないと正しく判定できません。functions.php の直下ではなく、wp 以降のフック（wp_head・wp_footer など）やテンプレート内で使ってください。

Qウィジェットをトップページにのみ表示するには？

AWidget Logic などのプラグインでウィジェットごとに is_front_page() を条件設定するか、トップ専用のウィジェットエリアを register_sidebar() で登録して front-page.php だけで呼び出します。条件付き出し分けの実装例も参照してください。