WordPressでモバイルメニューを非表示にする方法（ステップバイステップ）
公開: 2021-12-22
WordPressでは、モバイルのメニューを非表示にする場合は、このブログを読み続けてください
ほとんどのWordPressテーマは組み込みのスタイルを備えていることがわかります。これは、ナビゲーションメニューをモバイルメニューに自動的に変換するのに役立ちます。
携帯電話では、携帯電話に表示するためにいくつかの異なるメニュースタイルを管理している可能性があるため、同様のメニューを使用したくない場合があります。
以下に、WordPressでモバイルメニューを非表示にする2つの異なる方法を示します。
方法1：WordPressプラグインでモバイルメニューを非表示にする
初心者には、コーディングをいじる必要がないため、方法1をお勧めします。プラグインを使用して、WordPressテーマでデフォルトで提供されるモバイルメニューを非表示にする必要があります。
これを非表示にした後、さまざまなメニューを使用したり、モバイルデバイスにメニューを表示しないように選択したりできます。
WordPressプラグインを使用するには、初心者はまずWordPressダッシュボードにログインし、次に外観をクリックしてからメニューページをクリックする必要があります。 ここで、新しいナビゲーションメニューを作成して、ハンドヘルドデバイスで紹介できます。
これで、必要なときに認識できるように、新しいメニュー名が表示された別の画面が表示されます。 「電話メニュー」として名前を追加したと考えてください。 これで、アイテムを選択できます。
メニューに項目を追加したら、次に[メニューの保存]ボタンをクリックします。
これで、WordPressプラグインリポジトリからWPモバイルメニューを選択してダウンロードできます。 または、WordPressダッシュボードからこのプラグインを直接インストールすることもできます。 
プラグイン設定を構成するには、アクティベーション時にモバイルメニューページに移動する必要があります。
ここで、電話メニューを左または右に作成するオプションがあります。 オプションbをオンまたはオフに切り替えることができます。 
次に、ドロップダウンメニューから前に作成した電話メニューを選択します。
次に、「元のテーマメニューを非表示にする」オプションが表示されるまで、ページを下方向にスクロールします。 このオプションは、WordPressテーマのモバイルメニューを非表示にする必要があることをプラグインに伝えるのに役立ちます。 
デフォルトでは、モバイルフレンドリーなWordPressテーマで使用される最もよく使用される要素は、プラグインで使用されることを識別します。 ほとんどのWebサイトユーザーは、ここで何もする必要はありません。
使用しているプラグインがテーマのモバイルメニューを非表示にできない場合は、同じページに再度アクセスし、[要素の検索]をクリックしてテーマのナビゲーションメニューをポイントできます。
すべての設定を保存するには、変更を保存することを忘れないでください。
プラグインを使用して構成したので、プラグインによって新しいメニューの場所に追加された電話メニューを表示する必要があることをWebサイトに通知する必要があります。
これをする：
外観に移動し、メニューページをクリックします。 
ドロップダウンメニューで、作成した電話メニューが正しく選択されていることを確認します。 次に、メニュー項目の下の場所、つまり右のモバイルメニューまたは左のモバイルメニューを選択します。
次に、新しいメニューがWebサイトに表示されているかどうかを確認します。 ただし、使用していたプラグインは、テーマのモバイルメニューを表示しませんが、作成したプラグイン、つまり電話メニューを表示します。
私たちが提案したプラグイン、つまりWPモバイルメニュープラグインは、メニューバーの色を変更したり、アイコンを追加したり、不透明度を変更したりするのに役立ちます。 このような設定オプションを簡単かつ自由に使用できます。
方法2：コードを使用して、モバイルメニューを非表示にします
この方法を選択してモバイルメニューを非表示にするときは、コーディングの経験があるか、少なくともカスタムCSSを知っていることを確認してください。
この方法では、2つのさまざまなアプローチがあります。 CSSを使用してモバイルメニュー全体を非表示にするか、モバイルデバイスで個々のアイテムを非表示にすることができます。
CSSを使用して、小さなデバイスで完全なメニューを非表示にします
カスタムCSSコードを使用して変更しようとしている要素を把握する必要があります。 これを実行するには、最初にWebサイトにアクセスしてから、ナビゲーションメニューをクリックする必要があります。 次に、それを右クリックして、検査ツールを選択します。
これで、2つの異なる画面が表示されます。 1つの画面にはWebサイトが表示され、別の画面にはソースコードが表示されます。 ただし、デスクトップのナビゲーションメニューがモバイルメニューに置き換えられていない場合を除いて、ブラウザ画面を小さいサイズに調整する必要があります。
ここで、WordPressWebサイトのナビゲーションメニューで使用されるCSSと識別子を把握する必要があります。 Webサイトのソースコード上でマウスをかき混ぜることで、メニュー領域を強調表示できます。
- 次に、WordPressダッシュボードに移動します。
- 外観をクリック
- [ページのカスタマイズ]オプションに移動して、テーマカスタマイザーを起動します。
- これで、[追加のCSS]タブに戻り、管理パネルの右隅にあるモバイルアイコンをクリックできます。
カスタマイザーによって、Webサイトが電話でどのように表示されているかを示すプレビューが表示されます。 下記のCSSコードを追加する必要があり、プレビューパネルでモバイルメニューが消えます。
.navbar-toggle-wrapper {
display：none;
}
.nav-toggle-wrapperをWordPressテーマが使用している識別子に置き換えたことを確認してください。
上部にある[公開]ボタンをクリックして、すべての変更を保存します。
CSSを使用して、モバイルで特定のメニューを非表示にします
これは、モバイルメニューを非表示にする2番目のアプローチです。 このアプローチでは、ナビゲーションメニューを作成してから、デスクトップまたはモバイルデバイスでモバイルメニューを表示または非表示にするように求められます。
このような方法を使用する利点は、デスクトップまたは携帯電話のメニューを非表示にするために同様のナビゲーションメニューを利用できることです。
- WordPressダッシュボード内
- 登場に行く
- メニューページをクリックします
- 画面オプションボタンを押す
- [CSSクラス]オプションのすぐ横にあるチェックボックスをオンにします。
非表示にするメニュー項目が見つかるまで、ページを下にスクロールします。 メニュー項目の設定にCSSクラスを追加するためのオプションがあります。 それをクリックして、.hide-mobileCSSクラスを追加します。
モバイルメニューを非表示にするには、このプロセスを繰り返します。
ただし、デスクトップコンピュータで非表示にしようとしているメニュー項目をマウスでクリックすることもできます。 ここで、.hide-desktopCSSクラスを追加する必要があります。
次に、[メニューの保存]ボタンをクリックして変更を保存します。
モバイルメニューを非表示にするには、カスタムCSSコードを追加する必要があります。 このため
- 登場に行く
- カスタマイザーページをクリックします
- テーマカスタマイザーが起動します
- 次に、追加の[CSS]タブをクリックします
- そして、CSSボックスに以下のコードを追加します
@media（min-width：980px）{
.hide-desktop {
表示：なし！重要;
}
}
@media（max-width：980px）{
.hide-mobile {
表示：なし！重要;
}
}
これで、非表示にしていたモバイルメニューが表示されているかどうかをWebサイトで確認できます。 モバイルメニューを非表示にする手順を実行しているため、モバイルメニューは表示されない可能性があります。
結論：
このブログで言及されている2つの異なる方法が、モバイルメニューを簡単かつ効率的に非表示にするのに役立つことを願っています。