admin_bar相关

Published

2022-05-24

浏览次数 : 345

WordPress Admin Bar CSS

As you can see by looking at your page HTML code from your browser, WordPress is adding these lines of CSS into the header section of the HTML document when the admin bar is visible:

html { margin-top: 32px !important; }* html body { margin-top: 32px !important; }@media screen and ( max-width: 782px ) { html { margin-top: 46px !important; } * html body { margin-top: 46px !important; }}

The first line of code is adding a margin-top of 32 pixels to the html DOM Element (46 pixels if we are on a mobile screen). The !important attribute in the declaration overrides the effects of any other declaration for the margin-top property.

The second line will be applied in the case where the page is embedded inside another page, and in this case the margin-top is applied to the body element.

Take Care of the Admin Bar Using CSS

Let’s say you have a menu bar with absolute positioning at the top of your page:

<body>  <div id="menu" style="position: absolute; top: 0px;">    <!-- menu code -->  </div>   <!-- the rest of the page --></body>

You can make the menu div reposition correctly when the admin bar is shown by simply setting a position: relative; for the body element.

An element with position: absolute; is positioned relative to the nearest positioned ancestor^[a]. A “positioned” element is one whose position is anything except static. Since the static position is the default value for every element, we need to set a relative position to the ancestor that we want to use for our relative positioning, hence the position: relative; for the body:

body { position: relative; }

Alternatively, we can wrap the menu div inside another div with a position: relative;

<body>  <div id="wrapper" style="position: relative;">    <div id="menu" style="position: absolute; top: 0px;">      <!-- menu code -->    </div>  </div>   <!-- the rest of the page --></body>

Now, let’s say that you have a sticky fixed element at the top right of your page:

<body>  <div id="sticky-element" style="position: fixed; top:0; right:0;">     <!-- sticky element code -->  </div>   <!-- the rest of the page --></body>

For the sticky fixed positioned element, since the fixed positioning is always relative to the viewport, we can leverage the fact that when the admin bar is shown, the body element contains the class admin-bar:

.admin-bar #sticky-element { top: 32px; }@media screen and ( max-width: 782px ) {   .admin-bar #sticky-element { top: 46px; } }

Take Care of the Admin Bar Using PHP

We can also handle the admin bar in the theme PHP code. The first thing we can use is the is_admin_showing() function. This function returns true when the admin bar is shown in the page, so we can add something to the page according to the visibility of the admin bar.

<?phpif ( is_admin_bar_showing() ) {    // do something}?>

The last, more powerful, thing we can do is changing the style tag that WordPress is adding to the header.

WordPress is using a default callback function to add the style tag when the admin bar is initialized. We can override this callback using the add_theme_support() function. It should be done in the theme’s functions.php file to work, and the theme support should be added on the ‘after_setup_theme’ event. Here is the code:

// this code goes in your functions.php file function custom_theme_setup() {  add_theme_support( 'admin-bar', array( 'callback' => 'my_admin_bar_css') );}add_action( 'after_setup_theme', 'custom_theme_setup' ); function my_admin_bar_css() { ?><style> /* * put here your custom css rules to be added to the header * when the admin bar is visible */</style><?php}

Sign In