問題
解決策
WordPressの固定ページのパンくずリストの自作
WordPressの固定ページのパンくずリストを動的に出力させる方法をご紹介します。
プラグインを使わず、あくまで自作を行います。
「$post->ancestors」を使った、パンくずリストのための配列データの作成
パンくずリストのための配列データを作成します(仮「$breadcrumb」)。
下記の記事の内容を拡張させているので、事前にこちらもご覧ください。
「PHPでパンくずリストを出力させたい」
「$post->ancestors」により、現在のページから遡り、親ページから先祖ページを一通り辿ることができます。
例:ページA > ページB > ページC の場合
$post->ancestors[0] => ページBのid
$post->ancestors[1] => ページAのid
これに続いて現在のページの情報を追加します。
固定ページのテンプレート(page.php)
<?php
// 親ページを含む先祖ページの数
$bc_count = count($post->ancestors);
// 現在のページ用のカウンター
$bc_numon = count($post->ancestors)+2;
$breadcrumb = array();
// 最上位の先祖ページ → 親ページ の流れでループ処理
for($i=count($post->ancestors); $i>0; $i--){
// トップページを省くため、+1
$num = $i+1;
$page_id = $post->ancestors[count($post->ancestors) - $i];
// ページのデータを取得
$page_data = get_post($page_id);
// ページのIDを格納
$breadcrumb[$i]['id'] = $page_data->ID;
// ページのスラッグを格納
$breadcrumb[$i]['slug'] = $page_data->post_name;
// ページのタイトルを格納
$breadcrumb[$i]['label'] = get_the_title($page_data);
// ページのURLを格納
$breadcrumb[$i]['link'] = get_permalink($page_data);
};
// 現在のページのIDを格納
$breadcrumb[$bc_numon]['id'] = $post->ID;
// 現在のページのスラッグを格納
$breadcrumb[$bc_numon]['slug'] = $post->post_name;
// 現在のページのタイトルを格納
$breadcrumb[$bc_numon]['label'] = get_the_title();
// 現在のページのURLを格納
$breadcrumb[$bc_numon]['link'] = get_permalink();
?>
- パンくずリストのナンバーは1、2、3…と明記していきます。
トップページは配列から省いてマークアップするため、トップページ分、「$i」を+1します。 - 最後の現在のページの情報の配列の格納では、トップページ分と先祖ページ分の2つ分の後になるため、「count($post->ancestors)」に+2をして、パンくずリストのナンバーとして格納します。
パンくずリストの出力例
パンくずリストの出力の記述例です。
「foreach」で先程の配列データ「$breadcrumb」を展開します。
こちらに関しては下記の記事と同じ出力記述なので、事前にこちらもご覧ください。
「PHPでパンくずリストを出力させたい」
<section id="breadcrumb" class="section controller">
<div class="controller-inner clearfix">
<ol itemscope itemtype="http://schema.org/BreadcrumbList" class="breadcrumb-list">
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="home">
<a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="<?php echo $home_path; ?>"">
<span itemprop="name">HOME</span>
</a>
<meta itemprop="position" content="1"../>
</li>
<?php
foreach($breadcrumb as $nums => $item):
if($item !== end($breadcrumb)):
// 現在のページの番(最後)でないならば
?>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="<?php echo $item['link']; ?>" itemid="<?php echo $item['link']; ?>">
<span itemprop="name"><?php echo $item['label']; ?></span>
</a>
<meta itemprop="position" content="<?php echo $nums; ?>"../>
</li>
<?php
else:
// 現在のページの番(最後)ならば
?>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="on">
<span itemscope itemtype="http://schema.org/Thing" itemprop="item">
<span itemprop="name"><?php echo $item['label']; ?></span>
</span>
<meta itemprop="position" content="<?php echo $nums; ?>"../>
</li>
<?php endif; ?>
<?php endforeach; ?>
</ol>
</div><!-- controller-inner -->
</section><!-- breadcrumb -->
データを出力していく流れ
- トップページの記述を先に行う。
配列データ「$breadcrumb」を「foreach」で繰り返し処理
- 現在のページの番(最後)でない場合、aタグで出力します。
- 現在のページの番(最後)の場合、spanタグで出力します。
参考ページ
【関数リファレンス/get post ancestors – WordPress Codex 日本語版】
https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/get_post_ancestors
【WordPress 表示している固定ページが属する最上位〜全ての子孫ページのリストを表示 – Qiita】
https://qiita.com/gatespace/items/0910fef889eb589fd10b
コメント