WordPressのサブページナビゲーションを動的にする方法

WordPress（ワードプレス）のアーキテクチャを深く学ぶと、機能豊富なコンテンツ・マネジメント・システム（CMS）としてのワードプレスの素晴らしさに心の底から感心する。基本的に、ワードプレスはブログのプラットフォームとしてだけでなく、ブログの記事が掲載されているか否かにかかわらず、あらゆるウェブサイトのコンテンツを管理するソフトウェアとしても利用することができる。ワードプレスには「ページ」を使い、比較的静的なコンテンツを保持する機能、そして、これらのページを呼び出し、自分の思いつくままの方法で表示させる機能があるため、そのすべての作業を行うワードプレスのテーマが鍵になる。

CMSとしてワードプレスに欠けている機能を挙げるとしたら、それはサブページシステムを有効に生かす機能を挙げるだろう。利用方法ではなく、実際のウェブサイトのデザインへの応用に問題があるのだ。

「親」ページのみをホームページに表示させることで、ページとサブページの階層構造を活用しようとしていた人達にとっては、このプラグインが役に立つだろう。「親」ページが「子」ページを持っていて、そのページのリンクがクリックされると、子ページが「折り」たたみ表示され、「さらに深く」進めるオプションが提供される（メジャーなCMSによく見受けられる）。

問題発見

しかし私はただ単に役立つプラグインを紹介したりはしない。以前、オリジナルの「親」リストをページの上部（ヘッダーのイメージのすぐ下）にリストアップして、「親」ページのリンクがクリックされると、サイドバーにサブページをリストとして表示させたがっていたクライアントがいた。当時、私の知る限り、Fold Page List（フォールド・ページ・リスト）プラグインを使ってもこのクライアントの要望を満たせないことは分かっていたため、リサーチを開始した。この情報を得たオリジナルのウェブサイトを見つけたら、リンクを貼ることにしよう。残念ながら今は発見することができなかった。申し訳ない:-)

まずはページをリスト状にする。上位レベルでのみで実行することをお忘れなく！

<?php wp_list_pages('title_li=&depth=1'); ?>

次に、発見したコードを私は使った（若干、変更は加えたはずだ）。

<?php
global $wp_query;

if( empty($wp_query->post->post_parent) ) {
$parent = $wp_query->post->ID;
} else {
$parent = $wp_query->post->post_parent;
} ?>
<?php if(wp_list_pages("title_li=&child_of=$parent&echo=0" )): ?>
<div id="submenu">
<ul>
<?php wp_list_pages("title_li=&child_of=$parent" ); ?>
</ul>
</div>
<?php endif; ?>

あまり専門的にならないように、このコードの意味をざっくりと説明しよう。

if( empty($wp_query->post->post_parent) ) {
$parent = $wp_query->post->ID;
} else {
$parent = $wp_query->post->post_parent;
}

このコードは現在のページ（アクティブなページ）が親ページを持っているか確認するためのコードである。親ページがない場合は、現在のページIDを「親」に指定する。上位レベルの親であるが故、こういった作業が必要になる。単純に親IDを使って、「親」を指定してしまうと、もし上位レベルの親がアクティブになっている場合、「親」変数は空になり、サブページをリスト表示することはできなくなるのだ。

<?php if(wp_list_pages("title_li=&child_of=$parent&echo=0" )): ?>
<div id="submenu">
<ul>
<?php wp_list_pages("title_li=&child_of=$parent" ); ?>
</ul>
</div>
<?php endif; ?>

最後のパートはとてもシンプルだ。サブページがあるか否かをチェックする（原始的な方法で）。もしサブページがある場合は、リスト表示する（タイトルとスタイルを整えるためのdiv wrapperを携えて）。

唯一の制限

私はこの件に関するリサーチにあまり時間をかけたわけではないが、それでも2層のレベルででしか使えないことは分かった（上位レベルと第2レベル）。もしサブページのレベルが3層あるなら、このコードは役に立たないだろう（少なくとも思ったような効果はでないだろう）。当時は2層の情報を求めていたためだ:-)。申し訳ない。

ソースをダウンロード

このスクリプトのソースをダウンロードするにはここをクリック。

ワードプレスをCMSとして手っ取り早く使える方法を探しているなら、このちょっとしたコードが大活躍するだろう。私はこのコードを作ってから何度か使っているし、今後も多用するつもりだ！

次回は同じことを、今度はカテゴリーとサブカテゴリーを利用して、紹介していこうと思う。お見逃しなく！

ライター紹介：ネイサン・ライスはブロガー兼フリーランスのウェブデザイナーであり、ワードプレスのテーマ開発を得意にしている。また、IT、そして標準ウェブデザインを学んだ経歴を持つ。ネイサンは通常のウェブコンサルティング業務とウェブデザインに加え、ワードプレスに関するコンサルティング業務とカスタムのテーマ開発を行っている。さらに、Performancing（パフォーマンシング）、ブログヘラルド、そしてWordPressThemes.com（ワードプレステーマドットコム）に記事を投稿している。

[原文へ]

2件のコメントがあります。