Wordpressのレスポンシブメニューを置換・追加できるプラグイン「WP Responsive Menu」

ウェブサイトを作成する際、今や「レスポンシブデザイン」は必須ですよね。
Wordpressであれば、テーマがレスポンシブに対応していることが多いので、作るだけで自動的にモバイル用の表示も出来ちゃったりします。

ただ「メニュー」の表示に関しては、テーマによっては使い勝手が良くなかったり、デザインの融通が利かなくて困ることも。

そんな時にお世話になったのが、今回紹介するプラグイン「WP Responsive Menu」。
レスポンシブメニューの無いテーマにメニューを表示させられるのは勿論のこと、既存のメニューと置き換えて使うこともできる優れものなんです。

インストールと有効化

WordPressの管理画面から「プラグイン＞新規追加」を開き、「WP Responsive Menu」と検索して「今すぐインストール＞有効化」します。

有効化すると、管理画面のメニューに「WPR Menu」という項目が追加されているのでクリックします。

するとメニューの設定画面が表示されます。
右端にある「Show Live Preview」をクリックすると、モバイルでのメニューの表示を確認しながらカスタマイズすることができるので便利です。

設定画面を開くと、デフォルトで「Enable Responsive Menu（レスポンシブメニューを有効にする）」がオンになっていると思います。

まずは、どのメニューを使用するかを決めます。
Wordpressの「外観＞メニュー」で既にメニューを作成済みであれば、「Select Menu」にメニュー名が表示されているので選択するだけです。
選択したものが緑色になります。

選択したら、画面の一番下にある「Save Options」をクリックして保存します。

さて、この時点でプレビューを見てみると…

「WP Responsive Menu」のメニューと、元々のテーマのメニューが両方表示されてしまっています。
なので、これを見えなくしてしまいましょう。

「Select Menu」のすぐ下に、「Elements To Hide On Mobile」という項目があります。
ここに、非表示にしたいメニューの「クラス名」または「ID名」を入力します。

この名前はテーマによって異なりますので、テーマのスタイルシートを確認するなどして、消したいメニュー名を探しましょう。
入力したら「Save Options」をクリックして保存します。

そしてプレビューを確認すると、元のメニューが消えて「WP Responsive Menu」のメニューだけになりました！

このままではメニューの色が真っ赤で見栄えがよくないので、サイトに合わせてカスタマイズしましょう。
「Color」タブで、好きな色に変更することが出来ます。

その他「General」タブでは、メニュータイトルを変更したりロゴ画像にしたりといった設定も可能。

＜主な設定項目＞

「Appearance」タブでは、メニューの表示方法をスライド式にするかプッシュ式にするかといった設定や、外観の細かな修正ができます。

＜主な設定項目＞