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

In Teil 1 dieses Tutorials haben wir die Grundlagen der Konvertierung einer HTML-Vorlage in ein WordPress-Thema behandelt. Wenn Sie ein bisschen neugierig sind, haben wir einige Dinge über das Aufteilen von HTML-Vorlagen in PHP-Dateien, das Zusammenfügen, das Gestalten und Benennen von WordPress-Themen gelernt. Wir haben wirklich viel gelernt, und Sie sollten sich mit den Konzepten vertraut machen, die wir in unserem ersten Tutorial behandelt haben, um diese zweite Portion zu genießen. In der heutigen Veröffentlichung werden wir die Dinge noch weiter verbessern. Wir werden einige weitere Bereiche behandeln, damit Sie ein voll funktionsfähiges WordPress-Theme erstellen können. Also, ohne weiteres, los geht’s.

Konfigurieren von Bildern und JavaScript-Dateien

Wenn Sie Bilder in Ihrer ursprünglichen HTML-Vorlage hatten (index.html) haben Sie wahrscheinlich bemerkt, dass sie nicht mehr angezeigt werden, nachdem Sie die Vorlage in PHP-Dateien zerlegt haben. Mach dir überhaupt keine Sorgen, es ist einfach so wie PHP. Zum Beispiel, wenn Sie so ein Logo in Ihrem Header-Bereich hatten …

… Sie müssen ein bisschen mit dem Code herumspielen. Der Code, den ich gleich enthüllen werde, hilft Browsern, Ihr Logo (oder ein anderes Bild) in Ihrem zu finden Bilder Ordner, der ein Unterordner des Hauptverzeichnisses Ihres Themas ist (oder sein sollte). Um Ihr Logo im Header-Bereich anzuzeigen, öffnen Sie die Datei header.php und ersetzen Sie den obigen Code durch den folgenden:

Die Funktion get_template_directory_uri () gibt die URL für Ihr Themenverzeichnis zurück. Wenn Sie also Ihr Logo in einen Bilderordner einfügen, wird dieser Code vom Code erfasst.

Bemerken Sie einen Unterschied? Offensichtlich wird dieser Code nur Ihr Logo reparieren. Um andere Bilder zu reparieren, müssen Sie ihre Codes auf ähnliche Weise neu schreiben. Einfaches peasy Zeug.

Fahren wir mit JavaScript fort. Wenn Ihre HTML-Website JavaScript verwendet, erstellen Sie einen Ordner mit dem Namen js und platzieren Sie Ihre Skripte dort. Sie können sie in der Datei header.php mit dem folgenden Code aufrufen:

Der obige Code verwendet example.js als Illustration. Vergessen Sie nicht, diesen Teil durch den Namen Ihrer JavaScript-Datei zu ersetzen.

Wenn Sie ein Thema für eine andere Person erstellen, sollten Sie Ihre js-Dateien natürlich mit wp_enqueue_scripts laden. Weitere Informationen und Tipps finden Sie in den Beiträgen von AJ zum Hinzufügen von JavaScript zu WordPress-Themen.

Vorlagendateien

In Teil eins dieses Tutorials haben wir nämlich vier grundlegende Vorlagendateien erwähnt index.php, header.php, sidebar.php und footer.php. Vorlagendateien steuern, wie Ihre Website im Web angezeigt wird. Vorlagen erhalten Informationen aus der MySQL-Datenbank von WordPress und übersetzen diese in HTML-Code, der in Webbrowsern angezeigt wird. Mit anderen Worten, Vorlagendateien sind die Bausteine ​​von WordPress-Themes. Um ein besseres Verständnis der Vorlagen zu erhalten, wollen wir uns mit einem Konzept befassen, das als bekannt ist Vorlagenhierarchie.

Wir werden eine Analogie verwenden. Wenn ein Besucher auf einen Kategorielink (dh einen Link zu einer Kategorie) wie http://www.yoursite.com/blog/category/your-category/ klickt, verwendet WordPress die Vorlagenhierarchie, um die richtige Datei (und den richtigen Inhalt) als zu generieren unten erklärt:

• Zunächst sucht WordPress nach einer Vorlagendatei, die der Kategorie-ID entspricht
• Wenn die ID der Kategorie beispielsweise 2 lautet, sucht WordPress nach einer Vorlagendatei mit dem Namen category-2.php
• Wenn Kategorie-2.php nicht verfügbar ist, verwendet WordPress eine generische Kategorie-Vorlagendatei wie category.php
• Wenn diese Vorlagendatei ebenfalls nicht verfügbar ist, sucht WordPress nach einer generischen Archivvorlage wie archive.php
• Wenn die generische Archivvorlage nicht vorhanden ist, greift WordPress auf die Hauptvorlagendatei index.php zurück

So funktionieren WordPress-Vorlagen, und Sie können diese Dateien verwenden, um Ihr WordPress-Design an Ihre Bedürfnisse anzupassen. Andere Vorlagendateien umfassen:

Dies ist nur eine kurze Liste, es gibt viele andere WordPress-Vorlagen. Das Thema Vorlagen ist groß, und der beste Weg, um zu lernen, wie man mit Vorlagendateien spielt, ist das Lesen der umfangreichen Themenentwicklung Bibliothek bei WordPress. Alternativ können Sie die kürzere lesen Vorlagenbereich bei WordPress Codex.

Vorlagen-Tags

Angesichts der Tatsache, dass wir gerade Vorlagendateien eingeführt haben, ist es nur fair, ein oder zwei Dinge über Vorlagen-Tags und die Rolle, die sie in WordPress-Themen spielen, zu erwähnen. Laut WordPress.org werden “… Vorlagen-Tags in der Vorlage Ihres Blogs verwendet, um Informationen dynamisch anzuzeigen oder Ihr Blog auf andere Weise anzupassen, und bieten die Tools, um es so individuell und interessant wie Sie zu gestalten.”

In unserem vorherigen Tutorial haben Sie einige Vorlagen-Tags kennengelernt, z get_header, get_sidebar, get_footer und bloginfo. Im folgenden Abschnitt werden wir unserem neu erstellten WordPress-Theme einige Vorlagen-Tags hinzufügen. Ich gehe davon aus, dass Sie die DOCTYPE-Deklaration bereits in Ihre Datei header.php aufgenommen haben. Wenn Sie dies nicht tun, finden Sie hier den Code:

Die DOCTYPE-Deklaration gibt Ihrem HTML-Code eine Bedeutung. Lassen Sie uns das öffnende HTML-Tag ändern. Wir werden ein lang-Attribut mit dem einfügen Tag language_attributes wie so:

Der obige Code generiert Folgendes:

Wenn die DOCTYPE-Deklaration und das language_attribute-Tag vorhanden sind, ist die Struktur Ihres Themas legitim und die Browser verstehen Ihren Code. Wenn Sie ein Thema für ein Blog erstellen, ist es wichtig, Links zu Ihrer Pingback-URL und Ihrem RSS-Feed in Ihrem Kopf zu platzieren. Fügen Sie in Ihrer header.php den folgenden Code hinzu:

Haben Sie bemerkt, wie wir die eingesetzt haben? Bloginfo-Tag RSS-Feed (“rss2_url”) und Pingback (“pingback_url”) einschließen? Fügen Sie vor dem Speichern Ihrer Datei header.php den folgenden Code hinzu:

Mit dem obigen Tag wp_head werden Stylesheets und JavaScript-Dateien abgerufen, die von Ihren Plugins benötigt werden. Wenn Sie diesen winzigen Code weglassen, funktionieren Ihre Plugins möglicherweise nicht wie gewünscht. Damit können wir unserem WordPress-Thema Seitentitel hinzufügen, indem wir erneut das Bloginfo-Tag verwenden. Fügen Sie in Ihrer Datei header.php den folgenden Code hinzu:

Das erste Tag wp_title fügt den Titel Ihrer Seite oder Ihres Beitrags hinzu und das zweite Tag bloginfo (“Name”)) fügt Ihren Blognamen hinzu. Nachdem Ihr WordPress-Thema Seitentitel enthält, können Sie einen Screenshot für unser Thema erstellen, das Thema neu verpacken und eine Pause einlegen?

Erstellen eines Screenshots für Ihr Thema

Als Sie Ihr Testthema zum ersten Mal hochgeladen haben, müssen Sie bemerkt haben, dass es keinen Screenshot im WordPress-Themenbereich gab. Es sah eintönig aus, besonders wenn Sie andere Themen mit farbenfrohen Screenshots hatten. Aber keine Sorge, das Erstellen eines Screenshots für Ihr Thema ist sehr einfach. Erstellen Sie einfach ein Bild mit Ihrem bevorzugten Bildeditor (z. B. Adobe Photoshop) oder machen Sie einen Screenshot Ihres Themas. Stellen Sie sicher, dass Ihr Bild 600 Pixel breit und 450 Pixel hoch ist. Speichern Sie das Bild als screenhot.png in Ihrem Themenordner. Speichern Sie alle Änderungen und komprimieren Sie Ihren Themenordner in ein ZIP-Archiv. Laden Sie das Thema hoch und aktivieren Sie es, um Ihre neuen Änderungen anzuzeigen ��

Fazit

Ich möchte glauben, dass dieses zweite Tutorial Ihnen einen tieferen Einblick in das Erstellen eines WordPress-Themas aus statischem HTML bietet. In naher Zukunft werde ich Ihnen andere Aspekte des WordPress-Themings vorstellen. In der Zwischenzeit habe ich die folgenden Ressourcen nur für Sie vorbereitet:

• Vorlagen – WordPress Codex
• Vorlagen-Tags – WordPress-Codex
• Erstellen Sie Ihr eigenes WordPress-Theme aus einer HTML-Vorlage – SitePoint
• So erstellen Sie Ihr eigenes benutzerdefiniertes WordPress-Theme – Line25
• Erstellen eines WordPress-Themes aus statischem HTML – WPtuts+

Viel Spaß beim Erstellen!