Häufig sehen diese Template-Dateien verdächtig ähnlich aus: sie haben dieselbe Struktur und verwenden dieselben PHP-Scripten zur Darstellung von Wordpress-Inhalten. Die verschiedenen Seiten stellen ja dieselben Informationen aber in verschiedenen Kontexten dar. Eine Archivseite zeigt Blogeinträge eines bestimmten Tag oder Monat an während der Index alle letzten Einträge zeigt.

Die Template-Dateien eines bestimmten Themes X findet man im Verzeichniss wordpress/wp-content/templates/X. Hier hat sich eingebürgert, ein Unterverzeichnis images für die im Theme eingesetzten Grafiken (also NICHT die Grafiken der Webseiteninhalte) zu verwenden. 

atoenne Theme Template-Dateien

Die im obigen Screenshot gezeigten Dateien sind nicht alle Dateien, die ein Theme umfassen kann. Es sind aber die Teile der Templates, die sinnvollerweise geschrieben werden.

Seiten-Templates

• index.php wird überall dort aufgerufen, wo kein spezifischeres Seitentemplate existiert. Der Index sollte die aktuelle Informationsseite darstellen. Es werden typischerweise die letzten Blogeinträge sowie die Sidebars angezeigt.
• archive.php wird immer dann verwendet, wenn wir die Einträge eines Tags, Monats oder Jahres anfordern. Wordpress erkennt das daran, dass die URL in einem Datum endet. Also zum Beispiel “http://www.atoenne.de/2009/03/03/” . Diese Art der Befehlseingabe per URL an Webanwendungen nennt man REST (representational state transfer). Archivtemplates unterscheiden sich typischerweise von der Indexseite darin, dass nicht die vollständigen Beiträge sondern nur ein Exzerpt eingezeigt wird.
• single.php wird zur Anzeige eines einzelnen Beitrags angezeigt. Welche Form der URL zur Anzeige eines Artikels über page.php führt, hängt von den Permalink-Einstellungen von Wordpress ab. Das sieht dann zum Beispiel so aus: “http://www.atoenne.de/2009/03/homepage-mit-wordpress-3-layout-und-design/”. Solange wir lediglich die Wordpress-Tags in unseren Templates verwenden, werden diese URLs automatisch korrekt erstellt.
• page.php ist ähnlich wie single.php, wird aber für statische Webseiten verwendet. 
• Search.php dient der Anzeige von Suchergebnissen durch das Search-Widget. Verwenden wir dieses Widget nicht in unserer Sidebar, so wird diese Datei nicht benötigt.

Hilfs-Dateien

Es gibt eine Reihe von Dateien im Theme, die durch Tags eingefügt werden oder die in besonderen Situation verwendet werden.

• 404.php wird zur Anzeige von fehlenden Seiten eingesetzt.
• comments.php dient der Darstellung von abgegebenen Kommentaren und zur Eingabe neuer Kommentare. Diese Datei wird bei Verwendung des comments_template-Tags eingebunden. 
• header.php liefert den HTML-Header und Anfang des Seiteninhalts, der sich bevorzugt auf allen Template-Seiten wiederholt. Er wird durch das Tag get_header() eingebunden.
• footer.php ist das Gegenstück zum Header und wird per get_footer() eingebunden. Header und Footer sollten immer gemeinsam verwendet werden, da typischerweise der Header einige HTML-Elemente wie divs öffnet, die der Footer dann wieder schliesst.
• functions.php ist die Sammlung der PHP-Funktionen, die beim Laden jeder Seite ausgeführt werden sollen. Minimal werden wir dort die Sidebars erzeugen.
• searchform.php wird vom Search-Widget zur Anzeige des Suchmaske und Knöpfe etc. verwendet.
• sidebar.php ist der Name der ersten Sidebar. Da wir mit Widgets arbeiten, steht dort nicht viel drin. Die Sidebar-Dateien wurden früher dazu verwendet, die Widgets manuell zu erzeugen, wenn das Wordpress nicht für die Verwendung von Widgets konfiguriert war. Man kann in functions.php mehrere Sidebars anlegen, deren Namen dann sidebar.php, sidebar-1.php usw. heissen. 
• style.css ist der Name des (Haupt-)Stylesheets unserer Seiten. Wir werden später argumentieren, dass mehrere Stylesheets uns das Leben doch sehr erleichtern.
• screenshot.png ist der Name einer Grafik, die in der Wordpress-Administrationskonsole als Bild für unser Theme verwendet wird.

Im nächsten Artikel widmen wir uns der Indexseite und von dort ausgehend fügen wir die weiteren Templates schrittweise hinzu. Ab jetzt wird ein bisschen Programmierintuition oder noch besser ein klitzekleines Bisschen PHP-Kenntnis nützlich sein. CSS und HTML sollte man schon kennen.

In dem letzten Artikel haben wir uns mit den allgemeinen Konzepten von Wordpress beschäftigt. Daraus wurde klar, dass wenn wir uns an ein eigenes oder stark angepasstes Design wagen wollen, wir uns zuallererst Gedanken über das allgemeine Layout machen müssen. Wir legen darin fest, welche Elemente wo und in welcher Formatierung auftreten sollen. Ferner sollte man bei der Gelegenheit die Grundlagen für das optische Design legen, denn Layout und Design basieren beide auf CSS.

Layout- und Design-Techniken haben sich in den letzten Jahren, mit der Verbesserung der CSS-Unterstützung durch Browser, deutlich gewandelt. Frames und Tabellen sind no-go! Wir verwenden nun DIV für Block-Bereiche und SPAN als Sonderfall für Inline-Bereiche innerhalb einer Zeile. Position der DIV-Blöcke erfolgt ausschliesslich durch CSS-Angaben und Verschachtelung von DIV-Blöcken. Rechts sind die Hauptblöcke für unser Theme skiziiert.

Die Kunst oder Schwierigkeit von CSS ist die richtige Verwendung von float, width, margin und padding-Angaben für die einzelnen Blöcke, so dass sich diese auch bei verschiedenen Browser-Fenstergrößen korrekt anordnen. CSS kann erbärmlich komplex und willkürlich erscheinen. Ich werde hier keinen CSS-Kurs schreiben, sondern ein über Jahre bewährtes Layout-Schema zum Abkopieren vorstellen.

Dieses Schema basiert auf der Annahme einer festen Breite der Inhalte und der einzelnen Blöcke. Das ist zwar nicht jedermanns Geschmack, erleichtert aber das Design und macht die Darstellung zuverlässiger als variable Breiten. Das folgende Bild zeigt die Struktur und das folgende CSS wesentlichen Layoutinformationen dieses Themes.

Page DIV-Struktur

Wir haben eine atoenne_box, die alles umschliesst und den Zweck hat, eine links-rechts frei fliessende Fläche fester Breite zu definieren: #atoenne_box { width: 940px; margin-right: auto; margin-left: auto; }

Darin enthalten ist #atoenne_area { float: left; width: 940px; } die “auf Vorrat” angelegt wurde, um später links noch unabhängige Bereiche einfügen zu können. 

Die Area ist dann unterteilt in 

1. #atoenne_header { float: left; width: 100%; }
2. #atoenne_area23 { float: right; width: 100%; }
3. #atoenne_footer { float: left; width: 100%; }

Area23 ist dabei float-right, weil wir uns Platz für eine zweite Sidebar links lassen wollen, die dann die Breite der Area23 begrenzen würde. Der Inhalt dieser rechts fliessenden Area wird dann aufgeteilt in den eigentlichen Inhaltsbereich und den Platz für die rechte Sidebar. 

1. #atoenne_area2 { float: left; width: 710px; } 
2. #atoenne_sidebar1 { float: right; width: 200px; }

Jetzt muss man lediglich noch padding hinzufügen, um die gewünschten Abstände zwischen den Areas zu erzeugen. Dann noch Hintergrundfarben und -grafiken nach Lust, Laune und Geschmack und fertig ist die leere Webseite. Wer wenig Erfahrung mit solchen CSS-basierten Layouts hat, sollte dieses Layout ausserhalb von Wordpress in einer einfachen HTML-Seite  verwenden und per CSS background-color: die verschiedenen DIVS unterschiedlich einfärben. Das ist sehr lehrreich, was die Wirkung von Styles betrifft.

<div id=“atoenne_box”> 
  <div id=“atoenne_area”>
    <div id=“atoenne_header”>
    </div>
    <div id=“atoenne_area23″>
      <div id=“atoenne_area2″> 
      </div>
      <div id=”atoenne_sidebar1″>
      </div>
    </div> 
    <div id=”atoenne_footer”>
    </div>
  </div>
</div> 

Im nächsten Artikel werden wir diese Struktur auf die verschiedenen Template-Dateien verteilen und ihren Zweck/Unterschied erläutern. Danach geht es ins Eingemachte mit Beispielen live von dieser Website.

Um Wordpress stärker anzupassen, als einfach Themes und Widgets auszuwählen,  müssen wir Themes anpassen (oder ganz neu schreiben). Das setzt voraus, dass wir uns mit den zentralen Konzepten von Wordpress auseinandersetzen und uns Gedanken über das Layout und die Funktionen des eigenen Templates machen (nächster Artikel). Nachdem ich mir einige Themes von innen angeschaut habe, war mir klar, dass ich langfristig besser mit einem eigenen Theme klar komme. Struktur, Übersichtlichkeit und Kommentierung lassen meist doch arg zu wünschen übrig. Warum um Himmelswilli müssen CSS-Dateien eigentlich so strubbelig zusammen kopiert werden? Und dann alles in einer Datei?

In den folgenden Artikeln werde ich an dem Beispiel dieser Seiten die Konzepte und Struktur eines Theme beschreiben. Weiterführende Information findet man auf den deutschen Wordpress-Seiten (leider noch recht unvollständig) und in der Referenz.  

Aus Benutzersicht besteht Wordpress aus zwei Anwendungsteilen: der Administration und dem Frontend. Beide basieren auf der Wordpress-Anwendung, die auf den Webserver geladen wurde. Mit der Administration verwalten wir unsere Website, erstellen Blogeinträge und statische Webseiten, verwalten Kommentare und könnten auch direkt das Theme anpassen. Das Frontend ist der Teil, der unsere Website ausführt und um den geht es hier.

Begriffsklärung:

• Ein Theme ist eine Sammlung von Template-Dateien für die verschiedenen Inhalte.
• Wir unterscheiden Blogeinträge und statische Seiten (engl. Page), die jeweils von Wordpress in Webseiten präsentiert werden.
• Blogeinträge und Seiten sind sehr ähnlich. Der Unterschied ist dass Blogeinträge chronologisch geordnet unter Kategorien eingeordnet präsentiert werden.
• Statische Seiten dagegen werden unter ihrem Namen auf eigenen Webseiten präsentiert. 

Funktionsprinzip

Referenzen: Templates, Template-Datei-Hierarchie, Seitenprogrammierung (The Loop), Loop-Referenz

Elemente einer Seite

Wie man oben sieht ist das wichtigste Template “index.php”. Dieses stellt gleichzeitig für die meisten Designs die Hauptseite dar. In meinem hier beschriebenen Theme-Design sind die anderen Inhalt-Templates leicht veränderte Kopien hiervon. Betrachten wir diese Webseite:

• Alle Webseiten besitzen einen Header. Hier reicht der Header bis einschliesslich zur Seitennavigation.
• Ebenso besitzen nahezu alle alle Webseiten einen Footer.
• Der Hauptbereich der Seite stellt den dynamischen Inhalt dar. Das kann die Liste der letzten Blogeinträge sein oder eine statische Seite. Dieser Bereich steht unter der Kontrolle der sogenannten “Loop”, die wir später noch genauer kennen lernen werden.  Die Loop ist das notwendige kleine PHP-Programm des Templates, welches die anzuzeigenden Inhalte auflistet.
• Sidebars sind feste Bereiche rechts und/oder links des Inhaltsbereichs. Hier erscheinen die Widgets, die in der Administration ausgewählt wurden. Dem Thema Widgets widmen wir noch einen späteren Beitrag.

Wir haben nun sehr allgemein das Funktionsprinzp von Wordpress kennengelernt. Wordpress stellt eine Basisfunktion zur Verwaltung von Webinhalten bereit und eine Logik, die je nach Anfrage (aktuelle Blogeinträge, Archiv, einzelner Artikel, statische Seite, Suche?) eine Templatedatei auswählt. Diese Templatedatei entspricht einer Webseite einer normalen Hompage, wobei das Template als aktives Programm sich seine Inhalte zum Zeitpunkt der Anfrage zusammensucht. Wir müssen diese Templatedateien erstellen oder von passenden Vorlagen kopieren/variieren. Dazu haben wir die typischen Bereiche oder Elemente einer Webseite kennengelernt. Wir sollten uns merken, dass die Inhalte dieser Templates uns vollständig überlassen sind. 

Im nächsten Artikel geht es um das Design und Layout des Themes.

Übersicht über Artikel

Wordpress ist kostenlos und Wordpress kann auf einer Homepage unter bestimmten technischen Voraussetzungen verwendet werden. Verwenden heisst ganz einfach, die Dateien von Wordpress auf den Server zu kopieren (FTP) und dann die Wordpress-Seiten aufzurufen. Der Webhoster, zum Beispiel Strato (mein Hoster), muss für den Webspace PHP4 unterstützen. Das wird normalerweise gross unter den Leistungen beworben. PHP belastet aber den Server deutlich stärker als normale Webseiten, so dass man leicht böse weil lahme Erfahrungen machen kann. Letztlich muss man sich informieren und auf die Erfahrungen anderer Benutzer von Wordpress vertrauen.  Ebenso verwendet Wordpress die Datenbank MySQL 4. Gerade bei kleinen, billigen Webspaces werden keine Datenbanken unterstützt. Es wird nur eine Datenbankinstanz benötigt.

Optional aber sehr wichtig für die Verwendung von funktionierenden Permalinks ist die Unterstützung von mod_rewrite. Das ist eine Serverfunktion zum dynamischen Umschreiben von URLs und das wird für Permalinks dringend benötigt. Ein Permalink ist ein symbolischer Name als URL eines Blogbeitrags und macht den Eintrag damit unabhängig davon, wie er in Wordpress gespeichert ist. So erreicht man über www.atoenne.de/wordpress/impressum/ das Impressum dieser Webseiten, auch wenn es gar keine Webseite fürs Impressum gibt. Mit mod_rewrite kann Wordpress dies dann intern auf die in der Datenbank gespeicherte Impressumsseite umleiten. Keine Angst: die Konfiguration von mod_rewrite erfolgt Automagisch.

Sind diese Voraussetzungen erfüllt, holt man sich die aktuelle deutsche Version von den Wordpress-Webseiten und beginnt mit der Installation gemäß Anleitung. Notwendige Kenntnisse hierzu: Bedienung eines anderen Editors als Word, Verwendung eines FTP-Programms zum Übertragen der Dateien und Verwendung/Konfiguration der vom Webhoster bereitgestellten MySQL-Datenbank.

Wordpress bei Strato

Für Strato gibt es netterweise eine einfache Anleitung dazu. Achtung! Die Erstellung von .htaccess solltet ihr besser über die Homepagegestaltung, Unterpunkt Website-Configurator, Unterpunkt Verzeichnisoptionen erledigen. Dort tragt für das Verzeichnis / den Pfad der übertragenen index.php ein. Links ist ein Beispiel, wenn Wordpress in ein eigenes Verzeichnis wordpress kopiert wurde.

Übersicht über Artikel

Fakt #1: Diese Webseiten sind mit Wordpress erstellt. Fakt #2: Der Author wurde noch nicht für einen Nobelpreis vorgeschlagen.(Schade eigentlich)  Folgerung: So schwierig kann das ja nicht sein!

In den folgenden Einträgen beschreibe ich, wie man zu seiner eigenen Homepage mit seinem eigenen Stil (Template) kommt und was dafür an Voraussetzungen notwendig sind.

Was ist Wordpress überhaupt? Unter Wordpress (eng) und Wordpress (Deutsch) findet man alle notwendigen Informationen, Downloads und Installationsanweisungen. Sich in diese Materie einzuarbeiten dauert aber je nach Vorbildung einige Tage. Mit dieser Artikelserie spart man hoffentlich viel Zeit und Frust.

Ganz allgemein ist Wordpress eine Web-Anwendung mit der wirklich jedermann in wenigen Minuten seinen eigenen Blog-Server aufsetzen kann. Dabei gibt es eine grosse Menge an vorgefertigten Templates, d.h. kompletten Layouts und Designs der verwendeten Webseiten und viele Widgets für Zusatzfunktionen. Solange man sich mit dem vorgefertigten Dosenfutter begnügt, ist man blitzschnell mit einem laufenden Server am Start. Ich war ehrlich beeindruckt!

Mehr Zeit und Gehirnschmalz muss man investieren, wenn man die Templates nach eigenem Geschmack anpassen möchte. Ebenso liegt die Stärke von Wordpress erstmal in dem Blogserver und weniger in der Verwaltung einer ganzen Homepage. Wordpress kennt neben Blogeinträgen auch statische Seiten, aber man muss doch ein bisschen mit Plugins und etwas einfacher Programmierung arbeiten, damit aus Wordpress ein passables, einfaches CMS wird. 

Ich habe für die Einarbeitung in Wordpress, Erstellung des hier verwendeten Templates (aus verschiedenen Vorlagen) sowie die Erweiterung um Seitennavigation und Breadcrumb etwa ein Wochenende, d.h. ca. 12 Stunden benötigt. Ein nicht unwesentlicher Teil dieser Zeit ging für das Design drauf. CSS ist immer für eine Überraschung gut!

Übersicht über Artikel