WordPress

2021.03.19

【WordPress】親ページとその子ページも含めて条件分岐をする記述

WordPressでは、あらかじめ便利なテンプレートタグがたくさん用意されており、ページごとの条件分岐もis_page()などのタグを使用することで簡単に実装できます。

では、「親ページとその子ページも色やデザインを変更したい」という時はどうすればいいでしょうか。

たとえば「example.com/parent/」という親ページがあり、さらに下層の「example.com/parent/child/」も含めて条件を適用させたいというような状況です。

少しfunctions.phpに記述しなければいけませんが、簡単に実装することが可能です!

今回は、「親ページとさらにその子ページも含めて条件分岐をするPHPの記述」をご紹介します。

基本のWordPressのページ条件分岐

まずは、WordPressの条件分岐の方法について解説します。

今回の「親ページとさらにその子ページも含めて条件分岐をするPHPの記述」は応用したものになりますので、基本をしっかり覚えておきましょう。

<?php if (is_page('about')) : ?>  
  // 処理
<?php endif; ?>

if文の条件に、is_page()を入れることで簡単にページごとに分岐させることができます。

is_page()はWordPressにあらかじめ用意されたテンプレートタグで、引数として指定した固定ページを表示しているかどうか判定してくれます。

たとえば、上記の例ではexample.co/about/が表示されていたらif文内の処理を実行するという記述になります。

上記コードではスラッグを指定していますが、スラッグだけでなく以下のように3つの指定方法があります。

ID固定ページのIDを指定
タイトル固定ページのタイトルを指定
スラッグ固定ページのスラッグを指定

単純に固定ページかどうかを判定したい場合は、引数を指定せずにis_page()とするだけでOKです。固定ページ以外の投稿ページやアーカイブページなどは含まれません。

固定ページだけでなく、is_singleなら投稿ページを、is_archiveならアーカイブページを判定します。

親ページとその子ページも含めて条件分岐させたい場合

is_page()で親ページのスラッグを指定しても、その子ページにまでは条件処理が及びません。

そこでちょっとした関数を書く必要があります。以下をfunctions.phpにコピペしてください。

function is_parent_slug() {
    global $post;
    if ($post->post_parent) {
        $post_data = get_post($post->post_parent);
        return $post_data->post_name;
    }
}

親ページを持つ子ページの場合、親ページのスラッグを取得する、という内容になります。

上記コードをfuncitions.phpにコピペし終えたら、該当のif文内の条件を以下のようにします。

<?php
if (is_page('親ページのスラッグ') || is_parent_slug() === '親ページのスラッグ'){
  // 処理
}?>

親ページの判定をしているのに加え、先程の関数を呼び出して親ページスラッグと比較しています。

ここまでのコードを簡単にご説明しますと、
現在表示しているページが子ページかつ、取得した親ページのスラッグが条件分岐させたい親ページのスラッグと等しいなら実行、という内容になります。

まとめ

親子ページごとにデザインを変えたい、という時に役立つコードです。

このコードを使えば無駄にテンプレートファイルが増えることなく、一括で管理できて楽だと思います!

WordPressの関連記事はこちら

0

関連記事

  • 2021.04.14

    【WordPress】管理画面のカスタム投稿記事一覧をカテゴリーで絞り込めるようにする

    WordPress

  • 2021.03.26

    【Wordpress】子タームだけ出力する方法

    WordPress

  • 2021.03.17

    【WordPress】カテゴリーにカスタムフィールドを紐づける

    WordPress

おすすめ記事

  • 2020.12.02

    【css】スマホでパンくずを横スクロールさせる方法

    CSS

  • 2019.02.08

    【css】IEにobject-fitを簡単に効かせる方法

    CSS

  • 2021.04.05

    【jQuery】jQueryのみでPC/SPの画像を切り替える方法

    JavaScript

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!