WordPressテーマにスライドパネルメニューを追加する方法

電話で扱いにくいデスクトップスタイルのメニューを提供することは、訪問者をイライラさせる確実な方法です。そして、わかりにくいモバイルメニューは、彼らをすぐに離脱させる可能性があります。

スライドアウトパネルメニューは、サイトにクリーンでアプリのような感覚を与え、小さな画面でも美しく機能することで、この問題を解決します。コンテンツを見つけやすくし、訪問者を惹きつけます。

このタスクに最適なプラグインをいくつかテストした結果、強力で設定も簡単な素晴らしい無料オプションを見つけました。コードを一切変更せずに、プロフェッショナルなスライドメニューを作成できます。

このガイドでは、WordPressテーマにスライドパネルメニューを追加する方法をステップバイステップで詳しく説明します。

WordPressテーマにスライドパネルメニューを追加する理由

スライドパネルメニューは、モバイルデバイスでのナビゲーションをよりスムーズで直感的にします。WordPressサイトにクリーンでアプリのような感覚を与え、訪問者が迷ったりイライラしたりすることなく、探しているものをすばやく見つけるのに役立ちます。

また、指で操作しやすい大きなタッチターゲットを提供し、画面をすっきりさせることで、エンゲージメントの向上と売上の増加につながる可能性があります。

幸いなことに、多くのWordPressテーマには、小さい画面でモバイルフレンドリーなメニューを自動的に表示する組み込みスタイルが含まれています。

しかし、全画面レスポンシブメニューやアニメーションスライドパネルメニューを追加して、モバイルナビゲーションをさらにカスタマイズしたい場合があります。

これを踏まえ、WordPressテーマにスライドパネルメニューを追加する方法をご紹介します。このガイドで共有するすべてのトピックの簡単な概要を以下に示します。

さあ、始めましょう。

WordPressテーマにスライドパネルメニューを追加する方法

まず最初に行うべきことは、Responsive Menuプラグインをインストールして有効化することです。このチュートリアルではこれをテストしましたが、非常に使いやすいです。

WordPress管理画面で、プラグイン » 新規追加に移動します。

次に、検索ボックスでプラグインを見つけてインストールを進めるだけです。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

有効化したら、WordPressダッシュボードのResponsive Menu » Menusに移動します。そこから、画面上部にある「新しいメニューを作成」ボタンをクリックします。

新しいレスポンシブメニューに使用できる4つのテーマが表示されます。追加のテーマは購入可能です。

このチュートリアルでは、自動選択されたテーマを使用します。その後、「次へ」ボタンをクリックできます。

「メニュー設定」ページに移動します。

ここで、レスポンシブメニューの名前を入力し、次にパネルに表示したいWordPressメニューを選択できます。例えば、「ナビゲーション」メニューを選択しました。

新しいメニューを作成する必要がある場合は、WordPressでナビゲーションメニューを追加する方法に関するガイドに従って学習できます。

WordPressテーマに付属の通常のメニューを非表示にすることもできます。これにより、モバイルユーザーは新しいスライドパネルメニューのみを表示できます。これは、CSSコードを「テーマメニューを非表示」フィールドに入力することで行います。

心配しないでください。これはモバイルデバイスでのみメニューを非表示にし、デスクトップメニューは完全に安全なままです。

ここに入力する必要のあるコードはテーマによって異なります（一般的なセレクターには.main-navigationや#site-navigationなどがあります）。「詳細はこちら」リンクをクリックすると、詳細を確認できます。

Proライセンスをお持ちの場合は、いくつかの追加設定があります。たとえば、メニューを表示するデバイスやページを選択できます。

設定に満足したら、ページ下部にある「メニューを作成」ボタンをクリックしてください。これにより、メニューのカスタマイズを完了できるページに移動します。

画面の右側には、ウェブサイトのプレビューが表示されます。下部にあるボタンで、電話、タブレット、デスクトップビューを切り替えて、メニューがモバイルフレンドリーであることを確認できます。左側にはカスタマイズオプションもあります。

メニューの上にテキストが表示される場合があります。これはメニューのタイトルと、プラグインが「追加コンテンツ」と呼ぶテキスト行です。

ページの左側にあるメニューの「モバイルメニュー」をクリックし、「コンテナ」をクリックすると、テキストを編集または非表示にできます。

さらに、「タイトルテキスト」フィールドに「メインメニュー」や「ナビゲーション」など、好きなテキストを入力できます。タイトルを表示したくない場合は、「タイトル」スイッチをオフの位置にスライドするだけです。

その後、「追加コンテンツ」設定までスクロールします。

ここから、この設定をオフに切り替えるか、代替コンテンツを入力できます。下のスクリーンショットでは、スイッチがオフに切り替わっているため、「ここにさらにコンテンツを追加…」という言葉が非表示になっていることに気づくでしょう。

メニュー設定に満足したら、設定を保存するために、必ずページ下部にある「更新」ボタンをクリックしてください。

Responsive Menuプラグインは、スライドパネルメニューの動作や外観を変更するための他の多くのオプションを提供しています。これらのオプションはプラグインの設定ページで確認し、必要に応じて調整できます。

これで、ウェブサイトにアクセスしてメニューが機能していることを確認できます。デモのWordPressウェブサイトではこのようになります。訪問者が現在いるページが、きれ​​いなカラーバンドで強調表示されていることに気づくでしょう。

スライドパネルメニューに関するよくある質問

WordPressのスライドパネルメニューの仕組みについて、まだ質問がありますか？以下に、よくある質問への回答をいくつかご紹介します。

すべてのWordPressテーマにはモバイルメニューが付属していますか？

ほとんどの最新のWordPressテーマはレスポンシブなので、モバイルフレンドリーなメニューが含まれています。とはいえ、通常は基本的なドロップダウンです。洗練されたスライドアウトパネルメニューが必要な場合は、プラグインが必要です。

スライドパネルメニュープラグインを追加すると、サイトの速度は低下しますか？

Responsive Menuのような適切にコーディングされたプラグインを選択した場合は、そうではありません。これらのプラグインは軽量になるように設計されており、サイトの速度に目立った影響を与えるべきではありません。

モバイルとデスクトップで異なるメニューを表示できますか？

はい！WP Mobile MenuやカスタムCSSのようなプラグインを使用して、別のモバイルメニューを作成できます。これにより、モバイル訪問者はデスクトップユーザーとは異なるナビゲーションを見ることができます。これにより、リンクを簡素化したり、プロモーションを強調したり、モバイルデバイスに特化したコンバージョンを改善したりできます。

関連記事：サイトメニューのカスタマイズに関するその他のリソース

モバイルユーザー向けにスライドアウトパネルを正常に実装できたので、サイトのナビゲーションを改善する他の方法を検討したいかもしれません。このチュートリアルで、WordPressテーマにスライドパネルメニューを追加する方法を学べたことを願っています。

ユーザーエクスペリエンスをさらに向上させるために、その他の役立つガイドをご覧ください：

• WordPressでスティッキーなフローティングナビゲーションメニューを作成する方法
• WordPressサイトにメガメニューを追加する方法（ステップバイステップ）
• WordPressナビゲーションメニューに特定の投稿を追加する方法
• WordPressテーマにカスタムナビゲーションメニューを追加する方法
• WordPressでログイン中のユーザーに異なるメニューを表示する方法

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。