その他

2022.07.27

【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の関連記事はこちら

[card url=”http://note.spiqa.design/wp/wordpress-termsetting/”]

この記事をシェアする

関連記事

  • 2024.03.22

    Webデザインにおけるアニメーションについて考えてみた〜実例編〜

    その他

  • 2024.03.12

    Webデザインにおけるアニメーションについて考えてみた〜メリット・デメリット編〜

    その他

  • 2023.12.30

    案件を切り替える拡張機能「Project Manager」が便利!

    その他

おすすめ記事

  • 2021.09.22

    コーダーが入れておきたいChromeの拡張機能7選

    その他

  • 2021.05.14

    【CSS】backgroundで行う背景画像の複数指定

    その他

  • 2023.12.28

    CSSで行数によって位置の調整ができた話

    その他

TAG

×