Kennst du schon die Webentwickler-Tools deines Browsers?
In jedem aktuellen Browser kannst du mit einem Rechtsklick und Klick auf Element untersuchen/Untersuchen/Element Informationen (die Browser verwenden einen unterschiedlichen Begriff) ein Fenster mit Informationen zur Programmierung deiner Webseite sehen. Im ersten Tab („Inspektor“ bei Firefox, „Elements“ bei Chrome und Safari) siehst du in der linken Spalte das HTML und rechts daneben das zugehörigen CSS.
Im <body>
-Tag findest du bei Aufruf der Startseite (und nur dort) die CSS-Klasse home
, die du dann als Selektor (eine Art Auswahl-Kriterium) für CSS-Regeln verwenden kannst, die ausschließlich die Startseite betreffen sollen – also z.B. wenn auf der Startseite etwas verschwinden soll, auf anderen Seiten aber nicht.
Als nächstes machst du dann einen Rechtsklick auf dein Header-Menü und klickst wieder „Element untersuchen“ and. Die siehst dann, dass das Menü in einem Container mit dem HTML-Tag <nav class="header-navigation" role="navigation">
steckt. Die CSS-Regel, um diese Navigation auszublenden heißt dann
.home .header-navigation { display: none; }
. Das kannst du übrigens auch in den Entwickler-Tools gleich testen, in dem du in der rechten Spalte das „+“ anklickst, den Selektor .home .header-navigation
und in der geschwungenen Klammer die Regel display:none;
einfügst.
Möchtest du nun z.B. den ganzen Header ausblenden, musst du im HTML-Gerüst etwas weiter hoch steigen, bis du bei <header id="site-header" class="site-header header-layout-1" role="banner">
landest. Die CSS-Regel lautet also .home .site-header { display:none; }
.
Das ganze führst du dann für alle weiteren Elemente der Startseite fort. Da wir für verschiedene Elemente die gleiche CSS-Regel display:none;
verwenden, können wir die Selektoren (.home .header-navigation
, .home .site-navigation
und .home .site-footer
) mit einem Komma getrennt zusammenfassen. Das sieht dann so aus:
.home .header-navigation,
.home .site-navigation,
.home .site-footer {
display: none;
}
Die CSS-Regeln trägst du im Customizer unter Zusätzliches CSS ein.
Eine Einführung in CSS findest du z.B. beim Mozilla Developer Network.
Durch die CSS-Regeln werden die Header- und Site-Navigation sowie der komplette Footer ausgeblendet, aber sie werden trotzdem in den Browser geladen, was unnötig das Datenvolumen erhöht. Besser wäre es deshalb, ein Child Theme zu erstellen und darin die Templates entsprechend anzupassen. Das setzt zusätzliche Kenntnisse in PHP voraus.
Übrigens hat so ein Navigationsmenü auf der Startseite auch einen ganz praktischen Effekt: Besucher der Website können auch weitere Seiten aufrufen.