Dieses Tutorial ist nicht jedermanns Sache.<\/p>\n
Sie m\u00fcssen kein erfahrener Entwickler sein, um mitzumachen, aber Sie brauchen ein echtes Interesse daran, mehr \u00fcber WordPress und die Funktionsweise von Themes zu erfahren.<\/p>\n
Wenn Sie keine Angst haben, mit ein wenig Code zu arbeiten und sich mit einigen Themendateien die H\u00e4nde schmutzig zu machen, dann willkommen an Bord!<\/p>\n
In dieser Anleitung erfahren Sie, wie Sie Ihre WordPress-Site mit einem Child-Theme nach Herzenslust anpassen k\u00f6nnen, aber zuerst\u2026<\/p>\n
Lassen Sie uns genau erkl\u00e4ren, warum Sie dieses seltsame Ding namens "Child Theme" \u00fcberhaupt verwenden sollten.<\/p>\n
Sprich mir nach:<\/p>\n
Ich schw\u00f6re feierlich, niemals eine Theme-Datei zu bearbeiten.<\/p>\n
Neue WordPress-Benutzer, die daran interessiert sind, Anpassungen mit Code vorzunehmen, bearbeiten oft direkt die Dateien in ihrem Thema. Das ist ein gro\u00dfes No-Go.<\/p>\n
Wieso den?<\/p>\n
Ein Grund: Wenn Sie Ihr Theme aktualisieren, \u00fcberschreibt WordPress Ihr vorhandenes Theme mit der neuen Version des Themes.<\/p>\n
Warum ist das wichtig?<\/p>\n
Stellen Sie sich vor, Sie verwenden Version 1.04 des Challenger-<\/a> Designs. Sie haben das Men\u00fc in die Datei header.php verschoben und der style.css etwas neues CSS hinzugef\u00fcgt. Dann kommt Version 1.05 heraus und Sie sehen die Benachrichtigung in Ihrem Dashboard.<\/p>\n Wenn Sie auf v1.05 aktualisieren, werden sowohl die header.php- als auch die style.css-Datei durch die in v1.05 von Challenger ersetzt. Sie enthalten nicht dieselben \u00c4nderungen, die Sie vorgenommen haben, sodass Ihre Arbeit verloren geht und es keine M\u00f6glichkeit gibt, sie zur\u00fcckzubekommen. Dies kann ziemlich entmutigend sein, wenn Sie Stunden in Ihre Anpassungen versenkt haben.<\/p>\n Wenn Sie Ihre Anpassungen jedoch in ein untergeordnetes Challenger-Design einf\u00fcgen, k\u00f6nnen Sie sicher auf Version 1.05 aktualisieren, ohne Ihre Anpassungen zu verlieren, da sie sicher im untergeordneten Design gespeichert sind.<\/p>\n Dies wird etwas klarer, wenn wir uns einem echten Beispiel zuwenden, also lassen Sie uns jetzt ein untergeordnetes Thema erstellen.<\/p>\n Obwohl ich hier nicht im Detail erkl\u00e4ren werde, wie der gesamte Code funktioniert, sind dies die grundlegenden Ideen und Schnipsel, die Sie f\u00fcr den Anfang ben\u00f6tigen.<\/p>\n Erstellen Sie zun\u00e4chst einen leeren Ordner auf Ihrem Desktop. Sie k\u00f6nnen es beliebig benennen, aber die Standard-Namenskonvention besteht darin, den Namen des Themas in Kleinbuchstaben gefolgt von \u201eKind“ zu verwenden und Leerzeichen durch Bindestriche zu ersetzen.<\/p>\n Ein Child-Theme f\u00fcr das Challenger-Theme h\u00e4tte beispielsweise den Ordnernamen \u201eChallenger-Child“. Dieser Ordner enth\u00e4lt alle Dateien des Child-Themes.<\/p>\n Sie ben\u00f6tigen nur eine Datei, um ein technisch g\u00fcltiges Child-Theme, style.css, zu erstellen.<\/p>\n Erstellen Sie mit dem Code-Editor Ihrer Wahl eine neue Datei im Ordner des untergeordneten Themas und nennen Sie sie style.css.<\/p>\n In der Datei style.css f\u00fcgen Sie nat\u00fcrlich Ihr gesamtes CSS hinzu, um Ihre Site anzupassen. Damit WordPress Ihr Child-Theme als g\u00fcltiges Theme erkennt, m\u00fcssen Sie ganz oben in style.css einen Stylesheet-Header wie diesen hinzuf\u00fcgen:<\/p>\n Sie k\u00f6nnen genau diesen Header kopieren und f\u00fcr Ihre eigenen Child-Themes verwenden. \u00c4ndern Sie einfach den Namen des Themas mit dem Thema, das Sie anpassen.<\/p>\n Der wichtigste Teil ist der \u201eTemplate“-Wert, der auf den Namen des Parent-Themes gesetzt werden muss. Insbesondere der Name, der f\u00fcr den Ordner verwendet wird, der das \u00fcbergeordnete Thema enth\u00e4lt.<\/p>\n Damit k\u00f6nnen Sie das Child-Theme bereits \u00fcber das Erscheinungsbild-Men\u00fc aktivieren und verwenden. Ihre Website wird jedoch v\u00f6llig unstyled sein!<\/p>\n Wenn ein Child-Theme aktiviert ist, l\u00e4dt WordPress nicht mehr die style.css-Datei des Parent-Themes und h\u00e4ngt stattdessen von Ihrem Child-Theme ab.<\/p>\n So laden Sie beide Stylesheets\u2026<\/p>\n Erstellen Sie in Ihrem Code-Editor eine zweite Datei im Child-Theme und nennen Sie sie functions.php.<\/p>\n Als n\u00e4chstes f\u00fcgen Sie der Datei den folgenden Code hinzu:<\/p>\n Diese Funktion weist WordPress an, die style.css-Datei des Parent-Themes zu laden und danach die style.css-Datei des Child-Themes zu laden. Das Laden des Stylesheets des Child-Themes nach macht es einfacher, die CSS-Selektoren des Parent-Themes zu \u00fcberschreiben.<\/p>\n Wie ich bereits erw\u00e4hnt habe, werde ich diesen Code nicht zeilenweise behandeln, aber Sie k\u00f6nnen eine detailliertere Erkl\u00e4rung dieses Snippets im WordPress-Codex finden<\/a>.<\/p>\n Das ist alles, was Sie tun m\u00fcssen, um ein funktionierendes Child-Theme zu erstellen!<\/p>\n Mit der Einrichtung des Child-Themes gibt es drei M\u00f6glichkeiten, wie Sie Ihre Site damit anpassen k\u00f6nnen.<\/p>\n Sie k\u00f6nnen der style.css-Datei des Child-Themes so viel neues CSS hinzuf\u00fcgen, wie Sie m\u00f6chten.<\/p>\n Wenn Sie Selektoren zur Verwendung in Ihrem CSS finden, \u00fcberpr\u00fcfen Sie nicht die Datei style.css des \u00fcbergeordneten Themes. Alle unsere Themes verwenden einen \u201eCSS-Pr\u00e4prozessor“, sodass wir uns diese Datei nicht einmal ansehen! Befolgen Sie stattdessen diesen intelligenteren Prozess, um CSS-Selektoren zu finden<\/a>, und ich denke, Sie werden viel mehr Erfolg beim Anpassen Ihrer Website haben.<\/p>\n Mit einem gut codierten Parent-Theme k\u00f6nnen Sie jede der Funktionen in der Datei functions.php \u00fcberschreiben.<\/p>\n Zum Beispiel ist jede Funktion in Mission News<\/a> mit einem Eine h\u00e4ufige Anpassung, die ein untergeordnetes Thema erfordert, ist die Neuordnung von Elementen. Zum Beispiel m\u00f6chten Sie vielleicht den Titel des Beitrags nach dem Featured Image statt davor verschieben.<\/p>\n Sie k\u00f6nnen jede der Vorlagendateien aus dem \u00fcbergeordneten Thema nehmen und eine Kopie in Ihrem untergeordneten Thema platzieren. Stattdessen wird dann die Version im Child-Theme geladen. Auf diese Weise k\u00f6nnen Sie beliebige Elemente in jedem Teil der Site hinzuf\u00fcgen, neu anordnen und entfernen.<\/p>\n Sobald Sie mit Ihren \u00c4nderungen zufrieden sind, k\u00f6nnen Sie das untergeordnete Design auf Ihrer Website installieren.<\/p>\n Untergeordnete Themes k\u00f6nnen wie normale WordPress-Themes hochgeladen werden, sodass es nur ein oder zwei Minuten dauert, um sie auf deiner Website zu aktivieren. Folgen Sie diesem Tutorial, um Ihr Child-Theme zu installieren:<\/p>\n So installieren Sie ein WordPress Child Theme<\/a><\/p>\n Wenn Sie mit all dem noch nicht vertraut sind, finden Sie hier ein paar kostenlose Tools, die Ihnen helfen.<\/p>\n Wenn Sie keinen Code-Editor haben, sehen Sie sich zun\u00e4chst Visual Studio Code an<\/a>. Es ist einfach, aber flexibel. Es ist auch v\u00f6llig kostenlos und viele professionelle Software wird damit erstellt. Es ist das, was ich hier bei Compete Themes verwende, um Themen zu erstellen.<\/p>\n Zweitens ist das Erstellen einer lokalen WordPress-Site (offline) eine gro\u00dfartige M\u00f6glichkeit, Code auszuprobieren, ohne Ihre echte Live-Website zu beeintr\u00e4chtigen. W\u00e4hrend ich in der Vergangenheit MAMP<\/a> verwendet und empfohlen habe, ist Local by Flywheel<\/a> so verdammt einfach und einfach zu bedienen, dass ich es liebe. Es ist das, was ich f\u00fcr die Themenentwicklung verwende und es ist auch kostenlos.<\/p>\n Zur\u00fcck zum Beispiel von vorhin\u2026<\/p>\n Beim Aktualisieren des Challenger-Themes (oder eines anderen Themes) wird das gesamte \u201echallenger“-Verzeichnis ersetzt, was sich nicht auf das Child-Theme auswirkt, da es jetzt ein eigenes Verzeichnis im \u201echallenger-child“-Ordner hat.<\/p>\n Wenn Ihr untergeordnetes Thema eingerichtet ist, k\u00f6nnen Sie sicher alle gew\u00fcnschten Anpassungen vornehmen und Ihr \u00fcbergeordnetes Thema auf dem neuesten Stand halten.<\/p>\n Wenn Sie mit CSS und PHP noch nicht vertraut sind, kann es einige Zeit dauern, bis Sie Ihre Anpassungen nach Ihren W\u00fcnschen vorgenommen haben, aber mit einem untergeordneten Thema haben Sie eine gro\u00dfartige Grundlage, mit der Sie arbeiten k\u00f6nnen. Denken Sie daran , diese Schritte<\/a> zu befolgen<\/a>, um CSS-Selektoren zu finden, die Sie verwenden k\u00f6nnen, und alle Stilanpassungen, die Sie vornehmen, sind ziemlich einfach.<\/p>\nSo erstellen Sie ein Child-Theme<\/h2>\n
Grundeinstellung<\/h3>\n
Erstellen Sie die Datei style.css<\/h3>\n
\/*\n Theme Name: Challenger Child\n Template: challenger\n Author: Compete Themes\n Version: 1.0\n Author URI: https:\/\/www.competethemes.com\n Description: This is a child theme used to customize the Challenger WordPress theme.\n License: GNU General Public License v2 or later\n License URI: http:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n*\/<\/code><\/pre>\nErstellen Sie die Datei functions.php<\/h3>\n
<?php \nfunction my_theme_enqueue_styles() { \n $parent_style = 'parent-style'; \n wp_enqueue_style( $parent_style, get_template_directory_uri(). '\/style.css' ); \n wp_enqueue_style( 'child-style', get_stylesheet_directory_uri(). '\/style.css', array( $parent_style ), wp_get_theme()->get('Version')\n );\n}\nadd_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );<\/code><\/pre>\nAnpassen mit Ihrem neuen Child-Theme<\/h2>\n
Stile hinzuf\u00fcgen und \u00fcberschreiben<\/h3>\n
Funktionen \u00fcberschreiben<\/h3>\n
[function_exists()](https:\/\/php.net\/manual\/en\/function.function-exists.php)<\/code>H\u00e4kchen versehen. Das bedeutet, dass Sie die Funktion in die Datei functions.php Ihres Child-Themes kopieren k\u00f6nnen. Dann k\u00f6nnen Sie dort beliebige \u00c4nderungen an der Funktion vornehmen.<\/p>\nVorlagen \u00fcberschreiben<\/h3>\n
Installieren des Child-Themes<\/h3>\n
Ihre Updates sind sicher<\/h2>\n