2018.03.23 Fri

【WordPress】固定ページの親子ページごとに表示を切り替える方法

こんにちは。ジーニアスウェブの杉田です。

心地よい季節になってきたのに、花粉が怖くて外に出ることが億劫になっている私です。
R-1乳酸菌を毎日摂って、腸からカラダを整えます!

さて、早速本題に入ります。
WordPressサイト構築時、固定ページごとにサイドバーを切り替えたい!ということはありませんか?
そういった中でも、親子関係であるページごとに、切り替える方法をご紹介させていただきます。

ただし、ここで注意したいこと。
実は、固定ページには、デフォルトで親子関係を判定する関数がありません。
つまり、投稿カテゴリのようにカテゴリごとの切り分けが出来ないのです。

さて、どうしたら良いか?

まずは、親子関係を判定する関数を作り、その関数を使って表示を切り替えるという流れになります。

例えば、下記のような親子ページがあるとします。

親ページ /about/
└ 子ページ /about/child.html
└ 孫ページ /about/child/grandchild.html

親ページ /company/
└ 子ページ /company/child.html
└ 孫ページ /company/child/grandchild.html

親ページ /voice/
└ 子ページ /voice/child.html
└ 孫ページ /voice/child/grandchild.html

そして、
/about/ ディレクトリには、about用のサイドバー、
/company/ ディレクトリには、company用のサイドバー、
/voice/ ディレクトリには、voice用のサイドバー
を表示させます。

すぐに簡単にできる方法は、ページスラッグ(またはページID)を指定する方法です。
しかし、その方法だと、親・子・孫すべてのスラッグ(またはページID)を指定しなければいけません。
例えば、以下のように9つの条件指定が必要になってしまいます…

<?php if(is_page( array('about','about-child','about-grandchild','company','company-child','company-grandchild','voice','voice-child','voice-grandchild') )): ?>

そして、紐づくページがまた増えるたびに、スラッグ(またはページID)を追加しなくてはいけません。
あまりスマートな方法ではないですし、テンプレートのソースも見にくくなりますね。

 

固定ページの親子関係を判定する関数を作成する

functions.php に、親子関係を判定する関数を記述します。

function page_is_ancestor_of($slug){
    global $post;

    // 親か判別したい固定ページスラッグからページ情報を取得
    $page = get_page_by_path($slug);
    $result = false;
    if(isset($page)){
        foreach ($post->ancestors as $ancestor) {
        if($ancestor == $page->ID){ $result = true; }
        }
    }
    return $result;
}

上記では、スラッグ指定をしています。
ページIDを指定する方法もあるみたいですが、スラッグ指定のほうが断然扱いやすいと私は思います。
例えば、開発環境→本番環境に移行する際、方法によってはIDが変わってしまうからです。

 

表示させたいテンプレートで関数を呼び出す

では、早速使いたいテンプレートで親子関係を判定する関数を呼び出してみましょう。
今回の場合は、sidebar.php に下記を記述しました。

<?php if(is_page('about') || page_is_ancestor_of('about')): ?>
    about用のサイドバー

<?php elseif(is_page('company') || page_is_ancestor_of('company')): ?>
    company用のサイドバー

<?php elseif(is_page('voice') || page_is_ancestor_of('voice')): ?>
    voice用のサイドバー

<?php endif; ?>

上記の記述を解説いたしますと
is_page(‘about’)
→ about というスラッグがついているページ

page_is_ancestor_of(‘about’)
→ about というスラッグがついているページに属する、すべての子・孫・ひ孫…ページ

となります。
これで、固定ページでも、カテゴリごとの切り分けが出来るようになりました!

 

さいごに

私は、実際の制作案件で上記方法を使用しました。
当初は簡単に出来るものだろうと高をくくっていました。
しかし、フタを開ければ全く簡単ではなかったです。

検索してもなかなか良い記事が見つけられず困っていましたが、弊社のWordPress師匠に助けていただき実装することができました。
同じく困っている方にとって、参考になれれば幸いです。

それでは、また。

WRITERこの記事を書いた人

杉田

大阪オフィスで主にフロントエンドを担当しています。

大阪オフィスで主にフロントエンドを担当しています。

FREE DOWNLOAD

顧客獲得に成功した24社の成功事例を1冊にまとめました。
顧客獲得にお困りの方も、そうでない方も、一度お読みいただくことをお勧めします。

MORE VIEW