制作のご相談はこちら
no image

公開日 : 2021年12月16日

ワードプレスでハンバーガーメニューを簡単に導入できるおすすめのプラグイン【WP Responsive Menu】

スマホでハンバーガーメニューはもはや当たり前ですが、ワードプレスのテーマによってはハンバーガーメニューが用意されていないものもありますよね。

特に無料のテーマだとそこまで機能が備わっていないものも多いです。

この記事ではそんなハンバーガーメニューの無いテーマを利用している場合に便利なプラグイン「WP Responsive Menu」の導入方法をお届けします。

無料バージョンでも十分使える機能があるのでハンバーガーメニューを導入したい場合はおすすめです!

また、細かい問題にも対処してきたのでかゆいところに手が届く内容になっていると思います!

WP Responsive Menuをインストール

プラグインの新規追加から「WP Responsive Menu」をインストールして有効化しましょう。

WP Responsive Menuをインストールする

有効化すると、レフトナビに「WPR Menu」が追加されます。

導入はすごく簡単で、設定の「General」にある「Enable Responsive Menu」をONにすれば終わりです。

設定は簡単

その他細かい項目を設定していくことで独自のハンバーガーメニューを組み上げることができますので主な項目を見ていきましょう!

■General

Select Menuハンバーガーメニューとして表示可能な項目がプルダウンで表示されます
Element To Hide On MobileCSSのクラスを指定してテーマにデフォルトで備わっているメニューを非表示にすることができます
Search Box Placeholder検索窓の中にデフォルトで入れるテキストを指定できます
Menu Title Textメニューのタイトルテキストを指定します
Menu Bar Logoロゴ画像を指定します
Logo link / Title linkロゴやタイトルのリンク先を指定します
Open Submenu On Parent Click子カテゴリーがある場合、親カテゴリーのテキスト部分をクリックして表示させるかどうかを指定します

「Open Submenu On Parent Click」をONにすると、親カテゴリーのテキストリンクをタップしても親カテゴリーに遷移せず、子カテゴリーが表示されるだけになります!

親子どちらもタップできるようにしたい場合はこの機能をOFFにしましょう。

■Appearance

Appearanceでは細かい外観の設定をすることができます。

Menu Icon Animationメニューアイコンをタップした際の動きを指定します
Menu Slide Styleスライドかプッシュかを選択します
Menu Open Directionメニューを表示させる方向を指定します
「Menu Slide Style」で「Push Menu」を選択していると「Left」「Right」のみですが、「Slide Menu」を選択すると「Top」「Bottom」が追加されます

サイトの上部にヘッダーを固定表示させている状態で、「Menu Slide Style」を「Push Menu」にしていると一番上のカテゴリーがヘッダーとかぶって表示されない場合があります!

その場合、「Menu Slide Style」を「Slide Menu」にし、「Menu Open Direction」を「Top」か「Bottom」に変更すると解決するので試してみてください。

以上の設定を触れば使えるハンバーガーメニューになります。

あとはご自身のサイトに合わせて色やフォントサイズを調整してみてください。

まとめ

わたしの場合、ハンバーガーメニューのアイコンは右側にしてます。

世の中右利きの人が多いためです。

一方で、ハンバーガーメニューのアイコンは右側ですが、メニュー表示は左側です。

これは子カテゴリーも開きやすいよう、親カテゴリーの右端にある矢印ボタンを押しやすくするためです。

下記画像のように「WP Responsive Menu」では子カテゴリーを表示させる矢印がメニューの右端に入ります。

メニューは左側の方が子カテゴリーを表示させやすい

なので、メニュー表示は左側にした方がタップしやすく、使いやすくなります!

ぜひ参考にしてみてください。

以上!ハンバーガーメニュー導入時におすすめのプラグイン「WP Responsive Menu」のご紹介でした。