How to branch processing depending on whether the management bar is present or not

How to separate with/without admin bar using CSS

You can easily deal with this by adding the condition “if there is an administration screen” to the style code.

for example

.selector{
top:50px
}

When specified from above, it is usually 50px from the top. ．． If you add the condition that the admin bar is present to the above code,

.selector{
top:50px;
}

body.admin-bar .selector{
top:82px;
}

Then, all you have to do is overwrite it by adding “body.admin-bar”, which is given the bodyclass that is output as standard when there is an admin bar.

The height of the admin bar is 32px, so I simply added 32px to the normal 50px.

If (I don’t think it exists) the bodyclass “admin-bar” is not assigned due to the theme etc., the class “has-a-bar” will be added by adding the code below. Therefore, if you add “body.has-a-bar”, you can distinguish between cases where the admin bar is present, and cases where there is no admin bar if you do not add it.

/***** If there is an admin bar, give it a 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' );

How to branch processing depending on whether the management bar is present or not

The code is not that difficult. Just use WordPress’s has function.

function ha_has_admin_bar(){
if ( is_admin_bar_showing()) {
 Processing when there is an admin bar
}
}

Since it is a user-defined function, you need to write a hook (add_〇〇) to fire it.

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

The built-in function used is “is_admin_bar_showing“. WordPress is really useful because it takes into consideration various situations.

As an example, below is an example of controlling what was previously branched with CSS from the theme’s functions.php.

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

If there is an admin bar, this code adds a style that says to shift the content to which the selector is assigned (the “.selector” part) down 32px, which is the height of the admin bar.

In this case, it will not fire if there is no admin bar, so it will work reliably even on previews of theme customizers that do not have an admin bar, or on sites that do not display the admin bar in some way.

reference:is_admin_bar_showing（）

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