Thx Cool

von

Du nutzt das Framework Genesis und möchtest den Footer ändern? Ich zeige Dir, wie Du ihn leicht ändern kannst.

Genesis

Erst einmal herzlichen Glückwunsch. Mit Genesis hast Du eine sehr gute Wahl getroffen. Dein Webauftritt ist sicherer, der Code sauber und Dein Webprojekt zukunftssicher. Neben Genesis wirst Du Dich für ein Theme entschieden haben. Egal, ob Du Dich für Studio Pro, Business Pro, Wellness Pro oder irgendein anderes Genesis Theme entschieden hast. Die Wege zur Anpassung des Footers sind für alle Themes gleich.

Falls Dir noch unklar sein sollte, weshalb Du zusätzlich zu Genesis ein Theme benötigst, kannst Du das Theme ähnlich betrachten, wie ein Child-Theme. Sollte auch ein Child-Theme Neuland für Dich sein, empfehle ich zum Verständnis den Beitrag WordPress Theme anpassen.

So hervorragend Genesis auch sein mag. Als Neuling wird Genesis von Dir eine Umstellung und Einarbeitung erfordern. HTML5, CSS und PHP sollten Dir nicht fremd sein. Geht es Dir nur um die Anpassung des Footers von Deinem gewählten Theme, kannst Du Dich hier für eine der drei geschilderten Möglichkeiten entscheiden und Sie kopieren. Doch solltest Du größere Anpassungen in Deinem gewählten Theme anstreben, solltest Du die Hinweise in diesem Beitrag beachten und zu verstehen suchen, wie die Änderung vorgenommen wird.

Drei Möglichkeiten zur Anpassung des Footers

Es gibt verschiedene Wege, den Footer Deines Themes anzupassen. Du kannst ein Plugin benutzen. Das ist recht einfach. Bietet Dir aber nur eingeschränkte Möglichkeiten. Hinzu kommt, dass es Dir keinen Deut zum Verständnis weiterhilft. Solltest Du jedoch nur den Footer anpassen wollen, um Beispielsweise den Copyright-Eintrag zu löschen, kann ich Dir das Plugin ans Herz legen.

Du verzichtest auf die einfache Methode? Du möchtest absolute Freiheit geniessen und dabei lernen, wie andere Bereiche Deines Themes angepasst werden können? Dann empfehle ich Dir Löschung und Neuerstellung oder die Änderung über einen Filter.

Alle drei Möglichkeiten schildere ich Dir in den folgenden Abschnitten.

Das Plugin Genesis – Simple Edits

Du willst den einfachen Weg gehen? Dann installiere Dir das Plugin Genesis – Simple Edits. Es ermöglicht Dir die Metadaten vor und nach einem Artikel, sowie den Footer zu ändern. Nach der Installation findest Du das Plugin als Untermenupunkt von Genesis. Möchtest Du den Footer komplett ersetzen, setzt Du einen Haken bei “Modify Entire Footer Text (including markup)?” und trägst Deinen HTML-Code in das darunter liegende Textfeld ein. Nach dem Speichern, kannst Du die Änderung im Frontend Deiner Seite überprüfen.

Möchtest Du nur wenige Anpassungen im vorhandenen Footer vornehmen, solltest Du den Haken nicht setzen und stattdessen den Text in “Footer Credits Text” ändern.

Ersetzung des Footers

Du möchtest etwas lernen und verstehen, wie Änderungen in Genesis leicht umgesetzt werden können? Gut, dann schnall Dich an. Doch auch hier gibt es zwei Wege. Den einfachen Weg und den etwas beschwerlicheren Weg. Zuerst der einfache Weg?

Gut, dann kopier einfach folgenden Code an’s Ende Deiner functions.php. Du findest diese Datei auf der Dateiebene unter /wp-content/themes/nameDeinesThemes/functions.php
Solltest Du keinen Zugriff per scp/ssh/sftp oder ftp auf Deine Daten haben, kannst Du die Änderung auch im Administrationsbereich Deiner WordPressinstallation vornehmen. Du findest die Datei unter dem Menupunkt Design/Editor. Doch sei gewarnt. Schleicht sich ein Fehler ein, ist Dir der Zugriff nach der Speicherung verwehrt. Die Änderung auf diese Weise vorzunehmen, kann ich Dir nur empfehlen, wenn Du einen direkten Dateizugriff hast, um die Fehler der Änderung zu korrigieren!


remove_action( 'genesis_footer', 'genesis_footer_markup_open', 5 );
remove_action( 'genesis_footer', 'genesis_do_footer' );
remove_action( 'genesis_footer', 'genesis_footer_markup_close', 15 );

add_action( 'genesis_footer', 'sp_custom_footer' );
function sp_custom_footer() { ?>
        <div class="site-footer"><div class="wrap"><div style="float:left;margin-left:1em;">&copy2018 THX cool | Umsetzung & Hosting <span style="color:red" class="dashicons dashicons-heart"></span><a href="https://thx.cool" target="_blank">thx.cool</a></div> <div style="float:right;margin-right:1em;" class="site-info"> <a href="/impressum">Impressum</a> | <a href="/datenschutz">Datenschutz</a></div></div></div> 
<?php
}

Dein Footer würde dann so aussehen:



©2018 THX cool | Umsetzung & Hosting thx.cool
 
 Impressum | Datenschutz

Die Anpassungen sollten Dir jetzt leicht fallen.

Kurz zur Erklärung, was hier passiert. In den ersten drei Anweisungen lösche ich drei Funktionen. genesis_footer beschreibt dabei einen sogenannten Hook. Ich werde an anderer Stelle nochmals näher darauf eingehen. Hier sollte es ausreichen ,wenn Du verstehst, dass es sich dabei um Plätze Deiner Seite handelt. In diesem Fall den Footer. Es folgt eine Funktion. Die Namen sind meist selbstbezeichnend. Die Zahl 5 und 10 kennzeichnet die Priorität der Ausführung. In der zweiten Funktion ist keine Zahl angegeben. Es gilt die Standardpriorität, 10. Die Funktionen werden also in genau der Reihenfolge entfernt, in der sie angeführt sind. Man hätte an dieser Stelle auch in allen drei Funktionen die Priorität weglassen können. Sie steht nur zu Deinem Verständnis da.

Ich habe also mit den drei Anweisungen den kompletten Standardfooter entfernt. Jetzt brauchen wir einen neuen Footer. Genau das erledigt der Aufruf add_action. Im ersten Argument übergebe ich den Hook, also wo das Resultat der Funktion ausgegeben wird. sp_custom_footer ist meine eigene Funktion, die ausgeführt werden soll. Danach folgt die Funktion, die recht unsauber einfach hingeschummelt ist. Wie so etwas sauberer umgesetzt wird, kannst Du in der dritten Variante erfahren. Die sauberste, aber auch die schwierigste Weise, den Footer Deines Themes anzupassen.

Änderung Deines Footers durch Filter

Du hast bereits gelernt, wie Du den Footer Deines Themes ersetzen kannst. Das ist bereits ein gängiger Weg in Genesis. Doch es geht oft einfacher. Es gibt viele Filterfunktionen in Genesis. Deren Ausgabe kannst Du leicht verändern, ohne Funktionen zuvor löschen und wieder hinzufügen zu müssen. Ob für Deine gewünschte Änderung ein Filter existiert erfährst Du im Struktur-Verzeichnis von Genesis. In genesis/lib/structure/footer.php findet sich der Eintrag: 

echo apply_filters('genesis_footer_output', $output, $backtotop_text, $creds_text);

Du kannst also den Footer einfach über diesen Filter ändern. Der Footer befindet sich in $output. $backtotop_text und $creds_text sind Argumente, die Du ebenfalls anpassen kannst. Im ersten Schritt fügst Du in Deiner functions.php den Filter genesis_footer_output hinzu. 

add_filter('genesis_footer_output', 'genesis_sp_footer_output', 10, 3);

Als zweites Argument übergibst Du Deine Funktion. Insgesamt fügst Du folgenden Quellcode in das Ende Deiner functions.php ein.


add_filter('genesis_footer_output', 'genesis_sp_footer_output', 10, 3);

function genesis_sp_footer_output( $output, $backtotop_text, $creds_text){

     $sp_creds_text = 'Copyright 2008 - ' . date('Y') . ' <span style="color:red" class="dashicons dashicons-heart"></span><a href="https://thx.cool">THX cool</a>';
     $output = str_replace($creds_text, $sp_creds_text, $output);
     return $output;
}

Das Ergebnis sieht dann wie folgt aus:
Copyright 2008 - 2018 THX cool

Wobei für das Endjahr, das aktuelle Jahr dynamisch gesetzt wird. Du brauchst Dich also zukünftig nicht mehr darum kümmern. Dein Copyright-Hinweis wird immer das aktuelle Jahr enthalten.

Bleiben noch ein paar Erklärungen offen. Zuerst einmal könntest Du mich fragen, weshalb das Herz bei Dir nicht sichtbar wird. Das liegt schlichtweg daran, dass diese Funktion ebenfalls in Deiner functions.php hinzugefügt werden muß. Das sieht dann im Detail folgend aus:


   add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
   function load_dashicons_front_end() {
      wp_enqueue_style( 'dashicons' );
   }

Du solltest jetzt breits grob verstehen, was hier passiert. Falls nicht, brauchst Du Dir keine Gedanken machen. Es werden hier noch viele Beiträge folgen, die Dir helfen, gewünschte Änderungen jederzeit selber durchzuführen.

Noch ein paar kurze Erklärungen zu dem Sourcecode unserer Filterfunktion. Unsere Filterfunktion enthält drei Argumente. Von Interesse sind für uns hier:

  1. $output, den Ausgabestring.
  2. $creds_text, Teil des Ausgabestrings mit Inhalten zum Urheber.

In der ersten Zeile legen wir die Variable $sp_creds_text an und übergeben ihr unseren gewünschten String (Text). Anschliessend rufen wir die Funktion str_replace auf. Diese Funktion hat drei Argumente.

  1. $creds_text, den zu überschreibenden Text.
  2. $sp_creds_text, den überschreibenden Text.
  3. $output, der Ausgabestring, in dem die Ersetzung erfolgt.

In der dritten Zeile gibt unsere Funktion unseren neuen Ausgabetext zurück. Eine weitaus sauberere Variante, als in unserer geschilderten 2 Variante -> "Ersetzung des Footers".

Zum Abschluß kann ich Dir noch verraten, dass die Änderung mittels Filter auch wesentlich kürzer umsetzbar ist. Wir hätten auch gleich genesis_footer_creds_text ersetzen können. Doch dann hättest Du nicht erfahren, wie die Funktion str_replace() verwendet wird. Und diese Funktion wirst Du zukünftig öfter brauchen, wenn Du Änderungen an Deinem Theme vornehmen willst.

Selbstverständlich kannst Du diese dynamische Ausgabe auch bei der Ersetzung des Footers durchführen. Dafür müsstest Du den Code nur leicht anpassen. Das Ergebnis würde dann folgend aussehen:


remove_action( 'genesis_footer', 'genesis_footer_markup_open');
remove_action( 'genesis_footer', 'genesis_do_footer');
remove_action( 'genesis_footer', 'genesis_footer_markup_close');

add_action( 'genesis_footer', 'sp_custom_footer' );
function sp_custom_footer() { 
     $sp_creds = '2008 - ' . date('Y');
     $output =  '<div class="site-footer"><div class="wrap"><div style="float:left;margin-left:1em;">&copy; ' . $sp_creds . ' THX cool | Umsetzung & Hosting <span style="color:red" class="dashicons dashicons-heart"></span><a href="https://thx.cool" target="_blank">thx.cool</a></div> <div style="float:right;margin-right:1em;" class="site-info"> <a href="/impressum">Impressum</a> | <a href="/datenschutz">Datenschutz</a></div></div></div>';
     echo $output;
}

Und es geht noch einfacher:


remove_action( 'genesis_footer', 'genesis_footer_markup_open', 5 );
remove_action( 'genesis_footer', 'genesis_do_footer' );
remove_action( 'genesis_footer', 'genesis_footer_markup_close', 15 );

add_action( 'genesis_footer', 'sp_custom_footer' );
function sp_custom_footer() { ?>
        <div class="site-footer"><div class="wrap"><div style="float:left;margin-left:1em;">&copy<?php echo esc_html( date('Y')); ?> THX cool | Umsetzung & Hosting <span style="color:red" class="dashicons dashicons-heart"></span><a href="https://thx.cool" target="_blank">thx.cool</a></div> <div style="float:right;margin-right:1em;" class="site-info"> <a href="/impressum">Impressum</a> | <a href="/datenschutz">Datenschutz</a></div></div></div> 
<?php
}

Hier wird einfach in der HTML-Ausgabe, der gewünschte PHP-Code eingefügt.

Du hast nun nicht nur drei Wege kennengelernt, wie Du den Footer Deines Genesis Themes anpassen kannst. Du hast auch eine tiefere Einsicht in die Arbeit mit Genesis erhalten. Obiges Beispiel ist am Ende noch eine Vereinfachung. Sie ist nicht geeignet, wenn Du Deine Seite mehrsprachig gestaltest. In dem Fall kannst Du Dich an mich wenden.

Du hast noch Fragen? Dann nutze die Kommentarfunktion oder schreibe mir eine E-mail.

Leser-Interaktionen

Schreibe einen Kommentar

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