WordPress:トップページにだけ表示するコンテンツ


最終更新日:2020.11.14
Pocket

wordpressはテンプレートの組み合わせで一つのページが出来ている、ということは
少し触ったことがある人ならご存知だと思います。

普通にコーディングする際、
header
main
footer
でパーツ分けしてマークアップすると思いますが、これを全ページ都度書くのではなく、すべてのページで共通化して表示できるようにしている、という感じです。

で、共通化してしまうと一つ問題点が。

「特定のページの場合だけ〇〇したい場合はどうするの?」です。

 

wordpressには便利な条件分岐が用意されている

たとえば、「ヘッダーに、トップページでだけ表示させるテキストを載せたい」場合。

ヘッダーは原則header.phpに書くので、その中で

<header>
  <p>ここはどのページでも表示されるテキスト</p>
  <?php if(is_front_page()): ?>
    <p>ここはトップページでだけ表示されるテキスト</p>
  <?php endif; ?>
</header>

と分岐させればOK。

同じように、「トップページでだけ読み込ませたいcssがある」場合は、
<head>タグの中で、トップページでだけ読み込ませるcssを

<?php if(is_front_page()): ?>

で囲えばよい。
処理が終わった最後に

<?php endif; ?>

を付けるのをお忘れなく。(ここまでが処理内容だよ!という意味)

 

<?php if(is_front_page()): ?>とは

「もし現在開いているページがフロントページだったら」という条件分岐です。

フロントページに該当するのは、

  • WordPressダッシュボードの「設定」→「フロントページに設定」で「最新の投稿」が設定されている場合に最初に表示されるページ
  • WordPressダッシュボードの「設定」→「フロントページに設定」で設定されている固定ページが表示されている場合に最初に表示されるページ

いわゆるトップページのことをWordpressではフロントページといいます。
Wordpressでトップページを担っているテンプレートが「front-page.php」だから。

 

トップページにだけ表示させたいコンテンツってなにげにあると思うので参考になれば!

Pocket