問題 × 解決策

WordPressの固定ページのパンくずリストを動的に出力する

  • 2020年01月21日
  • PHPSEO

問題

Wordpressの固定ページのパンくずリストを動的に出力させたい。

解決策

固定ページ内の先祖ページから今のページまでを順に配列に格納し、その配列をforeachで回して出力させる。

 

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

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

15 + nineteen =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧