Ein Leitfaden für die Entwicklung von WordPress-Child-Themen

Es gibt eine Reihe von Gründen, warum WordPress-Entwickler anfangen, untergeordnete Designs zu verwenden. Sie geben Ihnen die Möglichkeit, ein einzigartiges Layout über ein anderes vorhandenes Thema anzupassen. Dies ist ideal für Anfänger, die mit dem Erstellen eigener Themen herumspielen möchten.

Zusätzlich werden viele Premium-Designs im Laufe der Zeit neue Updates veröffentlichen. Wenn Sie Änderungen an Kerndesign-Dateien vornehmen, werden diese bei der Aktualisierung überschrieben. Untergeordnete Designs sind jedoch getrennt und ordentlich verstaut. Dies bedeutet, dass Sie auf vorhandene Premium-Themen aufbauen und dabei viel Zeit sparen können.

In diesem Handbuch möchte ich die grundlegenden Konzepte zum Erstellen eines untergeordneten WordPress-Themas vorstellen und warum es eine so gute Idee ist.

Fertig machen

Untergeordnete Themen sind nicht so schwierig, wie sie erscheinen. Die Vorteile des Abarbeitens eines übergeordneten Designs bedeuten, dass Sie nicht alles HTML / CSS von Grund auf schreiben müssen. Ein untergeordnetes Design verwendet automatisch alle von Ihnen eingeschlossenen Vorlagendateien, z. B. sidebar.php oder footer.php. Wenn sie fehlen, zieht Ihr untergeordnetes Design die gleichen Dateien aus dem übergeordneten Element.

Diese Funktionalität bietet eine enorme Freiheit, bereits vorhandene Vorlagen anzupassen. Es eignet sich auch hervorragend zum Ausbessern von Bereichen auf Ihrer Website für besondere Anlässe, z. B. zum Hinzufügen von Designmustern für Weihnachten oder Neujahr.

Ihre erforderlichen Dateien

Sie benötigen nur ein einziges CSS-Stylesheet, um ein untergeordnetes Design in WordPress einzurichten. Sie müssen auch ein neues Verzeichnis in erstellen / wp-content / themes Ordner, der Ihr Kindthema enthält. Achten Sie darauf, dass Sie nicht Erstellen dieses Ordners innerhalb des übergeordneten Designs, aber gleich daneben im selben Themenverzeichnis.

Entwickler enthalten häufig eine functions.php und screenshot.png im selben Ordner wie Ihre neue CSS-Datei. Der Screenshot wird in Ihrem WordPress-Admin-Panel angezeigt, und die Themendatei der Funktionen kann für Tonnen von Backend-Änderungen verwendet werden.

Im Moment sollten wir uns jedoch auf das Haupt-Stylesheet konzentrieren. Dies wird allgemein genannt style.css und enthält einen Kommentar-Header mit wichtigen Metainformationen. Dies ist wichtig, da Ihr Design nur dann als untergeordnetes Element angezeigt wird, wenn Sie den Verzeichnisnamen des übergeordneten Elements angeben. Nachfolgend finden Sie einen Beispielkopfkommentar:

 / * Themenname: Twenty Eleven Child Theme URI: http: //example.com/ Beschreibung: Child-Design für das Design von Twenty Eleven Autor: Jake Rocheleau Autor URI: http: //www.hongkiat.com/blog/ Vorlage: twentyeleven Version: 0,1 * /

Der Wert für Vorlage sollte der Verzeichnisname für das begleitende übergeordnete Thema sein. Abgesehen davon sollten alle anderen Tags mit Standard-WordPress-Themes vertraut sein.

Obwohl alle übergeordneten PHP-Vorlagen verwendet werden, wird style.css des ursprünglichen übergeordneten Elements verwendet nicht automatisch importiert werden. Wenn Sie die Originalstile bearbeiten möchten, müssen Sie sie oben im style.css-Dokument Ihres Kindes einfügen. Nachfolgend finden Sie ein Beispiel mit dem Thema WP Twenty Eleven.

 @import url ("… /twentyeleven/style.css");

Neue Styles einrichten

Das Anwenden von CSS-Regeln auf Ihr Design ist genauso einfach wie das Bearbeiten des Originals. Wenn Sie wissen, auf welche Elemente Sie zielen müssen, verwenden Sie dieselben Selektoren in Ihrem eigenen untergeordneten Design.

Wir konnten mit einigen einfachen Änderungen an Links und Absätzen demonstrieren. Ich habe Code aus dem ursprünglichen Twenty Eleven-Design für die Ausrichtung der verschiedenen Elemente verwendet. Manchmal ist es erforderlich, einen spezifischeren Selektor zu verwenden, um das ältere Design zu überschreiben.

 Körper Polsterung: 0 1.4em;  #page margin: 1.667em auto; Max-Breite: 900px;  a color: # 5281df; Textdekoration: keine; Schriftfamilie: Calibri, Tahoma, Arial, Serifenlos;  a: focus, a: active, a: hover text-decoration: underline;

Bei diesen Änderungen habe ich die gesamte Körpergröße reduziert und einige Polsterungen von den Kanten entfernt. Alle diese Selektoren sind im ursprünglichen .css-Dokument aufgeführt. Es ist bemerkenswert, dass ich auch einige Eigenschaften für alle Anker-Links ändere, die einen anderen Schriftstapel und eine andere Farbauswahl enthalten.

Die! Wichtigen Dinge

CSS hat eine spezielle Deklaration, um die Priorität vor anderen Stilen zu kennzeichnen. Die Syntax wird als angezeigt !wichtig beginnend mit dem Ausrufezeichen und endet am Ende Ihrer CSS-Eigenschaft. Dies ist notwendig, wenn Sie kaskadierende Stile von einem übergeordneten Thema haben, die Ihre eigenen benutzerdefinierten Regeln überschreiben.

 a color: # 5281df! wichtig; Textdekoration: keine; Schriftfamilie: Calibri, Tahoma, Arial, Serifenlos;

Oben habe ich meine ursprünglichen Änderungen kopiert und die Ankertextfarbe mit einer wichtigen Klausel bearbeitet. Dies hat Vorrang vor allen anderen Stilen derselben Selektortiefe. Definiertere Elemente (z. B. #access li: hover> a) halten normalerweise ihre eigenen Stile, es sei denn, das Farbe wurde immer noch von unserem ursprünglichen Selektor vererbt. In diesem Fall richtet unser übergeordnetes Design keine Schriftfamilien-Eigenschaft für Ankerverknüpfungen ein, so dass keine Vererbungsprobleme auftreten.

Wenn Sie Probleme beim Durchführen Ihrer Änderungen haben, versuchen Sie, eine dieser wichtigen Marken am Ende Ihrer Eigenschaftsaussage zu platzieren. Dies ist nicht die perfekte Lösung für jedes Vererbungsproblem, aber es ist viel häufiger als Sie denken.

Klonfunktionen.php

Im Gegensatz zum Haupt-Stylesheet importiert Ihr untergeordnetes Design die Funktionen des übergeordneten Elements automatisch. Das bedeutet, dass Sie keinen PHP-Code kopieren müssen, um ihn in Ihrem neuen Design zu aktivieren. Wenn Sie jedoch einige Funktionen neu definieren möchten, können Sie eine weitere functions.php erstellen und den neuen Code mit allen Änderungen schreiben.

Als Beispiel habe ich eine Funktion erstellt, die einige JavaScript-Dateien analysiert, wenn die Vorlage initiiert wird. Dadurch werden alle älteren Versionen der jQuery- und SWFObject-Skripts entfernt, während gleichzeitig die neuesten Versionen hinzugefügt werden wp_head Bereich.

 // Warteschlange JS-Dateien für die Ladefunktion mytheme_js () if (is_admin ()) return; wp_deregister_script ('jquery'); wp_register_script ('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'); wp_enqueue_script ('jquery'); wp_deregister_script ('swfobject'); wp_register_script ('swfobject', 'http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'); wp_enqueue_script ('swfobject');  add_action ('init', mytheme_js);

Ich sollte darauf hinweisen, dass Sie beim Importieren von Code aus der übergeordneten functions.php einen anderen Funktionsnamen verwenden müssen. Andernfalls gibt PHP einen schwerwiegenden Fehler aus und Sie müssen FTP in den Server einschalten, um den Fehler zu beheben.

Mit Theme-Dateien arbeiten

Die breiteste Kategorie des Themings ist das Erstellen benutzerdefinierter Layouts und Seitentypen. Standardmäßig erbt Ihr untergeordnetes Thema alle Designdateien des übergeordneten Elements. Sie haben jedoch die Möglichkeit, neue untergeordnete Designdateien zu erstellen, und WP registriert diese als "primäre" Vorlage.

Zum Beispiel Archiv.php und index.php werden verwendet, um das Postarchiv bzw. den Startbildschirm anzuzeigen. Wenn Sie Änderungen vornehmen möchten, bei denen Änderungen am HTML-Code erforderlich sind, ist es sicherer, die übergeordneten Dateien zu klonen und sie im Designverzeichnis des Kindes zu bearbeiten.

Benutzerdefinierte Seitenvorlagen

Während wir über Vorlagendateien sprechen, möchte ich auch eine Funktion von WordPress einführen, mit der viele nicht vertraut sind. Sie können Seiten- und Beitragsvorlagen erstellen, die beim Erstellen neuer Inhalte im Admin-Bedienfeld ausgewählt werden können. Selbst wenn das übergeordnete Design nicht über die neue benutzerdefinierte Vorlagendatei verfügt, verwendet WordPress das untergeordnete Element anstelle von page.php oder single.php.

Erstellen Sie zuerst eine neue Datei mit dem Namen page-offer.php. Dies wird ein “Sonderangebot” Werbeseite, die anders als alle anderen themenorientiert ist. Hier können Sie Ihren ursprünglichen Seitencode kopieren oder sogar das Thema komplett neu erstellen. Der einzige Code, den wir benötigen, um WordPress über diese neue Vorlage zu informieren, ist ein Kommentar-Setup in PHP.

Eine andere Alternative zu dieser Methode ist das Erstellen benutzerdefinierter Seiten, die nach der eindeutigen ID-Nummer benannt sind. Also anstatt den Standard zu laden Archiv.php Für Autorenseiten können Sie eine Datei erstellen, z author-ID.php Dabei ist ID die eindeutige WordPress-ID des Benutzers. Dieses System ist zwar umständlicher, da Sie für jeden Autor auf Ihrer Site eine neue Vorlagendatei erstellen müssen.

Es ist sinnvoller, wenn Sie diese beiden Techniken mit anderen Vorlagendateien kombinieren können. Insbesondere Kategorien und Tags funktionieren gut mit ihren eigenen Designdateien. Wenn Sie in Ihrem Inhalt auf Anhänge verweisen, sollten Sie die verschiedenen möglichen Vorlagenlayouts für jeden MIME-Typ berücksichtigen. Ich habe die Vorlagenhierarchie unten für einen einfachen JPEG-Bildanhang eingefügt:

image.php
jpeg.php
image_jpeg.php
attachment.php

Hilfreiche WordPress-Tools

WordPress selbst verfügt über ein vielseitiges Plug-In-System, das eine Vielzahl von Anpassungen ermöglicht. Da Kinderthemen so neu sind, gibt es (noch) keine Veröffentlichungen von Drittanbietern. Es gibt jedoch einige Tools, die Sie überprüfen können, um Ihre Entwicklungszeit etwas zu verkürzen.

Eine offensichtliche Erwähnung ist das One-Click Child Theme-Plugin, das für die neueste Version von WordPress 3.x entwickelt und getestet wurde. Es fügt einen Menü-Link zu Ihrem Admin hinzu “Themes” Abschnitt, um automatisch ein Kind mit Ihrem derzeit aktiven Thema zu erstellen. Das ist fantastisch, wenn Sie sich nicht mit FTP herumschlagen und mit neuen Ideen herumspielen möchten.

Wenn Sie vorhaben, diese Dateien im Admin-Panel zu bearbeiten, erhalten Sie auch eine klarere Syntax-Hervorhebung. Dies ist in WordPress nicht standardmäßig enthalten, Sie können jedoch den erweiterten Code-Editor installieren, um die Funktionalität erheblich zu verbessern. Dies macht das Waten durch PHP-Codeblöcke und HTML / CSS um einiges einfacher.

Zusätzliche Ressourcen

Neben all den Tipps in diesem Handbuch möchte ich eine Reihe wichtiger Links für Entwickler von Designs geben. Es gibt bereits so viele großartige Artikel und kostenlose Kinderthemen, in denen Sie mehr über dieses Thema erfahren können. Ich habe unten eine wunderbare Sammlung dieser Ressourcen hinzugefügt:

8 kostenlose elf elf Kinder-Themen
WordPress Online Codex »Untergeordnete Themen
So erstellen Sie ein untergeordnetes WordPress-Design mit Hooks und Filtern
Ein paar Worte zu Kinderthemen
Erstellen, Ändern und Verwenden von untergeordneten Themen in WordPress

Fazit

Ich hoffe, dass der Prozess zum Erstellen von untergeordneten WordPress-Themen nach dem Lesen dieses Artikels klarer wird. Ich habe versucht zu erklären, wie untergeordnete Designs CSS- und PHP-Vorlagen von einem übergeordneten Element übernehmen können. Darüber hinaus ist es sehr einfach, bestimmte Dateien zu bearbeiten und eigene eigene Themen zu erstellen.