Wo lernt man WordPress Theme Entwicklung

Vor über einem Jahrzehnt habe ich eine kleine dreiteilige Videoserie über Designing for WordPress gemacht. Dann habe ich weitere Serien mit dem gleichen Geist gemacht, wie das Videocasting der gesamten v10 Neugestaltung, die Website eines Freundes und sogar das Schreiben eines Buches. Diese sind aber schon etwas in die Jahre gekommen. Sie können immer noch nützlich sein, wenn Sie sich mit der WordPress Theme Entwicklung beschäftigen, aber es wird Momente geben, die sich sehr alt anfühlen (alte Benutzeroberflächen und alte Softwareversionen). Der gesamte Code funktioniert aber immer noch, weil WordPress eine großartige Rückwärtskompatibilität hat. Ich höre immer noch von Leuten, die diese Videos als sehr hilfreich empfanden.

Aber da die Zeit vorangeschritten ist und ich kürzlich gefragt wurde, welche Ressourcen ich *jetzt* empfehlen würde, habe ich beschlossen, mich umzusehen und zu sehen, was mir gefällt.

An wen richtet sich das?

Es gibt ein *Spektrum* von WordPress-Entwicklern, von Leuten, die überhaupt keine Ahnung von Code haben oder ihn kaum anfassen, bis hin zu Hardcore-Programmierern, die alles selbst entwickeln.

1. Wählen Sie ein Theme, das Ihnen gefällt, und verwenden Sie es.
2. 🤷‍♂️
3. 🤷‍♂️
4. 🤷‍♂️
5. 🤷‍♂️
6. Hardcore-Programmierer-Nerd.

Ich kann weder für die eine noch für die andere Seite dieses Spektrums sprechen. Es gibt diese ganze Welt von Leuten in der *Mitte*. Sie können coden, aber sie sind keine Informatiker. Sie sind Leute, die *die Arbeit erledigen*. Vielleicht so etwas wie hier:

1. Wählen Sie ein Theme, das funktioniert, und verwenden Sie es.
2. Beginnen Sie mit einem Theme, passen Sie es mit den integrierten Tools etwas an.
3. Beginnen Sie mit einem Theme, modifizieren Sie es mit Code, um das zu tun, was Sie brauchen.
4. Beginnen Sie von Grund auf, bauen Sie auf, was Sie brauchen.
5. Beginnen Sie von Grund auf, erstellen Sie eine hochgradig angepasste Website.
6. Hardcore-Programmierer-Nerd.

Ich war immer irgendwo um Nr. 4, und ich denke, das ist ein schöner Mittelweg. Ich versuche, vorgefertigtes WordPress und große beliebte Plugins die schwere Arbeit machen zu lassen, aber ich bringe mein eigenes Frontend (HTML, CSS und JavaScript) mit und passe an, was ich habe. Ich erstelle Vorlagen. Ich schreibe Abfragen. Ich baue Blöcke. Ich modularisiere, wo ich kann.

In dieser Zone fühle ich mich stark. Ich kann auf diese Weise viele Websites erstellen, fast im Alleingang. **Wo gibt es also heute Ressourcen, die Ihnen helfen, diese Art von WordPress-Theme-Entwicklung zu lernen?** Lassen Sie mich sehen, was ich finden kann.

Learning by doing, alte Schule

Es gibt viel Gutes daran, durch Ausprobieren zu lernen. Feuerprobe. Ich habe in meinem Leben viel unter diesen Umständen gelernt.

Der Trick hierbei ist, WordPress auf einem Live-Server zu installieren und dann mit den Einstellungen, Plugins, dem Customizer zu spielen und die Theme-Dateien selbst zu bearbeiten, um die Website zum Laufen zu bringen. In diesen Theme-Dateien finden Sie HTML – hacken Sie es! Sie sehen PHP-Code, der Inhalte ausgibt. Können Sie erkennen, was und wie Sie es manipulieren können? Sie finden eine CSS-Datei im Theme – bearbeiten Sie dieses Ding!

Die offizielle Dokumentation kann Ihnen hier einigermaßen helfen

• So installiert man WordPress
• Entwickler-Ressourcen
• Google-Suche, wenn Sie nicht weiterkommen

Bis zu einem gewissen Grad bin ich ein Fan davon, *es live zu tun* (auf einer Produktionswebsite), weil es dem, was Sie tun, eine gewisse *Realität* verleiht, wenn Sie Anfänger sind. Dort sind die Einsätze hoch, was Ihnen ein Gefühl für die Macht gibt, die Sie haben. *Wenn ich diese Änderungen vornehme, sind sie für jeden auf der Welt mit einer Internetverbindung sichtbar.*

Ich habe dies in meinen prägenden Jahren getan, indem ich einen Domainnamen und Hosting gekauft habe, WordPress auf diesem Hosting installiert habe, mich mit SFTP-Zugangsdaten angemeldet und buchstäblich an den Live-Dateien gearbeitet habe. Ich habe Coda verwendet, das immer noch eine beliebte App ist und während ich schreibe, aktiv in eine neue Version weiterentwickelt wird.

Hoffentlich sind die Einsätze real, aber *gering*. Wie wenn Sie an einem Hobbyprojekt oder Ihrer persönlichen Website arbeiten. Irgendwann wird das Hacken von Produktionswebsites zu gefährlich. Eine einzige falsch platzierte PHP-Syntaxzeile kann die gesamte Website lahmlegen.

Wenn Sie an etwas wie einer Kundenwebsite arbeiten, müssen Sie diesen Workflow verbessern.

Modernes Learning by doing

Die moderne, gesunde, Standardmethode für die Arbeit an Websites ist

1. Arbeiten Sie *lokal* daran.
2. Verwenden Sie Versionskontrolle (Git), wobei neue Arbeiten in Branches des master Branches erfolgen.
3. Die Bereitstellung auf der Produktionswebsite erfolgt, wenn Code zum master Branch gepusht wird, wie Ihr Entwicklungs-Branch gemergt wird.

Ich habe ein aktuelles Video zu diesem gesamten Workflow gemacht, wie ich ihn heute mache. Mein Toolset ist

• Lokal arbeiten mit Local by Flywheel.
• Mein Webhosting ist ebenfalls Flywheel, aber das ist nicht zwingend erforderlich. Es kann alles sein, was Ihnen SFTP-Zugriff gewährt und das ausführt, was WordPress benötigt: Apache, PHP und MySQL. Offenlegung, Flywheel ist hier ein Sponsor, aber weil ich sie und ihren Service mag :).
• Code wird in einem privaten Repository auf GitHub gehostet.
• Die Bereitstellung auf dem Flywheel-Hosting erfolgt über Buddy. Buddy beobachtet Pushes zum master Branch und verschiebt die Dateien per SFTP auf die Produktionswebsite.

Sobald Sie eine *lokale* Einrichtung haben, können Sie verrückt werden. Tun Sie, was Sie wollen. Sie können nichts auf der Live-Website kaputt machen, also sind Sie freier, experimentelle Änderungen vorzunehmen und einfach zu sehen, was passiert.

Beim lokalen Arbeiten werden Sie wahrscheinlich Dateien mit einem Code-Editor bearbeiten. Ich würde sagen, die beliebteste Wahl heutzutage ist das kostenlose VS Code, aber es gibt auch Atom und Sublime, und ausgefallenere Editoren wie PhpStorm.

Die Freiheit, Dateien zu hacken, ist besonders spürbar, sobald Sie Ihren Code in ein Git-Repository hochgeladen haben. Sobald Sie das getan haben, haben Sie die Freiheit, Dateien in den Zustand des letzten Pushes zurückzuversetzen.

Ich benutze die Git-Software Tower, und das erlaubt mir, zu sehen, welche Dateien sich seit meinem letzten Code-Commit geändert haben. Wenn ich einen Fehler gemacht, ein Problem verursacht oder etwas getan habe, das mir nicht gefällt – selbst wenn ich mich nicht mehr genau erinnere, was ich geändert habe – kann ich diese Änderungen auf ihren letzten Zustand *zurücksetzen*. Das ist ein schönes Maß an Freiheit.

Wenn ich Code *committe*, entweder nach master oder durch Mergen eines Branches in master, dann greift Buddy ein und stellt die Änderungen auf der Produktionswebsite bereit.

Aber wo fängt man an?

Wir sprechen hier über WordPress-Theme-Entwicklung, also fangen Sie mit einem Theme an. Themes sind buchstäblich Ordner mit Dateien in Ihrer WordPress-Installation.

root
  - /wp-content/
    - /themes/
       - /theme-name/

WordPress wird standardmäßig mit einigen Themes geliefert. Zum Zeitpunkt des Schreibens wird das Twenty Twenty Theme mit WordPress ausgeliefert, und es ist ein schönes! Sie könnten Ihre Theme-Hacks definitiv damit beginnen.

Themes haben oft eigene Vorstellungen davon, wie sie sich organisieren und Dinge tun, und Twenty Twenty ist da keine Ausnahme. Ich würde sagen, vielleicht kontrovers, dass es keinen *einen wahren Weg* gibt, Ihr Theme zu organisieren, solange es gültiger Code ist und Dinge auf die „WordPress“-Art tut. Das ist einfach etwas, das Sie im Laufe der Theme-Erstellung herausfinden müssen.

Starter-Themes

Starter-Themes waren in meiner Zeit eine sehr beliebte Methode, um ein Theme von Grund auf neu zu erstellen. Ich habe keine gute Vorstellung davon, ob das immer noch so ist, aber die Hauptidee war ein Theme mit allen grundlegenden Theme-Vorlagen, die Sie benötigen (Einzelbeitragsseiten, eine Homepage, eine 404-Seite, Suchergebnisseite usw.), mit sehr wenig Markup und keinerlei Styling. So haben Sie eine leere Leinwand, von der aus Sie Ihr eigenes HTML, CSS und JavaScript nach Belieben erstellen können. So etwas wie beim Erstellen jeder anderen Website von Grund auf mit diesen Kerntechnologien, nur mit etwas PHP, das Inhalte ausgibt.

Es gab ein Theme namens Starkers, das beliebt war, aber es ist jetzt tot. Ich habe selbst eines namens BLANK gemacht, aber das habe ich schon lange nicht mehr angefasst. Bei näherer Betrachtung habe ich einige neuere Themes mit diesem Geist gefunden. Hier sind die drei besten, die ich gefunden habe:

• HTML5 Blank
• BlankSlate
• _s („Underscores“)

Ich kann sie nicht persönlich empfehlen, aber sie wurden alle etwas kürzlich aktualisiert und sehen für mich nach guten Ausgangspunkten aus. Ich würde sie ausprobieren, falls ich bei einem Projekt von absolut Null anfangen würde. Ich wäre versucht, eines herunterzuladen und es genau so aufzubereiten, wie es mir gefällt, und *das* als mein eigenes Starter-Theme zu speichern, falls ich es noch einmal tun müsste.

Es lohnt sich zu erwähnen, dass ein Großteil der Webentwicklung nicht darin besteht, von Grund auf neu zu beginnen, sondern an bestehenden Projekten zu arbeiten. In diesem Fall besteht der Prozess immer noch darin, eine lokale Umgebung einzurichten; Sie beginnen nur nicht von Grund auf, sondern mit dem bestehenden Theme. Ich würde vorschlagen, das Theme zu duplizieren und den Namen zu ändern, während Sie daran arbeiten, damit es, selbst wenn Sie es bereitstellen, das Live-Theme nicht beeinflusst. Andere schlagen vielleicht vor, den Starter als „Parent“-Theme zu verwenden und dann zu einem „Child“-Theme zu verzweigen.

Um Ihre lokale Entwicklungsumgebung genau mit der Produktionswebsite abzugleichen, halte ich WP DB Migrate Pro für das beste Werkzeug. Es kann die Produktionsdatenbank auf Ihre lokale Website und alle Mediendateien übertragen (kostenpflichtiges Produkt und kostenpflichtiges Add-on, jeden Cent wert).

Ausgefallenere Starter-Themes

Anstatt ganz von vorne anzufangen, gibt es Themes, die sinnvolle Standardeinstellungen und sogar moderne Build-Prozesse mitbringen, mit denen Sie beginnen können. Die Idee ist, dass das Erstellen einer Website mit rohem HTML, CSS und JavaScript zwar durchaus machbar ist, aber nicht genug moderne Annehmlichkeiten bietet, um bequem zu sein.

Hier sind einige.

• Morten Rand-Hendriksen hat ein Projekt namens WP Rig, das alle Arten von Entwicklertools integriert hat. Ein Gulp-basierter Build-Prozess startet einen BrowserSync-Server für automatische Updates. JavaScript wird in Babel verarbeitet. CSS wird in PostCSS verarbeitet, und der Code wird gelintet. Er lehrt WordPress damit.
• Roots erstellt ein Theme namens Sage, das eine Template-Engine, Ihr bevorzugtes CSS-Framework und ausgefallene Build-Prozess-Sachen mitbringt.
• Ignition hat einen Build-Prozess und alle möglichen Helfer.
• Timber kommt mit einer Template-Engine und einer Reihe von Code-Helfern.

Ich finde all das ziemlich cool, aber wahrscheinlich nichts für Anfänger.

Bücher

Das ist schwierig wegen der vielen Angebote. Bei einer schnellen Google-Suche fand ich eine Website, die *fünfzehn* WordPress-Bücher für 9,99 $ als Bundle verkauft. Wo soll man da anfangen? Wie gut können sie für diesen Tiefstpreis sein? Ich weiß es nicht.

Ich habe vor langer Zeit mit Jeff Starr ein Buch namens Digging Into WordPress geschrieben. Nach all den Jahren hält Jeff das Buch immer noch aktuell, daher würde ich sagen, das ist eine gute Wahl! Jeff hat weitere Bücher wie The Tao of WordPress und WordPress Themes In Depth.

Viele andere Bücher speziell zur WordPress-Theme-Entwicklung sind einfach ziemlich alt. Material von 2008-2015. Nicht, dass es nichts zu lernen gäbe, besonders da sich WordPress nicht so schnell ändert, aber ich würde trotzdem gerne ein Buch lesen, das neuer als ein halbes Jahrzehnt ist. Das scheint eine große Chance für eine Zielgruppe zu sein, die so groß ist wie die WordPress-Benutzer und -Entwickler. Oder wenn es bereits Dinge gibt, die ich einfach nicht finde, lassen Sie es mich in den Kommentaren wissen.

Vielleicht verlagert sich das Lernen so sehr ins Online-Zeitalter, dass die Leute nicht mehr so viele Bücher schreiben...

Online-Lernkurse

Unser offizieller Lernpartner Frontend Masters hat einen Kurs über WordPress, der sich auf JavaScript und WordPress konzentriert, daher ist er vielleicht nicht ganz perfekt, um die Grundlagen der Theme-Entwicklung zu lernen. Trotzdem faszinierende Materie.

Hier sind einige andere, die mir bei meiner Recherche gut gefallen haben:

• SuperHi: WordPress
• Chris Dixon: WordPress 5 Theme Development Academy with Bootstrap v4
• WPSHOUT: The Basic Course
• WPCasts (kostenlos auf YouTube)
• Know The Code, das mit spezifischen Theme-Frameworks lehrt.
• Udemy: Zac Gordons Complete WordPress Theme & Plugin Development Course

Zacs Kurs sieht am aktuellsten und vielleicht besten aus.

Eine völlig andere Richtung für die Theme-Entwicklung

Eine Möglichkeit, eine Website mit WordPress zu erstellen, ist, gar keine WordPress-Themes zu verwenden! Stattdessen können Sie die WordPress-API verwenden, um Daten aus WordPress abzurufen und eine Website nach Belieben zu erstellen.

• Die WordPress REST API (eingebaut!), die Sie verwenden können, um etwas wie das hier zu tun.
• Gatsby und WordPress
• Verwenden Sie GraphQL anstelle von REST mit wp-graphql.

Diese Idee, das CMS und das von Ihnen erstellte Frontend zu entkoppeln, ist ziemlich nett. Es wird oft als Verwendung eines „headless“ CMS bezeichnet. Es ist nicht für jedermann. (Ein Hauptgrund ist, dass es in gewisser Weise Ihre technische Schuld verdoppelt.) Aber es kann sowohl dem CMS als auch dem Frontend die Freiheit geben, sich unabhängig zu entwickeln.