WordPressのテンプレートはいまだスマホの固定のヘッダーメニューに対応していないものが多いです。
そのため、jqueryのsliderなどが有名で個人的にも利用していましたが、 もっとお手軽にプラグインで実装できないのかを調べたところ意外といろいろな方法がありましたのでまとめておきます。 全部実際に軽く使ってみましたよ。
(追記)その後、メニュー系のプラグインはサブスクのサービスが多くなりましたね。メニュー系のプラグインだけにサブスクは少しきついですね。でも、買い切りの有料テーマ、Swellで簡単にできました。
Contents
WordPressでスマホの固定メニューを作れるWordPressのテーマ!
SWELL
UIもそれなりによく、ブロックエディターにこだわりをもたれて開発されているようです。Swellを買って使っています。
- 固定メニューも対応しています。
- ボックスナビとあわせて使うとアイコンつきボックスをスマホの中にいれられます。
- CSSだけで結構カスタマイズもできました。
- シンプルなデザインですが、使いやすいものなので、ある程度デザインがすぐに整います。
- 人気記事などは正方形のデザインも可能です。
- 利用者が多くて情報が豊富です。
- 複数サイト使えて買い切りです。
次のような高い機能性をもっています。
- 高速化の機能がついています。
- 波の映像が印象的ですが、トップページは動画をいれこんだり、画像のスライダーをつけたりも簡単にできます。
- PC・スマホともに固定バーにできます。
WordPressのテーマの比較はこちらです。
スマホメニューの固定サンプルはこちらのサイトです。
WordPressでスマホのヘッダーメニューを固定するプラグインまとめ
WordPress Responsive Menu Pluginの特徴と使い方
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 Mobile Menu – The Mobile-Friendly Responsive Menu
ダウンロード数は多いようですが、プレミアム機能はサブスクのようです。
プレミアムの内容を確認しましたが、プレミアムにしないときついな感じました。
評価は高いようですが、プレミアム機能はサブスクのようです。
結局、SWELLをカスタマイズすることにしました。
サンプルはこちらです。
SlickNav Mobile Menu — WordPress Plugins
スマホで表示しても固定されたままです。たまにPCでスマホサイズにして見ると固定されているけど、実際、スマホで動作確認をすると固定されないプラグインがあるので、要注意です。
特徴は次のとおりです。
- メニューは上部から開きます。
- メニューを開いたとき、サブメニューを閉じておくか、開いておくか選べます。
- メニューのボタンは左右どちらにもおけます。
- 色変更
使い方はslickNav mobile menu nameにスマホで表示したいメニューのidを入れます。 ソースを見ると、ナビのulのところにidが書いてありますから、そのidを入れればoKのようです。あとはインストールしてみれば、すぐわかるでしょう。
デメリットは検索ボックスがメニューの中にはおけるのですが、上部のヘッダーメニューの上にはおけません。そのため個人的にはスルーしました。細かいことですが、メニューを開いたとき、背景が固定されません。
無料なのでいまいちでコードを書き足すといいかもしれません。
Subversion Repositoryが公開されているようです(意味がわからん人はスルーしてください。)
WP Responsive Menuの特徴と使い方
WP Responsive Menu – Mobile Menu Plugin For WordPress – MagniGenie
WP Responsive Menu — WordPress Plugins
(追記)2回ほど有料版を購入しました。ものはよく買い切りですが、ネックなのがライセンスが1年です。1年後に管理画面に入ると、ダウンロードできなくなっていました…。
結局、SWELLをカスタマイズすることにしました。
サンプルはこちらです。
無料版はなんか物足りなかったのですが、WP Responsive Menu proの有料版はいいですね。 プロ版の使い方の動画があります。
無料版と有料版は完全に別れています。購入ののち、ダウンロードする形式です。
細かい点は動画を見てもらった方がいいですが、プラグインを有効化したのちセーブすれば固定メニューが表示されます。あとは設定メニューをみて設定すればOKです。
無料版はかなりの機能が削られていて、メニューや項目自体がないです。 グレーになっておらず、丸々削られているので、ちょっと差がわかりにくいですけどね。 上記の動画と見比べて確認しましたね。。
まとめると次のような感じです。
- スマホでも固定されたままです。
- 検索ボックスの位置はメニューの上、メニューないの上と下など選べます。
- 階層化されたサブメニューが開いた状態と閉じた状態を選べます。
- 色の変更も可能です。
- メニュー内にソーシャルアイコンがおけます。
- 関係者じゃないですけど、お値段も別に高くないのでいいかもと。というか結局、このpro版が1番気に入って買いました。
- (追記です。昔はサイト制限がなく15ドルですごくお買い得だったのですけど値上げしてしまったようです。。まあ、昔は安すぎた気もしますし、あとはご判断くださいませ。。)
使い方でちょっとわかりくいところだけ書いておきます。
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のテーマ自体がこうしたメニューを実装しているものもありますが、 プラグインの方がテーマを選ばず、自由に使えるため便利なのですよね。
WordPressでスマホのメニューバー表示を削除する
固定メニューを追加することにより、もともとあったスマホのメニューが邪魔になることが多々あります。その場合、メニューを削除する必要があり、下記のようなコードになります。
@media only screen and (max-width: 1024px) {
#main-header {
display: none;
}
}#main-headerの部分はテーマにより違うため、コードをみる必要がありますが、わりと簡単に見つかると思いますね。max-widthもテーマのcssを見るといくつで切り替えればいいのがすぐわかります。
コメント