Für Menschen · Seien Sie begeistert und Sie werden begeistern !
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-TagAls 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" <?php if ( function_exists('language_attributes') ) language_attributes(); ?> 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.
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-TagWordPress 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 Backendrdf_url URL für RDF/RSS 1.0 Feedrss_url URL für RSS 0.92 Feedrss2_url URL für RSS 2.0 Feedatom_url URL für den Atom Feedcomments_atom_url URL für den Atom Feed zu Kommentarencomments_rss2_url URL für den RSS 2.0 Feed zu Kommentarenpingback_url Pingback Adressestylesheet_url URL zum Stylesheet des aktiven Themes (muss im Theme ohne Unterordner liegen)stylesheet_directory URL zum Ordner des verwendeten Stylesheetstemplate_directory oder template_url URL zum Order des aktiven Themesadmin_email E-Mail-Adresse des Administrators aus den allgemeinen Einstellungen im Backendcharset Zeichensatz aus den lesenden Einstellungen im Backendhtml_type Content-Type für das Blogversion Version der WordPress-Installationlanguage Sprache aus der wp-config.php, siehe oben im Abschnitttext_direction Wert für das dir-Attribut, siehe oben im Abschnittname Blogtitel aus den allgemeinen Einstellungen im Backendtitle-TagIn 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 Adminbereichis_archive Ob ein Archiv dargestellt wirdis_attachment Anhang im Beitrag oder Seiteis_author Autorenseiteis_category Kategorie Archiv oder Parameteris_tag Tag-seiteis_comments_popup Kommentar per Popup Funktionis_date Archivseite auf Basis Datumis_day Archivseite auf Basis Tagis_feed wenn es ein Feed istis_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 Monatis_page statische Seiteis_paged Seite/ Weblog wurde „geblättert”is_preview Vorschauis_robots is_search Suchseiteis_single einzelner Beitragis_singular is_time Archivseite auf Basis Zeitis_trackback wenn es es sich um Pingback oder Trackback handeltis_year Archivseite auf Basis Jahris_404 Fehlerseite 404Nicht 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.
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-TagDer 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 HookBevor 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(); ?>
doctype, html und headZum 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>
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
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.
Ich bin urlaubsreif, ersticke in Arbeit und damit auch für die Leser des Weblogs nicht zu erreichen. Bitte geduldet euch ein wenig mit Supportanfragen.
Leider muss ich die Kommentarfunktion deaktivieren, ansonsten würde ich weiter in Arbeit ersticken oder die Anfragen nicht nach bestem Gewissen beantworten.
Vielen Dank für das Verständnis!
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.
Das Weblog wird angetrieben von WordPress und aktuell gibt es 854 Beiträge, 15036 Kommentare in 14 Kategorien und 450 Tags.
Das Blog wird liebevoll mit xHTML & CSS in Handarbeit gestaltet.
Design und Code ist unter Copyright
© 2001 - 2010 bueltge.de [by:ltge.de]
25. Oktober 2007 um 22:55
25. Oktober 2007 um 22:55
26. Oktober 2007 um 13:51
27. Oktober 2007 um 00:21
27. Oktober 2007 um 09:44
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.
27. Oktober 2007 um 12:50
27. Oktober 2007 um 17:05
@troken: vielen Dank für das Feedback!
28. Oktober 2007 um 15:44
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!
30. Oktober 2007 um 02:31
6. November 2007 um 00:46
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!
7. November 2007 um 01:02
7. November 2007 um 02:26
9. November 2007 um 11:36
12. November 2007 um 11:11
13. November 2007 um 09:14
16. Januar 2008 um 14:27
22. März 2008 um 00:33
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
25. März 2008 um 12:03
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.
25. März 2008 um 12:09
Hallo Frank,
), 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.
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
Schau hat mal, ob Du die Zeit findest - würd mich freuen wieder davon zu hören.
Grüße!
Jan
30. März 2008 um 20:42
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
16. April 2008 um 22:12
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
17. April 2008 um 08:21
@Marvin: ist in Arbeit, erfordert aber noch ein wenig Zeit und Kraft.
19. April 2008 um 23:32
19. April 2008 um 23:34
Teil 4 ist nun verfügbar - viel Spass damit!
27. April 2008 um 13:19
21. Mai 2008 um 16:19
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
25. Januar 2009 um 19:36
Wow!
Wirklich ein sehr gutes Tut!!
Vielen vielen dank
Auch ich würde mich über eine fortsetzung freuen!
greez
Gh0stc0der
2. November 2009 um 19:00
Hi Frank
Wäree schön, wenn du das ändern könntest, ansonsten ist dein Tutorial erste Sahne!
Leider fehlt der gesamte Code in den Zitaten
lg
3. November 2009 um 08:30
@Eknoes: Vielen Dank für den Hinweis, habe es direkt gefixt; viel Freude damit und mal sehen, wann ich die Serie fort setze; bisher war das Feedback eher dünn, so dass die Motivation nicht so hoch war.
14. Januar 2010 um 12:26
Besten Dank für die Tipps. Im Code hat sich ein Typo eingeschlichen:
<link rel="Shortcut Icon" type="image/x-icon" href="<?php bloginfo('url'); ?
muss lauten<link rel="Shortcut Icon" type="image/x-icon" href="/favicon.ico" />Ansonsten funtzt das Blog nimmer.
14. Januar 2010 um 12:29
@Rene: nein, der Code ist korrekt, weil ich die komplette URL zum ico angebe.