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

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

WordPress Avada テーマモバイルナビゲーション
Avada テーマには、モバイル用のナビゲーションを設定することができる。

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

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

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

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

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

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

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

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

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

上部に新しいメニューが生じたが見ることができます。 ところが、少し問題がありますね。 既存のメニューがそのままね。 これモバイルで取り除く必要があります。 方法は、CSSからも可能ですが、WP Responsive Menuプラグインの設定で可能です。 その方法を見てみましょう。
モバイルで WordPress メニューを非表示に
上記のように要素の検査を実施して、メニューに適用される要素を確認します。 この場合、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を使用して取り除くか、適当に調整すれば良いです。)メニューの横のアイコンをクリックしてみると、モバイルメニュー plugin for WordPress
上記のように表示されます。 ここデフォルトのレイアウトを変えなかったが、 Menu Appearanceで、メニューアイコン(ロゴ)、色などを調整すると、サイトの雰囲気に合わせて演出が可能です。

最後に、

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

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

メモ:

一部の記事にはアフィリエイトリンクが含まれている場合があり、パートナーの活動で一定額の手数料を受け取ることがあります。

9のコメント

  1. もしかしたら GeneratePress テーマサブメニューの背景色を適用したいのですが、要素名を知っていますか?開発者ツールを見てもわかりませんね。

      1. 祝日の連休にはお疲れ様です。日々が発展しているようですね。
        有料版を使えば簡単にカラー設定が可能です😁😁😁

        家族や友人と楽しく、幸せな休日の休日をお過ごしください。

  2. https://iwordpower.com/

    上記のサイトのメニューの色がデスクトップとモバイルが異なるように見えますが、CSSコードで実装されていませんか、プラグインを使用していますか?

      1. GeneratePress 有料版では、デスクトップとモバイルのメニュー色を異なるように設定できますか?

  3. こんにちは。

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

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

      #td-top-mobile-toggle

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

コメントを残す

*メールアドレスは公開されません。