WordPressでモバイルメニューを非表示にするためのヒント

ほとんどの場合、WordPressテーマには、通常のナビゲーションメニューをモバイルメニューに変換できるスタイルがすでに定義されています。 箱から出してすぐに解決策が必要な場合に便利です。 たとえば、デスクトップコンピュータの従来のレイアウトと、モバイルデバイスのハンバーガーメニューがあります。 ただし、既存のモバイルメニューをさらにカスタマイズしたり、完全に置き換えたりする場合は、それも可能です。 プラグインまたはコードを使用して、WordPressでモバイルメニューを非表示にする方法はいくつかあります。

WordPressでモバイルメニューを非表示にする方法

Webサイトを完全にカスタマイズするには、少しの知識と経験が必要です。 リスクのない安全なカスタマイズが必要な場合は、専門家を使用してWebサイトをカスタマイズおよび保守できます。 自分でできる簡単な部分がいくつかありますが、より深刻なカスタマイズには専門的なタッチが必要です。 WordPressのモバイルメニューに関しては、プラグインを使用してプロセスを簡素化できます。 または、コーディングの知識がある場合は、コード内で直接変更を作成できます。

ウェブサイトでのモバイルメニューの表示方法を変更するために、最も一般的な2つの方法を次に示します。

• プラグインを使用してWordPressのモバイルメニューを非表示にする
• CSSコードでモバイルメニューを非表示にする

プラグインを使用してWordPressでモバイルメニューを非表示にする方法

興味深いモバイルメニューの動作を備えたWordPressテーマを見つけた可能性があり、それを簡単に複製したいと考えています。 この方法はコーディングの知識を必要としないため、このタスクにはより便利です。 プラグインをインストールすると、モバイルデバイスのモバイルメニューを完全に削除できるようになります。 また、一部のプラグインでは、詳細にカスタマイズできます。 基本的な非表示に加えて、メニュー内の特定の要素のみを削除するために使用することもできます。

新しいモバイルメニューの作成

最初のステップは、 [外観]>[メニュー]に移動することです。 そこで、上部の「新しいメニューの作成」オプションをクリックして、新しいメニューを作成できます。 新しいメニューに名前を付け、画面の右下隅にある[メニューの作成]ボタンでこれを確認します。

これらの手順を実行すると、左側の選択が解除できなくなり、新しいメニューの項目を追加できるようになります。 新しいアイテムの追加が完了したら、 「メニューの保存」をクリックするだけです。

プラグインを見つけてインストールする

次のステップは、プラグインを見つけてインストールすることです。 メニューの操作とカスタマイズに役立つプラグインは多数あります。 最も人気のあるものには、WPモバイルメニュー、マックスメガメニュー、レスポンシブメニューなどがあります。 説明のために、WPモバイルメニューをインストールしてアクティブ化しましょう。

完了したら、左側のWordPressサイドバーの[モバイルメニューオプション]に移動します。 プラグインオプション内で、新しいモバイルメニューを左側に表示するか右側に表示するかを選択できるようになりました。 以前に作成したメニューを選択し、[元のテーマメニューを非表示]まで下にスクロールします。 そこで、元のメニューから特定の要素を削除することを選択できます。 「要素の検索」フィールドをクリックすると、選択したもののライブプレビューが表示されます。 選択プロセスが完了したら、変更を保存するだけです。

メニューを置き換えるか非表示にする

非表示にするものを選択したら、 [外観]>[メニュー]に戻ります。 ドロップダウンメニューから以前に作成したモバイルメニューを選択し、その「表示場所」を設定します。 これで、元のメニューが非表示になり、カスタムメニューに置き換えられます。

これで、Webサイトにアクセスして、新しいメニューの動作を確認できます。 プラグインはテーマのモバイルメニューを非表示にし、代わりにカスタムメニューを表示します。

CSSコードでメニューを非表示にする方法

モバイルメニューを非表示にする別の方法には、CSSコードとプラクティスに関する一定の知識が必要です。 カスタムWordPressテーマを作成することが多い人は、カスタマイズがどれほど複雑になるかをすでに知っています。 そして、これらの点を考えると、それは初心者に正確に推奨される方法ではありません。 それにもかかわらず…

メニュー名を探す

最初のステップは、編集するメニューを見つけることです。 おそらく最も簡単な方法は、統合されたブラウザ開発ツールを使用することです。 変更を加えたいWebサイトにアクセスし、開発者ツールを開きます。 Google Chromeを使用している場合は、 Ctrl + Shift+Iショートカットを使用して実行できます。 画面の上部には、モバイルデバイスでのWebサイトの外観を示す[デバイスツールバーの切り替え]オプションがあります。 さまざまなタイプと解像度を変更することもできます。

モバイルデバイスでの表示が確認できたので、矢印のようなボタンを選択し、メニューをクリックして確認します。 すぐに、特定のメニューのCSSクラスを表示できるコードの部分に移動します。 つまり、そのクラス名が表示されます。

新しいコード行でメニューを非表示にする

固有名を取得したら、[外観]> [カスタマイズ]に移動して、[追加のCSS]を選択します。 一般的に、これは通常、左側のサイドバーの下部にあります。 それをクリックすると、次の画面が表示されます。 そこで、画面の下部をクリックしてモバイルビューを選択し、その上にコードを入力してメニューを非表示にします。

コード： .menu-name {表示：なし;}

最後に、[公開]ボタンをクリックすると完了です。 CSSコードにもう少し慣れている場合は、これらの変更の多くをCSSファイル内で完了することができます。 ただし、メディアクエリに注意を払う必要があります。 デバイスごとに異なるルールを作成できるため、Webサイトとメニューの動作をより細かく制御できます。

レイアウト編集の初心者の場合は、プラグインオプションがおそらく開始するための最良の方法です。 何をしているのかを正確に知らずにコードを変更し始めると、Webサイトの外観を簡単に壊してしまう可能性があります。 CSSには、相互に上書きする多数のルールとプロパティがあります。 したがって、リスクなしにWordPressでモバイルメニューを非表示にしたい場合は、プラグインを使用してジョブを完了してください。