問題に遭遇したのは、【HABONE】テーマに固定式ヘッダー(追従ヘッダー)機能を実装しようとしたときのことです。

無事に実装でき、サイトを確認してみると...管理バーに固定ヘッダーの一部が隠れてしまう(重なってしまう)現象に遭遇しました。

そんなのCSSで何とかすればいい、ということで、後述するCSSで処理する方法もあるけど..のコードを使ってよしよし..と思いきや、別の問題が発生(問題点についても後述しています)しました。

そこでより確実に「管理バーがあるかどうか」という判断をさせる方法を見つけましたので、あまり使う機会はないかもしれないと思いつつ、備忘録として公開しておきます。

管理バーがあるかないかで処理を分岐する方法

コードはそれほど難しくありません。WordPressのhas関数を使うだけです。

function ha_has_admin_bar(){
if ( is_admin_bar_showing()) {
 管理バーがある時の処理
}
}

ユーザー定義関数にしているので、発火させるにはフック(add_〇〇)の記述が必要です

使うのは「is_admin_bar_showing」という組み込み関数。ちゃんといろいろな場合を考えているWordPressは本当に便利です。

これを使って、今回問題となった固定ヘッダーで管理バーと重ならないようにするコードがこちら。

function habone_sticky_header_admin_bar(){
if ( is_admin_bar_showing()) {
  echo '<style>.habone-sheader {
	margin-top:32px;}</style>';
}
}
add_action('wp_head','habone_sticky_header_admin_bar');

※【HABONE】に記述している生のコードです

管理バーがあれば、ヘッダー内へ固定ヘッダーの部分(.habone-sheader)を管理バーの高さである32px下へずらしなさいというスタイルを追加するというコードです。

これなら、管理バーがない場合には発火しないので、例えば管理バーがないテーマカスタマイザーのプレビューや、何等かの方法で管理バーを表示しないようにしているサイトでも確実に処理されますね。

参考:is_admin_bar_showing()

参考:【WordPress】ツールバー(アドミンバー)が表示されているかどうか判定する方法

CSSで処理する方法もあるけど..

body Classが定義されているテーマ(多分ほとんどが定義されていると思いますが..)ではCSSで以下のようにすれば、比較的簡単に管理バーを避けることができます。

.logged-in .セレクタ{
margin-top:32px;
}

これは、セレクタに対してログインしている場合は、上に32pxの隙間を空けなさいというコードです。

まあ!簡単!ではあるものの、ログインしている=管理バーがあるという前提なので、会員制サイトであったり、プラグインなどを使って管理バーを非表示にしている場合には、上に32pxの余白ができてしまうという難点があります。