hijiriworld Web

jQueryを使って、階層構造の固定ページをドロップダウンメニューにする方法。

階層構造の固定ページを作成する

WP管理画面 > 固定ページ > 新規追加

以下のような、2階層構造のページを作成します。

ページ1
　　- ページ1-1
　　- ページ1-2
　　- ページ1-3
ページ2
ページ3

子ページを追加する際は、ページ属性で「親」を指定しましょう。

ページリストを表示する wp_list_pages()

ページリストを表示するには、テンプレートタグ/wp list pages を使います。

<ul class="page_list">
	<?php wp_list_pages('title_li='); ?>
</ul>

マークアップ構造を理解する

wp_list_pages() で出力されるHTMLは、以下のような構造になっています。

初期状態

<ul class="page_list">
	<li class="page_item page-item-xxx"><a href="#" title="ページ1">ページ1</a>
		<ul class='children'>
			<li class="page_item page-item-xxx"><a href="#" title="ページ1-1">ページ1-1</a></li>
			<li class="page_item page-item-xxx"><a href="#" title="ページ1-2">ページ1-2</a></li>
			<li class="page_item page-item-xxx"><a href="#" title="ページ1-3">ページ1-3</a></li>
		</ul>
	</li>
	<li class="page_item page-item-xxx"><a href="#" title="ページ2">ページ2</a></li>
	<li class="page_item page-item-xxx"><a href="#" title="ページ3">ページ3</a></li>
</ul>

・すべてのページに page_item というクラス名が付く。
・子ページのページリストに children というクラス名が付く。

親ページ（ページ1）がアクティブな時

<ul class="page_list">
	<li class="page_item page-item-xxx current_page_item"><a href="#" title="ページ1">ページ1</a>
		<ul class='children'>
			<li class="page_item page-item-xxx"><a href="#" title="ページ1-1">ページ1-1</a></li>
			<li class="page_item page-item-xxx"><a href="#" title="ページ1-2">ページ1-2</a></li>
			<li class="page_item page-item-xxx"><a href="#" title="ページ1-3">ページ1-3</a></li>
		</ul>
	</li>
	<li class="page_item page-item-xxx"><a href="#" title="ページ2">ページ2</a></li>
	<li class="page_item page-item-xxx"><a href="#" title="ページ3">ページ3</a></li>
</ul>

・現在アクティブなページに current_page_item というクラス名が付く。

子ページ（ページ1-1）がアクティブな時

<ul class="page_list">
	<li class="page_item page-item-xxx current_page_ancestor current_page_parent"><a href="#" title="ページ1">ページ1</a>
		<ul class='children'>
			<li class="page_item page-item-xxx current_page_item"><a href="#" title="ページ1-1">ページ1-1</a></li>
			<li class="page_item page-item-xxx"><a href="#" title="ページ1-2">ページ1-2</a></li>
			<li class="page_item page-item-xxx"><a href="#" title="ページ1-3">ページ1-3</a></li>
		</ul>
	</li>
	<li class="page_item page-item-xxx"><a href="#" title="ページ2">ページ2</a></li>
	<li class="page_item page-item-xxx"><a href="#" title="ページ3">ページ3</a></li>
</ul>

・現在アクティブなページに current_page_item というクラス名が付く。

・その直近の親ページに current_page_parent というクラス名が付く。

・すべての親ページに current_page_ancestor というクラス名が付く。（多階層構造の場合、すべての親ページに付きます）

jQueryでドロップダウンメニューにする

jQueryの読み込み

jQueryや自前のjsファイルを読み込む場合は、wp_enqueue_script 関数を使います。

テーマフォルダ内に js フォルダを作り、jQuery と、自前のjsファイル（「functions.js」とします）を用意して、header.php か、functions.php で読み込みます。

<?php wp_enqueue_script('jquery-1.6.2.min.js', get_bloginfo('template_url').'/js/jquery-1.6.2.min.js'); ?>
<?php wp_enqueue_script('functions', get_bloginfo('template_url').'/js/functions.js'); ?>

実装

・javascript（functions.js）

$(document).ready(function(){
	$("ul.children").hide();
	$("li.page_item").hover(function() {
		$("ul.children",this).slideDown("fast");
	},
	function() {
		$("ul.children",this).slideUp("fast");
	});
});

・CSS（参考）

ul.page_list {
	position: absolute;
}
li.page_item {
	float: left;
	width: 150px;
	background: #3B5982;
}
li.page_item a {
	display: block;
	line-height: 40px;
	text-decoration: none;
	text-align: center;
	color: white;
}
	li.page_item a:hover {
		background: #5A81B4;
	}
ul.children li.page_item {
	float: none;
}