問題に遭遇したのは、【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下へずらしなさいというスタイルを追加するというコードです。
これなら、管理バーがない場合には発火しないので、例えば管理バーがないテーマカスタマイザーのプレビューや、何等かの方法で管理バーを表示しないようにしているサイトでも確実に処理されますね。
参考:【WordPress】ツールバー(アドミンバー)が表示されているかどうか判定する方法
CSSで処理する方法もあるけど..
body Classが定義されているテーマ(多分ほとんどが定義されていると思いますが..)ではCSSで以下のようにすれば、比較的簡単に管理バーを避けることができます。
.logged-in .セレクタ{
margin-top:32px;
}
これは、セレクタに対してログインしている場合は、上に32pxの隙間を空けなさいというコードです。
まあ!簡単!ではあるものの、ログインしている=管理バーがあるという前提なので、会員制サイトであったり、プラグインなどを使って管理バーを非表示にしている場合には、上に32pxの余白ができてしまうという難点があります。