Der Bereich direkt unter dem Header einer WordPress Seite ist oft ein Bereich für Navigation, Breadcrumbs, Slogan oder sogar eine zusätzliche Bildleiste. Manchmal ist dieser Bereich jedoch überflüssig, unordentlich oder einfach nicht passend für das gewünschte Design. Ihn zu entfernen, ohne dabei das gesamte Design deiner Seite zu zerstören, kann aber eine Herausforderung sein. Keine Sorge! Dieser umfassende Leitfaden zeigt dir, wie du diesen Bereich sicher und effektiv entfernen kannst, mit verschiedenen Methoden und detaillierten Anweisungen.
Warum den Bereich unter dem Header entfernen?
Bevor wir uns in die technischen Details stürzen, lass uns kurz darüber sprechen, warum du diesen Bereich überhaupt entfernen möchtest:
- Minimalistisches Design: Du bevorzugst einen sauberen, minimalistischen Look ohne unnötige Elemente.
- Verbesserte User Experience: Der Bereich ist überladen oder lenkt von den wichtigen Inhalten ab.
- Design-Anpassungen: Du möchtest den Bereich durch etwas Eigenes ersetzen oder das Header-Design erweitern.
- Performance-Optimierung: Weniger Elemente bedeuten potenziell schnellere Ladezeiten (wenn auch marginal).
Unabhängig von deinem Grund ist es wichtig, die Entfernung des Bereichs strategisch anzugehen, um unerwünschte Nebeneffekte zu vermeiden.
Wichtige Vorbereitungen vor der Entfernung
Bevor du überhaupt anfängst, solltest du diese wichtigen Schritte durchführen:
- Backup deiner Webseite: Dies ist der wichtigste Schritt! Erstelle ein vollständiges Backup deiner WordPress-Dateien und Datenbank. So kannst du alles problemlos wiederherstellen, falls etwas schiefgeht. Es gibt viele WordPress Plugins für Backups, wie UpdraftPlus oder BackWPup.
- Verwende ein Child Theme: Bearbeite niemals die Dateien deines Haupt-Themes direkt. Erstelle stattdessen ein Child Theme. Dadurch bleiben deine Änderungen erhalten, auch wenn das Haupt-Theme aktualisiert wird. Viele Themes bieten bereits Child Themes an; andernfalls kannst du sie manuell erstellen (Anleitungen dazu findest du online).
- Identifiziere den Bereich: Untersuche den Code deiner Seite, um genau herauszufinden, welcher Code für den unerwünschten Bereich verantwortlich ist. Verwende die Entwicklertools deines Browsers (Rechtsklick -> „Untersuchen”) und bewege den Mauszeiger über den Bereich, um das zugehörige HTML-Element zu finden. Achte auf Klassen- und ID-Namen – diese sind später wichtig.
Methoden zur Entfernung des Bereichs unter dem Header
Hier sind verschiedene Methoden, um den Bereich unter dem Header zu entfernen, von einfachen bis zu fortgeschrittenen:
1. Theme-Optionen oder Customizer
Viele WordPress Themes bieten integrierte Optionen zum Anpassen des Headers und des Bereichs darunter. Gehe zum WordPress Customizer (Design -> Anpassen) und suche nach Optionen wie „Header”, „Navigation”, „Layout” oder ähnlichem. Oft findest du hier Schalter zum Ausblenden oder Anpassen bestimmter Bereiche.
Vorteile:
- Einfachste und sicherste Methode.
- Keine Code-Bearbeitung erforderlich.
Nachteile:
- Nicht alle Themes bieten diese Option.
- Die Anpassungsmöglichkeiten sind möglicherweise begrenzt.
2. CSS verwenden
Wenn das Theme keine Option zum Ausblenden des Bereichs bietet, kannst du CSS verwenden. Dies ist eine einfache und schnelle Methode, um den Bereich visuell auszublenden, ohne den Code des Themes zu verändern.
- Identifiziere die CSS-Klasse oder ID: Verwende die Entwicklertools deines Browsers (wie oben beschrieben), um die CSS-Klasse oder ID des zu entfernenden Bereichs zu finden. Zum Beispiel könnte sie „sub-header”, „page-header”, „breadcrumb-area” oder ähnlich heißen.
- Füge CSS-Code hinzu: Füge den folgenden CSS-Code in den Customizer (Design -> Anpassen -> Zusätzliches CSS) oder in die style.css-Datei deines Child Themes ein:
.deine-klasse-oder-id { display: none !important; }Ersetze „.deine-klasse-oder-id” durch die tatsächliche Klasse oder ID des Bereichs. Das `!important` sorgt dafür, dass die Regel Vorrang vor anderen CSS-Regeln hat.
Vorteile:
- Einfach und schnell.
- Keine Änderung der Theme-Dateien erforderlich (wenn im Customizer verwendet).
Nachteile:
- Der Bereich wird nur ausgeblendet, nicht entfernt. Der Code bleibt vorhanden, was sich minimal auf die Ladezeit auswirken kann.
- Erfordert CSS-Kenntnisse (zumindest grundlegende).
3. PHP-Code bearbeiten (Fortgeschritten)
Für eine vollständige Entfernung des Bereichs ist es erforderlich, den PHP-Code des Themes zu bearbeiten. Dies ist die komplexeste Methode und sollte nur von erfahrenen Benutzern durchgeführt werden.
- Finde die relevante Template-Datei: Dies kann die `header.php`, `page.php`, `single.php` oder eine andere Template-Datei sein, abhängig davon, wie das Theme strukturiert ist. Oft ist der Bereich in einer separaten Datei wie `template-parts/header/sub-header.php` enthalten. Die Entwicklertools deines Browsers können dir helfen, die richtige Datei zu finden.
- Bearbeite die Template-Datei: Öffne die gefundene Datei in einem Texteditor (oder direkt im WordPress-Editor, *aber nur, wenn du wirklich weißt, was du tust*) und suche den Code, der für den zu entfernenden Bereich verantwortlich ist. Das ist der Code, den du vorher in den Entwicklertools identifiziert hast.
- Entferne oder kommentiere den Code aus: Entferne den Code vollständig oder kommentiere ihn aus, indem du `` danach einfügst. Das Auskommentieren ist sicherer, da du den Code später leicht wiederherstellen kannst.
<!-- <div class="sub-header"> <p>Dieser Code wird entfernt.</p> </div> --> - Speichere die Datei: Speichere die geänderte Datei auf deinem Server (im Child Theme, wenn du eines verwendest).
Vorteile:
- Der Bereich wird vollständig entfernt, was zu einer minimalen Verbesserung der Ladezeit führen kann.
- Größtmögliche Kontrolle über das Design.
Nachteile:
- Komplex und riskant. Fehler im PHP-Code können zu Fehlern auf deiner Webseite führen.
- Erfordert PHP-Kenntnisse.
- Updates des Haupt-Themes können deine Änderungen überschreiben, daher ist die Verwendung eines Child Themes unerlässlich.
4. Plugins verwenden
Es gibt auch WordPress Plugins, die dir helfen können, Bereiche auf deiner Seite zu entfernen oder anzupassen. Einige dieser Plugins bieten eine visuelle Oberfläche, mit der du Elemente auswählen und ausblenden kannst. Beispiele hierfür sind „Elementor Header & Footer Builder” (wenn du Elementor verwendest) oder „Remove Header Footer”.
Vorteile:
- Einfache Bedienung (bei Plugins mit visueller Oberfläche).
- Keine Code-Kenntnisse erforderlich (bei einigen Plugins).
Nachteile:
- Zusätzliche Plugins können die Ladezeit der Webseite erhöhen.
- Nicht alle Plugins sind zuverlässig oder gut gewartet.
Nach der Entfernung: Testen und Anpassen
Nachdem du den Bereich unter dem Header entfernt hast, ist es wichtig, deine Webseite gründlich zu testen:
- Überprüfe die Seite auf verschiedenen Geräten: Stelle sicher, dass das Design auf Desktops, Tablets und Smartphones gut aussieht.
- Teste die Funktionalität: Funktioniert die Navigation einwandfrei? Gibt es keine unerwarteten Probleme?
- Überprüfe die Ladezeit: Verwende ein Tool wie Google PageSpeed Insights, um die Ladezeit deiner Seite zu überprüfen und sicherzustellen, dass sie nicht negativ beeinflusst wurde.
Wenn du Probleme feststellst, kannst du die Änderungen rückgängig machen (dank deines Backups!) oder die CSS/PHP-Anpassungen feinjustieren, bis alles perfekt ist.
Fazit
Das Entfernen des Bereichs unter dem Header in WordPress kann das Design deiner Webseite erheblich verbessern. Wähle die Methode, die am besten zu deinen Kenntnissen und Bedürfnissen passt. Denke immer daran, ein Backup zu erstellen und ein Child Theme zu verwenden, um deine Arbeit zu schützen. Mit sorgfältiger Planung und Umsetzung kannst du den Bereich erfolgreich entfernen und eine sauberere, ansprechendere Webseite erstellen!