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