Werbung

Der Classic-Editor: Vertraut und zuverlässig –
Ihr bewährter Begleiter.

Viele Nutzer schätzen die vertraute Umgebung des Classic-Editors, die eine einfache und schnelle Bearbeitung ermöglicht.

---

Werbung

Mit dem Advanced Editor Tools auf das nächste Level –
Mehr Funktionen, mehr Möglichkeiten.

Der Advanced Editor erweitert den Funktionsumfang des Classic-Editors und ermöglicht es, Inhalte noch effektiver zu bearbeiten.

---

Werbung

Einfach und intuitiv –
Der Classic-Editor für alle.

Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.

---

Werbung

Mehr schaffen in weniger Zeit –
Der Advanced Editor für kreative Köpfe.

Mit dem Advanced Editor können Designer und
Content Creatoren kreative Ideen umsetzten.

---

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.

WordPress-Child-Theme

Das ist schon mal hier sehr gut Dokumentiert: Untergeordnete Themen

Child Themes

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:

WP Child Theme Generator

… oder gern Quick 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 weiter im Beitrag.

Child Theme mit Plug-in erstellen

Zum Beispiel:

WP Child Theme Generator mit Optional Informationen oder Quick Child Theme Generator ohne Optional Informationen, funktionieren tun beide. Anmerkung zu Optional Informationen: Das mit der Lizenz ist https://www.gnu.org/licenses/old-licenses/gpl-3.0.html.

• 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 wordpress → wp-content → themes → TwentyFourteenChild.
• 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-child und 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.

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.

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

• wordpress → wp-content → themes → MeinChildTheme → functions.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.

Ü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.

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

/*
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
*/

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");

CSS Priorität des Child Themes

Im normalen style.css des Child-Themes werden einige Einstellungen möglicherweise nicht ordnungsgemäß überschrieben, was zu Komplikationen führen kann, insbesondere können Styles zur Responsivität oft nicht richtig überschrieben werden. Die Browser rendern die Websites unterschiedlich, insbesodere der Mobilen. Hier ist ein Beispiel, welchen das augenfällig wurde: Priorität von CSS.

Eine alternative Möglichkeit besteht darin, im Child-Theme eine separate CSS-Datei mit einer höheren Priorität zu erstellen. Zum Beispiel könnte man im Child-Theme zusätzlich eine custom-style.css erstellen und folgenden Code in die functions.php einfügen:

/* CSS mit höherer Priorität */

function enqueue_child_theme_styles() {
    // Registriere und lade die CSS-Datei im Child Theme
    wp_enqueue_style( 'child-theme-custom-styles', get_stylesheet_directory_uri() . '/custom-style.css', array(), null, 'all' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', 999 ); // Höhere Priorität als das Plugin

Dies, sowie die Verwendung des Customizers oder eines Plug-ins wie Simple CSS, ist geeignet, um das CSS, welches eine höhere Priortiät erfordert, erfolgreich zu integrieren.

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 in 'Das Tun(ING) für Server mit PHP7+'.

FTP-Client

Child Theme / MeinChildTheme

1. wordpress → wp-content → themes
   • da "Neuer Ordner…" anlegen.
     Name MeinChildTheme.

Child Theme / style.css

2. 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

3. 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

4. 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.

Wolken k-images, Doppeldecker OpenClipart-Vectors u. Audio salamisound.

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

Nachlese

• Weiter so Beschreibung sind der Suchmaschinen. Von dort ist sehr im Titel Ein WordPress Child Theme erstellen – so geht’s.
• Hinzuweisen ist auch auf den Titel Das Child-Theme Dilemma, der auf das Plug-in Child Theme Check weist.

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.

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

• wordpress → wp-content → themes → MeinChildTheme → functions.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

/* Direkten Zugriff verweigern */
if (!defined('ABSPATH')) {
    exit;
}

function meine_funktion() {
 // MEIN CODE
}
add_action( 'init', 'meine_funktion' );

add_action( 'init', function() {
 // MEIN CODE
});

Der Beitrag wurde mit fachlicher Unterstützung erstellt.

Aktualisiert im Jahr 2024 September