管理バーがあるかないかで処理を分岐する方法-PWCN -WordPressのカスタマイズ情報ほか-

WordPressでテーマカスタマイズをしている時は、基本的に上部に管理バーがある状態で操作しますね。

ただこれは、ログインしている状態で管理バーがある状況で表示されているものなので、当然ながら一般の方が閲覧する場合には表示されません。

これを忘れて、ページ上部からの絶対値などでリンクの指定や固定式のヘッダーなどを設定すると、実は一般の人が見た画面では上に隙間ができてしまっていたり、管理バーがある状態では隠れてしまったりします。

本ページではデザイン上で簡単に対処する方法と、管理バーのあるなしで何かの動作を分岐する方法の2つを紹介します。

コードを使用する前に、ここをクリックして注意事項をご確認ください

本ページで掲載しているコードは、以下に了承した上で使用ください

コードは商用・非商用問わず自由に使っていただいて構いませんが、コード追加による不具合やトラブルが発生しても当方では一切責任を負いません
コードは有効化しているテーマのfunctions.php、style.cssなどへ追加することで機能します。それらのファイルへの変更を行うことに不安のある方は使用しないでください
コードは本ページの公開日時点で私の環境において動作したものです。WordPressバージョン他環境の違いによって動作しないことがあります
コードは、セキュリティ、コードの正確さなどにおいて完全なものではありません。中には紹介するコードを簡略化するために省略している部分があるものもありますので、ご自身でコードを十分に検証し、必要な部分の編集を行った上で使用するようにしてください
掲載しているのは参考コードです。自身の環境に合わせるための編集はご自身で対応いただく必要があります（コメント欄等から質問いただいても基本回答は致しません）
掲載しているコードの転載を禁じます（SNSで紹介いただいたり、本ページへのリンクを張っていただくことは大歓迎です）

CSSで管理バーのある／なしを分ける方法

スタイルコードに「管理画面があったら」という条件を付けることで簡単に対処できます。

例えば

.セレクタ{
top:50px
}

というような上から指定をしている場合で、通常は上から50pxの場所に．．という上のコードに対して、管理バーがある状態ではという条件を加えるなら、

.セレクタ{
top:50px;
}

body.admin-bar .セレクタ{
top:82px;
}

と、「body.admin-bar」という、標準で出力される管理バーありの場合のbodyclassを付与したものを後から加えて上書きしてやればよいわけです。

管理バーの高さは32pxなので、通常の50pxに32pxを単純に足しています

もしも（ないとは思いますが）、テーマの関係などで「admin-bar」というbodyclassが付与されないようであれば、以下のコードを追加することで「has-a-bar」というクラスが追加されるので、「body.has-a-bar」を付ければ管理バーありの場合、付けなければなしの場合という風に場合分けできます。

/***** 管理バーがあったらbodyclassを付与 *****/
function sample_has_admin_bar_add_body_class( $classes ) {
    if ( is_admin_bar_showing() ) {
        $classes[] = 'has-a-bar';
    }else{
		$classes[] = '';
	}
    return $classes;
}
add_filter( 'body_class', 'sample_has_admin_bar_add_body_class' );

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

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

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

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

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

例として、以下が、先ほどCSSで分岐したものをテーマのfunctions.phpから制御した例です。

function sample_has_admin_bar_top_margin(){
if ( is_admin_bar_showing()) {
  echo '<style>.セレクタ {
	margin-top:32px;}</style>';
}
}
add_action('wp_head','sample_has_admin_bar_top_margin');

管理バーがあれば、セレクタが割り当てられているコンテンツ（「.セレクタ」の部分）を管理バーの高さである32px下へずらしなさいというスタイルを追加するというコードです。

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

参考：is_admin_bar_showing（）

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