Skip to main content

gemma4:12b - Test (Admin-Bar in WP nur beim Hovern)

Kannst du mir eine WordPress-Plugin schreiben, das die Admin-Bar so macht, dass diese sich nur aufklappt, wenn man mit der Maus den oberen Bildschirmrand berührt?

Hier ist eine elegante Lösung für dein Vorhaben. Um die gewünschte Funktionalität umzusetzen, kombinieren wir CSS für eine flüssige Animation und JavaScript, um die Position der Maus im Verhältnis zum oberen Rand des Browsers zu überwachen.

Die Funktionsweise der Lösung 🛠️

Anstatt die Admin-Bar hart über CSS zu verstecken (was oft zu Sprüngen im Layout führt), nutzen wir einen Hybrid-Ansatz:

  1. CSS-Transition: Die Admin-Bar erhält eine opacity-Eigenschaft und wird standardmäßig auf $0$ gesetzt. Dies sorgt dafür, dass sie „sanft“ ein- und ausblendet, anstatt abrupt zu erscheinen.
  2. JavaScript-Überwachung: Ein kleiner Skriptblock prüft kontinuierlich die Y-Koordinate der Mausbewegung. Sobald sich der Cursor im Bereich des oberen Randes (z. B. innerhalb von $60$ Pixeln) befindet, wird eine CSS-Klasse hinzugefügt, die die Sichtbarkeit aktiviert.

Der Plugin-Code

Du kannst diesen Code direkt in eine neue Datei namens hide-admin-bar-on-hover.php kopieren und in deinen Plugins-Ordner hochladen.

<?php
/**
 * Plugin Name: Elegante Admin-Bar (Hover)
 * Description: Blendet die WordPress-Admin-Bar standardmäßig aus und zeigt sie nur an, wenn die Maus den oberen Bereich des Bildschirms berührt.
 * Version: 1.0
 * Author: Dein Name
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Direkter Zugriff verhindern
}

function hab_hide_admin_bar_script() {
    ?>
    <style>
        /* Die Admin-Bar wird unsichtbar gemacht, aber bleibt im DOM */
        #wpadminbar {
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease-in-out, visibility 0.3s;
        }

        /* Diese Klasse wird per JavaScript hinzugefügt, wenn die Maus oben ist */
        #wpadminbar.is-visible {
            opacity: 1;
            visibility: visible;
        }
    </style>

    <script>
    (function() {
        document.addEventListener('DOMContentLoaded', function() {
            var adminBar = document.getElementById('wpadminbar');
            if (!adminBar) return;

            // Definition des Bereichs (in Pixeln vom oberen Rand)
            var threshold = 60; 

            document.addEventListener('mousemove', function(e) {
                // Prüfen, ob die Maus im oberen Bereich ist
                if (e.clientY <= threshold) {
                    adminBar.classList.add('is-visible');
                } else {
                    adminBar.classList.remove('is-visible');
                }
            });
        });
    })();
    </script>
    <?php
}
add_action('wp_head', 'hab_hide_admin_bar_script');

Anleitung zur Installation und Anpassung 📝

Um dieses Plugin zu aktivieren und zu nutzen, folge diesen Schritten:

  1. Plugin erstellen:
    • Erstelle auf deinem Computer einen Ordner namens hide-admin-bar-on-hover.
    • Erstelle darin eine Datei namens hide-admin-bar-on-hover.php und kopiere den obigen Code hinein.
  2. Installation:
    • Lade den gesamten Ordner per FTP oder über den WordPress-Dateimanager in den Verzeichnispfad /wp-content/plugins/ hoch.
  3. Aktivierung:
    • Navigiere im WordPress-Backend zu Plugins und aktiviere das Plugin „Elegante Admin-Bar (Hover)“.
  4. Feinabstimmung:
    • Sollte die Admin-Bar zu spät oder zu früh erscheinen, kannst du den Wert threshold = 60; im Code anpassen. Ein höherer Wert vergrößert die „erkennbare“ Zone am oberen Rand des Browsers.

Warum diese Methode sinnvoll ist 💡

Diese technische Umsetzung bietet gegenüber einer einfachen Lösung durch CSS einige Vorteile:

  • Benutzerfreundlichkeit: Die Admin-Bar bleibt funktionsfähig, wird aber nur dann präsent, wenn sie tatsächlich benötigt wird oder der Nutzer sich in deren Bereich befindet.
  • Ästhetik: Durch die Verwendung von opacity und transition wirkt die Interaktion hochwertig und nicht „ruckelig“.
  • Performance: Da das Skript lediglich die Mausposition prüft und keine komplexen Berechnungen durchführt, hat es nahezu keinen Einfluss auf die Ladezeit deiner Seite.

Stelle sicher, dass du nach der Installation kurz testest, ob die Animation flüssig läuft. Falls du eine spezifische Größe für den Bereich benötigst, kannst du die Variable im Code jederzeit anpassen.

Back to top