【WP】WordPressで固定ページの階層化されたサイドメニューを表示させる

コーポレートサイト等では、カテゴリ毎のサイドメニューを表示させたい場合が多いかと思います。

今回は、ページを「固定ページ」で作成し、「親ページ」＝「カテゴリトップ」の場合の
サイドメニュー表示用テンプレートをメモしておきます。

ほぼ、次の参考サイトのままですが、ちょっと弄っているので自分用のメモとして残しておきます。

参考サイト

WordPressをCMSとして利用する際、固定ページの親ページと子ページに共通のナビゲーションを作るTips
（解説＆コードを公開してくださりありがとうございます！）

PHPコード

	<div id="sub">
		<section id="subNav">
		<?php
		   $ancestor = array_pop( get_post_ancestors( $post->ID ) );
		   $top_parent_permalink = get_permalink( $ancestor );
		   $top_parent_title = get_the_title( $ancestor );
		?>
			<h1><a href="<?php echo ($top_parent_permalink);?>"><?php echo ($top_parent_title);?></a></h1>
			<ul class="subMenu">
				<?php
					$parent = array_reverse($post->ancestors);
					if($parent) {
							$pages = $parent[0];
						}else{
							$pages = $post->ID;
						}
					
					if($pages){
						if ( $list_pages = wp_list_pages( 'title_li=&echo=0') ) {
							wp_list_pages('echo=1&title_li=&child_of='. $pages);
							}
						}
				?>
			</ul>
		</section>
	</div><!-- /#sub -->

上のコードは、固定ページのみに設定しています。

HTMLソース例

	<div id="sub">
		<section id="subNav">
			<h1><a href="ドメイン/company/">会社情報</a></h1>
			<ul class="subMenu">
				<li class="page_item page-item-19 current_page_item"><a href="ドメイン/company/greeting/">代表あいさつ</a></li>
<li class="page_item page-item-23"><a href="ドメイン/company/about/">会社概要</a></li>
<li class="page_item page-item-24"><a href="ドメイン/company/philosophy/">企業理念</a></li>
<li class="page_item page-item-25"><a href="ドメイン/company/history/">沿革</a></li>
<li class="page_item page-item-20 page_item_has_children"><a href="ドメイン/company/office/">事業所</a>
<ul class='children'>
	<li class="page_item page-item-21"><a href="ドメイン/company/office/tokyo/">本社（東京）</a></li>
	<li class="page_item page-item-22"><a href="ドメイン/company/office/osaka/">大阪</a></li>
</ul>
</li>
			</ul>
		</section>
	</div><!-- /#sub -->

上記ソースは、「代表あいさつ」ページのソースとなります。

wp_list_pages()は、現在のページには自動てliにclass=”current_page_item”が追加され、
デザイン調整に活用できて便利です。