Standardmäßig hat WordPress dieoben auf dem BildschirmDiese Leiste zeigt die Admin-Leiste an und hilft Ihnen, schnell auf die Backend-Funktionen von WordPress zuzugreifen. Manche Benutzer empfinden die Position der Admin-Leiste jedoch als etwas aufdringlich und möchten sie verschieben, insbesondere um ihr Aussehen und ihre Position zu ändern.

In diesem Tutorial wird dieWP autodidaktischer Website-BaukastenWir zeigen Ihnen, wie Sie die WordPress-Adminleiste in die Fußzeile verschieben können, indem Sie benutzerdefiniertes CSS hinzufügen, oder wie Sie die Admin-Leiste in die Fußzeile verschieben können, indem SieFunktionen.php-Datei, um den gleichen Effekt zu erzielen und gleichzeitig sicherzustellen, dass die Anzeige der Seite für nicht eingeloggte Benutzer nicht beeinträchtigt wird.

Warum sollten Sie die WordPress-Adminleiste verschieben?

Die WordPress-Verwaltungsleiste bietet eine Reihe von Navigationsfunktionen wie den schnellen Zugriff auf das Dashboard, die Bearbeitung von Seiten, die Anzeige von Kommentaren, die Aktualisierung von Plugins und mehr. Sie ist zwar leistungsstark, befindet sich aber standardmäßig am oberen Rand der Seite, wodurch Inhalte verdeckt werden können oder Konflikte mit benutzerdefinierten Designs entstehen können.

Das Verschieben der Admin-Leiste an den unteren Rand der Seite verbessert das visuelle Erlebnis, insbesondere für Benutzer, die mehr Platz auf dem Bildschirm benötigen, um ihr Front-End-Design anzuzeigen. Außerdem verbessert es die Gesamtästhetik der Seite, vor allem wenn das Design im oberen Bereich der Seite komplex ist, und das Verschieben der Admin-Leiste an den unteren Rand der Seite vermeidet Ablenkungen.

vorläufig

Bevor wir in das Tutorial eintauchen, sollten Sie sich auf Folgendes vorbereiten:

1. Ein Thema, das benutzerdefiniertes CSS unterstützt und die Verwendung eines Blockeditors empfiehlt (z.B.Dreiundzwanzig und dreiundzwanzig(Thema).
2. Unterthema(Es wird empfohlen, zuerst das Child-Theme zu erstellen, damit Ihre Änderungen nicht verloren gehen, wenn Sie das Theme aktualisieren).
3. Ihre WordPress-Version sollte auf die neueste Version aktualisiert worden sein, um Kompatibilität zu gewährleisten.

Schritt 1: Gehen Sie zu Theme-Anpassung

Zunächst müssen Sie sich vergewissern, dass das verwendete Theme Anpassungen unterstützt. Es gibt mehrere Möglichkeiten der Anpassung in WordPress, die einfachste ist über die "Erscheinungsbild > Anpassung"Bildschirm zu konfigurieren.

1. Melden Sie sich bei der WordPress-Website an und gehen Sie zum Dashboard.
2. Navigieren Sie zuErscheinungsbild > Anpassung, oder klicken Sie einfach auf "Personalisierung"Knopf.

3. Sobald Sie auf der Seite zur Anpassung des Themas sind, suchen Sie nach "Zusätzliches CSS"Optionen.

Warum sollten Sie untergeordnete Themen erstellen?

Um sicherzustellen, dass künftige Aktualisierungen des Themas die von Ihnen vorgenommenen Anpassungen nicht überschreiben, empfiehlt es sich, dass Sie dieUntergeordnete Themen verwenden. Kind-Themen können Änderungen am Thema vornehmen, ohne die Kerndateien des ursprünglichen Themas zu beeinflussen.

Schritt 2: Benutzerdefiniertes CSS hinzufügen

Als nächstes gehen wir die "Zusätzliches CSS" fügt der WordPress-Adminleiste einen eigenen Stil hinzu, um sie an den unteren Rand der Seite zu verschieben.

Benutzerdefinierter CSS-Code

gehen inZusätzliches CSSKopieren Sie nach der Seite den folgenden Code und fügen Sie ihn ein:

Körper {
    Rand oben: -28px;
    padding-bottom: 28px;
}
body.admin-bar #wphead {
    padding-top: 0;
}
body.admin-bar #footer {
    padding-bottom: 28px;
}
#wpadminbar {
    oben: auto !important;
    unten: 0;
}
#wpadminbar .menupop .ab-sub-wrapper {
    unten: 32px;
}

Dieses CSS-Snippet verschiebt die Admin-Leiste vom oberen an den unteren Rand der Seite und passt den Abstand zwischen dem oberen und unteren Rand der Seite an, um die neue Position der Admin-Leiste zu berücksichtigen.

Funktion des Interpretationscodes

• margin-top: -28px; padding-bottom: 28px;Verringern Sie den Abstand am oberen Rand der Seite und lassen Sie am unteren Rand Platz, damit sich die Admin-Leiste nicht mit dem Seiteninhalt überschneidet.
• #wpadminbar { top: auto !important; bottom: 0; }Admin-Leiste: Erzwingen Sie die Fixierung der Admin-Leiste am unteren Rand der Seite anstelle der Standardposition oben.
• .ab-sub-wrapper { bottom: 32px; }Vergewissern Sie sich, dass das Dropdown-Menü in der Verwaltungsleiste unten korrekt angezeigt wird.

Schritt 3: Vorschau und Änderungen speichern

Wenn Sie mit dem Hinzufügen des CSS fertig sind, klicken Sie auf "Änderungen speichern" und kehren Sie zur Startseite der Website zurück, um den Effekt zu sehen.

Wenn alles in Ordnung ist, speichern Sie die Einstellungen und veröffentlichen Sie die Änderungen. Ihre WordPress-Verwaltungsleiste sollte vom oberen zum unteren Rand der Seite verschoben worden sein.

Andere Fragen und Überlegungen

1 Probleme mit der Anzeige von nicht registrierten Benutzern

Nachdem Sie die obigen Schritte ausgeführt und die Änderungen vorgenommen haben, kann es zu einem Problem kommen, bei dem die Seitenanzeige um 28px angehoben wird, wenn ein nicht eingeloggter Benutzer die Website besucht. Um dieses Problem zu beheben, können Sie optional zusätzlichen bedingten Code in die Datei functions.php einfügen, so dass nur eingeloggte Benutzer die Anpassungen der Verwaltungsleiste sehen und nicht eingeloggte Benutzer davon nicht betroffen sind.

Schritt 4: Code über functions.php hinzufügen

Wenn Sie möchten, dass die Anpassung der Admin-Leiste nur für eingeloggte Benutzer wirksam wird, können Sie dies erreichen, indem Sie einen benutzerdefinierten Code in die Datei functions.php des Themes einfügen. Unten sehen Sie den hinzugefügten Code:

function wpg_ubah_posisi_admin_bar() {
    if (is_user_logged_in()) {
        ?>
        <style>
            body {margin-top: -28px; padding-bottom: 28px;}
            body.admin-bar #wphead {padding-top: 0;}
            body.admin-bar #footer {padding-bottom: 28px;}
            #wpadminbar { top: auto !important; bottom: 0;}
            #wpadminbar .menupop .ab-sub-wrapper { bottom: 32px; }
        </style>
        <?php
    }
}

add_action('wp_head', 'wpg_ubah_posisi_admin_bar');

Wie füge ich den Code der functions.php hinzu?

1. Loggen Sie sich in das WordPress-Backend ein und navigieren Sie zuErscheinungsbild > Editor für Themendateien.

2. Suchen Sie in der Liste der Dateien auf der rechten Seite die Dateifunktionen.phpDokumentation.
3. Fügen Sie den obigen Code am Ende dieser Datei ein und klicken Sie auf "Aktualisierte Dokumente".

Dieser Code stellt sicher, dass die Neupositionierung der Admin-Leiste nur für eingeloggte Benutzer wirksam wird und dass nicht eingeloggte Benutzer keine Auswirkungen sehen.

zu einem Urteil gelangen

Wenn Sie die obigen Schritte befolgen, können Sie die WordPress-Adminleiste ganz einfach vom oberen an den unteren Rand der Seite verschieben, ohne dass Sie zusätzliche Plugins installieren müssen. Ganz gleich, ob Sie die Leiste per CSS anpassen oder einen bedingten Code in die Datei functions.php einfügen, diese Methoden ermöglichen eine individuellere Darstellung der Admin-Leiste auf Ihrer Website.