簡単にスマホのヘッダーメニューを固定するWordPressのプラグインまとめ

シェアする

wordpress001

WordPressのテンプレートはいまだスマホの固定のヘッダーメニューに対応していないものが多いです。

そのため、jqueryのsliderなどが有名で個人的にも利用していましたが、 もっとお手軽にプラグインで実装できないのかを調べたところ意外といろいろな方法がありましたのでまとめておきます。 全部実際に軽く使ってみましたよ。

SlickNav Mobile Menuの特徴と使い方

SlickNav Mobile Menu — WordPress Plugins

SlickNav Mobile Menu — WordPress Plugins

スマホで表示しても固定されたままです。たまにPCでスマホサイズにして見ると固定されているけど、実際、スマホで動作確認をすると固定されないプラグインがあるので、要注意です。

特徴は次のとおりです。

  • メニューは上部から開きます。
  • メニューを開いたとき、サブメニューを閉じておくか、開いておくか選べます。
  • メニューのボタンは左右どちらにもおけます。
  • 色変更

使い方はslickNav mobile menu nameにスマホで表示したいメニューのidを入れます。 ソースを見ると、ナビのulのところにidが書いてありますから、そのidを入れればoKのようです。あとはインストールしてみれば、すぐわかるでしょう。

デメリットは検索ボックスがメニューの中にはおけるのですが、上部のメニューの上にはおけません。そのため個人的にはスルーしました。
細かいことですが、メニューを開いたとき、背景が固定されません。コードを書き足すといいかもしれません。

Subversion Repositoryが公開されているようです(意味がわからん人はスルーしてください。)

スポンサーリンク

電子書籍のおすすめ比較

WordPress Responsive Menu Pluginの特徴と使い方

Responsive Menu — WordPress Plugins

Responsive Menu — WordPress Plugins

インストール数は1番のようです。

デメリットはメニュー内にソーシャルアイコンがありません。
検索ボックスがトップメニューおけないようです。メニュー内の1番上と1番下におけます。

使い方はプラグインをオンしてブラウザで幅を狭くすればメニューアイコンが表示されます。アイコンが表示されない場合は、おそらくテーマが干渉しているはず。実際うまく表示されないテーマがありました。 別テーマや別ドメインで試すとよいかもしれません。

他は以下のようになります。

  • Look & Feel > Fixed Positioningでまずメニューを固定にします。
  • テキストの入力欄があり、アイコンとテキストをあわせて表示できます。
  • Click Button Title Positionで上下左右どこにでもテキストを配置できるなど細かい設定に配慮があります。
  • Look & Feel > Slide Sideでメニューがでる位置を決められます。
  • Advanced Setting > Auto Expand Sub-Menusでサブメニューを開いたままにできます。
  • 他、細かい設定が山ほどあります。
  • Header Bar & Themes [PRO] にロゴを設定する項目がありますが、プロ版でないと利用できません。
  • プロ版にしないと利用できない項目もかなりありますね。
  • 料金はWP Responsive Menuとほぼ同じです。こちらはシングルサイトのライセンスがお気軽に試せます。
スポンサーリンク

WP Responsive Menuの特徴と使い方

WP Responsive Menu - Mobile Menu Plugin For WordPress - MagniGenie

WP Responsive Menu – Mobile Menu Plugin For WordPress – MagniGenie

WP Responsive Menu — WordPress Plugins

無料版はなんか物足りなかったのですが、WP Responsive Menu proの有料版はいいですね。 プロ版の使い方の動画があります。

無料版と有料版は完全に別れています。購入ののち、ダウンロードする形式です。

細かい点は動画を見てもらった方がいいですが、プラグインを有効化したのちセーブすれば固定メニューが表示されます。あとは設定メニューをみて設定すればOKです。

無料版はかなりの機能が削られていて、メニューや項目自体がないです。 グレーになっておらず、丸々削られているので、ちょっと差がわかりにくいですけどね。 上記の動画と見比べて確認しましたね。。

まとめると次のような感じです。

  • スマホでも固定されたままです。
  • 検索ボックスの位置はメニューの上、メニューないの上と下など選べます。
  • サブメニューが開いた状態と閉じた状態を選べます。
  • 色の変更も可能です。
  • メニュー内にソーシャルアイコンがおけます。
  • 関係者じゃないですけど、お値段も別に高くないのでいいかもと。というか結局、このpro版が1番気に入って買いました。

使い方でちょっとわかりくいところだけ書いておきます。

Search icon colorはメニューのアイコンではなく、検索ボックスのアイコンのカラーです。

メニューアイコンも個別に指定することになっているため、テキストカラーを変更した際に一緒に色が変わらなくても焦らないようにしましょう。メニューにある検索アイコンはテキストカラーと一緒です、

Menu borders(bottom) colorはEnable borders for menu itemsがNOになっている場合、表示されない線になります。
Menu borders(top & left) colorでメニュー内の輪郭線の色を変更します。

少し名前を付け方がよくないかもしれません。。あとは見ればすぐわかるのではないですかね。

ちなみにロゴをセンタリングしたいときはこうです。

/* 固定メニューのプラグイン */
#wprmenu_bar{
	text-align: center !important;
}

アイコンの隣にメニューのテキストをだすと、それまでセンタリングされてしまいます。その場合はもっと複雑なコードを書く必要があります。

動画を見ているとき、この人はどこの人となのだろうと思ったのですけど、インド人みたいですね。ちょっとカスタマイズする際に根深い問題があり、Skypeでサポートしてもらったことがあります。

あと、細かいことですが、メニューが開くとき上にのっかるのではなく、スライドしてずれます。個人的にこのあたりの仕様は気になっていたため、嬉しいですね。

スライドしてずれるのではなく、上にのるメニューはアドセンスなんかに重なるのですよね。アドセンスは上にのっけるのはダメとかいっていますよね。プラグインを選ぶときはこのあたりまで配慮したいですよね。

WordPressのテーマ自体がこうしたメニューを実装しているものもありますが、 プラグインの方がテーマを選ばず、自由に使えるため便利なのですよね。

スマホのメニューバー表示を削除する。

固定メニューを追加することにより、もともとあったスマホのメニューが邪魔になることが多々あります。その場合、メニューを削除する必要があり、下記のようなコードになります。

@media only screen and (max-width: 1024px) {
	#main-header {
		display: none;
	}
}

#main-headerの部分はテーマにより違うため、コードをみる必要がありますが、わりと簡単に見つかると思いますね。max-widthもテーマのcssを見るといくつで切り替えればいいのがすぐわかります。

スポンサーリンク

シェアする

フォローする

スポンサーリンク