WordPressに簡単最強レスポンシブ「Max Mega Menu」

メニューにウィジェットが挿入できる！？
↑のようにメニューをマウスオーバーすると地図まで表示できるので会社やお店のサイトには最適ですね。
個人では地図は必要ないですが使い方次第では、カテゴリーしか表示できなかったメニューバーが魔法のバーに変身しそうです♪(^^)

SimplicityにMax Mega Menuを入れてみました。

メニューのカスタマイズ項目が多い WordPressの日本語無料テーマ「Simplicity」ですが、ちょっと前まで Bloggerブログで私が愛用してたメニューとはちょっと違うためカスタマイズしたいけど、まだPHPが分からない(^^;)

しかたないからプラグインで探してみました。

Max Mega Menuのインストール

プラグイン ⇒ 「新規追加」から「Max Mega Menu」を検索

インストール ⇒ 有効化します。

外観⇒メニューから↑のように をいれて設定し保存をクリック。

これでブラウザの新しいタブで自分のブログを開き 再読み込みすればメニューが変わってると思います。

Max Mega Menuの設定

外観⇒Max Mega Menuから設定画面を開きます。

↑ General Settingsではデフォルトのままでいいと思います。

下のToolsタブもキャッシュとデータ削除に関することなのでそのまま触らずに。

Theme Editorで デザインを変更してみましょう。

General Theme Settings

Menu Bar

Top Level Menu Items

Mega Panels

Flyout Menus

CSSでの追加設定（私のメニューの場合）

Custom Stylingへの追加

↓このように、メニューの文字に影を付けたい人だけ行なって下さい。

/** 追加 **/
div#mega-menu-wrap-header-navi a {
  text-shadow: 1px 1px 1px #000;
}

Simplicityのテーマをお使いの場合

スマホのMENUをタップして開き、一番下の項目をドロップダウンさせると
下のコンテンツと合体したように崩れてしまいます。

その場合は、外観⇒テーマの編集からSimplicityのnavi.phpを開き
一番下のコメントアウトした部分の上、画像の赤線部分に↓のタグを記述して下さい。
親テーマの編集になるため、必ずバックアップをとってから！

2015/8月更新
現在のSimplicityとMax Mega Menuの最新版では、この追記は必要ありません。

<div style="clear:both;"></div>

次に、
Simplicityでは幅が狭まった時にモバイルメニューに変わり、
ヘッダーにメニューボタンが現れます。

このボタンも消しておかなければメニューが2つになってしまいます。

外観⇒テーマの編集から Simplicity child ⇒スタイルシート (style.css)へ

/* モバイルメニュー非表示 */
#mobile-menu {
  display: none !important;
}

↑このように記述して下の「ファイルの更新」を押します。

お疲れ様でした。
これで「Max Mega Menu」のインストールと初期設定は完了です。

長くなったので次は、メニューへウィジェットを登録する方法と
タイトル前へのアイコン設置方法など実践的な使い方の解説をします。

記事はこちら

Max Mega Menuの使い方と応用とSticky Menuの設定

最後までご覧いただきありがとうございました。