Wordpressのアドミンバーの高さ

wordpress-ttl

 

Wordpressのテーマを作ってて、ヘッダーやグローバルメニューを固定した際に、アドミンバーと重なってしまうが、便利な変数があったのでメモ。

 

var(--wp-admin--admin-bar--height);

 

Wordpressのアドミンバーは

#wpadminbar - アドミンバー本体（デフォルト高さ 32px、モバイルは 46px）

となるが、

top: var(--wp-admin--admin-bar--height, 0px);

 

こうしておけば自動で調節できる。

 

WordPress のアドミンバーの挙動：
- PC・タブレット（>782px）: position: fixed → 変数が正しく機能
- モバイル（≤782px）: position: absolute（スクロールで流れる）→ 変数が 46px のまま残って浮く →
top: 0 に上書き

 

 

アドミンバーの挙動

WordPress のアドミンバーの挙動：
- PC・タブレット（>782px）: position: fixed → 変数が正しく機能
- モバイル（≤782px）: position: absolute（スクロールで流れる）→ 変数が 46px のまま残って浮く →
top: 0 に上書き