Child Themes

Es ist davon auszugehen, dass Sie irgendwann an den Punkt kommen, wo sich Anpassungen am Layout nicht mehr alleine mittels CSS umsetzen lassen. Das war bei mir bereits nach wenigen Stunden der Fall. Also Hand anlegen an die Dateien des Themes. Das funktioniert dann so lange, bist der Anbieter des Plugins Ihnen ein Update liefert. Dann sind all die schönen Änderungen wieder weg.

Abhilfe schafft hier ein Child-Theme. Die Dateien die Sie ändern wollen werden in das Child ausgelagert. Somit bleiben sie bei einem Update des Parent-Theme unverändert.

Child Themes haben aber auch einen Nachteil. Da WordPress nicht sauber zwischen Content und Design trennt, also Funktionalität erst im Theme integriert, können sich auch Sicherheitslücken einschleichen. Werden Diese mit einem Updare des Parent-Theme beseitigt, bleiben sie im Child-Theme bestehen. Sie sollten das also im Blick behalten. Plugins wie z.B. Theme-Check hilft Ihnen dabei die Änderungen zu vergleichen. Sie können dann entscheiden, in wie weit Sie die Änderungen in Ihr Child übernehmen. Voraussetzung ist natürlich, dass Sie in der Lage sind kritischen Code zu erkennen.

Der Vorteil von Funktionen im Theme auszuführen ist, dass Sie sich beliebig austoben können. Ein Beispiel auf dieser Webseite ist die Anzeige Erstellungsdatum bei den Beiträgen der Kategorie News. Sehr auffällige Darstellung. In allen anderen Kategorien wird das Datum weit unauffälliger angezeigt. Hier wird einfach der Inhalt der URL überprüft.

Natürlich gibt es auch Plugins für Child-Themes. Allerdings ist man dann auf die zuverlässige Funktionalität des Plugins angewiesen. Das Anlegen eines Child-Themes ist auch ohne Plugin recht einfach. Ich habe deshalb auch kein Plugin ausprobiert und belasse es deshalb bei der Erwähnung.

 

Dann legen wir los!

Legen Sie im Verzeichnis /wp-content/themes ein neues Verzeichnis an. Verwenden Sie dafür die Syntax themename_child. In diesem Verzeichnis erstellen Sie erstmal die leere Datei style.css. Damit WordPress Ihr Child-Theme erkennt, schreiben Sie folgende Anweisungen rein:


Zeile 2, Name des Child im Backend
Zeile 6, Verzeichnisname des  Parent Themes

Nun erstellen Sie im selben Verzeichnis eine leere functions.php. Sie wird zuerst einmal dazu benötigt Ihre neue CSS-Datei einzubinden. Wichtig ist, Ihr CSS muss NACH dem CSS des Parent-Themes geladen werden. Das erreichen wir mit der nächsten Funktion, indem das originale CSS erst mal deregistrieren und anschliesend die beiden CSS in der richtigen Reihenfolge neu registrieren,

Die Funktion add_action in Zeile 9 ruft die Funktion twentyseventeen_child_styles() in Zeile 2 auf. Diese deregistriert in Zeile 3 das CSS vom Parent-Theme.

Der Name des CSS ist von Theme zu Theme unterschiedlich. Sie müssen den korrekten Namen also erst mal in der functions.php des Parent-Themes mit wp_enqueue_style suchen. In unserem Beispiel lautet der Name also twentyseventeen-style, aktuell zu finden in der Zeile 416.

411 | function twentyseventeen_scripts() {
412 | // Add custom fonts, used in the main stylesheet.
413 | wp_enqueue_style('twentyseventeen-fonts',twentyseventeen_fonts_url(),array(),null);
414 |
415 | // Theme stylesheet.
416 | wp_enqueue_style('twentyseventeen-style',get_stylesheet_uri());

In Zeile 4 wird das originale CSS wieder registriert, in Zeile 5 wieder eingebunden, gefolgt vom Child CSS in Zeile 6.

Vorsicht Stolperfalle: Es gibt Templates, welche irgendwo in einem Unterverzeichnis eine weitere ‚functions.php‘ haben. Wenn Sie also in der Ersten den Code nicht finden, weiter suchen, es muss ihn geben.

 

Im Backend wird nun das neue Child angezeigt, jedoch noch ohne Bild. Das Bild von Ihrem Theme müssen Sie noch in das selbe Verzeichnis wie die anderen Dateien kopieren. Das Bild sollte eine Grösse von 600 x 450 Pixel haben und muss mit screenshot.png benannt sein.

Jetzt ist auch Ihr eigenes Themebild zu sehen.

Das neue Theme kann nun wie jedes andere Theme auch aktiviert werden.

Wichtg: Wenn Sie an Ihrem Parent-Theme bereits CSS Änderungen im Customizer vorgenommen haben, müssen Sie Diese im Child neu eintragen.

 

Der CSS-Customizer

Der CSS-Customizer im Backend überschreibt sämtliche vorangegangenen CSS Anweisungen. Die Funktion wp_head() generiert ab dem <title> den Inhalt des Headers bis VOR das abschliessende </head> Tag. Als letzte Zeile dieser Funktion wird so was ähnliches wie <link rel="stylesheet" type="text/css" id="wp-custom-css" href="/?custom-css=d7e3b02c49" /> ausgegeben, das CSS des Customizers.

Eine sehr praktische Funktion des Customizers ist, dass Sie jede Änderung sofort auf der Seite sehen können, ohne dass das CSS erst gespeichert und die Seite neu geladen werden muss.

CSS-Dateien die Sie im Header NACH der Funktion wp_head() verlinken, werden NACH dem Customizer geladen.

Da das verhältnismässig kleine Eingabefeld des Customizers nicht unbedingt der Übersichtlichkeit dient, wandern bei mir die Angaben aus dem Customizer von Zeit zu Zeit in eine separate CSS-Datei.

 

Dateien bearbeiten

Alle Dateien die Sie nun bearbeiten wollen, kopieren Sie zuerst vom Parent-Theme in Ihr Child-Theme.

 

Die functions.php

Im Child-Theme haben Sie ja bereits eine neue funktion.php erstellt. Die function.php im Parent-Theme bleibt also wo sie ist, Diese wird NICHT in das Child-Theme kopiert.

 

Weitere Funktionen

Im Themenverzeichnis gibt es auch ein Verzeichnis functions. Beim Theme Appointment gibt es darin die Datei template-tag.php. In der Datei ist eine Funktion vorhanden, welche das Userbild, den Usernamen sowie die Tags darstellt. Da ich den Usernamen an anderer Stelle ausgeben will, muss die Funktion angepasst werden.

Diese Datei entsprechend ins Child zu kopieren funktioniert anscheinend nicht. Die Funktion als Snippet zu kopieren hat dann zum gewünschten Erfolg geführt.

Seite erstellt: am 25.11.2017,   aktualisiert am: 27.12.2017,   Autor: René A. Da Rin



Schreibe eine Antwort

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

 

Durch die weitere Nutzung der Seite stimmen Sie der Verwendung von Cookies und der Datenübermittlung zu Dritten zu. [ weitere Informationen ]

Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Diese Webseite verwendet weiter 'Akismet' und 'Jetpress' für die Einbindung von Social Media und der Abwehr von Spam. Welche Daten dabei an externe Server übermittelt wird ist durch den Seitenbetreiber nicht zu beeinflussen. Diese Daten sind jedoch für ein vollumfängliches funktionieren der Seite unerlässlich. Sollten Sie damit nicht einverstanden sein, dürfen Sie diese Webseite nicht weiter nutzen. Ausserdem sollten Sie sich darüber Gedanken machen, ob Sie das Internet überhaupt nutzen wollen. Das liest sich für Sie jetzt bestimmt etwas eigenartig, ist aber nun einfach mal so. Ein Datenschutzkonvormes Internet so wie es sich unsere Politiker vorstellen ist zum jetzigen Zeitpunkt nun einfach mal nicht möglich.

Bei den übermittelten Daten handelt es sich nicht um Ihren Namen, jedoch aber um Ihre IP-Adresse. Ändern Sie Diese nicht regelmässig, kann auf Grund dieser Daten ein Surfprofil der entsprechenden Adresse erstellt werden. Auch ist es langfristig dadurch möglich, der IP Ihre eMail-Adresse zuzuordnen und irgendwann auch Ihren Namen zu kennen. Auch ist Ihr Provider verpflichtet darüber Protokoll zu führen und langfristig zu speichern, wann Sie mit welcher IP unterwegs sind.

Der grösste Datensammler ist übrigens Google. Fragen Sie doch da mal nach, welche Daten über Sie gespeichert werden. Gem. der Datenschutzverordnung müssten Sie eigentlich darüber Auskunft erhalten.

Diese Webseite speichert lokal keine IP-Adressen der Besucher und hat auch keine Kenntniss über die wahre Identität seiner Besucher.

Aktivitäten im Adminbereich, dies beginnt bereits, wenn man versucht sich einzuloggen, werden vollumfänglich samt IP-Adresse protokolliert und für 60 Tage gespeichert.

Schließen