Neues Theme, alles sieht schick aus, nur der Footer lässt sich nicht ändern? Wie Du den Footer Deines WordPress Themes ändern kannst. Vollkommen unabhängig davon, welches Theme Du nutzt.
Du magst nicht lesen? Dann sieh Dir das Video zum Beitrag an:
Footer in jedem WordPress Theme ändern
Für jedes WordPress Theme gibt es eine Schummellösung, den Footer den eigenen Wünschen entsprechend anzupassen. So finden sich die Texte oft in einer Sprachdatei, in der sie geändert werden können. Oder sie werden dem Header des Child-Themes entnommen, so dass die style.css so angepasst werden kann, dass es in etwa passt. Eine besonders hässliche Variante ist es, den Footer mittels CSS zu verstecken. All die Lösungen haben eines gemeinsam. Es sind miserable Kompromisse. Dabei ist eine korrekte Änderung selten schwierig. Als Beispiel nehme ich in diesem Artikel ein Catch-Theme.
Das solltest Du wissen
Grundsätzlich ist dieser Artikel nicht schwer zu verstehen. Du solltest jedoch Hemmungen überwinden, die bei der Ansicht von Quellcode Abneigung und Angst aufkommen lassen. Sicher ist dieser Beitrag leichter zu verstehen, wenn Du ein Grundverständnis von HTML, CSS und PHP hast. Noch leichter fällt es Dir, wenn Dir eine Shell nicht fremd ist. Doch wirklich brauchen wirst Du das nicht. Zumindest dann nicht, wenn Du bereit bist, die wenigen Zeilen Quellcode zu verstehen. Schliesslich liefere ich Dir Erklärungen, die Dich schnell zum Profi werden lassen.
Das brauchst Du
Editor
Du benötigst einen Editor. Ich nutze das, was verfügbar ist. In der Regel ist das vi oder vim. Du kannst jeden Editor nutzen, der Dir zusagt. Editoren gibt es zu Hauf. Wer vi kennt und nicht mag, ist nicht selten von Emacs begeistert. Als unbedarfter Windows-Nutzer kannst Du zur Not auch Notepad nehmen.
Zugriff auf WordPressinstallation
Neben dem Editor benötigst Du eine Möglichkeit, auf Deine WordPressinstallation zuzugreifen. Im Video nutze ich ssh. Du kannst natürlich sFTP oder FTP wählen. Weniger zu empfehlen ist die Änderung im Adminbreich Deiner WordPress-Installation. Das ist zwar durchaus möglich, doch beim ersten Fehler in einer PHP-Datei, wird Dir der Zugriff verwehrt werden. Du siehst Dich dann mit einem WhiteScreen konfrontiert. Zugriff ist dann nur noch auf Dateiebne möglich, weshalb Du besser gleich auf Dateisystemebene arbeitest. Selbstverständlich kannst Du die Änderungen auch lokal auf Deinem Rechner vornehmen. Die Möglichkeiten sind vielfältig. Sollten diesbezüglich Fragen auftreten, kannst Du im Kommentar um Hilfe bitten.
Wo entsteht der Footer in Deinem Theme?
Du willst den Footer Deines Themes ändern. Dann ist der erste Schritt, dass Du rausfindest, wo er erstellt wird. Das ist wesentlich einfacher, als es den Anschein hat. Denn es gibt zwei Hinweise, die Dich immer zum Ziel führen.
Die Datei footer.php
Im ersten Schritt kannst Du im Verzeichnis Deines Themes nach einer Datei footer.php suchen. Das Verzeichnis Deines Themes findest Du unter wp-content/themes/
Nun gibt es zwei Möglichkeiten, dass hier etwas schief geht.
- Es gibt im Verzeichnis Deines Themes keine footer.php
- Es gibt die footer.php, aber darin findet sich kein Quelltext, der den Footer erstellt
Solltest Du bereits eine footer.php finden und sehen, wie der Footer erstellt wird, bist Du schon ein ganzes Stück weiter. Du könntest ihn direkt an dieser Stelle ändern oder die Template-Datei footer.php in das Verzeichnis Deines Child-Themes kopieren. Deine Änderungen überschreiben dann das Theme. Solltest Du kein Child-Theme angelegt haben, empfehle ich Dir, das nachzuholen.
In welcher Funktion wird der Footer erstellt?
Gesetzt den Fall es existiert keine footer.php. Dann wird Dir eine Suche in den Dateien Deines Themes weiterhelfen. Unter Unix/Linux/MacOS sieht das dann so aus:
grep -r wp_footer *
Grep durchsucht hier alle Dateien im Theme nach dem Aufruf “wp_footer”. Die Datei mit dem Aufruf wird entweder direkt die Erzeugung des Footers enthalten oder Dich in einem weiteren Schritt zu ihr führen.
Im Fall meines Themes existiert zwar eine Datei footer.php, doch die eigentliche Erstellung des Footers findet an dieser Stelle nicht statt. Es zeigt sich folgender Code:
/**
* catchresponsive_footer hook
*
* @hooked catchresponsive_footer_content_start - 30
* @hooked catchresponsive_footer_sidebar - 40
* @hooked catchresponsive_get_footer_content - 100
* @hooked catchresponsive_footer_content_end - 110
* @hooked catchresponsive_page_end - 200
*
*/
do_action( 'catchresponsive_footer' );
Es gibt hier einen Hook in der do_action Anweisung ‘catchresponsive_footer’. Durch ihn werden wir die Datei finden, die den Footer erzeugt. Dafür nutzen wir wieder grep:
grep -r catchresponsive_footer *
und erhalten folgendes Ergebnis:
inc/catchresponsive-structure.php:add_action( 'catchresponsive_footer', 'catchresponsive_page_end', 200 );
inc/catchresponsive-structure.php:if ( ! function_exists( 'catchresponsive_footer_content_start' ) ) :
inc/catchresponsive-structure.php:function catchresponsive_footer_content_start() {
inc/catchresponsive-structure.php:add_action( 'catchresponsive_footer', 'catchresponsive_footer_content_start', 30 );
inc/catchresponsive-structure.php:if ( ! function_exists( 'catchresponsive_footer_sidebar' ) ) :
inc/catchresponsive-structure.php:function catchresponsive_footer_sidebar() {
inc/catchresponsive-structure.php:add_action( 'catchresponsive_footer', 'catchresponsive_footer_sidebar', 40 );
inc/catchresponsive-structure.php:if ( ! function_exists( 'catchresponsive_footer_content_end' ) ) :
inc/catchresponsive-structure.php:function catchresponsive_footer_content_end() {
inc/catchresponsive-structure.php:add_action( 'catchresponsive_footer', 'catchresponsive_footer_content_end', 110 );
inc/catchresponsive-core.php: delete_transient( 'catchresponsive_footer_content' );
inc/catchresponsive-core.php:function catchresponsive_footer_sidebar_class() {
inc/catchresponsive-core.php: * @action catchresponsive_footer
inc/catchresponsive-core.php:function catchresponsive_footer_content() {
inc/catchresponsive-core.php: if ( ( !$catchresponsive_footer_content = get_transient( 'catchresponsive_footer_content' ) ) ) {
inc/catchresponsive-core.php: $catchresponsive_footer_content = '
inc/catchresponsive-core.php: set_transient( 'catchresponsive_footer_content', $catchresponsive_footer_content, 86940 );
inc/catchresponsive-core.php: echo $catchresponsive_footer_content;
inc/catchresponsive-core.php:add_action( 'catchresponsive_footer', 'catchresponsive_footer_content', 100 );
inc/catchresponsive-core.php: * @action catchresponsive_footer action
Das sieht erst einmal sehr unübersichtlich aus. Lass Dich davon nicht abschrecken. Dich interessieren hier nur die add_action Aufrufe. So ein Aufruf besteht aus dem gesuchten Hook ‘catchresponsive_footer’ und einer Funktion. Sieh Dir die Funktionen einmal genauer an. Du wirst schnell feststellen dass es folgender Aufruf ist, den wir suchen:
add_action( 'catchresponsive_footer', 'catchresponsive_footer_content', 100 );
Die Funktion ‘catchresponsive_footer_content’ wird mit hoher Wahrscheinlichkeit die Funktion sein, die den Inhalt des Footers erstellt. Sie befindet sich in der Datei inc/catchresponsive-core.php
Wir öffnen diese Datei und suchen nach dem Aufruf: add_action( ‘catchresponsive_footer’, ‘catchresponsive_footer_content’, 100 );
vim inc/catchresponsive-core.php
Und hier finden wir folgenden Quellcode:
function catchresponsive_footer_content() {
//catchresponsive_flush_transients();
if ( ( !$catchresponsive_footer_content = get_transient( 'catchresponsive_footer_content' ) ) ) {
echo '';
$catchresponsive_content = catchresponsive_get_content();
$catchresponsive_footer_content = '<div id="site-generator"><div class="wrapper"><div id="footer-content" class="copyright">' . $catchresponsive_content['left'] . ' | ' . $catchresponsive_content['right'] . '</div></div><!-- .wrapper --></div><!-- #site-generator -->';
set_transient( 'catchresponsive_footer_content', $catchresponsive_footer_content, 86940 );
}
echo $catchresponsive_footer_content;
}
add_action( 'catchresponsive_footer', 'catchresponsive_footer_content', 100 );
Man sieht auf den ersten Blick, dass hier der Footer erstellt wird. Woran? An den HTML-Tags. Genaugenommen befindet sich der Inhalt, den wir ändern wollen in diesen beiden Arrays:
$catchresponsive_content['left']
$catchresponsive_content['right']
Falls Du Dich nun überhaupt nicht mit PHP auskennst, ein paar kurze Erklärungen. Strings (Zeichenketten) befinden sich in Anführungszeichen. Variablen beginnen mit einem $ und ein Punkt verknüpft verschiedene String ausgebende Anweisungen mit Strings. Das klingt für Dich alles wie böhmische Dörfer? Dann reicht es, wenn Du weisst, dass Du an dieser Stelle folgendes löschen und mit eigenen Text und HTML-Tags ersetzen kannst.
' . $catchresponsive_content['left'] . ' | ' . $catchresponsive_content['right'] . '
Ich habe oben bereits geschrieben, dass die Ersetzung an dieser Stelle nur Sinn macht, wenn Du ohnehin kein Child-Theme von Deinem Theme angelegt hast. Sollte das der Fall sein, wiederhole ich meinen Rat, Dir erst einmal ein Child von Deinem Theme anzulegen und dann dem Beitrag weiter zu folgen.
Funktion in Child Theme überschreiben
Ich gehe jetzt davon aus, dass Du Dir ein Child von Deinem Theme angelegt hast. Darin befinden sich im besten Fall drei Dateien. Ein Bild für die Anzeige Deines Child Themes im Theme-Breich Deines Administrationsbereiches in WordPress. Eine CSS-Datei und eine Datei functions.php.
Wir kopieren die gefundene Funktion zusammen mit der add_action Anweisung aus dem WordPress Theme und fügen sie in die functions.php unseres Child Themes ein.
Unsere functions.php
function catchresponsive_footer_content() {
//catchresponsive_flush_transients();
if ( ( !$catchresponsive_footer_content = get_transient( 'catchresponsive_footer_content' ) ) ) {
echo '';
$catchresponsive_content = catchresponsive_get_content();
$catchresponsive_footer_content = '<div id="site-generator"><div class="wrapper"><div id="footer-content" class="copyright">' . $catchresponsive_content['left'] . ' | ' . $catchresponsive_content['right'] . '</div></div><!-- .wrapper --></div><!-- #site-generator -->';
set_transient( 'catchresponsive_footer_content', $catchresponsive_footer_content, 86940 );
}
echo $catchresponsive_footer_content;
}
add_action( 'catchresponsive_footer', 'catchresponsive_footer_content', 100 );
Jetzt glaube bitte nicht, dass Du das speichern könntest und alles ist prima. Wir müssen die add_action Anweisung löschen und eine eigene Funktion zur Erstellung des Footers einbinden.
Zuerst löschen wir die Funktion:
function remove_catchresponsive_footer_content(){
remove_action( 'catchresponsive_footer', 'catchresponsive_footer_content', 100 );
}
add_action('init','remove_catchresponsive_footer_content');
Ich habe hier eine Funktion geschrieben, die “remove_action” aufruft. Du ahnst es schon, es ist das Gegenstück von add_action, weshalb der Aufruf auch absolut identisch ist. Er enthält den Hook ‘catchresponsive_footer’ und die zu löschende Funktion ‘catchresponsive_footer_content’. Anschliessend weisen wir WordPress an, unsere neu erstellte Funktion ‘remove_catchresponsive_footer_content’ auszuführen.
Die Funktion ist jetzt entfernt. Bleibt noch die Arbeit unsere eigene hinzuzufügen. Natürlich wieder mit add_action:
add_action('catchresponsive_footer', 'thx_catchresponsive_footer_content', 100);
Unsere Funktion heisst also ‘thx_catchresponsive_footer_content’. Ich habe einfach thx vorangestellt. Nun müssen wir den Funktionsnamen auch in der Funktion ändern. Aus
function catchresponsive_footer_content()
wird:
function thx_catchresponsive_footer_content()
Fertig!
Jetzt müssen wir nur noch unseren Footerinhalt anpassen. Das könnte dann so aussehen:
function thx_catchresponsive_footer_content() {
//catchresponsive_flush_transients();
if ( ( !$catchresponsive_footer_content = get_transient( 'catchresponsive_footer_content' ) ) ) {
echo '';
$catchresponsive_content = catchresponsive_get_content();
$catchresponsive_footer_content = '<div id="site-generator"><div class="wrapper"><div id="footer-content" class="copyright">Copyright ' . date('Y') . ' Mobiler Optiker | Hosting <span style="color:red" class="dashicons dashicons-heart"></span><a href="https://thx.cool" target="_blank">THX.cool</a></div></div></div>';
set_transient( 'catchresponsive_footer_content', $catchresponsive_footer_content, 86940 );
}
echo $catchresponsive_footer_content;
}
Ich habe die beiden Arrays durch:
Copyright ' . date('Y') . ' Mobiler Optiker | Hosting <span style="color:red" class="dashicons dashicons-heart"></span><a href="https://thx.cool" target="_blank">THX.cool</a>
ersetzt.
Interessant ist vielleicht noch der Aufruf date(‘Y’). Er liefert mir das aktuelle Jahr zurück. So dass in meinem Footer immer das aktuelle Jahr erscheint. Falls Du Schwierigkeiten hast, die Änderungen zu verstehen, kannst Du einfach ein wenig mit dem Quellcode herumexperimentieren.
Vielleicht auch interessant ist die Nutzung von Dashicons. Mit Ihnen kannst Du Deinen Auftritt etwas auffrischen. In der Regel werden sie nicht im Frontend angezeigt. Möchtest Du sehen, solltest Du foldende Funktion und add_action-Anweisung in Deine functions.php kopieren:
add_action('wp_enqueue_scripts','load_dashicons_front_end');
function load_dashicons_front_end(){
wp_enqueue_style('dashicons');
Damit wären wir fertig. Bitte achte darauf, dass sich die Anweisung:
add_action( 'catchresponsive_footer', 'catchresponsive_footer_content', 100 ); nicht mehr in Deiner functions.php befindet.
Falls Dir das alles zu umständlich oder unverständlich ist, kann ich Dir anbieten, Deine gewünschten Anpassungen in Worpress umzusetzen. Schreib mir in dem Fall eine E-Mail oder melde Dich über die Kommentarfunktion.
Schreibe einen Kommentar