Trick # 571 | Dieser Beitrag beinhaltet 1075 Wörter. – Geschätzte Lesezeit: ca. 6 Minuten.
Sobald sich ein User (mit etwas höheren Rechten) ins WordPress-Backend einloggt, erscheint bei einem Blick auf die Live-Website immer ein schwarzer Balken am oberen Bildrand. Der ist eigentlich ganz praktisch und enthält einige Tools. Optisch stört er aber häufig. Mit unserem heutigen Trick zeigen wir Ihnen, wie sich der schwarze Balken ganz einfach aus- und wieder einblenden lässt.
So wie nebenan verhält sich die schwarze Admin-Toolbar normalerweise:
Sie bleibt auf der Live-Website einfach statisch angezeigt.
Und den Effekt nebenan wollen wir erreichen:
Die Admin-Bar verschwindet auf der Live-Website, erscheint erst wieder, sobald gescrollt wird und verschwindet dann erneut.
Dazu benötigen wir einiges an Code. Beginnen wir mit ein wenig CSS.
Den folgenden Block kopieren Sie in das Stylesheet Ihrer WordPress-Website. Im Backend unter Design/Customizer/Zusätzliches CSS:
#wpadminbar {
transition: transform 0.3s ease-in-out;
transform: translateY(0); /* Standard: sichtbar */
}#wpadminbar.hidden {
transform: translateY(-100%); /* Ausblenden: nach oben schieben */
}Nun muss noch ein Script abgelegt werden. Navigieren Sie mit Ihrem FTP-Programm (z.B. FileZilla) oder mit dem Dateimanager Ihres Websitehosters in das Verzeichnis Ihres WordPress-Themes (oder besser: WordPress-Child-Themes). Sie finden dieses in Ihrem WordPress-Verzeichnis unter /wp-content/themes/Der-Name-Ihres-Themes.
Falls es darin den Ordner js noch nicht gibt, erstellen Sie diesen und wechseln in diesen Ordner.
Nun müssen Sie noch eine js-Datei erstellen. Deren Name ist hide-wpadminbar.js.
Auch diese Datei können Sie editieren und dort den folgenden Code ablegen.
document.addEventListener("DOMContentLoaded", function () {
const wpAdminBar = document.getElementById("wpadminbar");
let lastScrollY = window.scrollY;
let timeout;// Funktion: Admin-Leiste ausblenden
function hideAdminBar() {
wpAdminBar.classList.add("hidden");
}// Funktion: Admin-Leiste einblenden
function showAdminBar() {
wpAdminBar.classList.remove("hidden");
}// Scroll-Event überwachen
window.addEventListener("scroll", function () {
const currentScrollY = window.scrollY;// Admin-Leiste bei Scrollbewegung einblenden
if (currentScrollY !== lastScrollY) {
showAdminBar();// Timer zurücksetzen, um die Leiste nach 3 Sekunden wieder auszublenden
clearTimeout(timeout);
timeout = setTimeout(hideAdminBar, 3000);
}lastScrollY = currentScrollY;
});// Nach dem Laden der Seite Timer starten, um die Leiste auszublenden
timeout = setTimeout(hideAdminBar, 3000);
});Die js-Datei von soeben muss jetzt nur noch mit WordPress geladen werden. Hierfür kopieren Sie die folgenden Zeilen in Ihre Datei functions.php. Sie können diese im Backend unter Design/Theme-Datei-Editor bearbeiten:
function custom_wpadminbar_behavior() {
if (is_admin_bar_showing()) {
wp_enqueue_script('custom-adminbar-js', get_stylesheet_directory_uri() . '/js/hide-wpadminbar.js', array(), null, true);
}
}
add_action('wp_enqueue_scripts', 'custom_wpadminbar_behavior');Das war’s auch schon. Der schwarze Menübalken erscheint nun beim Aufruf der Live-Site, verschwindet aber nach drei Sekunden, um beim Scrollen der Website wieder angezeigt zu werden.
Werbung
Werbung
