WordPressのナビメニューが管理バーの下に表示されるのを修正する方法

サイトのナビゲーションメニューがWordPressの管理バーの下に表示されていることにお気づきの方は、あなただけではありません。これはよくある問題で、多くのサイトで見受けられます。

この問題は、特にメニューの一部を非表示にしてしまったり、ログイン中のユーザーがクリックしづらくしてしまったりすると、フラストレーションが溜まります。

テーマやCSSのコンフリクトが原因で起こることが多いようです。しかし、良いニュースはすぐに修正できるということです。

この投稿では、WordPressのナビバーが管理バーの下にある場合の対処法を、コーディングを必要としないシンプルで非技術的な解決法から紹介します。

WordPressの管理バーがナビゲーションメニューに重なるのはなぜ？

WordPressのナビゲーションメニューが非表示になっていたり、管理バーと重なっていたりする場合は、一般的な表示の問題かもしれません。

この問題は、テーマのCSSが管理バーの高さを適切に考慮していない場合に発生します。CSSがナビゲーションメニューを含むサイトのヘッダーの一部を隠してしまうのです。

サイトを表示していると、メニュー項目がクリックしにくかったり、メニュー全体が部分的に表示されていることに気づくかもしれません。これは、特にサイトのユーザビリティに影響する場合、イライラすることがあります。

このようなことが起こる理由はいくつかある：

• テーマの競合：テーマのCSSが管理バーを考慮せず、メニューの位置がおかしくなることがあります。
• プラグインの競合：フロントエンドのデザインを変更するプラグインによって、意図せずメニューが管理バーと重なってしまう可能性があります。これにはメガメニューや ヘッダーバナーを追加するプラグインが含まれます。
• カスタマイザー：サイトに カスタムCSSを追加している場合、メニューの適切な表示を妨げている可能性があります。

この問題はサイトのユーザビリティに影響し、ユーザーがナビゲーションしにくくなります。幸いなことに、この問題を解決する方法はいくつかあり、コーディングを必要としない簡単な解決策から始めることができます。

以下は、これからご紹介する解決策の概要です。簡単そうなほうにジャンプしてください：

解決策1：ユーザープロフィール設定で管理バーを非表示にする。

このソリューションは、コードを扱うことなく素早く簡単に修正したいユーザーに最適です。初心者や、サイトのレイアウトを誤って壊してしまうことを心配する人に最適です。

さらに、サイトのCSSやテーマファイルを編集する権限がない場合、この方法は永久的な変更を加えることなく問題を回避する簡単な方法を提供する。

注：この解決策はユーザーレベルで適用されます。つまり、あなたのサイトの他のユーザーは、自分のアカウントにログインし、以下の手順を繰り返す必要があります。

まず、WordPressダッシュボードにログインする必要があります。次に、左側のメニューから ユーザー ” プロフィールのページに移動します。

ツールバーセクションまでスクロールダウンし、「サイト表示時にツールバーを表示する」オプションの隣のボックスのチェックを外します。

その後、忘れずに「プロフィールを更新」をクリックして変更を保存してください。

なぜこれが有効なのか

管理バーを非表示にすることで、サイトのフロントエンドのナビゲーションメニューとの干渉を防ぐことができます。管理バーが表示されないため、重複の問題は一時的に解決され、あなたにとっても訪問者にとっても、メニューが完全に利用できるようになります。

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

HTMLとCSSの扱いに慣れているか、メニューが重なる問題をより恒久的に解決したい場合は、テーマのCSSを調整する必要があります。

このソリューションは、サイトの外観を編集するのに必要なユーザー権限を持ち、問題を根本から解決したいユーザーに最適です。

1.問題の点検

まず、ブラウザーでInspectツールを使って、カスタマイザーCSSを追加する場所を決定する必要があります。Inspectツールの使い方については、DIY初心者向けの詳しいガイドがあります。

まず、ナビゲーションメニューを右クリックし、「Inspect」（Chromeの場合）または「Inspect Element」（Firefoxの場合）を選択します。

開発者ツールが開き、要素のHTMLとCSSが表示されます。

コード内で、ヘッダーやナビゲーションメニューエリアを表示するためにテーマで使用されているCSSクラスまたはIDを見つける必要があります。例えば、上のスクリーンショットでは、私たちのデモサイトは、影響を受けるエリアに.site-headerクラスを使用しています。

ヒント: HTMLの上にマウスを移動すると、ブラウザーがプレビュー・ウィンドウでそのエリアをハイライトします。HTMLを右クリックし、「スタイル」の下にあるCSSプロパティを探します。

WPCodeを使ったカスタムCSSの追加

次に、 WPCodeプラグインをインストールし、有効化する必要があります。WPCodeプラグインはWordPressのカスタムコードプラグインの中で最も優れており、テーマに関係なくサイトにカスタムCSSを簡単に追加することができます。

WPCodeを使うもう一つの理由は、その条件付きロジック・ルールです。この問題はログイン中のユーザーにしか影響しないので、ログイン中のユーザーのみにコードを追加するために、これらのルールが必要になります。

WPCodeプラグインをインストールし、有効化してください。詳しくは、WordPressプラグインのインストール方法のチュートリアルをご覧ください。

注：WPCodeの無料版もあり、このチュートリアルで使用できます。しかし、有料プランへのアップグレードをお勧めします。

有効化したら、WordPressダッシュボードのCode Snippets“+ Add Snippetページに移動します。

次のページでは、プラグインがすぐに使えるコード・スニペットをたくさん表示します。しかし、私たちはカスタムCSSコードを書くことになります。

そのためには、マウスを「カスタムコードの追加（新規スニペット）」ボックスに移動し、「+カスタム・スニペットの追加」ボタンをクリックします。

コードエディターのページに移動します。

ここで、コードスニペットの名前を入力し、「コードタイプ」のドロップダウンから「CSSスニペット」を選択します。

その後、以下のコードを「コード・プレビュー」ボックスに追加する：

#your-menu-id .your-menu-class {
    margin-top: 40px; /* Adjust this value based on your theme */
    z-index: 10001;
    position: relative;
    padding-top:40px
}

このコード・スニペットでは、#your-menu-idと .your-menu-classをHTMLの対象としたい値に置き換える必要があります。

以下は、テストサイトに追加し、患部をターゲットに調整した方法である。

CSSには4つのルールがある。

まず、margin-topと padding-topのルールです。管理バーの高さは32ピクセルで固定されているので、それを使って競合するCSSを補うことになります。

次に、管理バーもz-index値を9999に設定している。このルールは、これをディスプレイの前面に押し出します。より大きな値のz-indexルールを使うことで、ヘッダーやナビゲーションエリアを最前面に移動させることができます。

z-indexルールが使えるように、positionルールはrelativeに設定されている。

カスタムCSSルールを追加した後、ログイン中のユーザーがサイトを表示している時のみ、このCSSコードを使用するようにWPCodeに指示する必要があります。

Smart Conditional Logicセクションまでスクロールダウンし、’Enable Logic’オプションの横にあるスイッチを切り替える。

その後、条件オプションを「表示」に設定し、「+新しいグループを追加」をクリックするだけです。

ロジックルールで、「ログイン中」＞「Is」＞「True」を選択する必要があります。

最後に画面右上の「Save Snippet」をクリックし、有効化したスニペットを「Inactive」から「Active」に切り替えます。

サイトにアクセスし、ナビゲーションメニューとヘッダーエリアが管理バーの上に正しく表示されているか確認してください。

初回でうまくいかない場合は、margin-topの値を調整するか、別のIDやCSSクラスをターゲットにしてみてください。

なぜこれが有効なのか

この問題は、テーマのCSSが管理バーを適切に考慮していないために、ナビゲーションメニューが管理バーの下に表示されてしまうためによく起こります。カスタムCSSの小さなスニペットを追加することで、ナビゲーションメニューの位置を調整し、管理バーの上に正しく表示させることができます。

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

これまでの解決策を試しても問題が解決しない場合は、プラグインの競合が原因かもしれません。

プラグインは時として、テーマのレイアウトに干渉するCSSやJavaScriptを導入することがあります。この干渉は、ナビゲーションメニューが管理バーの下に表示されるなどの問題を引き起こす可能性があります。

競合するプラグインを特定することで、テーマのコードを変更することなく問題を解決することができます。

1.すべてのプラグインを無効化する：

まず、WordPressダッシュボードに移動し、プラグイン“インストール済みプラグインに移動します。

リストの一番上にあるプラグインの横のボックスをチェックして、すべてのプラグインを選択します。

一括操作のドロップダウンから「無効化」を選択し、「適用」をクリックする必要があります。

問題が解決したかどうか、サイトにアクセスして確認してください。ナビゲーションメニューが正しく表示されていれば、プラグインのいずれかが問題の原因である可能性が高いです。

2.競合プラグインを特定する

問題の原因となっているプラグインを特定するには、インストール済みプラグインのページに戻ってください。

プラグインを1つずつ有効化し、有効化するたびにサイトをチェックしてください。特定のプラグインを有効化した後に問題が表示されるまで繰り返します。

問題が再発したら、コンフリクトの原因となっているプラグインを特定できたことになります。

次にすべきこと

競合するプラグインがある場合は、そのプラグインの開発者にサポートを依頼してください。問題を解決するための修正や更新を提供してくれるかもしれません。あるいは、競合を起こさずに同様の機能を提供する別のプラグインを探すこともできます。

WordPress管理者向け追加リソース

このほかにも、参考になる資料がいくつかあります：

• WordPressの管理バーを管理者以外のすべてのユーザーで無効化する方法
• WordPressで管理バーが表示されない問題を解決する方法（3つの方法）
• WordPress管理ツールバーにカスタマイザーリンクを追加する方法
• 初心者のためのWordPressトラブルシューティング（ステップバイステップ）

私たちが共有した解決策が、あなたのサイトのナビゲーションメニューやヘッダー表示の問題を引き起こしている管理バーを解決してくれることを願っています。

また、WordPressのよくあるエラーを修正するハンドブックや、WordPressの管理エリアを必要に合わせてカスタマイズするヒントもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.