グローバルナビ表示用「jQuery Mega Menu」プラグイン

「jQuery Mega Menu」は、グローバルナビのメニュー表示を、背景にイメージ画像を使ったドロップダウンがカッコいい?ナビにするプラグインです。

プラグインの導入

プラグインの新規追加より、「jQuery Mega Menu」で検索すると「jQuery Mega Menu widget」表示されますので、インストールをして有効化すると外観⇒ウィジェットで「利用できるウィジェット」に追加され表示されます。

使用方法

※Twenty ElevenやTwenty Twelveで使用するのを仮定した説明になります。

①グローバルナビに表示するメニューが必要なので、外観⇒メニューでメニューを作成します。

プラグイン作者サイトを参考にすると、functions.phpファイルに「jQuery Mega Menu widget」用にregister_sidebar関数を追加します。

register_sidebar(array(
'name' => 'my_mega_menu',
'before_widget' => '<div id="my-mega-menu-widget">',
'after_widget' => '</div>', 
'before_title' => '',     
'after_title' => '',
));

または、Twenty Twelveの場合、フロントページウィジェットエリア(そのテンプレート)を使用していない場合、その利用していないウィジェットエリアを使用します。

③外観⇒ウィジェットで「jQuery Mega Menu」をウィジェットエリアに移動させて、「jQuery Mega Menu」ウィジェットの「メニューを選択」で表示するメニューを選択し表示するSkinを設定して保存します。

jQueryMegaMenu1

④header.phpファイルにナビ用HTMLコードがあるときは削除して、そこにプラグイン作成者サイトによると、以下のコードを入力します。
※dynamic_sidebarのパラメータは使用しているウィジェットのIDにします。

<?php /* Widgetized sidebar */
    if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('my_mega_menu') ) : ?><?php endif; ?>

上のコードは、!function_exists(‘dynamic_sidebar’)で、dynamic_sidebarがあればfalseになり、次のdinamic_sidebar関数に設定されたIDのウィジェットを実行して、表示できれば返り値はtrueになりますが、関数の前に!があるのでfalseになるコードです。

上記のコードを使用する場合、Twenty Twelveの例ですが、以下のコードにするとウィジェットエリアに何も無いときは、通常のメニューが表示され、ウィジェットエリアに「jQuery Mega Menu」があるときは、「jQuery Mega Menu」が表示できるようになります。

<?php  if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('my_mega_menu') ) : ?>
		<nav id="site-navigation" class="main-navigation" role="navigation">
			<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
			<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
		</nav><!-- #site-navigation -->

		<?php endif; ?>

上記のコードでもいいのですが、表示するだけなら単純に以下のコードでも表示できます。

<?php dynamic_sidebar( 'my_mega_menu' ); ?>

また、Twenty Twelveのフロントページウィジェットエリアを使用する場合、以下のコードになります。

<?php dynamic_sidebar( 'sidebar-2' ); ?>

ここまで終えると、ヘッダーにメニューが表示されます。
jQueryMegaMenu2

グローバルナビ表示用「jQuery Mega Menu」プラグイン」への1件のフィードバック

  1. ピンバック: WPにメガメニューを簡単に追加 jQuery Mega Menu | My Tips and Quotes

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です