So verbergen Sie die WordPress-Administratorleiste

Die Admin-Leiste für angemeldete WordPress-Benutzer bietet eine bequeme Möglichkeit, schnell auf allgemeine Funktionen zuzugreifen, wie zum Beispiel das Bearbeiten von Beiträgen oder das Leeren des Site-Cache. Eines habe ich jedoch immer an der Admin-Leiste gehasst, insbesondere bei der Entwicklung einer neuen Website: Sie ist zu sichtbar und macht es schwierig, sich auf Design und Inhalt zu konzentrieren. Natürlich gibt es die Möglichkeit, es ganz auszublenden, aber gelegentlich benötige ich trotzdem schnellen Zugriff auf einige grundlegende Funktionen, wie zum Beispiel den Wechsel zur Seitenbearbeitung.

Wenn Sie die Admin-Leiste vollständig deaktivieren möchten, finden Sie hier einen Screenshot, wie Sie sie umschalten können:

Diese Lösung gefällt mir nicht, weil mir der Komfort des einfachen Wechsels gefällt, ich aber gleichzeitig auch etwas Eleganteres möchte. Ich bin vor ein paar Jahren zufällig auf diese Tuning-Methode gestoßen. Also habe ich es weiter verfeinert und mit ein paar Änderungen in ein Plugin gepackt. Vergleichen Sie einfach die ursprüngliche Admin-Leiste und meine:

Die Standard-Adminleiste ist immer sichtbar

Die angepasste Admin-Leiste verbirgt sich unter dem roten Kreis

Bewegen Sie Ihre Maus über den Kreis und die vertikale Admin-Leiste wird angezeigt

Wie Sie sehen, gibt es keine schwarzen Balken. An seiner Stelle befindet sich ein kleiner roter Kreis (Farbe und Symbol können geändert werden). Bewegen Sie Ihre Maus über das Symbol und eine vertikale Leiste wird angezeigt. Daher bleiben alle wichtigen Links zugänglich, werden jedoch ausgeblendet, bis Sie sie benötigen. Seien Sie prägnant und klar.

Meine Lösung ist nicht perfekt. Der wahrscheinlich größte Nachteil besteht darin, dass es möglicherweise nicht gut mit den langen Menüüberschriften verschiedener Plugins funktioniert. Für mich spielt das keine Rolle, da ich die Anzahl meiner Plugins gering halte. Diese Website verwendet beispielsweise nur etwa 7 Plugins.

Zusätzlich zur Neupositionierung der Admin-Leiste ändert meine Lösung auch den Website-Titel in die URL-Adresse. Dies ist sehr praktisch, wenn Sie an Websites mit sehr langen Titeln arbeiten. Domainnamen sind normalerweise kürzer.

Installationsmethode

Methode eins besteht darin, ein einzelnes Datei-Plugin zu verwenden, es in den Ordner /wp-content/plugins hochzuladen und es im Abschnitt „Plugins“ zu aktivieren. Sie können das Plug-in in meinem Originalartikel herunterladen: https://www.php.cn/link/bca314ed6a27eb1a7ce8434de54e3453

Methode 2 besteht darin, den Code zur functions.php-Datei des Themas hinzuzufügen:

// 在管理栏中显示域名而不是网站标题
add_action( 'admin_bar_menu', 'customize_my_wp_admin_bar', 80 );
function customize_my_wp_admin_bar( $wp_admin_bar ) {
    $node = $wp_admin_bar->get_node('site-name');
    $new_site_name = preg_replace("(^https?://)", "", get_home_url() );
    $node->title = $new_site_name;
    $wp_admin_bar->add_node($node);
}

final class Kama_Collapse_Toolbar {

    public static function init(){
        add_action( 'admin_bar_init', [ __CLASS__, 'hooks' ] );
    }

    public static function hooks(){

        // remove html margin bumps
        remove_action( 'wp_head', '_admin_bar_bump_cb' );

        add_action( 'wp_head', [ __CLASS__, 'collapse_styles' ] );
    }

    public static function collapse_styles(){

        // do nothing for admin-panel.
        // Remove this if you want to collapse admin-bar in admin-panel too.
        if( is_admin() ){
            return;
        }

        ob_start();
        ?>

        <style>
            #wpadminbar {
                position: fixed !important;
                top: -32px !important;
                transition: top 0.3s ease;
            }
            #wpadminbar.expanded {
                top: 0 !important;
            }
            #wpadminbar #wp-admin-bar-site-name {
                display: none;
            }
            #wpadminbar #wp-admin-bar-site-name.expanded {
                display: block;
            }
            #wpadminbar #wp-admin-bar-site-name .ab-item:before {
                content: "\f321"; /* Dashicons icon */
                font-family: 'dashicons';
                speak: none;
                font-style: normal;
                font-weight: normal;
                font-variant: normal;
                text-transform: none;
                line-height: 1;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                color: red; /* Icon color */
                margin-right: 0.3em;
            }
            #wpadminbar #wp-admin-bar-site-name.expanded .ab-item:before {
                display: none;
            }
        </style>

        <?php
        echo ob_get_clean();
    }
}

Kama_Collapse_Toolbar::init();

Da ich es auf vielen Websites wiederverwende, finde ich es bequemer, die erste Methode zu verwenden. Außerdem werden dadurch meine functions.php Dateien schlanker, was für mich ein Bonus ist.

Ein paar Anmerkungen

So ändern Sie das Symbol

Um das Symbol zu ändern, sollten Sie das Element „wpadminbar #wp-admin-bar-site-name>.ab-item:before“ ändern. Wählen Sie ein beliebiges Symbol aus Dashicons aus und bearbeiten Sie die Eigenschaft „content“ in CSS.

So ändern Sie die Symbolfarbe

Geben Sie den Code erneut ein, suchen und bearbeiten Sie die Farbe des Elements „wpadminbar #wp-admin-bar-site-name>.ab-item:before“. Für mich funktioniert Rot aufgrund des Kontrasts gut.

So behalten Sie den Website-Titel in der Admin-Leiste bei

Entfernen Sie diesen Code aus der Plugin-Datei oder Ihrer „functions.php“-Datei:
`add_action( 'admin_bar_menu', 'customize_my_wp_admin_bar', 80 );`
`Funktion anpassen_my_wp_admin_bar( $wp_admin_bar ) {`
` $node = $wp_admin_bar->get_node('site-name');`
` $new_site_name = preg_replace("(^https?://)", "", get_home_url() );`
` $node->title = $new_site_name;`
`$wp_admin_bar->add_node($node);`
`} „

Das obige ist der detaillierte Inhalt vonSo verbergen Sie die WordPress-Administratorleiste. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!