Vor Kurzem kam im Rahmen der Diskussion zu einem anderen Beitrag die Frage auf, ob es möglich sei, das Twenty Seventeen Menü auch im Footer auszugeben. Twenty Seventeen sieht diese Option erst einmal nicht vor. Vielmehr bietet es für den Fußbereich der Seite das sogenannte Social Links Menu an, also die Verlinkung mit Facebook & co. Da ein zusätzliches Menü nicht mal eben so eingerichtet ist (zum Beispiel muss es erst einmal in der functions.php registriert werden), hatte ich mit dem Vorschlag geantwortet, vielleicht einfach den Float To Top-Button einzusetzen. Bei der Frage ging es schließlich darum, Lesern am Ende der Seite einen schnellen Zugriff auf die Navigation zu bieten.
Eine Alternative ist es aber, mit dem Widget Individuelles Menü zu arbeiten und dies im Footer unterzubringen. Dieses Vorgehen setzt voraus, dass das Theme im Footer mindestes einen Widgetbereich hat. Twenty Seventeen hat derer sogar zwei. Somit erfordert das Ganze nur noch einige CSS-Änderungen. Diese lassen sich einfach im Rahmen des Zusätzlichen CSS hinterlegen. Das Vorgehen braucht also keinerlei Änderungen der Templates und ist damit auch für Einsteiger gut geeignet.
Das Widget Individuelles Menü
Das Individuelle Menü ist eins der Standard Widgets. Es ermöglicht die Darstellung eines zuvor angelegten Menüs in einem der Widgetbereiche des Themes. Im Gegensatz zur Hauptnavigation stellt das Widget die Menüeinträge allerdings ganz offensichtlich als Liste dar. Tatsächlich ist aber auch das Top Menü nichts anderes als eine Liste, nur sieht sie aufgrund der CSS-Bearbeitung nicht wie eine solche aus. Das Widget lässt sich nun entsprechend bearbeiten, sodass es seine Listeneinträge nebeneinander ausgibt.
Einziger wesentlicher Unterschied zur Hauptnavigation: Im Footer braucht es meines Erachtens nicht auch noch die Dublette der potentiellen Sub-Navigation. Abgesehen davon, dass die den Footerbereich gegebenenfalls überfrachten würde, ist es auch eine Frage des Aufwandes. Das Twenty Seventeen Menü besteht jedenfalls nicht nur aus einer Handvoll CSS-Angaben.
Der Aufbau des Footer-Bereiches
Der Twenty Seventeen Footer bietet Platz für zwei unterschiedliche Widgetbereiche, das Social Links Menu und den üblichen Hinweis auf die stolze Präsentation von WordPress. Die beiden Widgetbereiche Footer 1 und Footer 2 erscheinen nebeneinander, wobei Footer 1 nur 36 Prozent des zur Verfügung stehenden Platzes ausmacht. Dies korrespondiert mit dem Social Links Menu, das ebenfalls 36 Prozent der Gesamtbreite nutzt.
Wenn Sie kein entsprechendes Social Links Menü anlegen und auch keine Widgets im Footer nutzen, erscheint nur der stolze WordPress Hinweis.
Das Twenty Seventeen Menü im Footer als Individuelles Menü
Die Wiederholung des Top Menüs bewerkstelligen Sie über das Widget Individuelles Menü, indem Sie es unter Design > Widgets in den Footer 1 Bereich ziehen und dann dort Ihr Top Menü auswählen.
Nun gilt es, die Darstellung anzupassen.
1. Das Sub-Menü ausblenden
Bei meinem Vorgehen blende ich das Sub-Menü im Footer aus. Als Hilfestellung für Nutzer, die nicht wieder nach oben scrollen wollen, reicht meines Erachtens die erste Ebene aus.
/* Definition für das Ausblenden des Sub-Menüs im Footer */
.site-footer .sub-menu { display:none; }2. Die passende Media Query festlegen
Die folgenden CSS-Definitionen sollen nur auf dem Desktop greifen und somit die vorhandenen Angaben für mobile Geräte nicht überschreiben. Dafür braucht es die entsprechende Medien Abfrage (media query).
@media screen and (min-width: 48em) {
}Alle folgenden Definitionen gehören zwischen die beiden geschwungenen Klammern.
3. Die Breite der Widgetbereiche ändern
Footer 1 und Footer 2 erscheinen nebeneinander, wobei Footer 1 mit seinen 36 Prozent nicht breit genug ist. Stattdessen sollte es die volle zur Verfügung stehende Breite nutzen (100 Prozent). Footer 2 hingegen kann so breit sein, wie es will. Ich wähle mal 50 Prozent.
/* Breite der beiden Widgetbereiche im Footer festlegen */
.site-footer .widget-column.footer-widget-1 {
width: 100%;
}
.site-footer .widget-column.footer-widget-2 {
width: 50%;
float: left;
}4. Die einzelnen Menüeinträge formatieren
Wenn die einzelnen Menüeinträge nebeneinander und nicht wie im Rahmen des Individuellen Menü Widgets üblich untereinander erscheinen sollen, brauchen sie ein float:left. Mittels margin-right sorgen Sie zudem für etwas Abstand zwischen den einzelnen Einträgen. Außerdem braucht es nicht die feinen Rahmenlinien oben und unten (border-top und border-bottom), die bei der Listendarstellung sonst die Trennlinie ausmachen.
/* Anpassungen für die Menüeinträge */
.site-footer ul.menu li {
border-bottom: none;
border-top: none;
padding: 0.5em 0;
float: left;
margin-right: 2em;
}5. Anpassung, falls Ihr Menü in eine zweite Zeile umbrechen sollte
Falls Ihr Menü derart viele Einträge aufweisen sollte, dass es in eine zweite Zeile umbricht, braucht es die folgende Anpassung. Ohne diese Modifikation beginnt die zweite Zeile erst unterhalb des zweiten Listeneintrages.
/* Anpassung der Menüeinträge bei Zeilenumbruch */
.site-footer ul li + li {
margin-top: 0;
}6. Anpassung von Schriftfarbe und Hover-Effekt
Damit das Menü im Footer so aussieht wie das Twenty Seventeen Menü oben, braucht es noch die Änderung der Schriftstärke (font-weight) und des Verhaltens, wenn die Mouse darüber fährt (Hover-Effekt).
/* Änderung der Schriftstärke */
.site-footer ul.menu a {
font-weight: 600;
}
*/ Anpassung des Hover-Effektes */
.site-footer .widget-area ul.menu li a:hover {
color: #767676;
-webkit-box-shadow: none;
box-shadow: none;
}Das Ergebnis
Das Ergebnis dieses Vorgehens sieht dann wie folgt aus:
Es ist natürlich auch möglich, statt des Top Menüs auf diese Weise ein Menü unterzubringen, das die für jede Website so wichtigen Links zum Impressum und zur Datenschutzerklärung bereitstellt. Im Beispiel erscheint dieses im Footer 2.
Beitragsbild: Britta Kretschmer
Schreibe einen Kommentar