モバイルナビゲーションは、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
excelente, simple y efectiva, funciono perfecto, muchas gracias
イジー・ヴァネック
ガイドに従ってスライディングメニューを作成しました。インスペクターには慣れていますが、ナビゲートして項目を見つけるのが難しい場合があります。CSSクラスを見つけるためにガイドに従いました。最終的に見つけました。最初の試みはかなりの時間がかかりましたが、今ではやり方がわかったので、このツールをどのように使用し、理解すればよいかをようやく学んだため、今後の検索ははるかに簡単になります。ブラウザに関しては、Firefoxが最も簡単に検索できました。