WordPress Tutorial: So erstellen Sie ein WordPress-Theme aus HTML (Teil 1)

  1. 1. Derzeit lesen: WordPress Tutorial: So erstellen Sie ein WordPress-Theme aus HTML (Teil 1)
  2. 2. WordPress Tutorial: So erstellen Sie ein WordPress-Theme aus HTML (Teil 2)
  3. 3. Eine Einführung in die Anatomie eines WordPress-Themas

Wenn Sie mit einer HTML (+ CSS) -Website begonnen haben, müssen Sie beim Wechsel zu WordPress nicht alles wegwerfen. Sie können Ihr HTML in WordPress konvertieren und Ihre (jetzt leistungsfähigere) Website auf der dynamischen WordPress-Plattform ausführen.


Oder vielleicht ist das nicht der Fall. Vielleicht fragen Sie sich nur, wie Sie das HTML-Design eines Kunden in ein vollwertiges WordPress-Thema konvertieren können. Oder vielleicht möchten Sie die grundlegende Programmierung von WordPress (+ PHP) von der bekannteren HTML-Seite lernen.

Was auch immer der Grund ist, warum Sie heute hier sind, dieses WordPress-Tutorial führt Sie in die Grundlagen des Erstellens eines WordPress-Themas aus HTML ein. Sie können dieser Anleitung folgen, um Ihr Thema von Grund auf neu zu erstellen, oder Sie können zu Github gehen und das WPExplorer-Starterthema herunterladen, das eine „leere Leinwand“ zum Erstellen Ihres Themas mit allen erforderlichen Vorlagendateien und Code für den Einstieg bereitstellt. Wenn Sie also zu den Leuten gehören, die lieber durch Lesen von Code lernen, laden Sie das Starter-Thema herunter, überspringen Sie die Anleitung und sehen Sie, wie die Dinge funktionieren. Andernfalls besorgen Sie sich einen Code-Editor (ich verwende und empfehle Notizblock++, oder SublimeText) und einen Browser bereit, dann folgen Sie dieser einfachen Anleitung bis zum Ende.

Benennen Sie Ihr WordPress-Theme

Zuerst müssen wir Ihrem Thema einen eindeutigen Namen geben. Dies ist nicht erforderlich, wenn Sie nur ein Thema für Ihre Website erstellen. Unabhängig davon müssen wir Ihr Thema benennen, damit es bei der Installation leicht erkennbar ist.

Allgemeine Annahmen an dieser Stelle:

  • Sie haben Ihre index.html und Ihr CSS-Stylesheet bereit.
  • Sie haben eine funktionierende WordPress-Installation mit mindestens einem Thema, z. Zweitausendvierzehn
  • Sie haben bereits einen Themenordner erstellt, in dem Sie Ihr neues WordPress-Thema speichern

Kommen wir zurück zum Benennen Ihres WordPress-Themas. Öffnen Sie Ihren Code-Editor, kopieren Sie den Inhalt Ihres Stylesheets in eine neue Datei und speichern Sie sie unter style.css in Ihrem Themenordner. Fügen Sie die folgenden Informationen ganz oben in das Feld ein neu erstellte style.css::

/ *
Themenname: Der Name Ihres Themas
Themen-URI: Die URL Ihres Themas
Beschreibung: Eine kurze Beschreibung Ihres Themas
Version: 1.0 oder eine andere gewünschte Version
Autor: Ihr Name oder der Benutzername von WordPress.org
Autoren-URI: Ihre Webadresse
Tags: Tags zum Auffinden Ihres Themas im WordPress-Theme-Repository
* /

Lassen Sie die (/ *… * /) Kommentar-Tags nicht aus. Speichern Sie die Änderungen. Diese Informationen teilen WordPress den Namen Ihres Themas, den Autor und ähnliche Dinge mit. Der wichtige Teil ist der Name des Themas, mit dem Sie Ihr Thema über das WP-Dashboard auswählen und aktivieren können.

Aufteilen Ihrer HTML-Vorlage in PHP-Dateien

In diesem Tutorial wird außerdem davon ausgegangen, dass Sie Ihre HTML-Vorlage von links nach rechts angeordnet haben: Kopfzeile, Inhalt, Seitenleiste, Fußzeile. Wenn Sie ein anderes Design haben, müssen Sie möglicherweise ein wenig mit dem Code spielen. Es macht Spaß und ist super einfach.

Im nächsten Schritt werden vier PHP-Dateien erstellt. Erstellen Sie mit Ihrem Code-Editor index.php, header.php, sidebar.php und footer.php und speichern Sie sie in Ihrem Themenordner. Zu diesem Zeitpunkt sind alle Dateien leer. Erwarten Sie also nicht, dass sie etwas tun. Zur Veranschaulichung verwende ich die folgenden index.html- und CSS-Stylesheet-Dateien:

INDEX.HTML




So konvertieren Sie HTML-Vorlagen in WordPress-Theme - WPExplorer



Dies ist der Header-Bereich. Tragen Sie hier Ihr Logo und weitere Details ein.

Dies ist der Hauptinhaltsbereich.

Und das ist die Fußzeile.

CSS STYLESHEET

#wrap {margin: 0 auto; Breite: 95%; Rand oben: -10px; Höhe: 100%;}
.Header {Breite: 99,8%; Rand: 1px durchgehend # 999; Höhe: 135px;}
.Inhalt {Breite: 70%; Rand: 1px durchgehend # 999; Rand oben: 5px;}
.Seitenleiste {float: rechts; Rand oben: -54px; Breite: 29%; Rand: 1px durchgehend # 999;}
.Fußzeile {Breite: 99,8%; Rand: 1 Pixel durchgehend # 999; Rand oben: 10 Pixel;}

Sie können beide Codes abrufen, wenn Sie nichts zum Arbeiten haben. Kopieren Sie sie einfach in Ihren Code-Editor, speichern Sie sie, erstellen Sie die vier oben erwähnten PHP-Dateien und bereiten Sie sich auf den nächsten Teil vor. Öffnen Sie Ihre neu erstellte (und leere) header.php. Melden Sie sich bei Ihrer vorhandenen WordPress-Installation an und navigieren Sie zu Aussehen – >> Editor und öffnen header.php. Kopieren Sie den gesamten Code zwischen dem Tags und fügen Sie es in Ihre header.php-Datei ein. Das Folgende ist der Code, den ich aus der Datei header.php im Thema Twenty Fourteen erhalten habe:




<?php wp_title( '|', true, 'right' ); ?>




Dann öffnen Sie Ihre index.html Datei und kopieren Sie den Header-Code (d. h. den Code in der

Abschnitt) zu Ihrer header.php direkt unter dem Tags wie unten gezeigt:




<?php wp_title( '|', true, 'right' ); ?>







Dies ist der Header-Bereich. Tragen Sie hier Ihr Logo und weitere Details ein.

Dann füge hinzu…

… Irgendwo zwischen dem Tags in der Datei header.php, um Ihr Stylesheet zu verknüpfen. Denken Sie auch daran, die zu setzen und Öffnen von Tags in der header.php wie oben gezeigt. Alle Änderungen speichern.

Kopieren Sie den zweiten Abschnitt (d. H..

von index.html bis zum neu erstellte index.php , und hinzufügen …

… Ganz oben und…


… Auf den absoluten Grund. Diese drei Zeilen rufen die Datei header.php, sidebar.php und footer.php (in dieser Reihenfolge) ab und zeigen sie in der index.php an, wodurch Ihr Code wieder zusammengesetzt wird. Alle Änderungen speichern. Zu diesem Zeitpunkt sollte Ihre index.php-Datei folgendermaßen aussehen:



Kopieren Sie dann den Inhalt aus den Abschnitten Seitenleiste und Fußzeile in Ihrer index.html in sidebar.php bzw. footer.php.

Beiträge hinzufügen

Ihre HTML-Vorlage verwandelt sich in ein WordPress-Thema. Wir müssen nur Ihre Beiträge hinzufügen. Wenn Sie Beiträge in Ihrem Blog haben, wie würden Sie diese in Ihrem benutzerdefinierten “HTML-zu-WordPress” -Thema anzeigen? Sie verwenden eine spezielle Art von PHP-Funktion, die als Schleife. Die Schleife ist nur ein spezieller Code, der Ihre Beiträge und Kommentare überall dort anzeigt, wo Sie sie platzieren.

Nun, um Ihre Beiträge in der anzuzeigen Inhaltsbereich Kopieren Sie den folgenden Code der Vorlage index.php und fügen Sie ihn zwischen die ein

und

Tags wie unten gezeigt:

>

Das kümmert sich um deine Beiträge. Einfach wie ABC. Zu diesem Zeitpunkt (und unter Verwendung der in diesem Lernprogramm bereitgestellten Beispieldateien) sollte Ihre header.php folgendermaßen aussehen:




<?php wp_title( '|', true, 'right' ); ?>




Ihre sidebar.php sollte folgendermaßen aussehen:

Ihre footer.php sollte folgendermaßen aussehen:

Und das ist die Fußzeile

Haben Sie das Schließen bemerkt? und Tags in der Fußzeile? Vergessen Sie nicht, auch diese einzubeziehen.

Ihre style.css sollte ungefähr so ​​aussehen:

/ *
Themenname: Erstellen eines WordPress-Themas aus HTML
Themen-URI: http://wpexplorer.com
Beschreibung: Dieses Thema zeigt Ihnen, wie Sie WordPress-Themen aus HTML erstellen
Version: 1.0
Autor: Freddy für @WPExplorer
Autoren-URI: http://WPExplorer.com/create-wordpress-theme-html-1/
Tags: wpexplorer, benutzerdefiniertes Thema, HTML zu WordPress, WordPress-Thema erstellen
* /
Körper {
Schriftfamilie: Arial, Helvetica, Verdana;
Schriftgröße: 0.8em;
Breite: 100%;
Höhe: 100%;
}}

.Header {
Hintergrundfarbe: # 1be;
Rand links: 14%;
oben: 0;
Randbreite: 0.1em;
Randfarbe: # 999;
Randstil: fest;
Breite: 72%;
Höhe: 250px;
}}

.Inhalt {
Hintergrundfarbe: # 999;
Rand links: 14%;
Rand oben: 5px;
float: left;
Breite: 46%;
Randbreite: 0.1em;
Randfarbe: # 999;
Randstil: fest;
}}

.Seitenleiste {
Hintergrundfarbe: # 1d5;
Rand rechts: 14%;
Rand oben: 5px;
schweben rechts;
Randbreite: 0.1em;
Randfarbe: # 999;
Randstil: fest;
oben: 180px;
Breite: 23%;
}}

.Fusszeile {
Hintergrundfarbe: rot;
Rand links: 14%;
float: left;
Rand oben: 5px;
Breite: 72%;
Höhe: 50px;
Randbreite: 0.1em;
Randfarbe: # 999;
Randstil: fest;
}}

Und Ihre index.php sollte ähnlich aussehen wie:





Wieder – dies basiert auf einer Website von links nach rechts mit einer Kopfzeile, einem Inhalt, einer Seitenleiste und einem Fußzeilenlayout. Folgen Sie? Alle fünf Dateien sollten in Ihrem Themenordner gespeichert werden. Benennen Sie den Ordner wie gewünscht und komprimieren Sie ihn mit WinRar oder einem gleichwertigen Programm in ein ZIP-Archiv. Laden Sie Ihr neues Thema in Ihre WordPress-Installation hoch, aktivieren Sie es und sehen Sie Ihr konvertiertes Thema in Aktion!

Das war einfach, oder? Sie können Ihr Thema so gestalten, wie Sie möchten, aber die meisten Funktionen, die wir in WordPress lieben, sind immer noch inaktiv, da… dieses Tutorial die Grundlagen der Konvertierung von HTML-Vorlagen in WordPress behandelt und für Sie als Anfänger von großem Wert sein sollte. Im nächsten Tutorial werden wir die Dinge noch weiter verbessern und mit anderen Aspekten der WordPress-Programmierung herumspielen (z Vorlagendateien und Vorlagen-Tags), mit denen Sie Ihre HTML-Vorlagen nach Belieben drehen können. Bleib dran!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map