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

この記事は2021年12月16日に書かれたもので、内容が古い可能性がありますのでご注意ください。

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

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

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

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

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

WP Responsive Menuをインストール

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

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

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

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

Select Menu	ハンバーガーメニューとして表示可能な項目がプルダウンで表示されます
Element To Hide On Mobile	CSSのクラスを指定してテーマにデフォルトで備わっているメニューを非表示にすることができます
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では細かい外観の設定をすることができます。

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」のご紹介でした。