多くのWordPressのモバイルメニューは、実際にスマホで確認するまでは問題ないように見えます。しかし、リンクがぎゅうぎゅうに詰め込まれていたり、ハンバーガーアイコンが展開しなかったり、あるいは小さな画面にデスクトップ用の10項目ものメニューが表示されたりすることがあります。
このガイドでは、その解決方法をご紹介します。ハンバーガーアイコンの有効化方法、モバイル画面での表示内容の制御方法、そして小さな画面用に別のメニューを設定する方法について解説します。また、モバイルメニューでよく見られる問題についても取り上げます。
WordPressでモバイルメニューを編集する方法
メニューに表示するリンクを変更したいですか？WordPressのメニューの編集方法をご覧ください。メニューのスタイルや色を変更したいですか？WordPressのメニューのカスタマイズ方法をご覧ください。
このガイドで紹介する最初の方法は、SeedProd を使用して完全に視覚的に操作するものです（SeedProd Pro が必要です）。2つ目の方法は、無料の Responsive Menu プラグインを使用します。以下のリンクをクリックして、ご希望の方法へ移動してください：
SeedProd ウェブサイトビルダーでモバイルメニューをカスタマイズする
私は自分のサイトでSeedProdを利用していますが、モバイル表示の設定機能は、私が最も頼りにしている機能の一つです。まずは、SeedProdを使って、コードを書かずに視覚的にモバイルメニューをカスタマイズ・編集する方法をご紹介します。
何百ものテンプレートがあらかじめ用意されており、ドラッグアンドドロップのインターフェイス、無数のデザイン要素により、WordPressページを簡単にカスタマイズすることができます。メニューがヘッダー、フッター、WordPressサイドバーにあろうとも、SeedProdのビルダーで簡単に編集することができます。
さらに、このプラグインの強力な表示オプションにより、モバイルまたはデスクトップ画面上で特定のデザイン要素を非表示にすることができます。その結果、ナビゲーションメニューを異なる画面サイズに合わせることができます。
ステップ1.SeedProdのインストールとアクティベート
始めるには、SeedProdのウェブサイトからプラグインをダウンロードする必要があります。SeedProdには無料版がありますが、ここではWordPressのテーマ構築機能を持つSeedProd Proを使用します。
注：Theme Builder をご利用いただくには、SeedProd Pro が必要です。SeedProd テーマを有効にすると、現在有効になっているテーマが置き換えられます。Theme Builder のダッシュボードから、いつでも元のテーマに戻すことができます。
ヘルプが必要な場合は、WordPressプラグインのインストールに関するガイドを参照してください。
有効化後、SeedProd " 設定に移動し、プラグインのライセンスキーを入力します。この情報はSeedProdアカウントダッシュボードのダウンロードセクションにあります。
キーを空欄に貼り付け、[Verify Key]ボタンをクリックしてライセンスを保存します。
ステップ2.テンプレートを選ぶ
次に、出発点として使用する既成のデザインを選択する必要があります。テーマビルダーでゼロから新しいWordPressテーマを作成するか、ランディングページビルダーで個別のページを作成することができます。
このガイドでは、Theme Builderを使用しますが、ランディングページを作りたい場合は、WordPressでランディングページを作成する方法のガイドに従ってください。
WordPressのテーマに既製のデザインを選択するには、WordPressのダッシュボードからSeedProd " Theme Builderに移動し、テーマテンプレートキットのボタンをクリックします。
1クリックでインストールできるSeedProdのウェブサイトテンプレートライブラリが開きます。
気に入ったテンプレートが見つかるまでデザインをスクロールし、チェックマークアイコンをクリックするだけでインポートできます。
ウェブサイトキットをインポートすると、テーマのすべてのテンプレートパーツがこのようなリストで表示されます：
これらは、あなたの完全なテーマを構成する個々のテンプレートであり、あなたはSeedProdのドラッグアンドドロップページビルダーでそれぞれのテンプレートをカスタマイズすることができます。
その方法を次に紹介しよう！超簡単で、HTMLやJquery、カスタムCSSコードを書く必要もありません。
ステップ3.ヘッダーテンプレートをカスタマイズする
編集したいWordPressのメニューはヘッダーにあるため、テンプレートの各パーツをスクロールして、ヘッダーのテンプレートを見つけます。その後、その上にカーソルを合わせ、「デザインを編集」リンクをクリックします。
開くと、右側にヘッダー、左側にWordPressブロックのライブプレビューがあるレイアウトが表示されます。どのブロックもプレビューにドラッグして、簡単にページに新しい要素を追加することができます。
ヘッダー内の要素をクリックすると、左側のサイドバーでそれらの設定を見ることができます。例えば、ロゴを選択すると、ロゴ画像とそのサイズ、配置、リンクを変更するオプションが開きます。
同様に、Nav Menuブロックをクリックすると、さまざまなメニュー設定が表示されます。
例えば、このブロックでは「シンプル」か「WordPressメニュー」のどちらかを選ぶことができます。
シンプルオプションではページビルダーのインターフェイス内に新しいメニュー項目を追加することができます。任意のページ、投稿、カテゴリ、タグ、外部ウェブページへのリンクを追加することができます。
これはメニュー構築へのシンプルなアプローチなので、ドロップダウンメニューを追加したり、すでに作ったカスタムメニューを選んだり、カスタムモバイルメニューを割り当てることはできません。
ただし、メニューの配置、フォントサイズ、間隔、仕切りをカスタマイズすることができます。さらに、Advancedタブでは、横型メニューと縦型メニューを選択でき、タイポグラフィ、背景色、ボーダー、CSSクラスなどをカスタマイズできます。
WordPress Menuオプションは、異なるアプローチを持っています。ドロップダウンから既存のメニューの場所を選択し、小さな画面サイズのためにモバイルナビゲーションメニューのトグルを有効にすることができます。
この設定を有効にしてモバイル表示に切り替えると、モバイルメニューに標準的なメニューリンクの代わりにハンバーガーアイコンが表示され、モバイルユーザー・エクスペリエンスにはるかに優れていることがわかります。
また、メニューレイアウトを編集するためのデフォルトのWordPressメニューページへのリンクもあります。シンプルメニューのように、アドバンスタブにはカスタマイズとアニメーションオプションがあり、シンプルメニューとは異なり、サブメニューのスタイリングオプションをカスタマイズすることができます。
ステップ4.ヘッダーの表示設定を編集する
ここまでで、あなたはメインメニューを編集し、モバイル画面用のハンバーガーメニューを有効にする方法を知っています。しかし、ヘッダー内に小さい画面で表示したくない要素がある場合はどうすればいいでしょうか？
良いニュースは、すべてのページ要素の可視性設定を編集し、異なる画面サイズでの表示を選択できることです。
ユーザーエクスペリエンスを損なうので、ヘッダーのコールトゥアクション（CTA）をモバイルデバイスでは非表示にしたいとします。その場合、そのブロックの詳細設定タブに行き、デバイスの可視性メニューの「モバイルで隠す」トグルをオンにすることができます。
モバイルビューでヘッダーをプレビューすると、ボタンがグレーアウトしていることがわかります。
モバイルメニューオプションのカスタマイズを続けます。その後、保存ボタンをクリックして変更を保存してください。
ステップ5.WordPressテーマのカスタマイズを続ける
モバイルメニューが正常に動作するようになったら、SeedProdのビルダーを使ってテーマの残りの部分をカスタマイズしましょう。同じダッシュボードから、フッターや ホームページ、その他のテンプレート部分を編集することができます。
ステップ6.変更を公開する
WordPressサイトに変更を反映させる準備ができたら、SeedProdテーマビルダーダッシュボードに戻り、「SeedProdテーマを有効にする」というトグルを探してください。このトグルを「はい」に切り替えるだけで、SeedProdテーマが有効になります。
これで、あなたのウェブサイトを訪問して、モバイルメニューが実際に表示されているのを見ることができます。
代替案無料のWordPressプラグインでモバイルメニューを編集する
モバイルメニューを編集するもう一つの方法は、WordPressのメニュープラグインを利用することです。例えば、これから紹介するプラグインを使えば、モバイル画面でスライドして表示されるハンバーガーメニューを作成できます。
まず、Responsive MenuWordPressプラグインをダウンロード、インストール、有効化する必要があります。
プラグインを有効にすると、WordPressの管理バーに「Responsive Menu」という新しいラベルが表示されます。これをクリックすると、新しいレスポンシブメニューを追加するためのメニュー画面に移動します。
新規メニュー作成ボタンをクリックしてください。デフォルト、エレクトリックブルー、フルワイドなど、さまざまなメニューテーマがポップアップで表示されます。
お好きなテーマを選び、「次へ」ボタンをクリックします。
メニューの名前を入力し、表示する既存のWordPressメニューを選択し、メニュー作成ボタンをクリックします。
これで、レスポンシブメニューのオプションを編集できるビジュアルインターフェイスが表示されます。さまざまな要素を表示したり非表示にしたり、モバイル対応の最小画面幅と最大幅を変更したりできます。
レスポンシブ・メニュー・プラグインには、メニューの動作と外観を変更するための、他の多くのモバイル・メニュー・オプションがあります。このページでそれらを調べ、必要に応じて調整することができます。
Update』ボタンをクリックして設定を保存することをお忘れなく。
そこから、あなたのウェブサイトにアクセスして、レスポンシブメニューの動作を確認することができます。
モバイルで別のメニューを表示する方法
現在、世界のウェブトラフィックの60％近くを携帯電話が占めていますが、ほとんどのWordPressサイトでは、どのデバイスでも同じメニューが表示されています。デスクトップでは通常のメニューを維持しつつ、モバイルではより簡潔なメニューを表示するように設定できます。
デスクトップメニューの項目が多すぎて、小さな画面では操作しにくい時に、これは本当に重宝します。
方法 1：テーマのモバイルメニューの位置を使用する。
一部のテーマでは、モバイル専用に別のメニュー配置を設定できます。
「外観」＞「メニュー」に移動し、簡略化した2つ目のメニューを作成して、「メニュー設定」＞「表示位置」でモバイル用の位置に割り当ててください。WordPressのメニューを編集する方法については、詳細な手順ガイドをご覧ください。
オプション 2：SeedProd のデバイス表示機能を使用する。
SeedProdテーマビルダーでヘッダーを開き、ナビゲーションメニューブロックを2つ追加します。
1つはデスクトップでのみ表示するように設定し、もう1つはモバイルでのみ表示するように設定します。各ブロックで異なるWordPressメニューを表示できるため、デバイスごとに個別に制御することができます。
設定するには、ナビゲーションメニューブロックをクリックし、「詳細」タブに移動して、「デバイスの表示設定」を使用します。これについては、上記のステップ4で説明しました。2つ目のメニューを作成した後、設定には約2分かかります。
方法3：Responsive Menuプラグインを使用する。無料のResponsive Menuプラグイン（上記の「別の方法」で説明したものです）を使用すると、画面サイズが小さい場合にのみ表示されるモバイル専用メニューを作成できます。既存のデスクトップ用メニューは変更されません。
モバイルメニューのよくあるトラブルの解決方法
モバイルメニューが正常に動作しないというお問い合わせを多くいただきます。ここでは、よくある問題とその解決方法をご紹介します。
iOSでハンバーガーアイコンが反応しない場合、通常はキャッシュプラグインが原因です。W3 Total Cache、WP Rocket、または使用しているプラグインでキャッシュを削除してから、スマートフォンで再度確認してください。
モバイル版のサブメニューが開かない。これはほとんどの場合、テーマとのJavaScriptの競合が原因です。一時的にWordPressのデフォルトテーマに切り替えてみてください。サブメニューが正常に動作する場合は、問題はテーマのJSファイルにあります。
保存してもメニューの変更が反映されません。キャッシュプラグインが古いバージョンのページを表示しています。キャッシュを削除し、ブラウザでハードリフレッシュを行ってください（Windowsの場合はCtrl+Shift+R、Macの場合はCmd+Shift+R）。
テーマの更新後にメニューが表示されなくなることがあります。テーマの更新により、メニューの配置設定がリセットされることがあります。「外観」＞「メニュー」に移動し、「メニュー設定」パネルを開いて、メニューを正しい表示位置に再設定してください。
WordPressでモバイルメニューを編集する際のFAQ
WordPressでモバイルメニューを編集する方法について、このガイドがお役に立てば幸いです。他にも以下のチュートリアルが参考になると思います：
お読みいただきありがとうございました！あなたのご意見をぜひお聞かせください。YouTube、X、Facebookで、あなたのビジネスを成長させるために役立つアドバイスやコンテンツを提供していますので、お気軽に会話にご参加ください。
