Max Mega Menu プラグインウィジェットをサイドバーで使うことで、メニューをサイドバーに張ることができるようになる。

つまり、グローバルメニューとサイドバーメニューの２つのメニューを作って一つはグローバル、もう一つはサイドバーにという形。

メニューごとの Max Mega Menu は、メニューの配置位置が存在していないと設定することができない。

Max Mega Menu ウィジェットでメニューをサイドバーで使う

手順は
１、Max Mega Menu の配置のために メニューの配置位置を追加する
２、ウィジェットで Max Mega Menu のウィジェットを配置する
３、Max Mega Menu でテーマデザインをカスタマイズする

Max Mega Menu の配置のために メニューの配置位置を追加する

Max Mega Menu の配置のために メニューの配置位置を追加するには、 function.php に以下を貼り付けます。

register_nav_menu( 'sidebar-navi', 'サイドバーのナビゲーション' );<br />

これだけでOK。

ex.
// サイドバーウィジットを有効化<br />register_sidebar( array(<br /> 'name' => 'サイドバーウィジット-1',<br /> 'id' => 'sidebar-1',<br /> 'description' => 'サイドバーのウィジットエリアです。',<br /> 'before_widget' => '<div id="%1$s" class="widget %2$s">',<br /> 'after_widget' => '</div>',<br />) );<br />register_nav_menu( 'sidebar-navi', 'サイドバーウィジット-1' ); //　← これ。表示名だからなんでもいい。サイドバーのname を使ってみた。<br />

header.php などに埋め込む場合

ワードプレスのテーマにグローバルナビを埋め込む場合は、以下のようにしておきます。
<?php wp_nav_menu( array ( 'theme_location' => 'header-navi' ) ); ?><br />

ウィジェットで Max Mega Menu のウィジェットを配置する

Max Mega Menu でテーマデザインをカスタマイズする

Max Mega Menuは、基本的に横置きメニューのカスタマイザーなのでサイドバーに配置すると横に並ぼうとする。

そこで必要になるのが CSS の設定。 Max Mega Menu の li のfloat を解除するのは面倒なことになるので、

メニューの１項目の幅を１００％にして、無理やり改行させてやる。

Max Mega Menuから「menu themes」を選択

「Select theme to edit」のところから新しいデザインを作る「create a new theme」をクリック。

色味他は、とりあえずほっといて「Custom Styling」で Max Mega Menu の li のスタイルを変更する。
/** Push menu onto new line **/ <br />#{$wrap} { <br /> clear: both; <br />}<br />/* li の 幅 を 100% にする*/<br />#{$wrap} #{$menu} > li.mega-menu-item {<br />width: 100%;<br />}<br />
サンプル画像(笑）

あとは、色とか幅を調整してこんな感じにできました。

上のやつの 追加CSS
/** Push menu onto new line **/ <br />#{$wrap} { <br /> clear: both; <br />}<br />/* li の 幅 */<br />#{$wrap} #{$menu} > li.mega-menu-item {<br /> width: 100%;<br />margin:0px 0 3px 0;<br />border:1px solid #2A8E84;<br />}<br />/* li > a の キャラクタセット (muneで１つづつ設定させない)*/<br />#{$wrap} #{$menu} > li.mega-menu-item > a::before{<br />content: '\f345';<br />}<br /><br />#{$wrap} #{$menu} {<br />margin:0;<br />padding:0;<br />}<br />

Max Mega Menu の配置方法

前述は、ウィジェットエリアを作って配置する方法ですが、 Max Mega Menu は、そのほか、投稿にも配置でき、php ソースに直接配置することもできます。

ただし、メニューとMax Mega Menuを結び付けなければいけないのでメニューの配置位置の設定は必要になります。

php 直埋め込み、投稿埋め込みのタグは、ここを見れば書いてあるので、あとはコピペすればOK。

すごく手軽です。