Wie man die WordPress-Admin-Leiste repariert, die 100% Höhe zerstört

Question 1

Ich erstelle mit WordPress eine Website, die auf den Bildschirm passt.

Wenn sich der Websitebesitzer anmeldet, wird die Admin-Leiste angezeigt, aber sie fügt den folgenden Stil hinzu:

html{ margin-top: 28px !important; }

Dadurch wird eine vertikale Bildlaufleiste angezeigt. Gibt es eine Möglichkeit, dies nur mit CSS zu beheben?

Jemand hatte ein ähnliches Problem aber er bekam keine antwort.

Meine relevante HTML-Struktur:

<html>
   <body>
       <div id="page">
       <div class="site-main" id="main"> 
               <div class="content-area" id="primary">

                   <div role="main" class="site-content" id="content">

                   </div><!-- #content .site-content -->

               </div><!-- #primary .content-area -->         
           </div><!-- #main .site-main -->
       </div><!-- #page -->

       <div id="wpadminbar">

       </div>

   </body>
</html>

Und relevantes CSS:

html, body, #page {
    width: 100%;
    height: 100%;
    min-width: 350px;
    margin: 0;
    padding: 0;
}
#main {
    height: 100%;
}
#primary {
    float: right;
    width: 100%;
    margin-left: -200px;
    height: 100%;
}
#content {
    margin-left: 250px;
    height: 100%;
}

Für die Adminleiste:

#wpadminbar {
  height: 28px;
  left: 0;
  min-width: 600px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99999;
}

Ich habe versucht, (negative) Ränder und Auffüllungen zu verwenden und auch die Admin-Leiste einzustellen position zu absolute Anstatt von fixed aber kein Glück.

Question 2

Einblick in wordpress/wp-includes/class-wp-admin-bar.php am Anfang, und Sie werden dies finden. Sehen Sie sich die Kommentare genau an, um die eigentliche Antwort zu erhalten:

if ( current_theme_supports( 'admin-bar' ) ) {
  /**
   * To remove the default padding styles
   * from WordPress for the Toolbar,
   * use the following code:
   * add_theme_support( 'admin-bar', array( 'callback' => '__return_false' ) );
   */
  $admin_bar_args = get_theme_support( 'admin-bar' );
  $header_callback = $admin_bar_args[0]['callback'];
}

if ( empty($header_callback) )
  $header_callback = '_admin_bar_bump_cb';

add_action('wp_head', $header_callback);

wordpress/wp-includes/admin-bar.php enthält die Standardimplementierung von _admin_bar_bump_cb:

/**
 * Default admin bar callback.
 *
 * @since 3.1.0
 */
function _admin_bar_bump_cb() { ?>
<style type="text/css" media="screen">
  html { margin-top: 28px !important; }
  * html body { margin-top: 28px !important; }
</style>
<?php
}

Question 3

Fügen Sie in Ihrem PHP-Code (auf der Seite, auf der die Admin-Leiste NICHT erscheinen soll) einfach Folgendes hinzu:

add_filter('show_admin_bar', '__return_false');

Siehe hier: http://davidwalsh.name/hide-admin-bar-wordpress

Question 4

2022 hier.

Das ist mir neulich aufgefallen WordPress hat eine relevante CSS-Variable im Frontend gesetzt, wenn man als Admin eingeloggt ist:

html {
  --wp-admin--admin-bar--height: 32px;
  scroll-padding-top: var(--wp-admin--admin-bar--height);
}

@media screen and (max-width: 782px)
  html {
    --wp-admin--admin-bar--height: 46px;
  }
}

Dies ist sehr praktisch, da Sie so Dinge tun können (ein Hero-Element so hoch wie das Ansichtsfenster machen, aber die Höhe der Admin-Leiste subtrahieren):

.hero {
  min-height: calc(100vh - var(--wp-admin--admin-bar--height));
}

Es gibt jedoch ein kleines Problem damit: Wenn Sie es sind nicht Wenn Sie als Administrator angemeldet sind, ist die CSS-Variable nicht festgelegt, und dies kann Dinge wie Berechnungen beschädigen.

Dies kann behoben werden, indem nach einer Körperklasse gesucht wird, die WordPress setzt auch:

.hero {
  min-height: 100vh;
}

body.admin-bar .hero {
  min-height: calc(100vh - var(--wp-admin--admin-bar--height));
}

…aber das kann ziemlich schnell chaotisch werden, also habe ich mir eine kleine Einheitslösung ausgedacht, die ich wahrscheinlich oft verwenden werde:

body:not(.admin-bar) {
  --wp-admin--admin-bar--height: 0px;
}

Dadurch kann ich Dinge wie diese tun und muss mich nicht darum kümmern, ob der Benutzer angemeldet ist oder nicht:

.site-header {
  top: var(--wp-admin--admin-bar--height);
}

Question 5

Versuchen Sie Folgendes:

add_action('get_header', 'fix_adminbar');

function fix_adminbar()
{
    if (is_admin_bar_showing()) {
        remove_action('wp_head', '_admin_bar_bump_cb');
        add_action(
            'wp_head', function () {
            ob_start();
            _admin_bar_bump_cb();
            $code = ob_get_clean();
            $code = str_replace('margin', 'padding', $code);
            $code = preg_replace('/{/', '{ box-sizing: border-box;', $code, 1);
            echo $code;
        }
        );
    }
}```