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

FacebookさえずりredditPinterestのLinkedInのmail

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

ワードプレスああ海のテーマモバイルナビゲーション
ああ、海のテーマは、モバイル用のナビゲーションを設定することができる。

ワードプレスモバイルメニューのプラグインWP Responsive Menu

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

ワードプレスモバイルメニューのプラグイン

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

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

インストールした後伝言板に WPR Menuという新しい項目が追加されます。WPR Menu  - ワードプレスのモバイルメニューのプラグイン

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

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

今メニューがどのように変わったか見てみましょう?
敏感な WordPresss menu

上部に新しいメニューが生じたが見ることができます。 ところが、少し問題がありますね。 既存のメニューがそのままね。 これモバイルで取り除く必要があります。 方法は、CSSからも可能ですが、WP Responsive Menuプラグインの設定で可能です。 その方法を見てみましょう。
モバイルでワードプレスのメニューを非表示に
上記のように要素の検査を実施して、メニューに適用される要素を確認します。 この場合、menu-menu-1-containerクラスですね。 (menu-menu-1 IDも関係ありません。)これにより、この要素を 一般的な設定に入力します。
Element to hide in Mobile Device

上の画面で Elements to hide in mobile: 下の入力窓に.menu-menu-1-container(または#menu-menu-1も無関係)を入力して保存します。 また携帯電話の画面をみましょう。
Responsive Moible Menu Plugin in WordPress Final screen
今、前のメニューがなくなったが見ることができます。 (前のメニューの横にあった検索ボックス部分は消えていない。CSSを使用して取り除くか、適当に調整すれば良いです。)メニューの横のアイコンをクリックしてみると、Mobile Menu plugin for WordPress
上記のように表示されます。 ここデフォルトのレイアウトを変えなかったが、 Menu Appearanceで、メニューアイコン(ロゴ)、色などを調整すると、サイトの雰囲気に合わせて演出が可能です。

おわりに

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

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

注:



2のコメント

  1. こんにちは。

    Newspaper テーマで要素の値が何でしょう?...
    いくら調べて適用しても分かりません。ㅜㅜ

    応答
    • WordPress Newspaper テーマの場合は、次の要素を追加して、テストしてみてください?

      #td-top-mobile-toggle

      テストをしてみていないため正常に動作するかは分かりません。 うまくいかない場合お知らせいただければ、時間になると、テストしてみましょう。

      応答

コメントを残す