A Guide To The Options For WordPress Theme Development
- 14 min read
- WordPress,Techniques (WP)
- Saved for offline reading
- Share on Twitter, LinkedIn
Auf dem WordCamp Edinburgh nahm ich kürzlich an einer Podiumsdiskussion über die Entwicklung von WordPress-Themes und die Optionen teil, die Entwicklern bei der Erstellung von Themes zur Verfügung stehen. Die wichtigste Schlussfolgerung aus der Sitzung war, dass es keine Einheitslösung gibt und dass die beste Methode von den Anforderungen der Website und den Fähigkeiten des Entwicklers abhängt.
Wenn Sie aber mit der Erstellung von WordPress-Themes beginnen oder ein System entwickeln wollen, um sie effizienter oder robuster zu erstellen, wie entscheiden Sie dann, welchen Ansatz Sie wählen? In diesem Artikel wird kurz beschrieben, wie WordPress-Themes funktionieren, und dann werden einige der verschiedenen Ansätze für ihre Entwicklung vorgestellt, mit Tipps, welcher Ansatz für Ihre Website und Ihre Umstände am besten geeignet sein könnte.
Weitere Lektüre auf SmashingMag:
- Die Migration einer Website zu WordPress ist einfacher als Sie denken
- WP_Query in WordPress verwenden
- Ereignisse mit WordPress Cron planen
- Wie man die Bereitstellung von WordPress-Websites verbessern kann
Wie funktioniert ein WordPress-Theme?
In WordPress steuern Themes eine Website und bestimmen, was sie enthält, wie sie sich verhält und wie sie aussieht. Das Theme ist vom Inhalt getrennt, der in der Datenbank gespeichert ist. Das bedeutet, dass Sie dasselbe Theme auf mehreren Websites verwenden können, unabhängig vom Inhalt der Websites – was Sie vielleicht schon tun, wenn Sie Themes aus dem Theme-Repository von WordPress heruntergeladen haben.
Ein Theme besteht aus einer Reihe von Vorlagendateien, die alle im Theme-Ordner gespeichert sind, den Sie in wp-content/themes in Ihrer WordPress-Installation finden. Jedes WordPress-Theme muss mindestens zwei Dateien enthalten: index.php und style.css. Die Index-Datei legt fest, welche Inhalte durch das Theme angezeigt werden, und das Stylesheet (Sie haben es erraten) gestaltet sie und enthält Metainformationen über das Theme, die WordPress verwendet, damit das Theme korrekt funktioniert.
Die meisten Themes haben ein paar zusätzliche Dateien:
-
header.phpEnthält den<head>Abschnitt jeder Seite sowie den Header des Website-Designs. -
sidebar.phpEnthält die Seitenleiste, einschließlich aller Widget-Bereiche. -
footer.phpEnthält die Fußzeile, die Widget-Bereiche haben kann oder auch nicht. -
functions.phpEnthält alle Funktionen, die für Ihr Thema spezifisch sind. Über die Funktionsdatei können Sie sich im WordPress Codex informieren. - Dateien, die die Schleife enthalten, die den Inhalt aus der Datenbank aufruft. Je nachdem, in welchem Teil der Website Sie arbeiten, kann dies eine von mehreren Dateien sein:
-
page.phpFür statische Seiten -
single.phpFür einzelne Beiträge (z.B. Blogbeiträge) -
index.php,archive.php,category.php, usw. Für Seiten, die eine Reihe von Beiträgen auflisten
-
Yoast hat eine großartige visuelle Darstellung der Funktionsweise von Theme-Dateien verfasst, und der WordPress-Codex enthält eine ausführliche Beschreibung von Themes, einschließlich Details zu den verschiedenen Dateien und wann sie aufgerufen werden.
Ich würde jedoch behaupten, dass das Stylesheet die wichtigste Datei ist und diejenige, mit der Sie wahrscheinlich beginnen werden, da ein „Child-Theme“ (mehr dazu in Kürze) ein Stylesheet benötigt, selbst wenn es nichts anderes enthält. Das Stylesheet enthält wichtige Metainformationen über das Theme selbst, die vor allen Styles auskommentiert sind. Nachfolgend finden Sie die einleitenden Kommentare für das aktuelle Standard-Theme von WordPress, Twenty Eleven:
Diese Informationen werden auskommentiert, damit sie nicht von Browsern gelesen werden können, aber sie werden von WordPress gelesen und liefern Informationen für jeden, der Ihr Theme verwendet. Wir werden in Kürze darauf zurückkommen, wenn wir uns ansehen, wie man ein Child-Theme erstellt.
Nachdem Sie nun wissen, wie Themes funktionieren, ist der nächste Schritt, herauszufinden, wie Sie Ihr eigenes erstellen können. Bevor Sie beginnen, sollten Sie einige Punkte beachten, die Ihnen bei dieser Entscheidung helfen.
Was ist bei der Entwicklung eines WordPress-Themes zu beachten?
Bevor Sie sich für einen Ansatz zur Entwicklung Ihres Themes entscheiden, sollten Sie Ihre Einschränkungen ermitteln. Dazu gehören wahrscheinlich die folgenden Punkte:
- Zeit. Wie viel Zeit haben Sie, um Ihr Thema zu entwickeln oder zu lernen, wie man es umsetzt?
- Budget. Dies hängt mit der Zeit zusammen, hat aber auch damit zu tun, ob Sie es sich leisten können, für ein Premium-Theme oder ein Theme-Framework zu bezahlen.
- Fähigkeiten. Wie vertraut sind Sie mit der Theme-Entwicklung, mit CSS und PHP und damit, wie Themes funktionieren? Wenn Sie nicht vertraut sind, wie viel wollen Sie lernen?
- Zukunftssicherheit. Wird Ihr Theme in Zukunft aktualisiert werden müssen? Werden außer Ihnen auch andere Entwickler daran arbeiten? Wenn ja, dann muss Ihr Ansatz so robust wie möglich sein.
- Wiederholung. Werden Sie in Zukunft eine Reihe ähnlicher Themen entwickeln? Wenn ja, muss Ihr Ansatz die Wiederverwendung von Code ermöglichen.
Wir werden diese Überlegungen am Ende des Artikels noch einmal aufgreifen und aufzeigen, welche Entwicklungsoptionen für verschiedene Situationen am besten geeignet sind.
Themenentwicklung: Ihre Optionen
Es gibt einige Optionen für die Entwicklung Ihres Themes oder Ihrer Themes, und es lohnt sich, diese zu untersuchen, bevor Sie die Ärmel hochkrempeln und mit der Programmierung beginnen. Die Wahl des richtigen Ansatzes wird zu einem besseren Thema mit robusterem Code führen und die Anzahl der späteren Überarbeitungen minimieren. Es wird Ihnen auch helfen, das Thema effizienter zu gestalten.
Die Optionen, die wir uns hier ansehen werden, sind:
- Ein Theme von Grund auf neu erstellen,
- Ein vorhandenes Theme bearbeiten (oder „hacken“, wie man sagen könnte),
- Den Theme-Customizer verwenden, um ein vorhandenes Theme zu optimieren,
- Ein Child-Theme erstellen, um Änderungen an einem bestehenden Theme vorzunehmen,
- Ein eigenes Parent-Theme (mit einer der oben genannten Methoden) und Child-Themes erstellen,
- Ein Theme-Framework verwenden.
1. Ein Theme von Grund auf neu erstellen
Dieser Ansatz ist der schwierigste, wenn Sie unerfahren sind. Aber wenn Sie ein erfahrener WordPress-Entwickler sind, haben Sie damit die meiste Kontrolle. Es könnte die geeignetste Methode sein, wenn Sie HTML von einer bestehenden statischen Website importieren, die ohne weitere Änderungen auf WordPress aktualisiert wird.
Wenn Sie jedoch eine Website auf WordPress übertragen, ist es eine gute Idee, sie als Teil des Prozesses zu überprüfen, anstatt einfach den Code zu kopieren. Wenn Sie eine statische Website kopieren, müssen Sie Ihren Code genau im Auge behalten, um sicherzustellen, dass er sauber, effizient und gültig ist.
2. Ein bestehendes Theme bearbeiten (oder hacken)
So beginnen die meisten Leute mit der Entwicklung von WordPress-Themes: Bei der Arbeit an einem Theme, das sie heruntergeladen haben, stellen sie fest, dass ein Teil des Stylings nicht ganz richtig ist, also vertiefen sie sich in das Stylesheet und nehmen einige Änderungen vor. Diese Vorgehensweise ist verlockend, denn sie scheint eine schnelle und einfache Möglichkeit zu sein, den gewünschten Effekt zu erzielen. Aber es gibt einige Gefahren:
- Wenn Sie jemals das Thema wechseln, wird dieses Update alle Änderungen, die Sie vorgenommen haben, außer Kraft setzen.
- Es ist einfach, sich wiederholenden Code hinzuzufügen, indem man neue Stile weiter unten in der Stilvorlage hinzufügt, die die Stile weiter oben außer Kraft setzen, anstatt das zu entfernen, was man nicht braucht.
- Die Website könnte am Ende viel mehr Code haben, als sie braucht.
- Wenn das Thema von Anfang an nicht gut kodiert oder kommentiert ist, könnte man sich in ein größeres Durcheinander hineinmanövrieren und feststellen, dass man eine Menge Korrekturen vornehmen muss.
Allerdings kann das Hacken eines Themas funktionieren, wenn man es mit offenen Augen angeht. Es kann eine Option sein, wenn die folgenden Punkte zutreffen:
- Das verwendete Theme ist gut geschrieben, valide und kommentiert (z.B., das Standard-WP-Theme Twenty Eleven);
- Die Änderungen, die Sie vornehmen, sind so drastisch, dass Sie das ursprüngliche Theme nicht aktualisieren müssen;
- Sie verstehen das im Theme enthaltene PHP und CSS und können es problemlos bearbeiten, ergänzen und entfernen, ohne das Theme zu zerstören.
Wenn Sie sich für diesen Weg entscheiden, ist es wichtig, eine Sicherungskopie des ursprünglichen Themes aufzubewahren und Ihren Code gründlich zu kommentieren. Ich würde auch empfehlen, jeden Code auszukommentieren, den Sie nicht wollen, und dann zu testen, was passiert, bevor Sie etwas löschen.
3. Verwenden Sie den Theme Customizer, um ein bestehendes Theme zu optimieren
Der Theme Customizer wurde mit WordPress 3.4 veröffentlicht. Er gibt Ihnen die Möglichkeit, ein Theme anzupassen, ohne Code zu schreiben, indem Sie einfach eine WYSIWYG-Oberfläche verwenden. Je nachdem, wie gut der Customizer in das Theme selbst integriert ist, können Sie damit Bilder, Titel, Farben und sogar das Layout ändern. Erwarten Sie mehr Themes mit integriertem Customizer.
Der Theme-Customizer speichert Ihre Änderungen in einer separaten Datei, nicht im Stylesheet des Themes, so dass sich der Code wiederholt.
Weitere Informationen finden Sie im Video-Tutorial von Otto on WordPress oder in der Anleitung zur Integration des Theme-Customizers in Ihre eigenen Themes.
4. Ein Child-Theme erstellen, um Änderungen an einem bestehenden Theme vorzunehmen
Dieser Ansatz ähnelt der Bearbeitung eines bestehenden Themes, ist aber sicherer. Sie besteht darin, ein brandneues Thema zu erstellen, das als Unterthema des vorhandenen Themas definiert ist. Wenn Ihr untergeordnetes Thema keine bestimmte Datei hat, das übergeordnete Thema aber schon, wird es diese verwenden. Verfügt das untergeordnete Thema über eine Datei, so überschreibt diese Datei die entsprechende Datei des übergeordneten Themas. Sehen wir uns ein Beispiel an:
| Elternthema-Dateien | Kindthema-Dateien |
|---|---|
|
|
Im Beispiel oben, WordPress würde die folgenden Dateien verwenden, um Inhalte zu liefern:
-
style.cssvom Child-Theme, -
page.phpvom Child-Theme, -
single.phpvom Parent-Theme, -
archive.phpvom Parent-Theme, -
header.phpvom Child-Theme, -
sidebar.phpvom Parent-Theme, -
footer.phpvom Parent-Theme.
Sie können sich vorstellen, dass dies nützlich ist, wenn Sie den größten Teil des Markups des Eltern-Themes verwenden, aber den Inhalt der Kopfzeile (z. B. Ihr Logo und Ihre Adressdaten) und statische Seiten (z. B. die Art und Weise, wie Metadaten angezeigt werden) ändern möchten.
Die einzige Datei, die jedes Child-Theme haben muss, um zu funktionieren, ist das Stylesheet, da es die Informationen enthält, die WordPress benötigt, damit das Child-Theme richtig funktioniert. Fügen Sie dazu etwas zusätzlichen Code in die Kommentare des Stylesheets ein:
Können Sie die zusätzlichen Zeilen erkennen? Die erste ist:
Template: twentyelevenDiese Zeile teilt WordPress mit, dass das Thema ein untergeordnetes Thema ist und dass Twenty Eleven das übergeordnete Thema ist. Sie fügen den Namen des Verzeichnisses des übergeordneten Themes hinzu, nicht seinen vollständigen Namen.
Und die zweite:
@import url("../twentyeleven/style.css");Diese Zeile weist den Browser an, das Stylesheet des übergeordneten Themes zu laden, bevor die Styles im aktuellen Stylesheet gerendert werden. Dadurch müssen Sie die Stile des übergeordneten Themas, die Sie verwenden möchten, nicht duplizieren.
So funktionieren also untergeordnete Themen. Aber wann ist dies der beste Ansatz? Ich würde vorschlagen, es in den folgenden Fällen zu verwenden:
- Sie haben bereits ein Theme (das als übergeordnetes Theme verwendet werden soll), das das meiste von dem enthält, was Sie für Ihr Theme benötigen;
- Sie möchten Ihr übergeordnetes Theme aktualisieren können (zum Beispiel, wenn Theme-Updates nach einem WordPress-Update veröffentlicht werden);
- Sie wollen sich nicht durch das Hacken eines bestehenden Themes verheddern;
- Sie wollen die Möglichkeit haben, zum Eltern-Theme zurückzukehren oder in Zukunft ein anderes ähnliches Theme zu entwickeln (was ein neues Child-Theme wäre);
- Sie entwickeln eine Reihe ähnlicher Websites mit geringfügigen stilistischen oder inhaltlichen Unterschieden (ich habe dies getan, als ich ähnliche Websites für einen Kunden entwickelte, der mehrere Unternehmen besaß);
- Der Unterschied zwischen Ihrem Child-Theme und Ihrem Parent-Theme ist nicht so groß, dass Sie ganz von vorne anfangen müssen, oder nicht so groß, dass der Code Ihres Child-Theme alles überschreibt, was durch Updates des Parent-Theme beeinflusst wird.
5. Erstellen Sie Ihr eigenes Parent-Theme (mit einer der obigen Methoden) und Child-Themes
Die Situation, auf die ich gerade angespielt habe, nämlich die Erstellung einer Reihe von Websites für einen Kunden mit mehreren Unternehmen, ist eine Gelegenheit, bei der Sie ein Parent-Theme erstellen und dann Child-Themes für einzelne Websites einrichten können. Dies kann auch in folgenden Fällen sinnvoll sein:
- Sie planen, in Zukunft viele Websites mit ähnlichem Inhalt und ähnlichem Markup zu entwickeln (nicht nur für einen Kunden);
- Sie verwalten viele Websites und müssen regelmäßig in jede einzelne eintauchen, und Sie möchten, dass der Code sehr ähnlich ist;
- Sie möchten Ihr eigenes übergeordnetes Theme erstellen und den Code bearbeiten, um ein robustes übergeordnetes Theme zu erstellen, das gut mit den untergeordneten Themes funktioniert.
Wenn Sie sich für diesen Ansatz entscheiden, können Sie entweder Ihr Eltern-Theme von Grund auf neu erstellen oder ein bestehendes Theme hacken. Für die meisten Websites, die ich erstelle, verwende ich ein übergeordnetes Theme, das ich entwickelt habe, indem ich das Twenty Ten-Theme, das frühere Standard-Theme für WordPress, gehackt habe. Ich habe so viele Änderungen vorgenommen, dass ich keine Updates mehr für das ursprüngliche Theme aktivieren musste. Außerdem war ich mit dem Code des Themes sehr zufrieden und wollte erhebliche Änderungen daran vornehmen, indem ich den Code reduzierte, ihn umstrukturierte, um ihn an meine Arbeitsweise anzupassen, und Code entfernte, von dem ich wusste, dass ich ihn nicht brauchen würde.
Sie könnten auch ein Child-Theme auf der Grundlage eines bestehenden Themes erstellen und dann Child-Themes dafür erstellen – quasi Enkelkinder des ursprünglichen Themes. Dies hat den Vorteil, dass Sie den Code des ursprünglichen Themas nicht überschreiben und gleichzeitig die Flexibilität haben, Änderungen am untergeordneten Thema vorzunehmen, die dann an die Enkel-Themen weitergegeben werden. Ein Wort der Warnung an dieser Stelle: Wenn man drei Themes verwendet, kann man leicht durcheinander kommen und eine Menge unnötigen Code schreiben.
6. Verwenden Sie ein Theme Framework
Die letzte Option wird von Tausenden von WordPress-Nutzern und -Entwicklern verwendet. Es gibt eine Reihe von Theme-Frameworks, die Sie als eine Art übergeordnetes Theme verwenden können, aber mit viel mehr Funktionen und in einigen Fällen mit der Möglichkeit, ziemlich ausgefallene Layout- und Stiländerungen vorzunehmen, ohne eine Zeile Code zu schreiben. Einige Frameworks sind kostenlos, während andere kostenpflichtig sind. Sie wurden bereits im Smashing Magazine ausführlich besprochen, aber die wichtigsten sind im Folgenden aufgeführt.
Kostenlose WordPress-Frameworks:
- Theme Hybrid enthält eine Vielzahl von Hooks und Widget-Bereichen, mit denen Sie Ihre Themes anpassen können. Es sind auch einige Child-Themes verfügbar. Das Framework und die Child-Themes sind alle kostenlos, aber wenn Sie Support wünschen, müssen Sie dafür bezahlen, indem Sie sich auf der Website von Theme Hybrid registrieren. Die Arbeit damit kann recht komplex sein, es sei denn, Sie verstehen PHP oder verwenden eines der Child-Themes.
- Wonderflux basiert auf einem flexiblen Grid-System. Es bietet Optionen zur Anpassung des Layouts und der Stile, ohne dass man Code schreiben muss, und es enthält eine Menge Hooks und Widget-Bereiche. Es ist kostenlos und wird über die WordPress-Foren unterstützt.
- Carrington ist das etablierteste der freien Frameworks und verfügt über eine Reihe von Child-Themes.
- Thematic wird von Automattic entwickelt, das WordPress selbst entwickelt. Es enthält eine Reihe von Hooks, Filtern und Widget-Bereichen.
Premium-WordPress-Frameworks:
- Ihre Entwickler bezeichnen Genesis als „den Industriestandard“. Es bietet eine große Auswahl an Child-Themes, Optionen zur Anpassung ohne das Schreiben von Code und SEO-Funktionen.
- Thesis ist das andere große Premium-Framework und bietet ebenfalls die Möglichkeit, Child-Themes ohne das Schreiben von Code anzupassen.
Zusammenfassung: Auswahl eines Ansatzes
Die Chancen stehen gut, dass Sie nach der Lektüre eine Vorstellung davon haben, welchen Ansatz Sie verfolgen wollen. Falls Sie sich aber immer noch den Kopf zerbrechen, finden Sie hier eine Zusammenfassung, wann welche Methode geeignet ist:
| Ansatz | Zeit | Kosten | Kapazität | Zukunfts-proofing | Wiederholung |
|---|---|---|---|---|---|
| Von Grund auf neu bauen | Hoch | Niedrig | Hoch | Niedrig | Niedrig |
| Bestehendes Thema hacken | Niedrig | Niedrig | Mittel | Niedrig | Niedrig |
| Benutze Theme-Anpassung | Niedrig | Niedrig | Niedrig | Niedrig | Niedrig |
| Untergeordnetes Thema auf Grundlage des vorhandenen übergeordneten Themas erstellen | Mittel | Niedrig | Mittel | Hoch | Hoch |
| Elternthema erstellen | Hoch | Niedrig | Hoch | Hoch | Hoch |
| Themenrahmen (kostenlos) | Mittel | Niedrig | Mittel | Hoch | Hoch |
| Themengerüst (Premium) | Mittel | Hoch | Niedrig bis mittel | Hoch | Hoch |
Alles in allem, hat jeder Ansatz seine Berechtigung; Es hängt nur von der Website und von Ihnen ab. Wichtig ist, dass man sich für einen Ansatz entscheidet, nachdem man die Vor- und Nachteile abgewogen hat – und nicht einfach loslegt, um dann festzustellen, dass man ein Thema kaputt gemacht oder sich selbst eine Menge Nacharbeit aufgebürdet hat.
Und wie immer, egal wie Sie sich entscheiden, vergessen Sie nicht, Backups zu machen!
(al)