/ programing

WordPressでAdmin Barと固定したヘッダーを重ねない方法

WordPressテーマでヘッダーを固定してスクロールで表示・非表示を操作するために Headroom.js というライブラリを使って実現している。以前から管理者でログインするとWordPressのAdmin BarとHeadroomで固定したヘッダーが重なって苦しんでいた。

この問題をWordPress公式テーマのTwenty Twenty-Oneがシンプルに解決していた。カスタムプロパティを使い、Admin Bar表示時に<body class="admin-bar">になることを利用して上書きする。これによって--global--admin-bar--heightにAdmin Barの高さが動的に設定される。

:root {
  --global--admin-bar--height: 0;
}

.admin-bar {
  --global--admin-bar--height: 32px;

  @media only screen and (max-width: 782px) {
    --global--admin-bar--height: 46px;
  }
}

あとはこのカスタムプロパティを使ってヘッダの位置を変更すればよい

.site-header.headroom {
  position: fixed;
  // top: 0;
  top: var(--global--admin-bar--height);
  left: 0;
  right: 0;
  z-index: 30;
}

変数の共通化はSassでもできるが、動的に変更した値を利用する場合はCSSのカスタムプロパティが重宝する。

Markdown with by ❤ wp-gfm