TwentyTwelve メニューを複数設置時のJavaScript

こんにちは、

手順としては、

1. フッタ用のメニューを登録
2. フッタ用メニューをテンプレートに追加
3. ジャバスクリプトの複製
4. フッター用メニューの作成

の4つの作業が必要になります。

まず、functions.phpでフッタ用のメニューを登録します。

line:63

// This theme uses wp_nav_menu() in one location.
	register_nav_menu( 'primary', __( 'Primary Menu', 'twentytwelve' ) );
       /* この一行を追加　*/
	register_nav_menu( 'footer', __( 'Footer Menu', 'twentytwelve' ) );
       /* この一行を追加　*/

2. フッタ用メニューをテンプレートに追加
　　　footer.phpを開いて、

<footer id="colophon" role="contentinfo">
<!--ここから　追加のhtml-->
		<aside id="site-navigation-footer" class="main-navigation" role="navigation">
			<button class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></button>
			<a href="#content">"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
			<?php wp_nav_menu( array( 'theme_location' => 'footer', 'menu_class' => 'nav-menu' ) ); ?>
		</adide><!-- #site-navigation -->
<!--ここまで　追加のhtml-->
		<div class="site-info">

フッターに貼るコードは、ヘッダーのnav ブロックをコピーして、2か所変更

1. nav 要素を　aside　要素に変更、
2. id=”site-navigation”　を　id=”site-navigation-footer”　に変更

3. ジャバスクリプトの複製

navigation.js　を開いて、

5行目から36行目

( function() {
	var nav = document.getElementById( 'site-navigation' ), button, menu;
	if ( ! nav ) {
		return;
	}

	button = nav.getElementsByTagName( 'button' )[0];
	menu   = nav.getElementsByTagName( 'ul' )[0];
	if ( ! button ) {
		return;
	}

	// Hide button if menu is missing or empty.
	if ( ! menu || ! menu.childNodes.length ) {
		button.style.display = 'none';
		return;
	}

	button.onclick = function() {
		if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
			menu.className = 'nav-menu';
		}

		if ( -1 !== button.className.indexOf( 'toggled-on' ) ) {
			button.className = button.className.replace( ' toggled-on', '' );
			menu.className = menu.className.replace( ' toggled-on', '' );
		} else {
			button.className += ' toggled-on';
			menu.className += ' toggled-on';
		}
	};
} )();

をコピーして、そのすぐ下に貼り付けて、1か所変更

貼り付けたコードの2行目

( function() {
	var nav = document.getElementById( 'site-navigation-footer' ), button, menu;

site-navigation　を　site-navigation-footer　に変更

4. フッター用メニューの作成

管理パネルのメニューで、メニューを新規作成すると、ページに一番下に、Footer menuという項目ができているので、それをチェックしてメニューを保存

で、めでたし、めでたし、となるはずです。