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:

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.
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:

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.
Installation:
- Lade den gesamten Ordner per FTP oder über den WordPress-Dateimanager in den Verzeichnispfad /wp-content/plugins/ hoch.
Aktivierung:
- Navigiere im WordPress-Backend zu Plugins und aktiviere das Plugin „Elegante Admin-Bar (Hover)“.
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.

Claude Opus 4.6' Meinung

Code-Review: Elegante Admin-Bar (Hover)

Das Plugin in hide-admin-bar-on-hover.php ist funktional und für seinen Zweck solide geschrieben. Es gibt jedoch einige Verbesserungspunkte, die ich in die Kategorien Funktionalität, Performance und Best Practices aufteile:

✅ Was gut ist

Sicherheitscheck mit !defined('ABSPATH') – korrekt.
CSS-Transitions für sanftes Ein-/Ausblenden – gute UX.
IIFE-Pattern im JavaScript verhindert globale Variablen-Verschmutzung.
Null-Check auf adminBar – defensives Programmieren.
DOMContentLoaded stellt sicher, dass das DOM bereit ist.

⚠️ Verbesserungspotenzial

1. Performance – mousemove feuert extrem oft

Das mousemove-Event feuert dutzende Male pro Sekunde. Ohne Throttling wird bei jeder Mausbewegung classList.add/remove aufgerufen – auch wenn sich der Zustand nicht ändert.

2. Nur im Frontend, nicht im Admin-Bereich

Die Funktion hab_hide_admin_bar_script wird auch im Backend geladen, was dort unerwünscht sein könnte.

3. Inline-CSS/JS statt enqueuete Dateien

WordPress Best Practice ist wp_enqueue_script / wp_enqueue_style, allerdings ist bei so wenig Code Inline vertretbar.

4. Kein mouseleave-Fallback für den Fensterrand

Wenn die Maus das Browserfenster nach oben verlässt, wird kein mousemove mehr gefeuert – die Bar bleibt dann sichtbar hängen.

Optimierte Version

Die überarbeitete Version enthält Throttling, Zustandsprüfung, Frontend-Only-Check und ein mouseleave-Fallback:

<?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.1
 * Author: Dein Name
 */

if (!defined('ABSPATH')) {
  exit;
}

function hab_hide_admin_bar_script()
{
  // Nur im Frontend anwenden, nicht im Admin-Bereich
  if (is_admin()) {
    return;
  }

  // Nur ausgeben, wenn die Admin-Bar auch tatsächlich angezeigt wird
  if (!is_admin_bar_showing()) {
    return;
  }
  ?>
  <style>
    #wpadminbar {
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease-in-out, visibility 0.3s;
      /* Verhindert, dass die unsichtbare Bar Klicks blockiert */
      pointer-events: none;
    }

    #wpadminbar.is-visible {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    /* Kompensiert den Margin-Top, den WP für die Admin-Bar setzt */
    html.hab-bar-hidden {
      margin-top: 0 !important;
    }
  </style>

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

        var threshold = 60;
        var isVisible = false;

        // html-Element-Klasse setzen, um den oberen Margin zu entfernen
        document.documentElement.classList.add('hab-bar-hidden');

        function showBar() {
          if (!isVisible) {
            isVisible = true;
            adminBar.classList.add('is-visible');
            document.documentElement.classList.remove('hab-bar-hidden');
          }
        }

        function hideBar() {
          if (isVisible) {
            isVisible = false;
            adminBar.classList.remove('is-visible');
            document.documentElement.classList.add('hab-bar-hidden');
          }
        }

        // Throttle: max. alle 50ms ausführen
        var lastCall = 0;
        document.addEventListener('mousemove', function (e) {
          var now = Date.now();
          if (now - lastCall < 50) return;
          lastCall = now;

          if (e.clientY <= threshold) {
            showBar();
          } else {
            hideBar();
          }
        });

        // Fallback: Maus verlässt das Fenster → Bar ausblenden
        document.addEventListener('mouseleave', function () {
          hideBar();
        });
      });
    })();
  </script>
  <?php
}

add_action('wp_head', 'hab_hide_admin_bar_script');

Zusammenfassung der Änderungen

Verbesserung	Begründung
`is_admin()` / `is_admin_bar_showing()` Guards	Verhindert unnötige Ausgabe im Backend oder wenn die Bar deaktiviert ist
`pointer-events: none`	Die unsichtbare Bar blockiert keine Klicks auf darunterliegende Elemente mehr
Zustandsvariable `isVisible`	Verhindert redundante DOM-Manipulationen bei jedem `mousemove`
Throttling (50ms)	Reduziert die Event-Verarbeitung von ~60/s auf ~20/s
`mouseleave`-Event	Bar wird ausgeblendet, wenn die Maus das Fenster verlässt
`hab-bar-hidden` Klasse auf `<html>`	Kompensiert den `margin-top: 32px`, den WordPress für die Admin-Bar setzt

Das Original war bereits nutzbar, die optimierte Version ist jedoch robuster und performanter.

gemma4:12b - Web Development Fähigkeiten

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

Claude Opus 4.6 testet Ollama (gemma4:12b)

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

Die Funktionsweise der Lösung 🛠️

Der Plugin-Code

Anleitung zur Installation und Anpassung 📝

Warum diese Methode sinnvoll ist 💡

Claude Opus 4.6' Meinung

Code-Review: Elegante Admin-Bar (Hover)

✅ Was gut ist

⚠️ Verbesserungspotenzial

Optimierte Version

Zusammenfassung der Änderungen