簡単にプラグインでスマホのメニューを上部固定する方法まとめ

シェアする

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の有料版はいいですね。 プロ版の使い方の動画があります。

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

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

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

動画を見ているとき、この人はどこの人となのだろうと思ったのですけど、インド人みたいですね。

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

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

スポンサーリンク

シェアする

フォローする

スポンサーリンク