WP – Tutorial, wir schreiben ein WordPress Theme – Teil 3

Die Zeiten ändern sich.

Dieser Beitrag scheint älter als 16 Jahre zu sein – eine lange Zeit im Internet. Der Inhalt ist vielleicht veraltet.

Inhalt:

Nachdem wir im zweiten Teil der Serie „Ein WordPress Theme selbst erstellen” das Stylesheet mit Hilfe der Template Tags eingebunden haben, sollen nun im dritten Teil alle weiteren Daten aus dem Backend von WordPress geladen werden. Damit wird die Grundlage geschaffen, dass ein Theme die Einstellungen des jeweiligen Weblogs nutzt und das Theme in jedem beliebigen Weblog einsetzbar ist.

Gleich vorweg, es wird in diesem Artikel eine ganze Reihe an Code kommen. Bitte nicht verzweifeln, wenn es der erste Kontakt mit PHP-Syntax ist. Mit der Zeit kommt die Übung, ganz gleich wie das Lernen von HTML. Außerdem werde ich gleichzeitig auf eine Reihe Template Tags und Funktionen eingehen, die für das erstellen eines Themes von Relevanz sind und in diesem Teil des Tutorials nötig sind.

Im diesem Abschnitt des Tutorials werden wir den head-Abschnitt der index.php erweitern. Es werden nicht nur die statischen Daten so erweitert, dass die Werte aus der Datenbank gezogen werden, sondern ich erweitere gleich um eine Reihe weiterer Zeilen und Zeichen, um die Möglichkeiten und nach meiner Meinung wichtigen Daten zu integrieren.

html-Tag

Als erstes wird der Doctype deklariert. Ich wähle dabei XHTML 1.0 Transitional und erweitere den html-Tag lediglich um eine Funktion von WordPress language_attributes().


<html xmlns="http://www.w3.org/1999/xhtml" &lt;?php if ( function_exists('language_attributes') ) language_attributes(); ?&gt; id="fb">

Diese Funktion übergibt zwei Werte die für sauberen und validierbaren Code nötig sind. 

dir="ltr" lang="de-DE"

Das Attribut dir bekommt den Wert aus den WordPress-Einstellungen und übergibt den Wert ltr, womit der Text von links nach rechts (left to right) dargestellt wird. Nähere Information zum Beispiel bei SELFHTML.

Das Attribut lang übergibt die Sprache der Website und wird aus der wp-config.php gezogen. Je nach dem welcher Wert dort hinterlegt wurde, wird nun das Attribut lang ergänzt. Bekommt die Konstante WPLANG in der wp-config.php keinen Wert zugeordnet, so wird auch kein Wert für das Attribut lang ausgeben, wie es beispielsweise die Sprache des Weblog und Backend interpretiert. In dem Fall wird en_US genutzt und ausgeben, interessant bei der Erstellung von mehrsprachigen Themes oder Plugins. Gleichzeitig wird aber auch das Attribut nicht ausgegeben, also lediglich das dir-Attribut.

Tipp

Es empfiehlt sich, alle verwendeten Funktionen innerhalb des Templates mit der PHP-Funktion function_exists abzufragen.

<?php if ( function_exists('FUNKTION') ) FUNKTION(); ?>

Nur so kann sicher gestellt werden, dass das Weblog auch ohne die Funktion auf unterschiedlichen Plattformen funktioniert. Natürlich ist auch das kein Garant, je nach Aufbau des Markups, aber damit können oft Probleme in der Darstellung oder lästige PHP-Fehlermeldungen auf das Weblog umgangen werden. Das gleiche gilt natürlich auch für die Integration von Plugins, werden sie deaktiviert, dann ist das Weblog auch weiterhin verfügbar. Dieses wenigen Zeilen sollten es euch wert sein und der Leser wird nicht mit unwichtigen PHP-Fehlermeldungen genervt.
Näheres ist ebenso im Artikel „Abfrage einer PHP-Funktion, bzw. WP-Plugins” nachzulesen.

Möchte man die beiden Attribute einzelnen übergeben, dann steht die Funktion get_bloginfo() als Alternative zur Verfügung. Bei der Verwendung dieser Möglichkeit, würde unser Beispiel wie folgt aussehen.

<html xmlns="http://www.w3.org/1999/xhtml" dir="<?php echo get_bloginfo('text_direction'); ?>" lang="<?php echo get_bloginfo('language'); ?>" id="fb">

Allerdings muss in diesem Fall beachtet werden, dass bei nicht hinterlegtem Wert für die Konstante WPLANG in der wp-config.php auch kein Wert gezogen wird. Das Attribut lang steht also ohne Inhalt, was zu Fehlern führt. Also diese Version nur bei gepflegtem Wert in der wp-config.php nutzen.

head-Tag

WordPress unterstützt das Metadaten-Profil der XHMTL Friens Network (XFN) und dieses wird dem head-Tag hinzugefügt. Das Attribut profile ist dafür zuständig. Kurz gesagt, kann man damit persönliche Beziehungen über Links deklarieren. WordPress nutzt das bei der Definition der Links in der Blogroll (mehr zu XFN).


<head profile="http://gmpg.org/xfn/11">

Innerhalb des head-Abschnittes werden eine Reihe an meta-Tags definiert, bei denen ich eine ganze Reihe mehr als unbedingt nötig nutze. Das hat einerseits den Grund der Suchmaschinenfütterung und andererseits den Grund alle Daten zu dem Dokument Weblog zu hinterlegen, der für sauberen und vollständigen Code nötig ist.

meta-Tag die 1.

Die ersten beiden meta-Tags legen den Content-Type (Angaben zur Zeichencodierung) und den Content-Script-Type (Angaben zum Standard für Scripte) fest. Sollte keinerlei Script zum Einsatz kommen, dann kann die Zeile fehlen. In der Regel sind aber immer JavaScript-Codes in der Ausgabe des Weblog zu finden.


<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />

Im zweiten Teil dieses Tutorials haben wir den Template Tag bloginfo() schon einmal verwendet, zur Angabe der Stylesheet-Adresse.
Dieser Tag ist ein recht mächtiger und wichtiger Template Tag bei dem Erstellen von Theme und Plugins. Er akzeptiert eine große Anzahl von Parametern. Der Codex stellt nicht alle Möglichkeiten des Tags dar, deshalb kurz die Möglichen Parameter und was es damit auf sich hat.

Die Funktion bloginfo() ist im übrigen nur die Ausgabe (echo) von der Funktion get_bloginfo(). Sollte man also den Wert eines Parameters ohne Ausgabe wünschen, dann kann die Funktion get_bloginfo() als Alternative dienen.

  • url Blog-Adresse (URL) aus den Einstellungen im Backend (ehemals auch home oder siteurl, fällt aber in den Folgeversionen >2.4 von WP weg)
  • wpurl WordPress-Adresse (URL) aus den Einstellungen im Backend (Installationsadresse)
  • description Blog-Thema aus den Einstellungen im Backend
  • rdf_url URL für RDF/RSS 1.0 Feed
  • rss_url URL für RSS 0.92 Feed
  • rss2_url URL für RSS 2.0 Feed
  • atom_url URL für den Atom Feed
  • comments_atom_url URL für den Atom Feed zu Kommentaren
  • comments_rss2_url URL für den RSS 2.0 Feed zu Kommentaren
  • pingback_url Pingback Adresse
  • stylesheet_url URL zum Stylesheet des aktiven Themes (muss im Theme ohne Unterordner liegen)
  • stylesheet_directory URL zum Ordner des verwendeten Stylesheets
  • template_directory oder template_url URL zum Order des aktiven Themes
  • admin_email E-Mail-Adresse des Administrators aus den allgemeinen Einstellungen im Backend
  • charset Zeichensatz aus den lesenden Einstellungen im Backend
  • html_type Content-Type für das Blog
  • version Version der WordPress-Installation
  • language Sprache aus der wp-config.php, siehe oben im Abschnitt
  • text_direction Wert für das dir-Attribut, siehe oben im Abschnitt
  • name Blogtitel aus den allgemeinen Einstellungen im Backend

title-Tag

In der folgenden Zeile übergebe ich den title-Tag, der den Title des jeweiligen Beitrags, Seite, Kategorie usw. übergeben soll. Im einfachsten Fall wird dieser mit Hifle des Template Tag the_title() gefüttert.

<title><?php wp_title(); ?></title>

Der Template Tag the_title() hat dabei die Funktion der Übergabe des jeweiligen Beitrags, Seite, Archiv usw.. Der Codex beschreibt den Tag ausführlich.

<?php the_title('before', 'after', display); ?>

Parameter:
before (string) Text vor dem Titel, standard ist “
after (string) Text nach dem Titel, standard ist “
display (Boolean) Zeige den Title (TRUE) oder Rückgabe für PHP (FALSE), standard ist TRUE.

Natürlich lässt sich dieser beliebig erweitern, beispielsweise um den Namen des Weblog.


<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>

Allerdings sollte man wissen, dass eine derartige Darstellung nicht besonders schön für Leser, die beispielsweise einen Beitrag als Lesezeichen ablegen, oder Suchmaschinen ist. Dafür nutze ich die Conditional Tags und je nach geladenem Dokument-Type wird der Title angepasst. Eine Möglichkeit könnte wie folgt aussehen.


<title><?php if ( is_home() ) { _e('Startseite | ', 'THEMENAME'); } wp_title(' '); if (wp_title(' ', false)) { echo ' | '; } bloginfo('name'); ?></title>

Im Beitrag „WordPress Titel ändern” bin ich schon auf Hintergründe und Lösungen eingegangen. Deshalb hier keine weiteren Erklärungen. Lediglich die Erläuterung zum Thema Conditional Tags soll nicht verloren gehen.

Conditional Tags sind Funktionen, mit denen man Bedingungen abfragen kann. Die Ausgabe des Weblog ist damit vielfältig und einfach steuerbar. Es gibt eine ganze Reihe von Conditional Tags. Einige von ihnen können Parameter aufnehmen. Das Ergebnis der Übergabe ist immer TRUE oder FALSE.

  • is_admin Wenn im Adminbereich
  • is_archive Ob ein Archiv dargestellt wird
  • is_attachment Anhang im Beitrag oder Seite
  • is_author Autorenseite
  • is_category Kategorie Archiv oder Parameter
  • is_tag Tag-seite
  • is_comments_popup Kommentar per Popup Funktion
  • is_date Archivseite auf Basis Datum
  • is_day Archivseite auf Basis Tag
  • is_feed wenn es ein Feed ist
  • is_front_page die definierte Startseite des Blog (nur ab WP 2.5)
  • is_home Startseite (nicht nur die statische Seite)
  • is_month Archivseite auf Basis Monat
  • is_page statische Seite
  • is_paged Seite/ Weblog wurde „geblättert”
  • is_preview Vorschau
  • is_robots
  • is_search Suchseite
  • is_single einzelner Beitrag
  • is_singular
  • is_time Archivseite auf Basis Zeit
  • is_trackback wenn es es sich um Pingback oder Trackback handelt
  • is_year Archivseite auf Basis Jahr
  • is_404 Fehlerseite 404

Nicht alle Tags sind im Theme-Umfeld üblich, trotzdem sollen sie erwähnt werden und stehen somit als vollständige Liste zur Verfügung. Eine Dokumentation der Conditional Tags findet man ebenso im Codex.

meta-Tag die 2.

In den folgenden Zeilen werden eine ganze Reihe von meta-Tags hinterlegt und mit Werten gefüllt. Wenn möglich, dann fülle ich diese mit Daten aus dem Backend. Dabei kommen wieder die bereits erwähnten Template Tags zum Tragen. Deshalb werde ich auch nicht auf jede Zeile eingehen, Informationen zu den Möglichkeiten mit Tag bloginfo() bzw. get_bloginfo() sind im obigen Abschnitt zu finden.
Ebenso wende ich Conditional Tags an, um den Inhalt der Attribute je nach Ausgabe entsprechend zu füllen.


<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
<meta name="robots" content="index, follow" />
<meta name="description" content="<?php if ( is_single() ) { wp_title(''); echo ' - '; } elseif ( is_page() ) { wp_title(''); echo ' - '; } bloginfo('description'); ?>" />
<meta name="keywords" content="" />
<meta name="language" content="<?php bloginfo('language'); ?>" />
<meta name="content-language" content="<?php bloginfo('language'); ?>" />
<meta name="publisher" content="<?php bloginfo('name'); ?>" />
<meta name="revisit-after" content="1 days" />
<meta name="author" content="Frank Bueltge" />

Die Übergabe von Keywords im entsprechendem meta-Tag ist nicht so ohne weiteres möglich. Der kann beispielsweise mit den benutzerdefinierten Feldern oder einem Plugin entsprechend dem Inhalt der Ausgabe befüllt werden.

Stylesheet laden

Im Anschluss lade ich das Stylesheet des Themes. Diese Zeilen haben wir schon im Teil 2 des Tutorials besprochen und dementsprechend verweise ich nur drauf und hinterlasse hier keine weiteren Zeilen Erklärung.

link-Tag

Der link-Tag ist im Zusammenhang mit seinem rel-Attribut eine sehr sinnvolle Erweiterung mit Mehrwert. In unserem Fall definieren wir die RSS 2.0 Feed-URL, das Favicon und die Pingback-URL des Blogs und können so eine Reihe von weiteren Funktionen vieler Browser bzw. Applikationen nutzen.
Auch hierbei kommt der Template Tag bloginfo() zum Einsatz.


<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="Shortcut Icon" type="image/x-icon" href="<?php bloginfo('url'); ?</favicon.ico" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

wp_head Hook

Bevor wir zum Abschluss des Abschnittes head kommen, erweitern wir den Teil noch um den Hook wp_head. Dieser ermöglicht die Erweiterung der Daten im head-Abschnitt durch WordPress, zum Beispiel durch Plugins innerhalb des Backends. Alle Daten können mit Hilfe dieses Hook aus dem Backend, einem Plugin, direkt hier hinzugefügt werden, ohne Arbeit am Code. Dies macht die Einbindung von Plugins einfacher, insofern sie Daten hier ablegen müssen und ebenso die Integration von neuen Funktionen der WordPress-Anwender. (Doku im Codex)

<?php wp_head(); ?>

kompletter Code doctype, html und head

Zum Schluss nun noch der komplette Code des besprochenen Abschnittes.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php if ( function_exists('language_attributes') ) language_attributes(); ?> id="fb">

<head profile="http://gmpg.org/xfn/11">
	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
	<meta http-equiv="Content-Script-Type" content="text/javascript" />
	
	<title><?php if (is_home()) { _e('Startseite | ', 'THEMENAME'); } wp_title(' '); if (wp_title(' ', false)) { echo ' | '; } bloginfo('name'); ?></title>

	<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
	<meta name="robots" content="index, follow" />
	<meta name="description" content="<?php if ( is_single() ) { wp_title(''); echo ' - '; } elseif ( is_page() ) { wp_title(''); echo ' - '; } bloginfo('description'); ?>" />
	<meta name="keywords" content="" />
	<meta name="language" content="<?php bloginfo('language'); ?>" />
	<meta name="content-language" content="<?php bloginfo('language'); ?>" />
	<meta name="publisher" content="<?php bloginfo('name'); ?>" />
	<meta name="revisit-after" content="1 days" />
	<meta name="author" content="Frank Bueltge" />
	
	<style type="text/css" media="screen">
		@import url( <?php bloginfo('stylesheet_url'); ?> );
	</style>

	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
	<link rel="Shortcut Icon" type="image/x-icon" href="<?php bloginfo('url'); ?>/favicon.ico" />
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

	<?php wp_head(); ?>

</head>

Download:




Spendenbutton

Ist die Arbeit nicht 1 Euro wert?
Jede Spende wird dankbar angenommen und ermöglicht das weitere Arbeiten an freier Software.
Möchtest du mehr oder anders spenden, so besuche meine Wunschliste.
Download als php-Datei: wp_tutorial_teil3.zip – 2 kByte

Fazit und Ausblick

In diesem dritten Teil der Serie haben wir eine ganze Reihe neuer Informationen, so hoffe ich, gelernt. Die Mächtigkeit der Conditional Tags ist hoffentlich zum Tragen gekommen und ebenso das Verständnis der Template Tags, auch wenn wir nur sehr wenige der vielen Tags genutzt haben.

Im kommen Teil 4 werde ich den Loop ins Spiel bringen, denn nun soll es endlich Daten aus dem Backend geben. Ich hoffe, dass es nicht zu theoretisch und zu langweilig ist, aber nur so kann ich auf die kleinen Details eingehen und Bezug zu den Unterschieden zu einer statischen HTML-Datei nehmen. Noch mehr Inhalt in die jeweiligen Teile zu bringen, halte ich für weniger gut und es macht die Seite unleserlich. Außerdem ist es für mich auch recht viel Aufwand derartige Artikel zu schreiben.

Auch hier wieder der Hinweis, ich freue mich über Feedback in jeder Form.

Von Frank Bültge

bueltge.de [by:ltge.de] wird von Frank Bültge geführt, administriert und gestaltet. Alle Inhalte sind persönlich von mir ausgewählt und erstellt, nach bestem Gewissen und Können, was die Möglichkeit von Fehlern nicht ausschließt.

33 Kommentare

  1. Pingback: WP - Tutorial, wir schreiben ein WordPress Theme - Teil 2 | bueltge.de [by:ltge.de]
  2. Pingback: WP - Tutorial, wir schreiben ein WordPress Theme - Teil 1 | bueltge.de [by:ltge.de]
  3. Pingback: Nerdcore — Links vom 26. 10. 07: Joey Ramone Plaza, Rambo-Filme, Shintaro Kago, Porno Handtücher und das Pain Ray Guinea Pig

  4. Zur Bestätigung – Für mich ist die Einführung sehr hilfreich. Auch wenn man kein eigenes Theme schreiben möchte, versteht man wie alles zusammenarbeit und man kann im verwendeten Thema auch mal ein wenig „nachbessern“. Auf jeden Fall – Danke.

  6. Also ich hab mir die 3 Teile jetzt mal ausgedruckt, so kann ich es einfach besser lesen und besser nochmal was nachgucken. Danke das Tutorial!

  7. Pingback: links for 2007-10-23 through 2007-10-29 | aloha WEBLOG

  8. Hi!

    Auch von mir ein großes Lob für das tolle Tutorial! So fällt es gleich leichter, ein Theme mit WordPress zu erstellen, zumal ich eh schon eine statische HTML-Seite hatte, von der ich jetzt super ausgehen konnte.

    Bin schon gespannt auf die nächsten Teile!

    Danke!

  9. Pingback: urbandesire » Blog Archive » links for 2007-11-07
  10. Pingback: WordPress Theme debuggen | bueltge.de [by:ltge.de]
  11. Pingback: Layout für WordPress umsetzen | WordPress-Buch
  12. Pingback: Live Kommentarvorschau mit jQuery und WordPress | bueltge.de [by:ltge.de]
  13. Pingback: JavaScript in HTML einbinden | bueltge.de [by:ltge.de]

  14. Hallo!
    Wie sieht es denn mit dem nächsten Teil aus? Da würde es ja erst richtig spannend werden!
    Die bisherigen 3 Teile sind gut für den Einstieg, aber sofern man ein wenig Kenntnisse in der Materie hat, ist man schnell an der Stelle an der der erste Contenteintrag erscheinen soll 🙂
    Grüße!
    Jan

  15. Bisher gab es keinerlei Nachfrage, so dass ich mir einfach nicht die Arbeit gemacht habe, denn es ist recht viel um einen verständlichen und umfassenden Artikel zu erstellen.
    Wenn es aber nun doch Nachfragen gibt, dann werde ich nachziehen.

  16. Hallo Frank,
    ja, schade. So ist das. Alle saugen Informationen und keiner gibt eine Rückmeldung.
    Ich bin mir allerdings sicher, dass durch diese Tatsache es einige Leute gibt, die hier lesen und denen es sicherlich geholfen hat.
    Es gibt natürlich auch noch andere Tutorials (hab sogar eines gesehen, bei dem Du selbst einen Kommentar hinterlassen hast 😉 ), aber Deines ist schon besonders gut geschrieben. Das das Arbeit ist, weiss ich. Ich brauch auch immer Stunden um einen kleinen Artikel so zu schreiben, dass er für mich „sauber“ formuliert ist.
    Schau hat mal, ob Du die Zeit findest – würd mich freuen wieder davon zu hören.
    Grüße!
    Jan

  17. Hallo Frank,
    ich würde mich ebenfalls sehr über die Fortsetzung dieser Reihe freuen, da ich mich derzeit mit dem Erstellen eines Themes für WordPress beschäftige. Leider habe ich nur keine Ahnung von PHP und bin insofern absolut dankbar für diese Reihe. Bis jetzt fand ich alle Artikel aus dieser Reihe hervorragend für Anfänger auf diesem Gebiet aufbereitet und toll formuliert. Dass derart hochwertige Artikel einen enormen Zeitaufwand darstellen ist denke ich jedem Deiner Leser klar. Bitte lasse Dich nicht entmutigen und setze diese tolle Reihe fort!
    Wie mein Vorredner würde auch ich mich freuen, hier weiterlesen zu können.
    Ich für meinen Teil warte schon sehnsüchtig auf den nächsten Artikel *sabber* 😛
    Gruß!
    Sebastian

  18. Als totaler Neuling was wp angeht, ist das 1A geschrieben und leicht verständlich! Top Qualität! Danke sehr. Warte auf Teil 4. Hoffentlich ist der bald hier zu finden 😉

  20. Pingback: WP - Tutorial, wir schreiben ein WordPress Theme - Teil 4 - bueltge.de [by:ltge.de]
  22. Pingback: WordPress 2.5 und der neue Title Template Tag - bueltge.de [by:ltge.de]

  23. Super Tut!! Habe lange schon über die Erstellung einer WordPress Theme nachgedacht aber nie eine Seite wie diese hier gefunden.

    Danke Frank!

    Gruß Adressena M

Kommentare sind geschlossen.