前回に続いて、
今回は「Max Mega Menu」へウィジェットやボタン、アイコンを登録してみましょう。
インストールと初期設定についてはこちら
「Max Mega Menu」へウィジェットを挿入
何のウィジェットをメニューバーに組み込めば便利だろう？
と、訪問者視点で考えてみると一番便利なのが「検索」じゃないかな？と思います。
私自身、気に入ったブログでは「こんな話題に触れてないかな？」とサイト内検索をよくするので。(^^)
では、検索バーから順番にやってみます。
でも、その前に！
「Max Mega Menu」の設定で気を付けること
外観⇒ウィジェットを開きMax Mega Menuのウィジェットをみると
Do not manually edit this area.（手動でこのエリアを編集しないでください。）
と書かれています。
↑ここからはドラッグ＆ドロップなどでウィジェットを入れないようにして下さい。
検索ウィジェットの挿入
まずは投稿⇒カテゴリーから新規カテゴリーを追加します。
名前に分かりやすいように「検索」
スラッグは英字で「search」
親は 「なし」
↑
これで下の新規カテゴリーを追加ボタンをクリック。
次に、外観⇒メニューを開きます。
カテゴリーをドロップダウン表示させて、先ほど作った空のカテゴリー「検索」に チェックを入れてメニューに追加をクリック。
（画像では説明用に作ったため「検索2」となっています）
追加すると右側のメニュー構造にリストとして現れます。
移動ツールで設置したい階層へ移動し、右下のメニューを保存をクリック。
保存すると項目をマウスオーバーすることでMega Menuボタンが出現するのでクリック。
Mega Menu 設定
開いた設定ウィンドウの説明です。
1. ここでメニュー項目の設定をします。
2. を入れます。
3. ドロップダウンすると自分の登録してるウィジェットがリストされるので「検索」を選択。
4. 1つしか登録しない場合でもカラム数で横幅を決めることができます。
General Settings
次に一般設定の項目です。
1. メニュータイトルを隠します。
2. 矢印を隠します。
3. リンクを無効にします。
4. メニューの揃え方。
5. サブメニューの揃え方。
私のメニューの場合は、項目が多すぎて④をleftとしてますが、項目が少ない場合は、検索だけ右寄せのRightを選択してもいいと思います。
変更を保存をクリック。
Menu Iconの選択
メニュータイトル前にアイコンを選択して設置することができます。
↑でHide Textに を入れた場合はタイトルがアイコンだけの表示にすることができます。
検索なので虫眼鏡を選択。
こんな風にアイコンだけのメニューボタンができました。
マウスオーバーすると↓このように現れます。
リンクの挿入
私のメニューにはボタンでメールフォームへのリンクをはっています。
メールでなくとも、SNS等の自分のページへリンクを貼りたい方もいると思います。
その場合は、外観⇒メニューからリンクを選択して下さい。
↑リンクさせたいURLとリンクテキストを入力してメニューに追加をクリック。
あとは、上記の「検索」と同じように進みますが、
Mega Menu 設定では、ウィジェットは選択しないで下さい。
General Settingsでは、Disable Linkのチェックを外します。
変更を保存をクリックして、次のMenu Iconの選択で好きなアイコンを選択すれば完了です。
私の使ってるメールフォーム
応用編
その他のものを追加したい場合。
私のように海外からの訪問を想定して翻訳を入れたい場合は、
プラグインの追加から翻訳を有効化することで、Mega-Menuから選択が可能になります。
私が追加したのはGoogle Website Translator です。
（古いプラグインばかりで選択肢が少なかったので他にお薦めがあれば教えて下さいね。）
外部からのもの、例えばiframeなどを設置したい場合は、
テキスト・ウィジェットを選択してコードを入れることで可能だと思います。
（まだ私は試してませんが）
他にもImage Widget などを追加することでドロップダウンで写真ギャラリーを表示することもできます。
禁断の技（自己責任で！）
Max Mega Menuには、このフリー版とは別に有料のPro版があります。
個人だと１サイト19ドル。
機能もかなり増えて魅力的ですが、フリー版で充分だと思います。
「Sticky Menu」について
Pro版での機能の1つに「Sticky Menu」といってページをスクロールするとメニューバーが最上部に来たときに固定される機能があります。
ブログでは、この機能が付いたテンプレートを使用していたこともあり、このブログにもすぐにカスタマイズして設置したのですが、ある記事を読んですぐにやめました。
ドロップダウン式の「Sticky Menu」はアドセンス規約違反！
ページをスクロールしててアドセンス広告が表示されてる上で、上部に固定されたメニューからサブメニューがドロップダウンされると誤クリックを誘発する恐れがある。
実際に質問した人へのアドセンス側からの解答は、
「見つけたら通報して下さい」と言ったそうなので恐ろしくて使えません。(^^;)
なので「アドセンスはしてないよ～」とか「ドロップダウンじゃないから大丈夫？」という方のみへ自己責任で設置方法を解説します。
（Max Mega Menuでドロップダウンさせない人はいないかな・・？）
Sticky Menu の設定方法
参考になったサイトです。
JavaScript – CSSとJSで、スクロールして一定の場所を過ぎると、上部固定するメニューを作る – Qiita
テーマによってIDやclass名が違ってますが
Simplicityの場合で解説すると子テーマのcssへ以下を記述します。
（必ずバックアップをとってからして下さい）
/* Sticky Menu */
header {
height: 100px;
}
.fixed {
position: fixed;
top: 0;
z-index: 1;
}
#navi {
width: 100%;
}
3行目のheight: 100pxはご自分のブログのヘッダーの高さに合わせて下さい。
続いて、サーバーのSimplicity childフォルダ内の「javascript.js」を開き以下を記述します。
jQuery(function() {
var nav = jQuery('#navi');
// メニューのtop座標を取得する
var offsetTop = nav.offset().top;
var floatMenu = function() {
// スクロール位置がメニューのtop座標を超えたら固定にする
if (jQuery(window).scrollTop() > offsetTop) {
nav.addClass('fixed');
} else {
nav.removeClass('fixed');
}
}
jQuery(window).scroll(floatMenu);
jQuery('body').bind('touchmove', floatMenu);
});
２行目の#naviの部分を、ご自身のメニューのIDへ変更して下さい。
Simplicityはこのままで大丈夫です。
以上の２つをコピペするだけで、メニューをスクロールしてみると上部でメニューバーが固定されたと思います。
これってスマホでは本当に便利な機能なので私も使い続けたいけど、アドセンスをしてるので残念でした。(T_T)
どなたか、メニューをホバーした時だけアドセンスがクリックできなくなるJSを作って下さ～い。
以上！お疲れ様でした♪(^^)/