Advertisement
  1. Code
  2. Theme Development

WordPress Theme Development Trainingsräder: Tag eins

Scroll to top
Read Time: 15 min

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

Sind Sie bereit zu lernen, wie Sie Ihr erstes WordPress-Theme erstellen? Diese Tutorial-Reihe wird Schritt für Schritt vorgehen und ein "Lernthema" verwenden, das liebevoll als WordPress-Trainingsräder bekannt ist, um das Thema zu vermitteln. Diese Serie führt den absoluten WordPress-Neuling durch die grundlegenden Schritte, die erforderlich sind, um jede HTML-Vorlage in ein voll funktionsfähiges WordPress-Theme zu konvertieren.

Learning How to Make a WordPress ThemeLearning How to Make a WordPress ThemeLearning How to Make a WordPress Theme

Serieneinführung!

Als ich 2006 anfing, WordPress zu verwenden, gab es damals nicht viele Tutorials, wo man mit der Themenentwicklung anfangen sollte.

Ich habe auf die harte Tour gelernt, durch Versuch und Irrtum, den WordPress-Codex zu minen, sowie von den wenigen Tuts, die es damals gegeben hatte. In den letzten 2 - 3 Jahren unterrichte ich ab und zu grundlegende WordPress-Theme-Entwicklung und habe festgestellt, dass die meisten Tutorials, die es gibt, um die Entwicklung von Grund auf neu zu lehren, für diejenigen, die mit Content-Management-Systemen nicht sehr vertraut sind, viel zu kompliziert sind.

Also habe ich einen Schritt-für-Schritt-Ansatz entwickelt, der ein "Lernthema" verwendet, das liebevoll als WordPress Training Wheels bekannt ist, das den kompletten WordPress-Neuling durch die grundlegenden Schritte führt, die erforderlich sind, um jede HTML-Vorlage in ein voll funktionsfähiges WordPress-Theme zu konvertieren. Wir werden jedoch langsam anfangen, speziell für diejenigen, die nicht den Luxus haben, bereits Erfahrung mit CMS-Code oder PHP zu haben. Daher der Name "Trainingsräder". Hardcore-Programmierer treten beiseite, wir sind dabei, die Rennstrecke zu räumen!

Training Wheels ScreenshotTraining Wheels ScreenshotTraining Wheels Screenshot Ein Blick auf das vorläufige Thema, auf dem wir im Laufe der Serie aufbauen werden. Es soll nicht visuell fantastisch sein, es soll pädagogisch fantastisch sein! Machen Sie sich keine Sorgen – wenn wir fertig sind, werden Sie in kürzester Zeit zu größeren und besseren Themen kommen.

Unser Fokus wird hauptsächlich auf dem WordPress-Code liegen, nicht auf dem Design. Die Vorlage ist also bewusst einfach gehalten mit leichtem Styling, damit Sie Ihr Fahrrad nicht aus Langeweile über eine Klippe fahren.


Eine wirklich großartige Einführung in die Webentwicklung mit HTML & CSS finden Sie in der Net Tuts-Tutorialserie - Web Development From Scratch

Voraussetzungen:

Zusätzliche Details

WordPress-Themes sind im Wesentlichen einfache HTML-Vorlagen mit kleinen WordPress-spezifischen PHP-Tags, die in Bereiche geworfen werden, in denen dynamischer Inhalt aus der Datenbank geladen werden muss. Aus diesem Grund ist ein gutes HTML-Verständnis erforderlich, um diese Serie weiterzuverfolgen.


Schritt 1 – WordPress installieren

WordPress-Themes bestehen zwar hauptsächlich aus HTML, können jedoch aufgrund des enthaltenen PHPs nicht standardmäßig in Ihrem Browser angezeigt werden, wodurch sich ihre Funktionsweise ändert. Sie müssen über einen Server laufen, der PHP-Code interpretieren kann, weshalb es bei der Entwicklung von WordPress-Themes unerlässlich ist, auf einem PHP-fähigen Webserver zu arbeiten.

Wir werden den Installationsprozess für WordPress vorerst überspringen, da unser Fokus ausschließlich auf der Themenentwicklung liegen wird. Ich habe auf ein Excellent Video Tutorial zur Installation von WordPress auf einem Live-Server verlinkt. Tonnen mehr finden Sie online sowohl für Live- als auch für virtuelle Server.

"Ein virtueller Server ist im Wesentlichen ein Server, der auf Ihrem lokalen Desktop-Computer ausgeführt wird und mit MAMP (mac), XAMPP (mac & windows) oder WAMP (windows) eingerichtet werden kann."

Um zu erfahren, wie Sie WordPress lokal auf einem virtuellen Server installieren, sehen Sie sich das folgende Video an.

Der Installationsprozess umfasst im Wesentlichen:

  1. Erstellen einer Datenbank sowie eines Datenbankbenutzers und des zugehörigen Passworts
  2. Hochladen der WordPress-Dateien, herunterladbar von WordPress.org
  3. Bearbeiten der Datei wp-config.php, sodass sie den Datenbanknamen, den Benutzernamen, das Passwort und die mysql-Serverdetails enthält
  4. Ausführen des Installationsskripts unter www.yoursite.com/wp-admin/install.php

Sie nennen es nicht umsonst die berühmte 5-Minuten-Installation. Tatsächlich dauert es weniger als 5 Minuten, wenn Sie es oft genug getan haben.


Schritt 2 - Vorbereiten der Dateien

Auf www.freecss templates.org finden Sie eine Menge Vorlagen, die sich perfekt für den Einstieg eignen und bereits darauf ausgerichtet sind, als WordPress-Themes verwendet zu werden.

Sobald Sie Ihre Testinstallation von WordPress ausgeführt haben, benötigen Sie eine grundlegende HTML-Vorlage (index.html). mit einem Stylesheet (style.css). Ich empfehle jedem, der den Konvertierungsprozess von HTML zu WordPress lernt, zu üben, indem er einfache kostenlose HTML- und CSS-Vorlagen herunterlädt und einige zum Üben konvertiert.

Ich werde das WordPress Training Wheels Theme für die Dauer dieser Tutorial-Serie verwenden und ich fordere Sie auf, dasselbe zu tun, damit wir nicht von vornherein in verschiedene Richtungen hausieren. Das Training Wheels Theme ist ein reines Template, nichts Rasantes oder Auffälliges, sondern enthält alle bekannten Komponenten eines typischen WordPress Themes, d.h. Header, Menu, Sidebars, Content Column & Footer. Das Thema wird am Anfang training-wheels-0.0 heißen, und der Name wird sich ständig ändern, wenn wir mehr Code hinzufügen und Fortschritte in Richtung eines vollwertigen Themas machen. Am Ende dieser Lektion ändert sich der Name in training-wheels-0.1

Sehen Sie sich unten die grundlegende HTML-Struktur an. Sehr einfach.

HTML StructureHTML StructureHTML Structure

Benennen Ihrer Starterdateien

Sollten Ihre Starterdateien nicht wie oben beschrieben benannt werden, müssen Sie sie umbenennen. WordPress erfordert Dateien mit diesen Namen als das absolute Minimum, damit ein Theme funktionsfähig ist. Darüber hinaus haben wir einen Bilderordner, um alle Bilder ordentlich aus dem Weg zu räumen.

  • home.html » index.html
  • mystyles.css » style.css

Dateierweiterungen ändern

Die Datei index.html, die die Basisstruktur für das Theme darstellt, muss in index.php umbenannt werden. Ich empfehle jedoch immer, eine Kopie von index.html nebenbei aufzubewahren, falls etwas schief geht, was passieren muss. Betrachten Sie es als Ersatzreifen für den Fall, dass Sie einen Reifenplatzer erleiden. Geständnis: Auch nach Jahren der Themenentwicklung mache ich immer noch ganz dumme Sachen, vor allem nach Mitternacht, wenn mein Gehirn nicht mehr funktioniert, aber der Kaffee mich am Laufen hält.

Am Ende haben wir folgendes. Meine sind in dem Ordner namens training-wheels-0.0 . untergebracht

strater filesstrater filesstrater files

Schritt 3 – Stylesheet-Header-Kommentar

Wenn Sie jemals versucht haben, eine einfache HTML-Vorlage zum WordPress-Themenverzeichnis hinzuzufügen, werden Sie feststellen, dass sie nicht in den Optionen zum Aktivieren von Themen angezeigt wird. Bei älteren WordPress-Versionen würden Sie auch feststellen, dass eine Fehlermeldung angezeigt wird, wenn Ihr Stylesheet den untenstehenden Stylesheet-Kommentar nicht enthält. Dies liegt daran, dass WordPress das unten stehende CSS-Kommentar-Snippet verwendet hat, um Ihr Theme als gültiges WordPress-Theme zu registrieren. Derzeit ist dieser Kommentar für die Registrierung Ihres Themes nicht mehr erforderlich, aber Ihr Theme würde ohne weitere Details erscheinen, außer dem Ordnernamen, wie unten gezeigt.

Personalisieren Sie Ihr Theme mit dem Stylesheet-Kommentar

Der unten stehende Code sollte so geändert werden, dass er Ihre eigenen eindeutigen Details sowie eindeutige Informationen über das von Ihnen erstellte Design enthält.

Mit Details aus meinem Trainingsrad-Thema würde es so aussehen:

Es gibt einige zusätzliche Parameter, die hinzugefügt werden können, insbesondere wenn Sie erwägen, Ihr Thema für die Öffentlichkeit freizugeben, es zu verkaufen oder in das offizielle WordPress-Themenverzeichnis zu laden.

Twenty Eleven Stylesheet Kommentar

Ein Beispiel für einen ausführlicheren Stylesheet-Kommentar, um so viele Details wie möglich über das Thema zu liefern, finden Sie im Standard-Theme der Elfundzwanzig. Wie Sie sehen können, sind einige zusätzliche Tag-Informationen vorhanden, die Benutzern bei der Suche nach bestimmten Thementypen über die Dashboard-Themensuche oder im Themenverzeichnis helfen. Eine detaillierte Beschreibung sowie einige Informationen zur Theme-Lizenzierung sind enthalten. Diese werden wir für diese Übung ignorieren.

Sobald Sie Ihre Stylesheet-Kommentare erstellt haben, kann Ihr Theme jetzt über das WordPress-Administrations-Dashboard unter Darstellung » Themes aktiviert werden.


Schritt 4 - Erstellen eines Screenshots

Um Ihnen und anderen Nutzern des Themes zu helfen, das Theme im Theme-Installationsbereich des Dashboards schnell zu erkennen, ist vorgesehen, dass automatisch ein screenshot.png-Bild angezeigt wird, wenn es sich im Stammverzeichnis Ihres Theme-Ordners befindet.

Idealerweise möchten Sie einen Screenshot haben, der eine gute Darstellung des Aussehens des Themas bietet. Ich finde, dass viele Designdesigner hier ein Logo einfügen, was dem Endbenutzer nicht immer hilft, das gesuchte Thema zu identifizieren, insbesondere wenn der Benutzer bereits Tonnen von Designs installiert hat, was meiner Meinung nach ziemlich häufig vorkommt.

Die screenshot.png sollte 240px x 180px groß sein, das ist die Größe, die für das Thumbnail im Dashboard verwendet wird. Sie können eine andere Größe einfügen, aber die Größe des Bildes wird an diese Abmessungen angepasst. Bleiben Sie am besten gleich beim ersten Mal bei der richtigen Größe, um eine optimale Anzeige und ein optimales Seitenladeerlebnis zu erzielen.

Theme Screenshot

Schritt 5 - Ihr erstes PHP-Tag

Bevor wir weitermachen, müssen wir uns ein wenig an der Struktur der PHP-Entwicklungssprache und vor allem an der Struktur von WordPress-spezifischem PHP orientieren. Das in WordPress-Themes verwendete PHP ist im Großen und Ganzen speziell für die Arbeit in der WordPress-Umgebung angepasst. Wir beginnen mit der enthaltenden Struktur jedes PHP-Codes, wie wenn HTML nur die Klammern hat, wird PHP-Code eingeschlossen.

Innerhalb der Brackets findet die gesamte Funktionalität statt, mit Code, auf den wir uns im Allgemeinen bei PHP-Funktionen beziehen. Stellen Sie immer sicher, dass zwischen den enthaltenden Tags und dem inneren PHP-Code ein Leerzeichen vorhanden ist. Die einfachste dieser Funktionen, mit der wir uns beschäftigen werden, ist bloginfo(); Funktion. Beachten Sie, dass wir nach dem Namen der Funktion 2 abgerundete Klammern haben, öffnend und schließend, mit einem Semikolon am Ende, schließen die Funktion ab und sind in vielen Fällen unerlässlich. Die abgerundeten Klammern enthalten manchmal einige zusätzliche Parameter, um bloginfo(); Funktion, insbesondere was es tun muss.

Einige WordPress-Funktionen benötigen keine Parameter innerhalb der abgerundeten Klammern, um eine Funktion auszuführen, obwohl sie optional einige haben können, um ihre Funktion spezifischer zu machen. Die bloginfo(); Parameter benötigt jedoch einen, um überhaupt zu funktionieren. Wir kommen zu einigen der zusätzlichen Funktionen, die im Laufe der Zeit ohne Parameter arbeiten.

Site-Name

Beachten Sie, wie das Wort name mit einfachen Anführungszeichen innerhalb der abgerundeten Klammern geschrieben wird.

ist der Code, den wir anstelle des Namens der Site verwenden, wo immer dieser Name in unserer Vorlage erscheinen soll. Wo immer ich zum Beispiel "WordPress-Trainingsräder" geschrieben habe, könnte ich diesen Text einfach durch diese Funktion ersetzen.

Achten Sie sorgfältig auf die Struktur dieser Funktion, da der Rest des WordPress-Codes durchweg einer ähnlichen Struktur folgt. Wenn Sie einen wesentlichen Teil wie die abgerundeten Klammern, das Semikolon nach den abgerundeten Klammern oder das Leerzeichen zwischen php und dem Wort bloginfo weglassen, funktioniert Ihr Code nicht richtig. In einigen Fällen kann dies Ihre gesamte Seite zerstören. Ich weiß, es ist schmerzhaft, so vorsichtig zu sein, aber es hilft, sich frühzeitig gute Gewohnheiten anzueignen. Befolgen Sie die Straßenverkehrsregeln und Ihre Reise wird viel weniger holprig.

Beim Laden der WordPress-Site, auf der diese Funktion ausgeführt wird, fragt WordPress die Datenbank ab und findet den Namen, den Sie im Feld Blog-Name unter Einstellungen » Allgemein eingegeben haben.

General Site SettingsGeneral Site SettingsGeneral Site Settings

Es ist auch der Name, den Sie ganz am Anfang eingeben, wenn Sie die Installation zum ersten Mal ausführen von WordPress. Eine Änderung dieses Namens in den Allgemeinen Einstellungen führt dazu, dass Ihre Vorlage diese Änderung sofort widerspiegelt. So funktioniert WordPress oder jedes andere Content-Management-System für diese Angelegenheit. Dynamische Tags ersetzen statische Inhalte, sodass Inhalte über die Administrationsoberfläche verwaltet werden können, anstatt die Vorlagen direkt zu bearbeiten.

Dein Theme ist noch nicht ganz bereit, um in WordPress registriert zu werden. Es fehlt ein wesentlicher Schritt, der es WordPress ermöglicht, Ihr Theme korrekt anzuzeigen.


Schritt 6 - Verknüpfen Sie Ihr Haupt-CSS mit WordPress

Ein paar Schritte zurück konnte unsere index.html problemlos auf das zugehörige Stylesheet verlinken, da sie sich im selben Ordner befinden und es genügte, den Namen der Stylesheet-Datei in den Stylesheet-Link einzufügen. Dies ist jedoch nicht mehr der Fall. WordPress-Themes befinden sich nicht auf der Stammebene der Site, da sie im Ordner wp-content » themes innerhalb der WordPress-Software installiert werden.

Wie Sie unten sehen können, wenn Sie das Thema derzeit aktivieren, sehen wir immer noch nicht das vollständige Bild. Obwohl die HTML-Struktur geladen wird, wird das Stylesheet nicht verlinkt, was zu einer Seite ohne Stil führt.

Ohne zu detailliert zu erklären, wie WordPress die Vorlagen aus diesen Ordnern aufruft, müssen wir uns jetzt bewusst sein, dass Dateien nicht mehr so einfach verlinkt werden können, wie wir sie in einfachen HTML-Sites verlinkt haben. Wir müssen einige zusätzliche WordPress-Funktionen verwenden, um die Schritte zwischen dem Stammverzeichnis und dem Ordner des aktuell aktivierten Themes auszufüllen. Wir tun dies mit Hilfe eines anderen bloginfo(); Funktion, die diesmal die URL zum Stylesheet des aktuell aktivierten Themes erkennt. Egal wie der Theme-Ordner heißt, WordPress füllt jetzt die Lücken aus und fügt den Pfad zur Datei style.css ein.

Diese Funktion wird in das Stylesheet-Link-Tag eingefügt

das wird jetzt

Wenn Sie Ihren Quellcode mit Quellcode anzeigen oder mit etwas wie Firebug überprüfen, sehen Sie, dass WordPress den vollständigen Pfad vom Stamm der Site bis zum Stylesheet enthält. Der Stammordner meiner Beispielseite befindet sich unter http://www.wpbedouine.com/training-wheels/. WordPress generiert daher:

Dieselbe stylesheet_url-Funktion fügt automatisch den Pfad zu jedem aktuell aktivierten Thema auf dieselbe Weise ein, ohne dass der Quellcode bearbeitet wird. Sie werden sehen, wie sich ein Muster herausbildet, bei dem Bits des hartcodierten Inhalts durch dynamische Funktionen ersetzt werden, die Daten im Handumdrehen aus der Datenbank ziehen.

Spüren Sie, wie die Luft jetzt durch Ihr Haar strömt? Keine Sorge, die Stützräder kommen bald ab! Das verspreche ich.


Schritt 7 – Hinzufügen Ihrer Dateien zu WordPress

Platzieren Sie Ihre index.php- und style.css-Dateien in einem eigenen Ordner, der entsprechend dem Namen des Themas benannt und dann in Ihren wp-content » themes Ordner in Ihrer Live- oder virtuellen Host-Version Ihrer WordPress-Installation hochgeladen wird, wie gesehen unter.


Schritt 8 - Aktivieren Ihres Themes

Und ohne weiteres gehen Sie zu Aussehen » Themes und klicken Sie unter Ihrem neu erstellten Theme auf Aktivieren. Für den Rest der Leser auf dieser Seite mögen diese Schritte ärgerlich einfach gewesen sein, aber ich persönlich kenne das Gefühl, endlich mit diesem Vorgang zu klicken und mein allererstes Theme in WordPress zu aktivieren. Es ist unbezahlbar für den Neuling.


Schritt 9 – Ein paar zusätzliche dynamische Inhalte

Bevor wir zum Schluss kommen, verwenden wir noch ein paar zusätzliche, sehr einfache bloginfo(); Funktionen zum Ausfüllen dynamischer Inhalte. Wir haben bereits bloginfo('name'); und bloginfo('stylesheet_url');. Unten haben wir den anfänglichen HTML-Code für das Header-Div unseres Themas.

Wir ersetzen den Inhalt des H1-Link-href-Attributs, das derzeit nur ein Hash-Symbol hat und normalerweise wie href="home.html" aussehen würde, durch bloginfo('url'); Funktion.

Außerdem ersetzen wir den h2-Slogan unter dem Site-Namen durch:

daher sieht unser Code-Snippet jetzt viel wordpressischer aus.

Ein letztes zu behebendes Problem ist der Link zum Inhaltsbild in der mittleren Spalte der Vorlage. Ähnlich wie beim Verlinken des Stylesheets müssen wir ein anderes bloginfo() verwenden; Funktion zum Ausfüllen des Bildpfads als images/imagename.jpg wird nicht mehr funktionieren.

Broken ImageBroken ImageBroken Image

Um dieses Problem zu lösen, verwenden wir den folgenden Code, bevor wir das Bilderverzeichnis aufrufen

Am Ende kommen wir also zu Folgendem.

Achten Sie auf den Schrägstrich direkt nach der schließenden Klammer und vor dem Namen des Bilderordners!


Schritt 10 – Eine Zusammenfassung des von uns behandelten Prozesses

  1. Installieren Sie WordPress auf einem lokalen oder Live-Server
  2. Vorbereiten Ihrer HTML-Dateien durch Umbenennen
  3. Fügen Sie den Header-Kommentar Ihres Stylesheets ein und bearbeiten Sie ihn
  4. Erstellen einer screenshot.png-Vorschau Ihres Designs
  5. Machen Sie sich mit der grundlegenden PHP-Codestruktur von WordPress vertraut
  6. Erneutes Verlinken Ihres Stylesheets auf WordPress-Art mit bloginfo('stylesheet_url');
  7. Hinzufügen Ihrer Dateien zum Ordner wp-content > themes
  8. Aktivieren Sie Ihr Theme im Dashboard unter Darstellung > Themes
  9. Hinzufügen einiger zusätzlicher Bloginfo-Funktionen für dynamische Inhalte.

Die bloginfo(); -Funktion hat eine Menge Verwendungsmöglichkeiten, um verschiedene Inhalte von Ihrer Website aus zu generieren. Für eine umfassendere Liste von Parametern für bloginfo(); Sehen Sie sich die WordPress-Codex-Dokumentation zu dieser Funktion an - http://codex.wordpress.org/Function_Reference/bloginfo.

Eine weitere hervorragende Ressource für die vielen WordPress-Funktionen ist die DBS Interactive WordPress Tag Reference, die im Wesentlichen eine übersichtlichere und geordnetere Darstellung des im WordPress-Codex aufgeführten Codes darstellt.

Ich habe meinem snipplr-Konto Snippets des in dieser Lektion behandelten Codes hinzugefügt.

DBS Interactive WordPress Functions ReferenceDBS Interactive WordPress Functions ReferenceDBS Interactive WordPress Functions Reference

Freewheeling mit WordPress folgt in Kürze. Ich höre, wie diese Stützräder klappern, um sich zu lösen :)

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.