WordPressでモバイルメニューを編集したいですか？わかりやすく、速く、使いやすいモバイルメニューは、訪問者がサイトを閲覧しやすくなり、SEO対策にもなります。
このガイドでは、WordPressのモバイルメニューを編集する2つの簡単な方法を紹介する。1つ目はSeedProdを使ってフルカスタマイズする方法、2つ目は無料のオプションで機能が少ない方法です。
なぜWordPressでモバイルメニューを編集するのか？
WordPressのモバイルメニューの編集とカスタマイズは、以下の理由から重要です：
- ユーザー体験の向上：モバイルユーザーはデスクトップユーザーとは異なるニーズや習慣を持っています。モバイルメニューをカスタマイズすることで、それぞれのニーズに合ったユーザーフレンドリーな体験を作り出すことができます。
- ウェブサイトのロード時間の短縮：モバイルデバイス用に最適化されたメニューは、ページのロード時間を短縮することができます。
- より良いナビゲーション：優れたデザインのモバイルメニューは、ユーザーがウェブサイトで必要なものを見つけやすくし、エンゲージメントとコンバージョン率の向上につながります。
- モバイルファーストインデックス：Googleはモバイルファーストインデックスシステムを採用しており、ウェブサイトはモバイル版に基づいてランク付けされます。優れたデザインのモバイルメニューは、検索エンジンでのウェブサイトのランキングを向上させるのに役立ちます。
全体として、WordPressのモバイルメニューを編集することは、モバイル訪問者のために最適化し、ユーザーエクスペリエンスを向上させ、エンゲージメント、コンバージョン率、SEOを向上させるために不可欠です。
WordPressでモバイルメニューを編集する方法
このガイドでは、WordPressウェブサイトのモバイルメニューを編集する2つの異なる方法を紹介します。
最初の方法では、メニューを完全にカスタマイズし、デスクトップまたはモバイル画面上で特定の要素を表示または非表示にすることができます。しかし、別の方法は、カスタマイズオプションが少ない無料のソリューションです。
以下のリンクのいずれかをクリックして、ご希望の方法をお選びください：
始めよう！
SeedProdページビルダーでモバイルメニューをカスタマイズする
手始めに、ページビルダー・プラグインを使って、コードなしで視覚的にモバイルメニューをカスタマイズ・編集してみましょう。これには、最高のWordPressウェブサイトとランディングページビルダーであるSeedProdを使用します。
何百ものテンプレートがあらかじめ用意されており、ドラッグアンドドロップのインターフェイス、無数のデザイン要素により、WordPressページを簡単にカスタマイズすることができます。メニューがヘッダー、フッター、WordPressサイドバーにあろうとも、SeedProdのビルダーで簡単に編集することができます。
さらに、このプラグインの強力な表示オプションにより、モバイルまたはデスクトップ画面上で特定のデザイン要素を非表示にすることができます。その結果、ナビゲーションメニューを異なる画面サイズに合わせることができます。
ステップ1.SeedProdのインストールとアクティベート
始めるには、SeedProdのウェブサイトからプラグインをダウンロードする必要があります。SeedProdには無料版がありますが、ここではWordPressのテーマ構築機能を持つSeedProd Proを使用します。
ヘルプが必要な場合は、WordPressプラグインのインストールに関するガイドを参照してください。
有効化後、SeedProd " 設定に移動し、プラグインのライセンスキーを入力します。この情報はSeedProdアカウントダッシュボードのダウンロードセクションにあります。
キーを空欄に貼り付け、[Verify Key]ボタンをクリックしてライセンスを保存します。
ステップ2.テンプレートを選ぶ
次に、出発点として使用する既成のデザインを選択する必要があります。テーマビルダーでゼロから新しいWordPressテーマを作成するか、ランディングページビルダーで個別のページを作成することができます。
このガイドでは、Theme Builderを使用しますが、ランディングページを作りたい場合は、WordPressでランディングページを作成する方法のガイドに従ってください。
WordPressのテーマに既製のデザインを選択するには、WordPressのダッシュボードからSeedProd " Theme Builderに移動し、テーマテンプレートキットのボタンをクリックします。
1クリックでインストールできるSeedProdのウェブサイトテンプレートライブラリが開きます。
気に入ったテンプレートが見つかるまでデザインをスクロールし、チェックマークアイコンをクリックするだけでインポートできます。
ウェブサイトキットをインポートすると、テーマのすべてのテンプレートパーツがこのようなリストで表示されます：
これらは、あなたの完全なテーマを構成する個々のテンプレートであり、あなたはSeedProdのドラッグアンドドロップページビルダーでそれぞれのテンプレートをカスタマイズすることができます。
その方法を次に紹介しよう！超簡単で、HTMLやJquery、カスタムCSSコードを書く必要もありません。
ステップ3.ヘッダーテンプレートをカスタマイズする
編集したいWordPressメニューはヘッダーにあるので、ヘッダーテンプレートを見つけるまでテンプレートパーツをスクロールする。そして、そのテンプレートにカーソルを合わせ、「Edit Design」リンクをクリックする。
開くと、右側にヘッダー、左側にWordPressブロックのライブプレビューがあるレイアウトが表示されます。どのブロックもプレビューにドラッグして、簡単にページに新しい要素を追加することができます。
ヘッダー内の要素をクリックすると、左側のサイドバーでそれらの設定を見ることができます。例えば、ロゴを選択すると、ロゴ画像とそのサイズ、配置、リンクを変更するオプションが開きます。
同様に、Nav Menuブロックをクリックすると、さまざまなメニュー設定が表示されます。
例えば、このブロックでは「シンプル」か「WordPressメニュー」のどちらかを選ぶことができます。
シンプルオプションではページビルダーのインターフェイス内に新しいメニュー項目を追加することができます。任意のページ、投稿、カテゴリ、タグ、外部ウェブページへのリンクを追加することができます。
これはメニュー構築へのシンプルなアプローチなので、ドロップダウンメニューを追加したり、すでに作ったカスタムメニューを選んだり、カスタムモバイルメニューを割り当てることはできません。
ただし、メニューの配置、フォントサイズ、間隔、仕切りをカスタマイズすることができます。さらに、Advancedタブでは、横型メニューと縦型メニューを選択でき、タイポグラフィ、背景色、ボーダー、CSSクラスなどをカスタマイズできます。
WordPress Menuオプションは、異なるアプローチを持っています。ドロップダウンから既存のメニューの場所を選択し、小さな画面サイズのためにモバイルナビゲーションメニューのトグルを有効にすることができます。
この設定を有効にしてモバイル表示に切り替えると、モバイルメニューに標準的なメニューリンクの代わりにハンバーガーアイコンが表示され、モバイルユーザー・エクスペリエンスにはるかに優れていることがわかります。
また、メニューレイアウトを編集するためのデフォルトのWordPressメニューページへのリンクもあります。シンプルメニューのように、アドバンスタブにはカスタマイズとアニメーションオプションがあり、シンプルメニューとは異なり、サブメニューのスタイリングオプションをカスタマイズすることができます。
ステップ4.ヘッダーの表示設定を編集する
ここまでで、あなたはメインメニューを編集し、モバイル画面用のハンバーガーメニューを有効にする方法を知っています。しかし、ヘッダー内に小さい画面で表示したくない要素がある場合はどうすればいいでしょうか？
良いニュースは、すべてのページ要素の可視性設定を編集し、異なる画面サイズでの表示を選択できることです。
ユーザーエクスペリエンスを損なうので、ヘッダーのコールトゥアクション（CTA）をモバイルデバイスでは非表示にしたいとします。その場合、そのブロックの詳細設定タブに行き、デバイスの可視性メニューの「モバイルで隠す」トグルをオンにすることができます。
モバイルビューでヘッダーをプレビューすると、ボタンがグレーアウトしていることがわかります。
モバイルメニューオプションのカスタマイズを続けます。その後、保存ボタンをクリックして変更を保存してください。
ステップ5.WordPressテーマのカスタマイズを続ける
メニューを編集した後、SeedProdのページビルダーを使用してWordPressサイトの残りの部分をカスタマイズすることができます。例えば、WordPressのホームページを編集したり、WordPressのカスタムサイドバーを作成したり、ブログページのテンプレートをカスタマイズすることができます。
WordPressのフッターを編集して、このような縦型メニューウィジェットを追加することもできる：
eコマースサイトをお持ちの場合は、SeedProdのWooCommerceブロックを使って商品ページをカスタマイズすることもできます。
ステップ6.変更を公開する
WordPressサイトに変更を反映させる準備ができたら、SeedProdテーマビルダーダッシュボードに戻り、「SeedProdテーマを有効にする」というトグルを探してください。このトグルを「はい」に切り替えるだけで、SeedProdテーマが有効になります。
これで、あなたのウェブサイトを訪問して、モバイルメニューが実際に表示されているのを見ることができます。
代替案無料のWordPressプラグインでモバイルメニューを編集する
モバイルメニューを編集するもうひとつの方法は、WordPressのメニュープラグインを使うことです。例えば、次に紹介するプラグインを使えば、モバイル画面でスライドするハンバーガーメニューを作ることができる。
まず、Responsive MenuWordPressプラグインをダウンロード、インストール、有効化する必要があります。
プラグインを有効にすると、WordPressの管理バーに「Responsive Menu」という新しいラベルが表示されます。これをクリックすると、新しいレスポンシブメニューを追加するためのメニュー画面に移動します。
新規メニュー作成ボタンをクリックしてください。デフォルト、エレクトリックブルー、フルワイドなど、さまざまなメニューテーマがポップアップで表示されます。
お好きなテーマを選び、「次へ」ボタンをクリックします。
メニューの名前を入力し、表示する既存のWordPressメニューを選択し、メニュー作成ボタンをクリックします。
これで、レスポンシブメニューのオプションを編集できるビジュアルインターフェイスが表示されます。さまざまな要素を表示したり非表示にしたり、モバイル対応の最小画面幅と最大幅を変更したりできます。
レスポンシブ・メニュー・プラグインには、メニューの動作と外観を変更するための、他の多くのモバイル・メニュー・オプションがあります。このページでそれらを調べ、必要に応じて調整することができます。
Update』ボタンをクリックして設定を保存することをお忘れなく。
そこから、あなたのウェブサイトにアクセスして、レスポンシブメニューの動作を確認することができます。
WordPressでモバイルメニューを編集する際のFAQ
WordPressでモバイルメニューを編集する方法について、このガイドがお役に立てば幸いです。他にも以下のチュートリアルが参考になると思います：
お読みいただきありがとうございました！あなたのご意見をぜひお聞かせください。YouTube、X、Facebookで、あなたのビジネスを成長させるために役立つアドバイスやコンテンツを提供していますので、お気軽に会話にご参加ください。
