Willkommen beim WP Wegerl.at 'Lesemodus'!
Entspanntes Lesen und spannende Artikel warten auf dich.
Entdecke unsere besten Beiträge und genieße den Lesemodus.
smilies.4-user.de

WordPress-Child-Theme Funktionen, JavaScript Stylesheet

Illustration von ColiN00B
Info echo
OpenClipart-Vectors-katze-1

Ist der Classic-Editor schon zu kennen? –
"Advanced Editor Tools – ist so klasse!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-2

Anklickt Classic-Editor mit Advanced Editor Tools
"Advanced Editor Tools – ist das ausgezeichnete!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und …
"Advanced Editor Tools – ist so sehr gut !"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-7

… die Welt gehört dem, der sie genießt.
"Advanced Editor Tools – und tut sehr gut!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-4

Advanced Editor Tools aktive Installationen: 2+ Millionen
"Advanced Editor Tools – ist so fabelhaft!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-5

Ansprechend! – so gehts hier zur Lancierung
"Advanced Editor Tools – ist de luxe!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-6

… und NEU! – Classic Widgets
"Classic Widgets – sind so grandiose!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-8a

Werkraum ist Werkraum und Frontend ist Frontend
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
"Advanced Editor Tools – ist so fein!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Ein WordPress-Child-Theme ist äußerst nützlich, da es für PHP-Funktionen die functions.php und für CSS die style.css enthält. Großartige Plug-ins ermöglichen es, schnell und einfach ein Child-Theme zu erstellen, das die Funktionen und das Stylesheet des Haupt-Themas erbt. Zusätzlich findest Du in diesem Beitrag den Code für die functions.php, der für Server mit PHP7+ geeignet ist. Zudem kann JavaScript-Code, wie in der Beispiel-Datei scripts.js, einfach eingebunden werden. Auf diese Weise bist Du bestens für das nächste Theme-Update gerüstet.

Child Themes

Wenn denn dann den Link oberhalb "Child Themes ()" anklicken!

Anstatt das Child-Theme manuell zu erstellen, kann es auch mit einem Plugin erstellt werden, das nach der Erstellung des Child-Themes deaktiviert werden kann. Zum Beispiel:

WP Child Theme Generator

Quick Child Theme Generator

Bis hierher hast Du schon viel gelernt und ausreichend Informationen erhalten, um zurechtzukommen. Falls Du noch Fragen hast, schau doch einfach in den Tabs des Menüs nach.

Tab 1: Plug-in Child Theme Generator
Tab 2: Das Tun(ING) für Server mit PHP7+
Tab 3: Übernahme von Dateien aus dem Parent Theme in das Child Theme u. a. Workflows
Tab 4: Child Theme so in allem Handarbeit? – geht auch

Tab 1

Zum Beispiel:

Childs-Theme

Das mit der Lizenz ist https://www.gnu.org/licenses/old-licenses/gpl-2.0.html. – wie hervorgeht ist das meiste Optional.

…oder dasselbe so:

Childs-Theme

  • Select Parent Theme: …
  • Theme Name: Gib dem Child-Theme einen Namen, der als Ordnername verwendet wird (z.B. "Twenty-Fourteen-Child").
    • Der Ordner ist dann FTP-Clients unter wordpresswp-contentthemesTwentyFourteenChild.
  • Theme URL: z. B. https://wordpress.org/themes/twentyfourteen/.
  • Description: z.B das Datum der Erstellung, "Erstellt am …"
  • Author: Der Name des Erstellers des Child-Themes.
  • Child-Theme-URL: https://max-mustermann.net.
  • Version: Indem kann die Version der style.css-Datei des Parent-Themes angegeben werden. Obwohl es optional ist, kann es vorteilhaft sein, wenn das Child-Theme-Plug-in Child Theme Check.

Zur Beachtung, falls es auffällt: Den Plug-ins folgt in Namensgebung des Ordners mit WP Child Theme Generator der Name mit Bindestrichen twenty-fourteen-childund mit Quick Child Theme Generator ohne Bindestrichen TwentyFourteenChild.

Nach Erstellung und Aktivierung des Child-Themes kann das soeben erstellte Theme unter "Design" → "Themes" im Dashboard ausgewählt werden. Das Child-Theme ist nun vollständig einsatzbereit und das verwendete Plugin kann deaktiviert werden.

Child Theme der Dateien

Dashboard → unter Design oder Werkzeuge → Theme-Datei-Editor bzw. über FTP-Client.

Childs-Theme

JavaScript in der functions.php

Du kannst JavaScript auch über die functions.php einbinden.

add_action( 'wp_footer', function() {
?>
<script>
Hier steht das JavaScript
</script> 
<?php
});

Pr. WP-Freund

Anmerkung für WP Multisite

Wenn WordPress Multisite verwendet wird, sollte darauf geachtet werden, dass die functions.php des Parent- und Child-Themes ∴nicht∴ über den "Dashboard → Design → Theme-Editor" bearbeitet werden kann.

WP-Dashboard-Child-Theme
… Klick das Bild zur Info!

Somit ist die functions.php nur über den FTP-Client zu editieren.

  • wordpresswp-contentthemesMeinChildThemefunctions.php.

Im Grunde gilt das für WP Multisite nun für alle PHP-Dateien, also auch für Plug-ins. Wenn eine Änderung an einer PHP-Datei vorgenommen werden muss, sollte dies über einen FTP-Client erfolgen.


Tab 2: Das Tun(ING) für Server mit PHP7+

Tab 2

Das Tun(ING) für Server mit PHP7+
und separate JavaScript-Datei

Für Server mit PHP7+ ist hier der Code für die functions.php. Zusätzlich ist der folgende Code für eine separate JavaScript-Datei verfügbar. 

Die JS-Datei folgt hier der Namensgebung scripts.js. Also ist im Ordner MeinChildTheme ist die Datei scripts.js zu erstellen. – dort sind dann im bspw so Codes einzufügen, s. dort dem Link das JavaScript + jQuery.

FTP-Client

  • wordpresswp-contentthemesMeinChildThemefunctions.php.

Der functions.php  ist der generierte Code ob bspw. von Plug-in 'WP Child Theme Generator oder Quick Child Theme Generator zu entfernen. So ist das dann zu editieren, dass mit Servern PHP7+ der Code performant und einfach nur schön ist.

<?php
/* Direkten Zugriff verweigern */
if (!defined('ABSPATH')) {
    exit;
}
/* MeinChildTheme: zur function.php; style.css und stcripts.js */
add_action("wp_enqueue_scripts", function () {
    wp_enqueue_style(
        "parent-style",
        get_template_directory_uri() . "/style.css"
    );
    wp_enqueue_style(
        "child-theme-css",
        get_stylesheet_directory_uri() . "/style.css",
        ["parent-style"]
    );
    wp_enqueue_script(
        "child-theme",
        get_stylesheet_directory_uri() . "/scripts.js",
        ["jquery"],
        "1.0.0",
        true
    );
});

/* Die Funktionen ab hier */

Pr. WP-Freund

Zur Überprüfung, ob die JavaScript-Datei funktioniert, kann man folgenden Code verwenden: alert("Das ist eine Testnachricht");. Wenn nach dem Neuladen der Website eine Meldung auf der Seite angezeigt wird, funktioniert das JavaScript und der Testcode kann entfernt werden.

Merkhilfe in Bezug auf Funktionen in PHP
Erklärung zum PHP
/* Direkten Zugriff verweigern */
if (!defined('ABSPATH')) {
    exit;
}

Das Code-Snippet prüft, ob die Konstante ABSPATH definiert ist und beendet die Ausführung des Skripts, falls dies nicht der Fall ist. Es wird oft am Anfang von PHP-Skripten verwendet, die in WordPress-Umgebungen ausgeführt werden, um sicherzustellen, dass der Code nur ausgeführt wird, wenn er direkt von WordPress aufgerufen wird.

Die Funktion wird mit Hilfe der add_action-Funktion registriert und als erster Parameter wird das Ereignis init übergeben. Das bedeutet, dass die Funktion ausgeführt wird, sobald WordPress initialisiert wird. – Die Funktion, die ausgeführt wird, ist anonym und wird als Parameter an die add_action-Funktion übergeben. Diese anonyme Funktion enthält den Code, den ausgeführt werden soll, wenn das Ereignis init aufgerufen wird.

Dem JavaScript-Code wird sichergestellt, dass jQuery zuerst registriert wird, bevor es zusammen mit der benutzerdefinierten JavaScript-Datei im Footer-Bereich ausgegeben wird (true). Der Parameter array('jquery') im wp_enqueue_script-Aufruf stellt sicher, dass die benutzerdefinierte Datei von jQuery abhängt und erst ausgeführt wird, wenn jQuery verfügbar ist.

So vormals der Code:
function meine_funktion() {
 // MEIN CODE
}
add_action( 'init', 'meine_funktion' );
Im heute der Code:
add_action( 'init', function() {
 // MEIN CODE
});

'So vormals der Code' beschreibt die Funktion selbst und gibt sie dann an WordPress weiter. Der Umstand ist, dass man immer bestimmten Namen für seine Funktion finden muss. Gibt es irgendwo eine Funktion mit den gleichen Namen so folgen 500er Serverfehler. Der Code von heute anonymisiert die Funktion, sodass es egal ist, wie die Funktion heißt. Sie wird direkt an WordPress übergeben. Hier ist der Name egal und es kommt nie zu einem Problem mit anderen Funktionen.

Die ’so vormals der Code' gibt es aber noch immer und auch unterstützen noch nicht alle die neusten PHP-Versionen. Weshalb Plugins auf WordPress.org die ältere Variante verwenden, damit alles und vor allem überall funktionieren, egal welcher Server.

Anders als es bei vielen alten Dingen
ist der Abschied in Sachen Programmierung immer sinnvoll.

In PHP wird niemals aufgerufen: function meine_funktion() { … }

Deshalb nutzt man in WordPress add_action. Dann ruft WordPress die Funktion auf. Also hier im Beispiel dann: add_action( 'init', 'meine_funktion' );

… so anzuwenden. Damit die Funktion meine_funktion() auch von WordPress aufgerufen wird. Selbst kann man die Funktionen in der functions.php auch in anderen Teilen der Website nutzen.

Hier bspw <?php echo meine_funktion(); ?> würde unsere functions.php aufrufen und mit echo ausgeben, sofern in der Funktion ein return ist. Wenn in der Funktion ein echo ist, dann kann man sie so aufrufen: <?php meine_funktion(); ?>

Pr. WP-Freund


Tab 3: So Workflow …

Tab 3

Übernahme von Dateien aus dem Parent Theme in das Child Theme

Weiter kann die header.php im Child Theme ganz praktisch sein. Also hier ist es am besten die gesamte header.php vom Parent Theme zu kopieren und in das Child-Theme einzufügen.

Die Datei befindet sich in einem Unterordner

Hierfür bietet sich hier zum Beispiel die template-tags.php, die sich im Parent Theme im Ordner inc befindet. Um diese Datei im Child Theme verwenden zu können, muss man sie im entsprechenden Ordner des Child Themes – in diesem Fall inc – ablegen. – möchte man meinen, funktioniert dennoch nicht. Ich habe mir das folgend so erklären lassen:

In WordPress werden bestimmte Dateien, wie beispielsweise die 'header.php' und 'footer.php', automatisch vom Theme geladen, ohne dass zusätzlicher Code erforderlich ist. Dies liegt daran, dass WordPress bestimmte Dateien standardmäßig erkennt und verwendet, um das Design und die Struktur deiner Website zu erstellen.

Die 'header.php'-Datei wird automatisch vom Theme geladen und dient zur Darstellung des Kopfbereichs deiner Website, während die 'footer.php'-Datei für den Fußbereich der Website zuständig ist. Diese Dateien sind Teil des WordPress-Template-Hierarchie-Systems, das bestimmte Dateinamen erkennt und verwendet, um das Layout der Website zu generieren.

Andere Dateien, wie die 'template-tags.php', werden nicht automatisch vom Theme geladen, da sie möglicherweise spezifische Funktionen oder Anpassungen enthalten, die vom Entwickler des Themes implementiert wurden. In solchen Fällen muss der Code hinzugefügt werden, um diese Dateien im Child-Theme einzubinden.

Es ist wichtig zu beachten, dass jedes Theme unterschiedlich ist und möglicherweise eigene Dateistrukturen und Anforderungen hat. Deshalb kann es erforderlich sein, den Code entsprechend anzupassen, um sicherzustellen, dass die gewünschten Dateien im Child-Theme korrekt eingebunden werden.

  • Der Codes im TEST folgten Errors, also das lasse ich mal so in der originalen Datei und welches muss halt nach Theme update erneuert werden.
Es kann eben sein, dass WordPress ab einem bestimmten Update, das Überschreiben von Dateien in speziellen Ordnern (bspw. inc) nicht erlaubt.

So Workflow

… Wie bspw.

MeinChildTheme / functions.php

Die Codes zu Funktionen wie bspw im Plug-in Code Snippets, die sind dann zu übertragen  in die funktions.php des Child Themes. Oder so von Anfang an das Relevante in das Child Theme eintragen.

So als Beispiel ist hier gleich mal der 'Maintenance Mode' dabei. Das Maintenance Mode ist gut, wenn die Website gewartet wird und den Besuchern statt so Fehler der Wartungsmodus aufscheint.

Beschrieb: Das Template Redirect ist immer zum Vorschalten von etwas zu nutzen. Da hier dann auch wirklich nichts anderes mehr gezeigt wird. * * 1 = Wird zuerst geladen

/* Die Funktionen */
/* Wartungsmodus. */ 
add_action(
    "template_redirect",
    "maintenance_mode",
    1
);
function maintenance_mode()
{
    if (!current_user_can("administrator")) {
        $html =
            " <h1>Website im Wartungsmodus</h1> <h2>Medieninhaber und Herausgeber</h2> <p>Buch-Vermerk: https://domainname.de, Privatperson</p> <p><b>Name</b><br />Vor- und Nachname</p> <p><b>Adresse</b><br> Die Straße und Hausnummer<br> Die Postleitzahl und Ortsname<br> Das Land</p> <p><b>E-Mail-Adresse</b><br />…hier eintragen<br> <b>Telefon</b><br>…hier eintragen</p>";
        wp_die($html);
    }
}

Nicht zu übersehen! – den Code für den Wartungsmodus nach der Wartung den Code /*auskommentieren*/ . – nur so als bspw. 🙂

MeinChildTheme / styles.css

Aufbauend vom Plug-in Quick-Child Theme Generator ist der Kopf bzw. Kommentar der styles.css so zu belassen wie er ist, versteht sich selbst.

Weiter kann man die Codes wie bspw im Dashboard / Design / Customizer gespeichert sind, dann in Ordner MeinChildTheme der styles.css einarbeiten. Oder so von Anfang an das Relevante in das Child Theme eintragen.

  • So zum TEST von CSS ist und bleibt das mit Customizer das Non­plus­ul­t­ra!
Fachsimpelei

Zum CSS bleibt es der Nachfrage zur Performanz, ob Datei, wie sie dann im Child Theme ist, oder das Inline durch den Customizer. Das Letztere dürfte schneller sein. Somit ist zu überlegen, soll man das CSS im Customizer speichern und das Child Theme nur für so Funktionen und JavaScripts anwenden?  Eben mit http 2 ist das mit dem Abruf aus Datei nicht zu gewichten. Ferner zur Übersicht von Codes, da ist das im Child Theme mit style.css sehr von Vorteil.

Das CSS Minimieren?

Evtl. ist so JS & CSS Minimierer anzuwenden. Da ist der style.css darauf zu achten, dass man den Kopf der style.css nicht mit komprimiert, denn sonst ist der weg. Dasselbe den Vorschlag zum komprimierten Code und frei Haus macht Lighthouse. Dazu bleibt das, welches der Kopfzeile von Pfad erhalten.

  • Achtung! – sowieso sind der Form alle Beschreibungen zu den Codes weg! –, wenn dann unbedingt eine Kopie behalten … So wäre das von 'Lighthouse' eins nach dem anderen auch abzuarbeiten 🙂 Aber alles einfach so zu optimieren wird nicht gelingen, oder mit so Pro-Version von Plug-ins? – oder selbst Programmierer sein.

Der Kommentar in der style.css

/*
Theme Name: Twenty-Fourteen-Child
Theme URL: https://wordpress.org/themes/twentyfourteen/
Description: Erstellt am …
Author: Max Mustermann
Author URL: https:///mustermann.net
Template: twentyfourteen
Version: 3.5
*/

… Zur Performanz von so Lösungen wie das 'Kritische CSS' extrahieren möchte ich abraten. Nicht nur, weil des Handwerks sehr aufwendig werden kann. Für so weiter von Performanz möchte ich auf das Plug-in 'Asset CleanUp: Page Speed Booster' weisen. Dazu mehr im Titel Autoptimize + Async JavaScript? …

MeinChildTheme / scripts.js

Wie wir wissen, ist vorerst der Datei kein Code, also leer!– von bspw so Codes s. dort das 'JavaScript + jQuery'. – solches ist für die Datei scripts.js.

  • Um sich der Funktion der scripts.js zu vergewissern ist folgender Code in der scripts.js hilfreich:
alert("Das ist eine Testnachricht");

 

Tab 4: Child Theme so in allem Handarbeit

Tab 4

Das Child-Theme von Hand erstellen?

Ja, man kann das Child-Theme ohne den Plug-in-Generator erstellen. Die benötigten Codes sind dieselben wie im Tab 2 'Das Tun(ING) für Server mit PHP7+'.

FTP-Client

Child Theme / MeinChildTheme

  1. wordpresswp-contentthemes
    • da "Neuer Ordner…" anlegen.
      Name MeinChildTheme.

Child Theme / style.css

  1. Im Ordner MeinChildTheme "Neue Datei…" anlegen.
    Name style.css.
Der Kommentar in der styles.css

Im Folgenden ist das ein bspw von sog. Kommentar am Anfang der style.css. Also der Inhalt ist hier in Vorlage zu ändern.

Der Inhalt
/*
Theme Name: Twenty-Fourteen-Child
Theme URL: https://wordpress.org/themes/twentyfourteen/
Description: Erstellt am …
Author: Max Mustermann
Author URL: https:///max-mustermann.net
Template: twentyfourteen
Version: 3.6
*/

Child Theme / scripts.js

  1. Im Ordner MeinChildTheme "Neue Datei…" anlegen.
    Name scripts.js.

Dieser Datei ist kein weiterer Inhalt! – außer dann die JavaScript Codes nach bedarf. 🙂

Child Theme / functions.php

  1. Im Ordner MeinChildTheme "Neue Datei…" anlegen.
    Name functions.php.
<?php
/* Direkten Zugriff verweigern */
if (!defined('ABSPATH')) {
    exit;
}
/* MeinChildTheme: zur function.php; style.css und stcripts.js */
add_action("wp_enqueue_scripts", function () {
    wp_enqueue_style(
        "parent-style",
        get_template_directory_uri() . "/style.css"
    );
    wp_enqueue_style(
        "child-theme-css",
        get_stylesheet_directory_uri() . "/style.css",
        ["parent-style"]
    );
    wp_enqueue_script(
        "child-theme",
        get_stylesheet_directory_uri() . "/scripts.js",
        ["jquery"],
        "1.0.0",
        true
    );
});

/* Die Funktionen ab hier */

❗ Nicht vergessen: Das Child-Theme muss erst im Dashboard unter Design → Themes aktiviert werden. Des Bedarfs, kann das Theme auch wieder auf das Parent-Theme zurückgestellt werden.


Tja, das wars schon! – wir sind Entwickler 🙂
Start! – und guten Flug zu wünschen …

Nachlese

Child Theme Check

Zu guter Letzt möchte ich noch ein paar Worte zum 'Child Theme Check' Plug-in sagen. Es ist ein nützliches Tool, um einen Überblick darüber zu erhalten, welche Templates vom Child Theme überschrieben werden, außer der functions.php des Parent Themes.

Im Tab "Unterschiede" kann man sehen, welche Dateien sich maßgeblich geändert haben und entsprechend reagieren, indem man die neue Datei kopiert und in die entsprechende Datei des Child Themes einfügt und anpasst.

T.Rex – Children Of The Revolution. – Nun, Sie können mit dem Flugzeug fliegen.

Aktualisiert im Jahr 2023-April