WordPressの管理バーとナビゲーションメニューの重なりの問題を解決するための完全ガイド

あるワードプレスサイトのナビゲーションメニューとともに経営コラム(アドミンバーの)重なりの問題は、多くのユーザーが遭遇する問題です。通常、この問題はテーマのCSSがAdminバーの高さを考慮していないために、ナビゲーションメニューが視覚的に見えなくなってしまうことが原因です。この記事では、この問題の原因を詳しく分析し、実際の状況に応じて適切な修正方法を選択します。

WordPressの管理バーとナビゲーションメニューが重なる一般的な原因

ここでは、ナビゲーションメニューが管理バーに隠れてしまう原因について説明します：

テーマ別紛争: 一部のテーマのCSSが管理バーの高さを正しく処理しないため、ナビゲーションメニューが正しくない位置に表示される可能性があります。
プラグインの競合: いくつかのプラグイン（メガメニュープラグインやヘッダーバナープラグインなど）は、フロントエンドのレイアウトに影響を与えるCSSやJavaScriptを導入し、ナビゲーションメニューの位置にエラーを引き起こす可能性があります。
カスタムCSSカスタムCSSを手動で追加した場合、ナビゲーションメニューの表示に影響を与える可能性があります。

どうすれば問題を認識できますか？

ナビゲーションメニューを観察すると、通常、メニュー項目がクリックしにくかったり、メニューの一部が覆われていたりします。この問題はユーザーエクスペリエンスに影響を与えるだけでなく、ユーザーがサイトをナビゲートするのに不便になります。原因を知ることで、いくつかの解決策がありますので、一緒に見ていきましょう！

解決策1：ユーザープロファイルの設定で管理バーを隠す

オーバーラップの問題を素早く解決し、コードの変更を伴いたくない場合はフロントエンドで管理バーを隠すこの方法は、初心者やCSSを知らないユーザー、テーマ編集権限のないユーザーに適しています。この方法は、初心者やCSSを知らない、あるいはテーマ編集権限がないユーザーに適しています。

動く

1. WordPress管理画面にログインWordPressのバックエンドダッシュボードにアクセスします。

2. ユーザー設定に移動サイドバーで ユーザー > プロフィール.

3. ツールバーオプションのチェックを外します。: ツールバー セクションで サイト閲覧時にツールバーを表示 オプションです。

4. 変更の保存クリック 個人情報の更新 設定を保存します。

なぜ効果的なのか

管理バーを非表示にした後、フロントエンドは管理バーを表示しなくなるので、ナビゲーションメニューが覆われるのを避けることができます。この方法はコードの修正を伴わないため、サイトの他のレイアウト設定に影響を与えません。

注目してください：この方法は現在のユーザーにのみ有効で、他のユーザーはアカウントにログインして上記の手順を繰り返す必要があります。

解決策2：テーマのCSSを手動で調整する方法

CSSの知識があれば、この問題を解決するために、テーマのCSSを手動で調整することで、メニューの重なりの問題を解決することができます。

動く

1.問題箇所の点検

ブラウザの 開発ツール(ナビゲーションメニューを右クリックし プローブ もしかしたら チェック・エレメント).

デベロッパーツールで、ナビゲーションメニューまたはサイトヘッダーエリアのCSSクラスまたはIDを見つけ、後でカスタムCSSの微調整に使用するために情報を記録します。

2.WPCodeプラグインのインストール

WPCodeプラグインは、カスタムCSSを追加するのに役立つと同時に、コードをログインユーザーのみに動作させるための条件ロジック機能を提供します。

に移動します。 プラグイン > プラグインのインストールWPCodeプラグインをインストールしたい場合は、検索してインストールしてください。

プラグインを有効化した後、次の場所に移動します。 コードスニペット > コードスニペットの追加を選択し カスタムコードの追加 を選択します。 CSSコードスニペット.

3.カスタムCSSの追加

コード・エディターに次のコード・スニペットを入力してください：

#your-menu-id.your-menu-class{。
    margin-top: 40px; /* テーマに合わせてこの値を調整してください */
    z-index: 10001；
    position: relative；
    padding-top: 40px；
}

注意を引くウィル 1TP5メニューID 歌で応える .your-menu-class 実際のナビゲーション・メニューIDとクラス名に置き換えてください。

このコードは マージントップ 歌で応える パディングトップ メニューの位置を調整し z-index 10001を指定すると、管理バーの上に表示されます。位置: 相対 z-indexは確実に機能します。

4.条件付きロジックの有効化

までスクロールしてください。 インテリジェント条件ロジック（ICL）論理条件を有効にし、ユーザーがログインしている場合にのみ適用されるように設定します。

5.コードスニペットを保存して有効化

打点 コードスニペットの保存 に切り替えます。 アクティブ化こうすることで、CSSコードはログインしたユーザーがサイトを訪問したときにのみ有効になります。こうすることで、CSSコードはログインユーザーがサイトを訪問したときのみ有効になり、フロントエンドの訪問者への影響を避けることができます。

なぜ効果的なのか

この問題は通常、テーマのCSSが管理バーの高さを考慮していないことに起因しています。このカスタムCSSを追加することで、ナビゲーションメニューが管理バーの上に表示されるようになり、メニューが重なる問題を解決することができます。

解決策3：プラグインの競合をチェック

上記のいずれの解決策でも問題が解決しない場合は、プラグインの競合がナビゲーションメニューの重複の原因である可能性があります。プラグインの中には、テーマのレイアウト設定に干渉するCSSやJavaScriptコードを導入するものがあります。

動く

1.すべてのプラグインを無効にします。

WordPress管理画面のバックエンドにある プラグイン > インストール済みプラグイン.
すべてのプラグインにチェックを入れ、Bulk Actionsドロップダウンメニューから選択します。 非アクティブ化クリック アプライアンス.

2.問題が消えたかどうかのテスト

すべてのプラグインを無効にした後、ナビゲーションメニューが正常に戻るかどうか確認してください。重なりの問題が消えた場合、プラグインの1つが競合を引き起こしている可能性があります。

3.プラグインを一つずつ有効にして、問題のあるプラグインを見つけます。

プラグインを1つずつ有効にして、それぞれのプラグインの後にページを更新して、問題が再発するかどうか確認してください。こうすることで、コンフリクトを引き起こしている特定のプラグインを見つけることができます。

4.紛争解決

競合するプラグインを確認したら、プラグイン開発者に連絡してサポートを依頼するか、似たような機能を持つ別のプラグインを探してプラグインを置き換えてみてください。

よくある質問

1.もっと早く解決する方法はありますか？
フロントエンドに管理バーを表示したくない場合は、ユーザープロフィールから非表示にすることができます。

2.CSSのカスタマイズはサイトのパフォーマンスに影響しますか？
一般的に、少量のカスタムCSSがサイトのパフォーマンスに大きく影響することはありません。ただし、不必要な読み込みを避けるため、CSSコードは必要なときだけ適用するようにしてください。

3. z-indexなぜここで使うのですか？
z-index は、要素の積み重ね順序を制御する CSS プロパティです。要素の積み重ね順序を制御するには、ナビゲーション・メニューに高い z-indexをクリックすると、ページの一番上に表示され、管理バーに邪魔されないことを確認できます。

概要

WordPressの管理バーがナビゲーションメニューと重なってしまう問題は、いくつかの方法で解決することができます。手っ取り早い方法として管理バーを非表示にすることもできますし、より正確にはカスタム CSS でメニューの位置を変更したり、プラグインの競合をチェックして問題を根本的に解決することもできます。どの方法を選択するにしても、これらの手順はナビゲーションメニューの適切な表示を修正し、ウェブサイトのユーザーエクスペリエンスを向上させるのに役立ちます。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み