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

WordPress 開発者または WordPress テーマ デザイナーの場合、メニュー オプションを制御するために、テーマ エディターにカスタム メニューを追加することができます。 ただし、WordPress 管理ダッシュボードには、デフォルトではスライド パネル メニュー オプションがありません。 つまり、この機能をテーマに追加するには、サードパーティのプラグインまたはテンプレートを使用する必要があります. そこで、本日はWordPressテーマにスライドパネルメニューを追加する方法を説明します。

WordPress テーマのスライド パネル メニュー: なぜそれを含めるのか?

サイドパネルを含めることが重要である理由はたくさんあります。 最初の理由は、時間をかけて直感的なメニューを作成すると、訪問者が WordPress サイトを簡単にナビゲートできるようになることです。 2 つ目の理由は、モバイル デバイスにはスライド パネルが必要だからです。 そのため、ウェブサイトを携帯端末で適切に機能させるには、それらを用意する必要があります。 ただし、サイト ユーザーの多くがモバイル デバイスを使用する場合は、WordPress を使用する前に、これらの小さなディスプレイでメニューのレイアウトをテストすることが不可欠です。 幸いなことに、モバイル デバイスで表示すると、多くの WordPress テーマのデフォルト スタイルでモバイル フレンドリーなメニューが表示されます。 WordPress テーマのフルスクリーン レスポンシブ メニューまたはダイナミック スライド パネル メニューは、モバイル ナビゲーションをさらにパーソナライズするのに最適です。 このため、スライド パネル メニューの WordPress テーマへの統合を検討してみましょう。

ステップ 1: レスポンシブ メニュー プラグインをインストールする

レスポンシブ メニュー プラグインをインストールして有効にすることが最初のステップです。 このプラグインには、有料版と無料版の 2 つの異なるバージョンがあります。 レスポンシブ メニューの有料版には、条件付きロジックやその他のテーマ オプションなどの優れた追加機能が用意されていますが、このチュートリアルではオープンソース プラグインを使用します。 レスポンシブ メニューをオンにしたら、[レスポンシブ メニュー] > [メニュー] に移動します。 そこに来たらすぐに、ツールバーに行き、「Create New Menu」ボタンを押してください。 新しいメニューに名前を付けて、作業を保存します。 空だと言っても気にしないでください。

ステップ 2: テーマを選択する

新しいレスポンシブ メニューでは、4 つの異なるデザイン オプションが提供されます。 必要に応じて、さらにテーマを購入することもできます。 このチュートリアルでは、システムが選択したテーマを利用します。 次に、「次へ」オプションを選択して続行できます。 まだ行っていない場合は、レスポンシブ メニューに名前を付けてから、サイドバーに表示するWordPress ダッシュボードからメニュー タイプを選択します。 このチュートリアルのために、「ナビゲーション」オプションを選択しました。

訪問者に新しいスライド パネル メニューのみを表示させたい場合は、WordPress テーマで表示されるデフォルト メニューを非表示にすることもできます。 これを行うには、 「Hide Theme Menu」というラベルの付いた領域を使用して、CSS コードを入力します。 選択したテーマに適切なコードを入力する方法の詳細については、[詳細を知る] ボタンをクリックしてください。 Pro エディションでは、ユーザー向けのカスタマイズ オプションがいくつか追加されています。

ステップ 3: 設定する

パラメータを好みに合わせて調整したら、[メニューの作成] ボタンをクリックしてメニューを作成できます。 これを完了すると、右側にサイトのプレビューが表示され、下部にモバイル、タブレット、またはデスクトップ モードに切り替えるオプションが表示されます。 左側に、パーソナライズの詳細設定が表示されます。 メニュー オプションの上に表示される言語に注意してください。 メニューのタイトルと、プラグインがラベル付けする「追加コンテンツ」の行の両方がここに表示されます。

テキストを変更または非表示にするには、サイド メニューから [モバイル メニュー] を選択してから [コンテナ] を選択します。 タイトル テキスト領域には、「メイン メニュー」から「ナビゲーション」まで、何でも入力できます。 タイトル バーを無効にするには、 「タイトル」というラベルの付いたスイッチをオフの位置に切り替えます。 それが完了したら、「追加コンテンツ」オプションに移動します。 この機能を無効にするか、テキストを別のものに置き換えるかを選択できます。 メニューをカスタマイズしたら、ページの下部にある [更新] ボタンをクリックすることを忘れないでください。

ライブに移行する前に、いくつかの予備テストを行うことが重要です。 すべてが正常に機能していることを確認するには、サイトへのアクセスに通常使用するものとは異なるブラウザーを使用することをお勧めします。 この例では、Google Chrome ブラウザーを使用しました。 モバイル デバイスでサイトにアクセスするために、「 Internet Explorer for Android」というアプリをダウンロードしました。 このサイトの URLをコピーしてアプリに貼り付けたところ、驚くべき結果が得られました。 メニューは横向きと縦向きの両方で適切にフォーマットされており、すべてのリンクが期待どおりに機能することがわかりました. ただし、モバイル デバイスに関しては、マイレージが異なる場合があります。 メニューを公開する前に、できるだけ多くのデバイスとブラウザーでメニューをテストすることをお勧めします。 問題が見つかった場合は、今こそ修正するときです。

ステップ 5: ライブに移行

メニューがテストされ、すべてが計画どおりに機能していることに満足したら、それを一般に公開します。 サイトの右上隅にあるメニュー アイコンをクリックし、ドロップダウン メニューから [メニュー設定] を選択します。 リストの上部に「モバイルメニュー」というタイトルのアイテムのリストが表示されます。 ここに、モバイル メニュー プラグイン ページの Web アドレスを入力します。 完了したら、[変更を保存] をクリックし、変更が有効になるまで数秒待ちます。 それでおしまい！

結論

WordPress テーマにスライド パネル メニューを追加する方法がわかったので、自分のサイトで試してみてください。 これで、メニューを追加してウェブサイトを更新する必要が生じた場合、その方法がわかります。 この記事が新しいスキルを習得するのに役立ち、圧倒されないようにしていただければ幸いです。