サポート » テーマ » TwentyTwelve メニューを複数設置時のJavaScript

  • 解決済 shoogun

    (@shoogun)


    いつも活用させて頂き感謝しております。

    自己解決可能と思い、さんざん調べたのです解決できず途方にくれております …
    さっそくですが質問させてください。

    WPver:4.0
    テーマ:twentytwelve

    インスト時ヘッダー(header.php)に記載のメニューですが、画面サイズが小さくなるとボタン化する所が気に入り、これをフッターにも設置したいと考えております。
    管理画面で複数のメニューを作成・管理できることはわかるのですが、それは画面サイズが小さくなってもボタン化されません。

    とりあえずヘッダー記載のままフッターにコピーすることで「問題なく表示」→「画面サイズ変更でボタン化」するのですが、ボタンを押してもヘッダーのようにボタン下部にメニューが表示されません。

    アクションが起きないということで「navigation.js」に目をつけ、確認したのですが私には理解できませんでした。

    解決方法をご存知の方、ご教授お願いします。

    [モデレーターより]
    「【重要】お読みください」フォーラムに投稿されていましたので、フォーラムを移動しました。
    「【重要】お読みください」は、WordPress 日本語サイト運営チームから、みなさんへの連絡等に使用していますので、質問があっても回答がつかない場合があります。

    通常の質問は個別のフォーラムへ投稿してください。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • こんにちは、

    手順としては、

    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という項目ができているので、それをチェックしてメニューを保存

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

    スレッド開始 shoogun

    (@shoogun)

    投稿の場所(カテゴリー)を間違えてしまったようですね … 以後気を付けます。

    nobita様
    さっそくの回答ありがとうございました。

    「3. ジャバスクリプトの複製」ここですか … 完全に自力では解決できませんでした。

    おかげ様ですスッキリです。
    至急設定してみたいと思います。

    ありがとうございました!!

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「TwentyTwelve メニューを複数設置時のJavaScript」には新たに返信することはできません。