Share
In den ersten beiden Teilen dieser Serie haben Sie gelernt, wie Sie statisches HTML für WordPress vorbereiten und Ihre HTML-Datei in eine Reihe von Vorlagendateien aufteilen.
Sie haben jetzt den Anfang eines Themas, aber leider funktionieren Ihre Dateien noch nicht als Thema.
Damit jedes Thema funktionieren kann, müssen Sie WordPress über das Thema informieren. Dies tun Sie im Stylesheet. In diesem Tutorial machen Sie das.
Als Nächstes laden Sie Ihr neues Design in eine WordPress-Installation hoch und testen es. Darüber hinaus erstellen Sie einen Screenshot Ihres Designs, sodass die Arbeit mit dem WordPress-Administrator einfacher ist.
Da Sie ab jetzt mit WordPress arbeiten, benötigen Sie weitere Tools für dieses Tutorial:
Bevor Sie das Design hochladen, müssen Sie Ihr Stylesheet bearbeiten. Öffne das style.css Datei in Ihrem Vorlagenordner.
Fügen Sie am oberen Rand der Datei Folgendes hinzu:
/ * Name des Themas: Erstellen eines WordPress-Themas aus HTML - Teil 3 Theme URI: http://rachelmccollin.co.uk Autor: Rachel McCollin Author URI: http://rachelmccollin.co.uk Beschreibung: Das Thema, das die Wptutsplus-Serie begleitet zum Erstellen eines WordPress-Designs aus statischem HTML. Dieses Thema begleitet Teil 3 der Serie. Version: 3.0 Lizenz: GNU General Public License v2 oder höher Lizenz-URI: http://www.gnu.org/licenses/gpl-2.0.html * /
Die Details, die Sie hinzufügen, sind für Sie und Ihr Thema spezifisch, sollten jedoch der gleichen Struktur folgen.
Speichern Sie Ihr Stylesheet und schließen Sie es.
Im Moment dein header.php Die Datei hat einen Link zum Stylesheet, der statisch ist und in WordPress nicht funktioniert. Sie müssen dies ändern, bevor Sie das Design hochladen.
Öffne das header.php Datei und finde die Zeile, die lautet:
Ersetzen Sie es durch Folgendes:
Dies beinhaltet die Funktion was sagt WordPress wo das Stylesheet zu finden ist.
Speichern Sie nun die Datei und schließen Sie sie.
Bevor Sie das Design hochladen, müssen Sie einen Screenshot erstellen. Screenshots für den WordPress-Admin sollten 600 Pixel breit und 450 Pixel hoch sein.
Nehmen Sie einen Screen Grab von Ihrem Browser mit Ihrer bevorzugten Methode und öffnen Sie diesen in Ihrem bevorzugten Bildeditor. Ich verwende Photoshop.
Schneiden Sie das Bild so ab, dass es ein Seitenverhältnis von 12: 9 hat, und speichern Sie es als PNG-Datei mit einer Breite von 600 Pixeln und einer Höhe von 450 Pixeln. Nennen Sie es screenshot.png und speichern Sie es in Ihrem Designordner.
Der nächste Schritt ist das Hochladen Ihres Designs in WordPress.
Ich gehe davon aus, dass Sie bereits WordPress installiert haben. Wenn Sie sich nicht sicher sind, wie Sie dies tun sollen, lesen Sie den Codex.Sie können Ihr Design auf zwei Arten hochladen:
Nun, wenn Sie die besuchen Themes Admin-Bildschirm dein Theme sollte sichtbar sein:
Wählen Sie das Thema aus, um es zu aktivieren. Dies wird im angezeigt Themes Administrator:
Nun ist es an der Zeit zu überprüfen, ob dein Theme funktioniert. Besuchen Sie einfach die Homepage Ihrer Website, um zu sehen, was angezeigt wird.
Meine Site sieht derzeit so aus:
Sie werden feststellen, dass die Bilder momentan nicht angezeigt werden - das liegt an ihren Bildern href Attribute sind statisch, so dass WordPress sie nicht finden kann. Wenn in Ihrem Inhalt Bilder fehlen, müssen Sie sich keine Sorgen machen - diese werden von WordPress automatisch über die Schleife angezeigt, die Sie im nächsten Teil hinzufügen werden.
Wenn Sie jedoch Bilder in Ihren Vorlagen haben, entweder als Hintergrund oder in den Inhalten - beispielsweise Logos -, müssen Sie deren Code ändern, um WordPress mitzuteilen, wo Sie sie finden können.
Dieser Abschnitt gilt nur, wenn Sie in Ihren Vorlagendateien Bilder verwenden. Diese werden nicht über die Schleife hinzugefügt. Sie müssen Ihre Vorlagendatei direkt bearbeiten, um WordPress mitzuteilen, wo Sie sie finden können.
Angenommen, Sie haben ein Logo in der Kopfzeile. Dies kann folgendermaßen angezeigt werden:
Das href Attribut weist den Browser an, das Bild im zu finden Bild Ordner der Site - da die ursprüngliche Site statisch war, war dies einfach relativ zur angezeigten Seite. In WordPress funktioniert es anders - Ihre Bilder Ordner ist ein Unterordner Ihres Designordners, und Sie müssen WordPress anweisen, dorthin zu gelangen, um das Bild zu finden.
In deiner header.php Datei, bearbeiten Sie den Code, so dass es liest:
Offensichtlich unterscheidet sich der von Ihnen verwendete Dateiname, aber dies gibt Ihnen die Idee. Möglicherweise ist Ihnen aufgefallen, dass die hier verwendete Funktion dieselbe ist wie die zuvor zum Aufruf des Stylesheets aus der Headerdatei verwendete.
Speichern Sie jetzt Ihre Datei und aktualisieren Sie Ihren Browser. Alle Bilder in Ihren Vorlagendateien sollten jetzt angezeigt werden.
Sie haben jetzt ein (fast) Arbeitsthema. Sie haben Ihr Stylesheet so eingerichtet, dass WordPress das Design erkennt, anhand der Kopfzeile korrekt verknüpft und alle Bildverknüpfungen in Ihren Vorlagendateien geändert hat.
Im nächsten Tutorial zeige ich Ihnen, wie Sie Ihrem Design eine Schleife hinzufügen, mit der WordPress den Inhalt Ihrer Beiträge und Seiten anzeigt.
Accentsconagua
; ?>/images_16/creating-a-wordpress-theme-von-static-html-uploading-ihr-theme-nach-wordpress_4.jpg )