モバイルナビゲーションは、WordPressサイトのユーザーエクスペリエンスを左右します。WPBeginnerでは、デフォルトのモバイルメニュー設定が、ユーザーがウェブサイトで達成したいことと常に一致するわけではないことを発見しました。
WordPressテーマは、デスクトップメニューをモバイルフレンドリーなバージョンに変換するのに適していますが、この自動変換が常に最善の解決策とは限りません。
当社のユーザーは、シンプルさ、特別プロモーション、またはコンバージョン率の向上を目的として、モバイル訪問者向けに異なるナビゲーションオプションを表示する必要がよくあります。
この記事では、WordPressのデフォルトのモバイルメニューを簡単に非表示にして、カスタムメニューを表示する方法を説明します。
このチュートリアルでは2つの異なる方法を説明します。使用したい方法にジャンプするには、以下のクイックリンクを使用できます。
方法1：プラグインを使用してWordPressでモバイルメニューを非表示にする
WordPressテーマが提供するモバイルメニューを非表示にする最も簡単な方法は、WP Mobile Menuプラグインを使用することです。
このプラグインを使用すると、独自のメニューを作成し、モバイルユーザーに表示できます。多くのテーマでデフォルトで提供されているモバイルメニューを非表示にすることもできます。
モバイルメニューを作成する
まず、モバイルデバイスに表示したいナビゲーションメニューを作成する必要があります。開始するには、WordPressダッシュボードの外観 » メニューページに移動します。
次の画面で、メニューの名前を入力する必要があります。「モバイルメニュー」など、後でメニューを識別するのに役立つ名前を使用することをお勧めします。
その後、モバイルメニューに追加したいすべての投稿とページを選択できます。
より詳細な手順については、WordPressでナビゲーションメニューを作成する方法に関するガイドをご覧ください。
メニューのレイアウトに満足したら、変更を保存するために「メニューを保存」ボタンをクリックすることを忘れないでください。
プラグイン設定の構成
それが完了したら、WP Mobile Menuプラグインをインストールして有効化します。詳細については、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
有効化したら、モバイルメニューオプションに移動してプラグイン設定を構成します。
ここでは、ページの一番下までスクロールし、「左/右メニューを有効にする」トグルを使用して、画面の左側または右側にモバイルメニューを表示するかどうかを選択する必要があります。
次に、「メニューを1つ選択」ドロップダウンを開き、先ほど作成したモバイルメニューを選択します。
その後、「変更を保存」をクリックするだけです。
WordPressナビゲーションメニューのスタイルを設定するには、さまざまな方法があります。たとえば、「フォントオプション」を選択してから、フォントサイズ、太さ、スペーシングなどを変更できます。
「ヘッダースタイル」を選択して、モバイルヘッダーの外観と動作を変更することもできます。
たとえば、影を追加したり、ヘッダーの高さを変更したり、固定ナビゲーションメニューを作成したりできます。
これらの設定のほとんどは簡単なので、それらを確認して、どのような種類の効果を作成できるかを確認できます。たとえば、画像アイコンを追加するか、WordPressメニューにCSSを追加することができます。
モバイルメニューの設定に満足したら、「変更を保存」をクリックするだけです。
WordPressにモバイルメニューを追加する
プラグインの設定が完了したら、次のステップは、外観 » メニューに移動して、WordPressにモバイルメニューをどこに表示するかを指示することです。
まだ選択されていない場合は、「編集するメニューを選択」ドロップダウンを開き、以前に作成したモバイルメニューを選択してください。
次に、「メニュー設定」の下で、メニューを表示したい場所に応じて、「左モバイルメニュー」または「右モバイルメニュー」のいずれかを選択する必要があります。
その後、「メニューを保存」をクリックするだけです。
次に、モバイルデバイスでウェブサイトにアクセスするか、デスクトップからWordPressサイトのモバイルバージョンを表示します。カスタムモバイルメニューが表示されるはずです。
トラブルシューティング：デフォルトのモバイルメニューを非表示にする方法
デフォルトでは、プラグインは最も人気のあるWordPressテーマで使用されているメニュー要素を自動的に非表示にします。これは、テーマのデフォルトのモバイルメニューが、何もする必要なしに非表示になることを意味します。
ただし、デフォルトのモバイルメニューがまだ表示されている場合は、WordPressダッシュボードのモバイルメニューオプション » 一般オプション » 表示オプションに移動する必要があります。
ここで、「要素を検索」ボタンをクリックします。
これにより、ウェブサイトのモバイルバージョンが開きます。
このポップアップで、WordPressテーマによって提供されるメニューなど、モバイルデバイスで非表示にしたいコンテンツをクリックして選択します。
これにより、コンテンツのCSSクラスが「要素を非表示」フィールドに追加されます。
これが完了したら、「変更を保存」をクリックします。これで、テーマのメニューはモバイルデバイスに表示されなくなります。
方法2：CSSコードを使用してモバイルメニューを非表示にする
この方法は少し高度で、カスタムコードをウェブサイトに追加する必要があります。
この方法では、2つの異なるアプローチから選択できます。CSSを使用してデフォルトのモバイルメニュー全体を非表示にするか、モバイルデバイスで個々のメニュー項目を非表示にすることができます。
1. CSSを使用してモバイルデバイスで完全なメニューを非表示にする
1つのオプションは、WordPressテーマからデフォルトのモバイルメニューを完全に削除することです。これは、モバイルでパンくずリストナビゲーションリンクやインタラクティブ画像などの別のナビゲーション方法を使用したい場合に良い選択肢です。
まず、変更する必要がある要素を見つける必要があります。これを行うには、WordPressウェブサイトにアクセスし、ナビゲーションメニューの上にマウスカーソルを合わせます。
その後、右クリックしてブラウザの検証ツールを選択します。
ブラウザ画面が2つに分割され、ナビゲーションメニューのコードを含むページのコードが表示されます。
ただし、デスクトップ画面で見ることができるため、このナビゲーションメニューを変更したくありません。
幸いなことに、代わりにモバイルメニューにアクセスする簡単な方法があります。
ブラウザの角をドラッグして小さくするだけで、WordPressがデスクトップナビゲーションメニューをモバイルメニューに置き換えます。
次に、モバイルナビゲーションメニューで使用されている識別子とCSSクラスを見つける必要があります。ブラウザがメニュー領域をハイライトするまで、マウスカーソルをソースコードの上に移動するだけです。このセクションには、使用する必要のあるクラスと識別子が含まれています。
この情報があれば、コードを使用してモバイルデバイスでメニューを非表示にできます。
多くの場合、WordPressガイドでは、カスタムコードをfunctions.phpファイルに追加するように求められます。しかし、これはあまりユーザーフレンドリーではなく、コードのわずかな間違いでも、さまざまな一般的なWordPressエラーを引き起こす可能性があります。カスタムコードはウェブサイトを完全に壊す可能性さえあります。
代わりに、WPCodeを使用してカスタムコードを追加する方が安全です。
この無料プラグインを使用すると、サイトを危険にさらすことなく、WordPressにカスタムCSS、PHP、HTMLなどを簡単に追加できます。プラグインのコードをWPCodeのエディターに貼り付けるだけで、ボタンをクリックしてコードをアクティブ化および非アクティブ化できます。
開始するには、WPCodeをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
その後、WordPressダッシュボードのコードスニペット » スニペットを追加 に移動します。
ここでは、サイトに追加できる既製のスニペットがすべて表示されます。これには、コメントを完全に無効にする、通常WordPressでサポートされていないファイルタイプをアップロードする、添付ファイルページを無効にするなどを行うスニペットが含まれます。
サイトにカスタムCSSを追加するには、「カスタムコードの追加」にカーソルを合わせ、「+カスタムスニペットの追加」ボタンをクリックするだけです。
次に、画面に表示されるオプションのリストから、コードの種類として「CSS スニペット」を選択します。
これにより、カスタムスニペットの作成ページが表示されます。
まず、コードスニペットのタイトルを入力します。これは、WordPressダッシュボードでスニペットを識別するのに役立つものであれば何でも構いません。
その後、次のコードをコードエディターに貼り付けるか、入力できます。
.navbar-toggle-wrapper {
display:none;
}
ブラウザの「要素を調査」ツールで見つけた識別子を.navbar-toggle-wrapperに置き換えるのを忘れないでください。
コードスニペットを公開する準備ができたら、画面の上部までスクロールし、「非アクティブ」トグルをクリックして「アクティブ」に変更します。
最後に、「スニペットを保存」をクリックしてスニペットを公開します。
これで、スマートフォンのタブレットでテーマのモバイルメニューが非表示になります。
2. CSSを使用してモバイルメニューで特定のメニュー項目を非表示にする
この方法では、ナビゲーションメニューを作成し、モバイルデバイスまたはデスクトップデバイスに表示したくない項目を選択的に表示または非表示にすることができます。
この方法で、モバイルとデスクトップの訪問者で同じナビゲーションメニューを使用できます。まず、外観 » メニューに移動します。
これが完了したら、画面右上にある「画面オプション」ボタンをクリックします。
ここから、「CSS クラス」オプションの横にあるチェックボックスをオンにする必要があります。
その後、モバイルで非表示にしたいメニュー項目までスクロールし、クリックして展開します。
メニュー項目の設定で、CSSクラスを追加するオプションが表示されます。ここでは、単に.hide-mobile CSSクラスを追加してください。
非表示にしたいすべてのメニュー項目に対して、このプロセスを繰り返します。
同様に、デスクトップコンピューターで非表示にしたいメニュー項目をクリックすることもできます。ただし、今回は代わりに.hide-desktop CSSクラスを追加します。
完了したら、「メニューを保存」ボタンをクリックして変更を保存することを忘れないでください。
これで、カスタムCSSを使用してこれらのメニュー項目を非表示にする準備ができました。上記と同じ手順に従って、新しいカスタムコードスニペットを作成するだけです。
次に、以下のCSSをWPCodeコードエディターに追加できます。
@media (min-width: 980px){
.hide-desktop{
display: none !important;
}
}
@media (max-width: 980px){
.hide-mobile{
display: none !important;
}
}
その後、コードスニペットを発行するだけです。
これで、WordPressブログにアクセスすると、デスクトップで非表示にしたかったメニュー項目が表示されなくなります。モバイルでのメニューの外観をテストするには、WordPressがモバイルメニューに切り替わるまでブラウザの画面を縮小するだけです。
この記事が、WordPressでモバイルメニューを簡単に非表示にする方法を学ぶのに役立ったことを願っています。また、最高のドラッグアンドドロップWordPressページビルダーの専門家による選び方や、メニューに条件付きロジックを追加する方法に関するガイドもご覧ください。
この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。
Ricardo Ideas
素晴らしい、シンプルで効果的、完璧に機能しました、どうもありがとう
イジー・ヴァネック
ガイドに従ってスライディングメニューを作成しました。インスペクターには慣れていますが、ナビゲートして項目を見つけるのが難しい場合があります。CSSクラスを見つけるためにガイドに従いました。最終的に見つけました。最初の試みはかなりの時間がかかりましたが、今ではやり方がわかったので、このツールをどのように使用し、理解すればよいかをようやく学んだため、今後の検索ははるかに簡単になります。ブラウザに関しては、Firefoxが最も簡単に検索できました。