Share
Sind Sie bereit zu lernen, wie Sie Ihr erstes WordPress-Theme erstellen können? Diese Tutorialserie wird Schritt für Schritt vorgehen und ein "Lernthema" verwenden, das als "Lernthema" bezeichnet wird WordPress-Trainingsräder, zu helfen, das Thema zu unterrichten. Diese Serie führt den absoluten WordPress-Neuling durch die grundlegenden Schritte, die dazu erforderlich sind Konvertieren Sie beliebige HTML-Vorlagen in ein voll funktionsfähiges WordPress-Design.
Als ich 2006 mit WordPress begann, gab es damals nicht sehr viele Tutorials, wo man mit der Themenentwicklung anfangen sollte.
Ich habe auf die harte Tour gelernt, durch Ausprobieren den WordPress-Codex sowie die wenigen Tuts, die es damals gab. In den letzten 2 - 3 Jahren habe ich grundlegende WordPress-Themenentwicklung unterrichtet und festgestellt, dass für diejenigen, die sich mit Content-Management-Systemen nicht so gut auskennen, die meisten Tutorials, die die Entwicklung von Grund auf lehren, viel zu kompliziert sind.
Daher habe ich einen schrittweisen Ansatz entwickelt, der ein "Lernthema" verwendet, das als "Lernthema" bezeichnet wird WordPress-Trainingsräder, Dies führt den kompletten WordPress-Neuling durch die grundlegenden Schritte, die erforderlich sind, um HTML-Vorlagen in ein voll funktionsfähiges WordPress-Design zu konvertieren. Wir werden jedoch langsam anfangen, insbesondere für diejenigen, die nicht über den Luxus früherer Erfahrung mit CMS-Code oder PHP verfügen. Daher der Name "Trainingsräder". Hardcore-Codierer treten beiseite, wir sind dabei, die Rennstrecke zu räumen!
Unser Fokus wird hauptsächlich auf dem WordPress-Code liegen, nicht auf dem Design. Daher ist die Vorlage absichtlich einfach und mit einem leichten Styling versehen, damit Sie nicht aus Langeweile mit dem Fahrrad auf einer Klippe fahren.
Für eine wirklich großartige Einführung in die Webentwicklung mit HTML & CSS lesen Sie die Net Tuts-Lernprogrammreihe - Web Development from Scratch
WordPress-Themes sind im Wesentlichen reine HTML-Vorlagen, wobei kleine Teile von WordPress-spezifischen PHP-Tags in Bereiche geworfen werden, in denen dynamischer Inhalt aus der Datenbank geladen werden muss. Aus diesem Grund wäre ein gutes Verständnis von HTML notwendig, um diese Serie durchzuarbeiten.
WordPress-Themes können, obwohl sie hauptsächlich aus HTML bestehen, nicht standardmäßig in Ihrem Browser angezeigt werden, da sie PHP enthalten und dadurch ihre Funktionsweise ändern. Sie müssen über einen Server laufen, der PHP-Code interpretieren kann. Daher ist es bei der Entwicklung von WordPress-Themes unerlässlich, auf einem PHP-fähigen Webserver zu arbeiten.
Wir werden den Installationsprozess für WordPress vorerst überspringen, da wir uns ausschließlich auf die Themenentwicklung konzentrieren. Ich habe mit einem Excellent Video-Tutorial über die Installation von WordPress auf einem Live-Server verbunden. Tonnenweise mehr können online sowohl für Live- als auch für virtuelle Server gefunden werden.
"Ein virtueller Server ist im Wesentlichen ein Server, der auf Ihrem lokalen Desktop-Computer ausgeführt wird. Er kann mit MAMP (Mac), XAMPP (Mac & Windows) oder WAMP (Windows) eingerichtet werden."
Um zu erfahren, wie Sie WordPress lokal auf einem virtuellen Server installieren, sehen Sie sich das folgende Video an.
Sie nennen es nicht die berühmte 5-Minuten-Installation für nichts. Wenn Sie es genug getan haben, dauert es weniger als 5 Minuten.
Unter www.freecss templates.org finden Sie eine Vielzahl von Vorlagen, die perfekt für den Einstieg geeignet sind und bereits als WordPress-Themes gedacht sind.
Sobald Sie Ihre Testinstallation von WordPress ausgeführt haben, benötigen Sie eine einfache HTML-Vorlage (index.html) mit einem Stylesheet (style.css). Ich würde jeden, der den Konvertierungsprozess von HTML nach WordPress erlernt, dazu ermutigen, einfache HTML- und CSS-Vorlagen herunterzuladen und einige für die Praxis zu konvertieren.
Ich werde das WordPress Training Wheels Theme für die Dauer dieser Tutorialserie verwenden, und ich möchte Sie dazu auffordern, dasselbe zu tun, damit wir uns zunächst nicht in verschiedene Richtungen bewegen. Das Training Wheels-Design ist eine nackte Knochenvorlage, nichts Rassiges oder Auffälliges, enthält jedoch alle bekannten Komponenten eines typischen WordPress-Designs, d. H. Kopfzeile, Menü, Seitenleisten, Inhaltsspalte und Fußzeile. Das Theme wird benannt Stützräder-0,0 Am Anfang wird sich der Name ständig ändern, da wir mehr Code hinzufügen und der Fortschritt in Richtung eines voll entwickelten Themas geht. Am Ende dieser Lektion ändert sich der Name in Stützräder-0,1
Sehen Sie sich die grundlegende HTML-Struktur unten an. Sehr einfach.
Wenn Ihre Starterdateien nicht wie oben erwähnt benannt wurden, müssen Sie sie umbenennen. WordPress Erfordert Dateien mit diesen Namen als absolutes Minimum, damit ein Design funktionieren kann. Zusätzlich haben wir einen Bilderordner, um alle Bilder sauber zu verstauen.
Die Datei index.html, die die Basisstruktur für das Design darstellt, muss in index.php umbenannt werden. Ich empfehle jedoch immer, eine Kopie von index.html auf der Seite zu behalten, falls etwas schief geht, wie es passieren wird. Betrachten Sie es als Reserverad, falls Sie einen Reifenschaden erleben. Geständnis: Selbst nach Jahren der Themenentwicklung mache ich immer noch wirklich dumme Sachen, vor allem nach Mitternacht, wenn mein Gehirn nicht mehr funktionieren kann, aber der Kaffee mich auf Trab hält.
Wir enden mit dem Folgenden. Meine befinden sich in einem Ordner namens Trainingsräder-0.0
Wenn Sie jemals versucht haben, eine einfache HTML-Vorlage in das WordPress-Themes-Verzeichnis einzufügen, werden Sie feststellen, dass diese Option nicht in den Optionen zum Aktivieren von Motiven angezeigt wird. Bei älteren Versionen von WordPress würden Sie auch feststellen, dass eine Fehlermeldung angezeigt wird, wenn Ihr Stylesheet nicht den folgenden Stylesheet-Kommentar enthält. Dies liegt daran, dass WordPress das CSS-Kommentar-Snippet verwendet hat, um ein Theme als gültiges WordPress-Theme zu registrieren. Zurzeit ist es nicht mehr erforderlich, diesen Kommentar für die Registrierung Ihres Designs zu erstellen. Das Design würde jedoch ohne Details angezeigt, abgesehen von dem Ordnernamen (siehe unten).
Der folgende Code sollte so geändert werden, dass er Ihre eigenen eindeutigen Details sowie eindeutige Informationen zu dem von Ihnen erstellten Thema enthält.
/ * Themenname: Theme URI: Beschreibung: Version: Autor: Author URI: * /
Mit Details zu meinem Training Wheels-Theme würde es so aussehen:
/ * Themenname: Training Wheels Theme URI: http://www.wpbedouine.com Beschreibung: Ein Theme, um die WordPress-Theme-Entwicklung von Scratch zu erlernen Version: 0.1 Autor: Nur Ahmad Furlong Author URI: http: //www.nomad-one .com * /
Es gibt einige zusätzliche Parameter, die hinzugefügt werden können, insbesondere wenn Sie beabsichtigen, Ihr Design für die Öffentlichkeit freizugeben, zu verkaufen oder in das offizielle WordPress.org-Themeverzeichnis zu laden.
Ein Beispiel für einen detaillierteren Stylesheet-Kommentar, der möglichst viele Details zum Thema enthält, finden Sie im zwanzig elf Standardthema. Wie Sie sehen, werden einige zusätzliche Tag-Informationen angezeigt, die Benutzern bei der Suche nach bestimmten Themenarten über die Dashboard-Themensuche oder das Themeverzeichnis helfen. Eine ausführliche Beschreibung sowie einige Informationen zur Themenlizenz sind enthalten. Wir werden dies für diese Übung ignorieren.
/ * Themenname: Twenty Eleven Theme URI: http://wordpress.org/extend/themes/twentyeleven Autor: das WordPress-Team Autoren-URI: http://wordpress.org/ Beschreibung: Das 2011-Theme für WordPress ist ausgereift und leicht und anpassungsfähig. Machen Sie es sich mit einem benutzerdefinierten Menü, einem Kopfzeilenbild und einem Hintergrund zu eigen. Machen Sie mit den verfügbaren Themenoptionen für helle oder dunkle Farbschemata, benutzerdefinierten Linkfarben und drei Layoutoptionen weiter. Twenty Eleven ist mit einer Showcase-Seitenvorlage ausgestattet, die Ihre Titelseite in ein Showcase verwandelt, um Ihren besten Inhalt zu zeigen, Widget-Support in Hülle und Fülle (Seitenleiste, drei Fußzeilenbereiche und ein Showcase-Seiten-Widgetbereich) sowie ein benutzerdefiniertes "Ephemera" -Widget Zeigen Sie Ihre Beiträge zu "Neben", "Link", "Angebot" oder "Status" an. Enthalten sind Stile für den Druck und für den Admin-Editor, Unterstützung für vorgestellte Bilder (als benutzerdefinierte Header-Bilder auf Posts und Seiten und als große Bilder auf vorgestellten "klebrigen" Posts) und spezielle Styles für sechs verschiedene Postformate. Version: 1.2 Lizenz: GNU General Public License Lizenz URI: license.txt Tags: dunkel, hell, weiß, schwarz, grau, einspaltig, zweispaltig, linke Seitenleiste, rechte Seitenleiste, feste Breite, flexible Breite , benutzerdefinierten Hintergrund, benutzerdefinierten Farben, benutzerdefinierten Kopfzeilen, benutzerdefinierten Menüs, Editor-Stil, Feature-Bild-Header, Feature-Bildern, Full-Width-Vorlage, Mikroformaten, Post-Formaten, RTL-Sprachunterstützung, Sticky -post, Theme-Optionen, Übersetzungsbereit * /
Sobald Sie Ihre Stylesheet-Kommentare erhalten haben, können Sie Ihr Design jetzt über das WordPress-Verwaltungs-Dashboard unter "Erscheinungsbilder" aktivieren
Um Ihnen und anderen Benutzern des Designs zu helfen, das Thema im Installationsbereich des Designs des Dashboards schnell zu erkennen, wurde festgelegt, dass ein screenshot.png-Bild automatisch angezeigt wird, wenn es sich im Stammverzeichnis des Themes befindet.
Idealerweise möchten Sie einen Screenshot haben, der eine gute Darstellung des Designs darstellt. Ich finde, viele Designdesigner haben hier ein Logo, das dem Endbenutzer nicht immer hilft, das gewünschte Thema zu identifizieren, insbesondere wenn der Benutzer bereits eine Vielzahl von Themen installiert hat.
Die Datei screenshot.png sollte 240 Pixel x 180 Pixel betragen. Dies ist die Größe, die für die Miniaturansicht im Dashboard verwendet wird. Sie können eine andere Größe einfügen, aber die Größe des Bildes wird angepasst, um in diese Abmessungen zu passen. Halten Sie sich beim ersten Mal am besten an die richtige Größe, um eine optimale Anzeige und das Laden der Seite zu gewährleisten.
Bevor wir weitergehen, 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 im Großen und Ganzen verwendete PHP ist speziell für die Verwendung in WordPress-Umgebungen angepasst. Wir beginnen mit der übergeordneten Struktur von PHP-Code. Wenn HTML nur die Klammern enthält, wird PHP-Code eingebunden.
Innerhalb der Klammern findet die gesamte Funktionalität statt, wobei auf Code normalerweise auf PHP-Funktionen Bezug genommen wird. Stellen Sie immer sicher, dass ein Leerzeichen zwischen den enthaltenden Tags und dem inneren PHP-Code vorhanden ist. Die einfachste dieser Funktionen, mit denen wir uns befassen, ist die bloginfo (); Funktion. Beachten Sie, dass wir nach dem Namen der Funktion zwei abgerundete Klammern haben, die sich öffnen und schließen, am Ende ein Semikolon, die Funktion schließt und ist in vielen Fällen unerlässlich. Die abgerundeten Klammern enthalten manchmal einige zusätzliche Parameter, um dies dem bloginfo () mitzuteilen; 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 enthalten können, um ihre Funktion spezifischer zu gestalten. Die bloginfo (); Parameter benötigt jedoch einen, um überhaupt zu funktionieren. Wir werden auf einige der zusätzlichen Funktionen eingehen, die im Laufe der Zeit ohne Parameter funktionieren.
Beachten Sie, wie der Wortname mit einfachen Anführungszeichen innerhalb der abgerundeten Klammern steht.
ist der Code, den wir anstelle des Namens der Site verwenden, wo auch immer dieser Name in unserer Vorlage erscheinen soll. Wo ich beispielsweise "WordPress-Trainingsräder" geschrieben habe, könnte ich diesen Text einfach durch diese Funktion ersetzen.
Achten Sie auf die Struktur dieser Funktion, da der Rest des WordPress-Codes durchgehend einer ähnlichen Struktur folgt. Wenn Sie einen wesentlichen Teil wie die abgerundeten Klammern, das Semikolon nach den abgerundeten Klammern oder den Abstand zwischen PHP und dem Wort bloginfo auslassen, führt dies dazu, dass Ihr Code nicht richtig funktioniert. In einigen Fällen kann dies Ihre gesamte Seite zum Erliegen bringen. Ich weiß, es ist ein Schmerz, so vorsichtig zu sein, aber es hilft schon früh, gute Gewohnheiten zu entwickeln. Befolgen Sie die Regeln der Straße und Ihre Reise wird weniger holprig sein.
Wenn die WordPress-Site, auf der diese Funktion ausgeführt wird, geladen wird, fragt WordPress die Datenbank ab und findet den Namen, den Sie im Feld Blog-Name eingefügt haben Einstellungen "Allgemein.
Es ist auch der Name, den Sie ganz am Anfang einfügen, wenn Sie die Installation ausführen, um WordPress zum ersten Mal einzurichten. Wenn Sie diesen Namen in den Allgemeinen Einstellungen ändern, spiegelt Ihre Vorlage diese Änderung sofort wider. Dies ist im Wesentlichen die Funktionsweise von WordPress oder eines anderen Content Management Systems. Dynamische Tags ersetzen statische Inhalte, sodass der Inhalt über die Administrationsoberfläche verwaltet werden kann, anstatt die Vorlagen direkt zu bearbeiten.
Ihr Theme ist noch nicht ganz bereit, um in WordPress registriert zu werden. Es fehlt ein wesentlicher Schritt, der es WordPress ermöglicht, Ihr Design korrekt anzuzeigen.
Ein paar Schritte zurück konnte unsere index.html leicht auf das zugehörige Stylesheet zugreifen, da sie sich im selben Ordner befinden und es lediglich ausreicht, 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 auf der Website installiert sind WP-Inhalte "Themen Ordner innerhalb der WordPress-Software.
Wie Sie beim Aktivieren des Themas unten sehen können, sehen wir immer noch nicht das vollständige Bild. Obwohl die HTML-Struktur geladen wird, wird das Stylesheet nicht verlinkt, was zu einer nicht gestylten Seite führt.
Ohne zu viele Details darüber 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 in einfachen HTML-Sites. Wir müssen einige zusätzliche WordPress-Funktionen verwenden, um die Schritte zwischen dem Stammverzeichnis und dem aktuell aktivierten Ordner der Ordner einzugeben. Wir machen dies mit Hilfe eines anderen bloginfo (); Funktion, diesmal die URL zum Stylesheet des aktuell aktivierten Themes. Unabhängig vom Namen des Designordners füllt WordPress nun die Lücken aus und fügt den Pfad zur style.css-Datei ein.
Diese Funktion wird in das Stylesheet-Link-Tag eingefügt
was jetzt wird
Wenn Sie Ihren Quellcode mit View Source oder mit Firebug überprüfen, werden Sie feststellen, dass WordPress den gesamten 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:
Das Gleiche stylesheet_url Die Funktion fügt den Pfad automatisch zu jedem aktuell aktivierten Thema auf dieselbe Weise ein, ohne dass Quellcode bearbeitet wird. Sie werden sehen, wie ein Muster entsteht, bei dem hartcodierte Inhalte durch dynamische Funktionen ersetzt werden, die Daten spontan aus der Datenbank abrufen.
Fühlen Sie diese Luft jetzt durch Ihre Haare strömen? Keine Sorge, die Stützräder werden bald abfallen! Das verspreche ich.
Platzieren Sie Ihre index.php- und style.css-Dateien in einem eigenen Ordner, der nach dem Namen benannt wird, den das Design haben soll, und dann in Ihren Ordner hochgeladen werden WP-Inhalte "Themen Ordner in Ihrer Live- oder virtuellen Host-Version Ihrer WordPress-Installation (siehe unten).
Und ohne weiteres zu gehen Aussehen "Themen und klicken Sie unter Ihrem neu erstellten Design auf "Aktivieren". Für den Rest der Leser auf dieser Site waren diese Schritte vielleicht ärgerlich einfach, aber ich persönlich kenne das Gefühl, endlich mit diesem Vorgang zu klicken und mein allererstes Thema in WordPress aktivieren zu lassen. Für den Neuling ist es unbezahlbar.
Bevor wir fertig sind, wollen wir ein paar zusätzliche, sehr einfache bloginfo () verwenden. Funktionen zum Ausfüllen dynamischer Inhalte. Wir haben die bereits vorgestellt bloginfo ('name'); und bloginfo ('stylesheet_url');. Nachfolgend haben wir den anfänglichen HTML-Code für das Header-Div unseres Themas.
WordPress-Trainingsräder
Eine kleine Hilfe, um Sie mit WordPress frei bewegen zu können
Wir ersetzen den Inhalt des H1-Link-Href-Attributs, das derzeit nur ein Hash-Symbol hat und normalerweise wie href = "home.html" aussieht, durch das bloginfo ('url'); Funktion.
">
Zusätzlich ersetzen wir die h2-Tagline unter dem Site-Namen durch:
So sieht unser Code-Snippet jetzt viel wortweiter aus.
">
Eine letzte zu behebende Ausgabe ist der Link zum Inhaltsbild in der mittleren Spalte der Vorlage. Ähnlich wie beim Verknüpfen des Stylesheets müssen wir eine andere bloginfo () verwenden. Funktion zum Ausfüllen des Bildpfads, da images / bildname.jpg nicht mehr funktioniert.
Laufräder Lektion 1
Um dieses Problem zu lösen, verwenden wir den folgenden Code, bevor Sie das Verzeichnis images aufrufen
Also werden wir mit dem Folgenden enden.
Laufräder Lektion 1
Achten Sie genau auf den Vorwärtsstrich unmittelbar nach der schließenden Klammer und vor dem Namen des Bilderordners!
Accentsconagua
; ?>/images_26/wordpress-theme-development-training-wheels-day-one_4.jpg )
bloginfo ('name'); bloginfo ('url'); bloginfo ('beschreibung'); bloginfo ('template_directory'); Die bloginfo (); Mit der Funktion können Sie verschiedene Inhalte innerhalb Ihrer Website 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 ordentlichere und geordnetere Darstellung des im WordPress-Codex aufgeführten Codes darstellt.
Ich habe meinem Snipplr-Konto Ausschnitte des in dieser Lektion behandelten Codes hinzugefügt.
Freilauf mit WordPress folgt in Kürze. Ich höre, wie diese Stützräder klappern :)
