WordPressモバイル用のメニューを追加する（WP Responsive Menu）

최근 WordPress テーマは、ほとんど反応型で製作されて出てきており、携帯電話用のメニューも追加されている場合があります。 モバイル機器のメニューが好きなように表示されない反応型でない場合 WordPress モバイル用のメニュー追加のプラグインを使用することができます。

WordPress モバイルメニュープラグインWP Responsive Menu

WP Responsive Menuというプラグインを使用して、モバイル用のメニューを追加することができます。

上のスクリーンショットは、Vantageというテーマを、モバイル機器から見たときの様子です。 反応型のな気だが、メニューが多くなる場合は、上記の図のようにあまり例が良くないですね。

WP Responsive Menuプラグインを使用して、モバイルでは、上記のメニューを新しい反応型メニューに置き換えてみましょう。 まず、 WP Responsive Menuプラグインをインストールします。

インストールした後伝言板に WPR Menuという新しい項目が追加されます。

Genearl Settings [一般設定] タブでは、モバイル機器に表示されるメニューを選択します（下の図で、（2））。

Menu Appearance [メニューの外観]で各種設定を変更することができます。

今メニューがどのように変わったか見てみましょう？

上部に新しいメニューが生じたが見ることができます。 ところが、少し問題がありますね。 既存のメニューがそのままね。 これモバイルで取り除く必要があります。 方法は、CSSからも可能ですが、WP Responsive Menuプラグインの設定で可能です。 その方法を見てみましょう。

上記のように要素の検査を実施して、メニューに適用される要素を確認します。 この場合、menu-menu-1-containerクラスですね。 （menu-menu-1 IDも関係ありません。）これにより、この要素を 基本設定に入力します。

上の画面で Elements to hide in mobile： 下の入力窓に.menu-menu-1-container（または＃menu-menu-1も無関係）を入力して保存します。 また携帯電話の画面をみましょう。

今、前のメニューがなくなったが見ることができます。 （前のメニューの横にあった検索ボックス部分は消えていない。CSSを使用して取り除くか、適当に調整すれば良いです。）メニューの横のアイコンをクリックしてみると、
上記のように表示されます。 ここデフォルトのレイアウトを変えなかったが、 Menu Appearanceで、メニューアイコン（ロゴ）、色などを調整すると、サイトの雰囲気に合わせて演出が可能です。

最後に、

以上にテーマで、モバイル用のメニューを提供していない場合に使用することができます WordPress プラグインについて説明しました。

メニューを作成するときにも複雑に作らずに必要なメニュー項目だけを追加することをお勧めします。 SEOに有利なメニューには、次の記事を参考にご覧にください。

• SEO（検索エンジン最適化）に有益なウェブサイトのメニュー構造

メモ：

• WordPress 目次生成プラグインFixed TOC