【SANGO】Wordpress管理バーが邪魔問題

ネットで調べて＆Geminiくんに聞いた方法を試した覚書です。ご利用は自己責任で。。

WordPressにログインしてるとき上に出てくる「黒い管理バー（アドミンバー）」。ヘッダーを固定したり、スクロール時のCSSをテストしてるとき、めちゃくちゃ邪魔！

「プロフィールの設定から非表示にすれば？」って話なんだけど、

キャッシュ消去したいときLiteSpeedcashのキャッシュ削除ボタンが便利すぎる
管理画面にぱっと飛びたいときあるし。

これを考えると、やっぱり消したくはないのよね…！

「どうにかしてヘッダーと被らないようにできないかな～」と思って調べたら、追加CSSにコードを入れるだけで一発解決できたのでメモしておきます！✨

解決コード（追加CSSにコピペでOK）

「外観」＞「カスタマイズ」＞「追加CSS」に以下のコードを追加するだけ！

CSS

//* PC表示時（管理者バーの高さ：32px） */
@media screen and (min-width: 783px) {
	body:has(#wpadminbar)
	:is(.header,
	    .smartphoto-header,
	    .choro-mb-header) {
		top: 32px;
	}
	body:has(#wpadminbar) .fixed-sidebar {
		top: 112px !important;
	}
}

/* スマホ表示時（管理者バーの高さ：46px） */
@media screen and (max-width: 782px) {
	body:has(#wpadminbar)
	:is(.header,
	    .smartphoto-header,
	    .choro-mb-header) {
		top: 46px;
	}
}

ざっくりコードの解説💡

何をやっているのかサクッと説明するとこんな感じ！

body:has(#wpadminbar) 「管理バーが表示されてるときだけ」このCSSを効かせる魔法の記述！ログインしてない一般の読者さんには一切影響しないから安心👍
PC表示の調整（画面幅 783px以上） PCの管理バーの高さは「32px」。その分だけヘッダー位置を下に下げて重なりを回避！ついでに固定サイドバー（.fixed-sidebar）も「112px」下ろして位置をズラしてます。
スマホ表示の調整（画面幅 782px以下） スマホだと管理バーがちょっと太くなって「46px」になるので、ヘッダーも46px分しっかり下げて調整！
.smartphoto-headerは、ギャラリーの画像をクリックしたときに拡大表示するやつ。×ボタンが押せなくてイライラしたから対応したよ。
.contents-headerは、コンテンツブロックで作った固定ヘッダーつけた独自クラス名です。ヘッダーをコンテンツブロックで差し替えていると、.headerだけではうまく下がらなかったので、独自クラス名で対応しました（適宜ご自分の環境に合わせてください！）

これで管理バーを出したままでも、見た目バッチリで快適にテストできるようになりました！同じ悩みでモヤモヤしてる人は試してみてね〜( ´∀｀)