Im ersten Teil dieses Tutorials haben wir die Grundlagen der Konvertierung einer HTML-Vorlage in ein WordPress-Theme behandelt. Wenn Sie ein bisschen neugierig sind, haben wir ein paar Dinge über das Aufteilen von HTML-Templates in PHP-Dateien, das Wiederzusammensetzen, das Styling und die Benennung von WordPress-Themes 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. Im heutigen Beitrag gehen wir noch eine Stufe höher. Wir werden noch einige weitere Bereiche behandeln, damit Sie ein voll funktionsfähiges WordPress-Theme erstellen können. Also, ohne weitere Umschweife, los geht’s.
Bilder und JavaScript-Dateien konfigurieren
Wenn Sie Bilder in Ihrer ursprünglichen HTML-Vorlage (index.html), haben Sie wahrscheinlich bemerkt, dass sie nicht mehr angezeigt werden, nachdem Sie die Vorlage in PHP-Dateien zerlegt haben. Machen Sie sich keine Sorgen, es ist einfach so, wie PHP ist. Wenn Sie zum Beispiel ein Logo in Ihrem Header-Bereich wie folgt hätten…
<img alt="your_logo_alt_text" src="images/logo.jpg" />
… müssen Sie ein wenig 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 Themes 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:
<img alt="your_logo_alt_text" src="<?php echo get_template_directory_uri(); ?>/images/logo.jpg" />
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, greift der Code auf dieses Logo zu.
Bemerken Sie einen Unterschied? Offensichtlich wird dieser Code nur Ihr Logo reparieren. Um andere Bilder zu reparieren, müssen Sie deren Codes auf ähnliche Weise umschreiben. Einfaches peasy Zeug.
Kommen wir zu JavaScript. Wenn Ihre HTML-Website JavaScript verwendet, erstellen Sie einen Ordner namens js und platzieren Sie Ihre Skripte dort. Sie können sie in der Datei header.php mit dem folgenden Code aufrufen:
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/example.js"></script>
Der obige Code verwendet beispiel.js als Illustration. Vergessen Sie nicht, diesen Teil durch den Namen Ihrer JavaScript-Datei zu ersetzen.
Wenn Sie ein Thema für jemand anderen erstellen, sollten Sie Ihre js-Dateien natürlich wirklich mit wp_enqueue_scripts laden. Weitere Informationen und Tipps finden Sie in den Beiträgen von AJ zum Hinzufügen von JavaScript zu WordPress-Themes.
Vorlagendateien
In Teil eins dieses Tutorials haben wir vier grundlegende Vorlagendateien erwähnt, nämlich 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 von Vorlagen zu erhalten, lassen Sie uns in ein Konzept eintauchen, 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) zu generieren unten erklärt:
- Zuerst sucht WordPress nach einer Vorlagendatei, die der Kategorie-ID entspricht
- Wenn die ID der Kategorie beispielsweise 2 ist, sucht WordPress nach einer Vorlagendatei namens category-2.php
- Wenn category-2.php nicht verfügbar ist, verwendet WordPress eine generische Kategorie-Vorlagendatei wie category.php
- Wenn auch diese Vorlagendatei nicht verfügbar ist, sucht WordPress nach einer generischen Archivvorlage wie archive.php
- Wenn die generische Archivvorlage nicht existiert, greift WordPress auf die Hauptvorlagendatei index.php zurück
So funktionieren WordPress-Vorlagen, und Sie können diese Dateien verwenden, um Ihr WordPress-Theme an Ihre Bedürfnisse anzupassen. Andere Vorlagendateien umfassen:
home.php oder index.php | Wird verwendet, um den Blog-Post-Index zu rendern |
front-page.php | Wird verwendet, um statische Seiten oder neueste Beiträge wie in den Titelseiten-Displays eingestellt zu rendern |
single.php | Wird verwendet, um eine einzelne Beitragsseite zu rendern |
single-{post-type}.php | Wird verwendet, um benutzerdefinierte Beitragstypen zu rendern. Wenn der Beitragstyp beispielsweise ein Produkt war, würde WordPress single-product.php verwenden |
page.php | Wird zum Rendern statischer Seiten verwendet |
category.php oder archive.php | Wird verwendet, um den Kategoriearchivindex zu rendern |
author.php | Wird verwendet, um den Autor zu rendern |
date.php | Wird verwendet, um das Datum zu rendern |
search.php | Wird verwendet, um Suchergebnisse zu rendern |
404.php | Wird verwendet, um die Fehlerseite des Servers 404 zu rendern |
Dies ist nur eine kurze Liste, es gibt noch viele andere WordPress-Vorlagen. Das Thema Vorlagen ist ein großes Thema, und der beste Weg, um zu lernen, wie man mit Vorlagendateien spielt, ist das Lesen der ausführlichen Themenentwicklung Bibliothek bei WordPress. Alternativ können Sie die kürzere lesen Vorlagenbereich bei WordPress Codex.
Vorlagen-Tags
Da wir gerade Vorlagendateien eingeführt haben, ist es nur fair, ein oder zwei Dinge zu Vorlagen-Tags und deren Rolle beim WordPress-Theming zu erwähnen. Laut WordPress.org „werden Vorlagen-Tags in der Vorlage Ihres Blogs verwendet, um Informationen dynamisch anzuzeigen oder Ihr Blog anderweitig anzupassen, und bieten die Tools, um es so individuell und interessant zu gestalten wie Sie selbst.“
In unserem vorherigen Tutorial haben Sie einige Vorlagen-Tags kennengelernt, wie zum Beispiel get_header, get_sidebar, get_footer und Bloginfo. Im folgenden Abschnitt werden wir unserem neu erstellten WordPress-Theme einige Template-Tags hinzufügen. Ich gehe davon aus, dass Sie die DOCTYPE-Deklaration bereits in Ihre header.php-Datei aufgenommen haben. Falls nicht, hier der Code:
<!DOCTYPE HTML>
Die DOCTYPE-Deklaration gibt Ihrem HTML-Code Bedeutung. Lassen Sie uns das öffnende HTML-Tag ändern. Wir werden ein lang-Attribut mit dem language_attributes-Tag so:
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>
Der obige Code generiert Folgendes:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
Mit der DOCTYPE-Deklaration und dem language_attribute-Tag ist die Struktur Ihres Themes legitim und Browser werden Ihren Code verstehen. 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:
<link title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" rel="alternate" type="application/rss+xml" /><link href="<?php bloginfo('pingback_url'); ?>" rel="pingback" />
Ist Ihnen aufgefallen, wie wir die eingesetzt haben Bloginfo-Tag um den RSS-Feed (‚rss2_url‘) und Pingback (‚pingback_url‘) einzubinden? Bevor Sie Ihre header.php-Datei speichern, fügen Sie auch den folgenden Code hinzu:
<?php wp_head(); ?>
Das obige wp_head-Tag lädt Stylesheets und JavaScript-Dateien, die von Ihren Plugins benötigt werden. Wenn Sie dieses winzige Stück Code weglassen, funktionieren Ihre Plugins möglicherweise nicht wie gewünscht. Nachdem wir das aus dem Weg geräumt haben, fügen wir unserem WordPress-Theme Seitentitel hinzu, indem wir – noch einmal – das bloginfo-Tag verwenden. Fügen Sie in Ihrer Datei header.php den folgenden Code hinzu:
<title><?php wp_title( '|', true, 'right' ); ?><?php bloginfo('name'); ?></title>
Das erste Etikett wp_title fügt den Titel Ihrer Seite oder Ihres Beitrags hinzu und das zweite Tag bloginfo(’name‘) fügt Ihren Blognamen hinzu. Nun, da Ihr WordPress-Theme Seitentitel hat, wie wäre es, wenn wir einen Screenshot für unser Thema erstellen, das Thema neu verpacken und eine Pause machen?
Erstellen eines Screenshots für Ihr Thema
Als Sie Ihr Test-Theme zum ersten Mal hochgeladen haben, müssen Sie bemerkt haben, dass im WordPress-Theme-Panel ein Screenshot fehlte. Es sah eintönig aus, besonders wenn Sie andere Themen mit bunten Screenshots hatten. Aber keine Sorge, das Erstellen eines Screenshots für Ihr Design ist sehr einfach. Erstellen Sie einfach ein Bild mit Ihrem bevorzugten Bildbearbeitungsprogramm (zB Adobe Photoshop) oder machen Sie einen Screenshot Ihres Designs. Stellen Sie sicher, dass Ihr Bild 600 Pixel breit und 450 Pixel hoch ist. Bild speichern unter screenshot.png in deinem Theme-Ordner. Speichern Sie alle Änderungen, komprimieren Sie Ihren Themenordner in ein ZIP-Archiv. Laden Sie das Design hoch und aktivieren Sie es, um Ihre neuen Änderungen zu sehen 😉
Abschluss
Ich möchte glauben, dass dieses zweite Tutorial Ihnen tiefere Einblicke in die Erstellung eines WordPress-Themes aus statischem HTML bietet. In naher Zukunft werde ich Ihnen weitere Aspekte des WordPress-Themings vorstellen, aber 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
- Erstellen eines WordPress-Themes aus statischem HTML – WPtuts+
Viel Spaß beim Gestalten!