WP Resonar Theme – Deinen eigenen Footer erstellen

In diesem Artikel erfährst Du, wie Du für das WordPress-Theme WP Resonar mit ein paar Zeilen PHP-Code Deinen eigenen Footer erstellen kannst.

Für diesen Blog nutze ich das kostenlose WordPress-Theme Resonar von Automattic. Auch wenn mich dieses Theme an und für sich wirklich begeistert, hat es hier und da seine kleinen Unschönheiten.

Wie Du der Überschrift diesen Artikels schon entnehmen kannst, dreht es sich im konkreten Fall um den Footer des Themes.

Leider wurden die Link-Verweise Proudly powered by WordPress und Theme: Resonar by WordPress.com fest in die Theme-Datei footer.php geschrieben.

Das ist aus meiner Sicht ärgerlich, da der Footer dafür prädestiniert ist, um Verlinkungen auf Dein Impressum, Deine Datenschutzerklärung und gegebenenfalls weitere „unangenehme“ Seiten aufzunehmen.

Das Problem

Aufgrund des festen Codings besteht also keine Chance, die Informationen einfach über den Theme Customizer irgendwie zu verändern.

Auch Änderungen am Footer direkt in der Theme-Datei footer.php sind keine Option, da diese Änderungen mit dem nächsten Update ohnehin wieder passé wären.

Bliebe noch der Weg über die Erstellung eines Child Themes, aber das erscheint mir wie mit Kanonen auf Spatzen zu schießen.

Außerdem bin ich noch nie ein wirklicher Fan von Child Themes gewesen, weil deren Einsatz zumindest für mich immer zu mehr als zu weniger Problemen geführt hat.

Die Lösung

Mit ein wenig PHP und ein paar WordPress-Funktionen kann ich aber dennoch meinen eigenen Footer erstellen. Und der Aufwand ist auch überschaubar.

Und zu guter Letzt lässt sich dieser Code auch für jedes andere WordPress-Theme verwenden.

Um uns nun einen eigenen Footer zu bauen, müssen wir lediglich Folgendes tun:

  • einen neue Navigation-Position registrieren und
  • die Ausgabe dieser Navigation in das Theme integrieren

Ich nutze für die folgenden Code-Injections übrigens das WordPress-Plugin Code Snippets von Shea Bunge.

Deinen eigenen Footer erstellen

Schritt 1: Die neue Menü-Position registrieren

Zunächst müssen wir WordPress mitteilen, dass es eine neue Position für Navigationen geben soll.

Die gute Nachricht (es gibt keine schlechte): das Registrieren eine Menü-Position in WordPress ist denkbar einfach. Du brauchst dafür lediglich vier Zeilen PHP-Code.

add_action('init','custom_footer_navigation');

function custom_footer_navigation(){
	register_nav_menus( array(
		'custom-footer-navigation' => 'Custom Footer Navigation',
		));
}

Dazu bedienen wir uns der WordPress-Funktion add_action() und hängen unsere Funktion custom_footer_navigation über die Aktion init in den Ladeprozess von WordPress selbst.

Übrigens, innerhalb der Funktion add_action folgen die Paramater immer der gleichen Reihenfolge: add_action ‚$tag‘, ‚$function_to_add‘, ‚$priority‘);

In unserer Funktion custom_footer_navigation registrieren wir dann unsere neue Navigationposition.

Hierfür stellt uns WordPress netterweise gleich zwei unterschiedliche Funktionen zur Verfügung:

register_nav_menu($location,$description);
register_nav_menus(array($location => $description));

Diese beiden Funktionen unterscheiden sich lediglich in der Anzahl der möglichen zu registrierenden Positionen.

Während register_nav_menu() ausschließlich dazu dient, eine einzelne Platzierung zu registrieren, kannst Du mit register_nav_menus() gleich mehrere neue Positionen auf einmal registrieren.

Obwohl ich heute nur eine neue Position registrieren will, habe ich mich dennoch dazu entschieden, die Funktion register_nav_menus() zu verwenden.

Welche der beiden Funktionen Du am Ende verwendest bleibt am Ende Dir überlassen. Ich rate Dir jedoch zu register_nav_menus().

Aus dem einfachen Grund, weil Du nicht zu 100% ausschließen kannst, dass Du in Zukunft nicht vielleicht doch noch weitere Positionen benötigen wirst.

Insofern ist die Verwendung von register_nav_menus() vorausschauender, da Du dann im Fall der Fälle, das Array einfach um Deine neue Position erweiterst.

Die neue Position definieren

Für die Registrierung einer Position müssen wir nun für jede neue Position ein Wertepaar in der Funktion register_nav_menus() angeben.

'$location' => '$description'

In unserem Fall entspricht somit custom-footer-navigation dem Wert für $location und Custom Footer dem Wert für $description.

Wenn Du jetzt das Skript in Code Snippets aktivierst und anschließend in die Menüansicht Deiner WordPress-Seite wechselst, solltest Du unter Menü-Einstellungen Deine neue Position Custom Footer Navigation sehen.

WordPress: Neue Menü-Position in der Übersicht Menü-Einstellungen

Die Zusätze Deutsch und Englisch im Screenshot kannst Du ignorieren, die befinden sich dort, weil ich auf meinem Blog das Multi-Language-Plugin Polylang laufen haben.

Erstelle nun ein neues Menü mit Deinen benötigten Verlinkungen und weise diesem dann noch durch Anhaken die neue Position Custom Footer Navigation zu.

Schritt 2: Deinen neuen Footer sichtbar machen

Wir haben jetzt zwar eine neue Menü-Position und auch ein dazugehöriges Navigationsmenü erstellt, aber noch können Deine Besucher den neuen Footer und seinen Inhalt nicht bewundern.

Dazu braucht es nochmal ein paar Zeilen Code.

add_action('wp_footer','addCustomFooterPanel',1);

function addCustomFooterPanel(){
	echo('<footer id="custom-footer-panel" class="site-footer" role="contentinfo"><div class="site-info">');
		wp_nav_menu(array('theme_location' => 'custom-footer-navigation','container_class' => 'custom-footer-navigation'));
	echo('</div></footer>');
}

Auch hier verwenden wir wieder die add_action-Funktion von WordPress. Dieses Mal hängen wir uns jedoch auf einen Template-Hook, nämlich auf den Hook wp_footer.

Üblicherweise wird dieser Hook in WordPress-Themes unmittelbar vor dem schließenden <body>-Tag platziert. So auch im Resonar-Theme, weswegen er sich hervorragend als Ziel für unseren neuen Footer eignet.

Die Ausführung priorisieren

Eine sehr praktische Sache ist die Angabe einer Priorität, die wir in diesem Fall ebenfalls verwenden.

Dieser optionale Parameter dient dazu, eine Reihenfolge angeben zu können, in der die dem Hook (hier: wp_footer) zugeordneten Funktionen ausgeführt sollen.

Dabei haben niedrigere Zahlen eine höhere Priorität, werden also früher ausgeführt. Dagegen werden Funktionen mit gleicher Priorität in der Reihenfolge ausgeführt, in der sie der jeweiligen Aktion hinzugefügt wurden.

Die einzigen Skripte, die ich normalerweise dem wp_footer-Hook zuordne, sind eigene CSS-Anpassungen und Javascript. Diese sollen jedoch so spät wie möglich ausgeführt werden. Daher haben diese auch immer eine Priorität von 90+.

Damit mein neuer Footer – oder besser die zuständige Funktion – vor allen anderen Funktionen ausgeführt wird, habe ich hier die Priorität 1 zugeordnet.

Das Menü ausgeben

Um den Footer dann wirklich sichtbar zu machen brauchen wir ein bisschen HTML und eine weitere WordPress-Funktion, wp_nav_menu(), um die neue Position innerhalb des Themes zuzuordnen und das der Position zugeordnete Menü auszugeben.

wp_nav_menu(array(	'theme_location' => 'custom-footer-navigation',
					'container_class' => 'custom-footer-navigation')
			);

Diese WordPress-Funktion kennt eine ganze Reihe Parameter, wir beschränken uns jedoch auf die Parameter theme-location und container-class.

Der Parameter theme-location verweist auf die Menüposition, in unserem Fall custom-footer-navigation. Über container_class kann dem die Navigation umgebenden div-Element eine eigene CSS-Klasse zugewiesen werden.

Für das HTML habe ich mich mir einfach das HTML-Gerüst des Resonar-Themes genommen und lediglich die id des footer-Elements von colophon auf custom-footer-panel geändert.

Das Du Deinem eigenen Footers eine neue Id gibst, ist deswegen sehr wichtig, weil wir den Theme-eigenen Footer von Resonar noch unsichtbar machen müssen.

Schritt 3: Das Footer-CSS anpassen

Und damit wären wir auch schon bei den noch notwendigen CSS-Anpassungen, die für den neuen Footer zu machen sind.

Da wir durch die Navigation auch ein neues HTML-Element in den Footer einführen, nämlich eine ungeordnete Liste (<ul>), sieht der Footer noch nicht wirklich schick aus.

Nachfolgend findest Du die CSS-Anweisungen, die ich für meinen Footer verwendet habe. Wie der fertige Footer dann aussieht, siehst Du am Ende dieser Seite.

footer#colophon{display:none;}
footer#custom-footer-panel{text-align:center}
footer#custom-footer-panel div.site-info p{margin-bottom:0}
footer#custom-footer-panel div.site-info div.custom-footer-navigation ul#menu-footer-navigation{padding-bottom: 0;margin-bottom: 0;}
footer#custom-footer-panel div.site-info div.custom-footer-navigation ul#menu-footer-navigation li{display: inline-block;margin-right: 1rem;}
footer#custom-footer-panel div.site-info div.custom-footer-navigation ul#menu-footer-navigation li a{background-image:none}

Diese CSS-Anweisungen kannst Du entweder in eine eigene Funktion schreiben, oder aber du erweiterst einfach die Funktion addCustomFooterPanel um einen eigenen <style>-Tag, den Du nach dem footer-Element ausgeben lässt.

Deinen eigenen Footer erstellen – vollständigs Code Snippet

add_action('init','custom_footer_navigation');
add_action('wp_footer','addCustomFooterPanel',1);

function custom_footer_navigation() {
	register_nav_menus( array(
		'custom-footer-navigation' => 'Custom Footer Navigation',
		));
}

function addCustomFooterPanel(){
	echo('<footer id="custom-footer-panel" class="site-footer" role="contentinfo"><div class="site-info">');
		wp_nav_menu( array('theme_location' => 'custom-footer-navigation',
						   	'container_class' => 'custom-footer-navigation')
				   );
	echo('</div></footer>');
	echo('<style> /* Custom CSS Styles */</style>');
}

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.