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 に上書き