WordPress-Themes entwickeln: HTML5, CSS3, JavaScript und PHP: Praxiswissen und Quellcodes zum Entwurf von WordPress-Themes

Flüchtigkeitsfehler.

1   Grundlagen

Sicher scharren Sie bereits mit den Hufen, um endlich Ihre eigene Website in maßgeschneidertem Gewand online schalten zu können. Damit Ihr Projekt allerdings von Erfolg gekrönt sein wird, sollten Sie sich mit ein paar Grundlagen vertraut machen. Im ersten Kapitel werden Sie erfahren, woraus Themes in WordPress genau bestehen, was gute Themes auszeichnet, welche grundlegenden Begriffe im Laufe der Lektüre immer wieder auftreten und was sie bedeuten. Zudem erfahren Sie natürlich, über welche Vorkenntnisse Sie verfügen sollten, um aus Ihrer Website das Beste herausholen zu können.

1.1   Grundkenntnisse und Voraussetzungen

Umfassende Programmierkenntnisse werden in diesem Buch nicht vorausgesetzt. Ein solides Grundwissen um die Basisfunktionen rund um WordPress sollte aber schon vorhanden sein. Doch dazu später mehr.

1.1.1   Grundlegende WordPress-Kenntnisse sind notwendig

Da Sie sich offensichtlich mit der Erstellung eines eigenen Themes auf WordPress-Basis befassen wollen, ist davon auszugehen, dass Sie WordPress zumindest schon einmal genutzt haben. Um ein eigenes Theme einzusetzen, müssen Sie natürlich kein WordPress-Vollprofi sein. Im Laufe der Kapitel werden Sie Schritt für Schritt an die Eigenheiten des WordPress-Systems herangeführt und mit ihnen vertraut gemacht. Grundlegende Kenntnisse in der Nutzung und Administration von WordPress sind zwar von Vorteil, Sie können sie sich aber durchaus im Laufe der Lektüre des Buchs aneignen.

1.1.2   Eine laufende WordPress-Installation ist Voraussetzung

Um allen Beispielen folgen zu können, brauchen Sie eine laufende WordPress-Installation. Somit wird der Installationsverlauf von WordPress nicht separat erläutert, genauso wenig wie die Einrichtung einer WordPress-Installation. In diesem Buch steht die Theme-Entwicklung im Vordergrund. Im Internet gibt es dazu zahlreiche gute Anleitungen.¹

1.1.3   Der Einsatz von HTML und CSS

Grundlegende Kenntnisse von HTML und CSS sind, wie schon angesprochen, notwendig, um dem Verlauf dieses Buchs sinnvoll folgen zu können. Sollten Sie in der Vergangenheit bereits Websites auf Basis von HTML aufgebaut und mit CSS in Form gebracht haben, werden Ihnen sicherlich einige Dinge deutlich leichter fallen und bereits bekannt vorkommen. Wir werden alles daran setzen, auch Einsteiger nicht im Regen stehen zu lassen, empfehlen jedoch, dass Sie sich vorab mit dem grundlegendem Aufbau einer HTML-Website befassen, um WordPress optimal nutzen zu können.

Für die CSS-Kenntnisse gilt im Prinzip dasselbe. Ganz ohne eine Ahnung von CSS werden Sie immer wieder vor Verständnishürden stehen. Es reichen aber auch hier bereits gute Grundkenntnisse, um erstaunliche Resultate zu erzielen. Mit einem tieferen Wissensschatz können dann auch anspruchsvolle und komplexe Formate umgesetzt werden. Es erstaunt Einsteiger immer wieder, wie schnell man vorzeigbare Resultate mit CSS erhält.

1.1.4   PHP-Kenntnisse sind von Vorteil

Vorab gilt: Seien Sie unbesorgt, Sie müssen kein PHP-Crack sein, um WordPress und seine Erweiterungen sinnvoll einsetzen zu können. Dieses Buch geht allerdings schon einen Schritt weiter, indem es den Grundaufbau eigener Themes und deren Funktionalität vermitteln will. Wer also noch gar kein Vorwissen in PHP hat, sollte sich zumindest einmal die Grundlagen zu dieser sehr erfolgreichen Scriptsprache anschauen. Das muss keineswegs mit Hilfe eines 900-Seiten-Buchs erfolgen. Eine kurze Einführung reicht fast immer aus.

Natürlich können fortgeschrittene PHP-Anwender schneller anspruchsvolle Themes entwickeln, und mit entsprechendem Know-how können Sie vielleicht manche Abschnitte im Buch etwas schneller überfliegen. Dennoch gilt die Faustregel, dass Einsteiger und Fortgeschrittene grundsätzlich gleichermaßen Themes entwickeln können.

Oftmals reicht es bereits aus zu wissen, welche Aufgabe dieser oder jener Code-Abschnitt hat. Im WordPress-Umfeld existieren bereits abertausende fertige PHP-Schnipsel für den Instant-Gebrauch. Natürlich ist es sinnvoll, sich bei längerfristigem Interesse intensiver mit der Programmiersprache PHP auseinanderzusetzen, doch auch ohne tiefergehende Kenntnisse werden Sie bereits gute Resultate erzielen. Damit Einsteiger allgemein Berührungsängste verlieren und nicht wegen Kleinigkeiten frühzeitig abgehängt werden, wird sich dieses Buch in einem eigenen Abschnitt mit den wichtigsten PHP-Grundgedanken befassen.

1.2   Grundlegende Begriffe

Einige Begriffe in diesem Buch sind typisch WordPress. Jedes System hat eben seine eigenen Bezeichnungen, und damit sowohl die Autoren als auch der Leser stets von ein und derselben Sache sprechen, seien zu Beginn des Buchs einige Grundbegriffe erklärt.

1.2.1   Sidebars

Sidebar ist ein genereller Sammelbegriff für Container, welche mit Widgets ausgestattet werden können. Der Begriff Sidebar bzw. Seitenleiste ist jedoch etwas irreführend. In WordPress muss eine Sidebar bzw. Seitenleiste nicht notwendigerweise immer auf der linken oder rechten Seite platziert sein. Der Footer ist technisch gesehen ebenfalls eine Sidebar, genauso wie der Header. Im weiteren Verlauf des Buchs werden Sie lernen, eigene Sidebar-Bereiche zu definieren, die anschließend mit Widgets angereichert werden können.

1.2.2   Widgets

Widgets sind kleine Code-Anweisungen in WordPress, die (fast) beliebig in den Seitenleisten platziert werden können, um gezielte Ausgaben zu tätigen. Widgets lassen sich bequem innerhalb der Seitenleisten hin und her bewegen und so individuell einsetzen. Durch die Kombination aus Seitenleisten (als Containern) und Widgets können Sie als Anwender sehr flexibel die Ausgabe Ihrer Inhalte steuern, ohne später überhaupt noch in den Code eingreifen zu müssen. Wenn Sie sogar vorhaben, Ihr Theme künftig kostenlos oder kostenpflichtig der Allgemeinheit zur Verfügung zu stellen, ist es umso wichtiger, ein Maximum an Flexibilität und einfacher Handhabung zu gewährleisten.

Bild 1.1: In WordPress findet man unter Design > Widgets sowohl die Sidebars als auch die zur Verfügung stehenden Widgets, die einfach per Drag & Drop von links in die entsprechenden Sidebars gezogen werden können.

1.2.3   Administrationsoberfläche und Dashboard

Die WordPress-Administrationsoberfläche wird fälschlicherweise oft generell als Dashboard bezeichnet. Das Dashboard bezeichnet allerdings nur einen Teil der Administrationsoberfläche und hält einige mehr oder weniger wichtige Informations-Widgets bereit. In der Regel wird in diesem Buch aber nicht vom Dashboard die Rede sein, sondern von der gesamten Administrationsoberfläche. In diesem Zusammenhang wird auch öfter die linke Navigationsleiste erwähnt. Diese listet innerhalb der WordPress-Administrationsoberfläche auf der linken Seite alle relevanten Bereiche mit entsprechenden Unterpunkten auf.

Bild 1.2: Verwechslungsgefahr: Oftmals wird das Dashboard mit dem gesamten Administrationsbereich gleichgestellt, dabei bezeichnet es nur eine spezifische Übersichtsseite.

1.2.4   Unterschied zwischen Themes und Templates

Ebenfalls Verwirrung erzeugt der Begriff des Templates. Manche Anwender glauben, ein Template sei mit einem Theme gleichzustellen, dem ist allerdings nicht so. Ein Template ist wie eine Vorlage zu betrachten, eine Schablone, und wird meist für gleichartig aufgebaute Seiten eingesetzt. Ein Theme in WordPress – und das werden Sie später noch genauer sehen – besteht in der Regel aus zahlreichen Templates, schließlich soll nicht jede Seite identisch aussehen. Unabhängig von der Optik werden je nach Template vollständig unterschiedliche Funktionen genutzt und aufgerufen. Ein Template in WordPress kümmert sich zum Beispiel um die Ausgabe der Suchergebnisse. Dort werden ganz bestimmte Techniken und Strukturen benötigt. Templates sind also nur Teil der Themes und bilden getrennte Vorlagen.

1.3   PHP-Mini-Crash-Kurs

Wer noch keine Erfahrung mit PHP hat, braucht sich nicht zu fürchten. WordPress ist PHP-technisch recht einfach gestrickt und mit einigen grundlegenden Befehlen kommt man schon prima zurecht. Zudem werden Sie im Laufe der Lektüre immer wiederkehrende Funktionen nutzen können, die zwar oftmals einige Abweichungen aufweisen, aber im Prinzip immer dem gleichen Schema und Aufbau folgen. In diesem Abschnitt möchten wir die Scheu vor PHP nehmen, sodass Sie für die weiteren Kapitel bestens gerüstet sind und auch Codebeispiele lesen und verstehen können. Hierzu gehört natürlich auch eine Erklärung zu einigen Begriffen aus der Welt der Programmiersprachen: ob Variable, Funktion oder Schleife. Nach Lektüre dieses Kapitels sind diese Begriffe keine völlig Unbekannten mehr für Sie.

1.3.1   PHP in der Kurzvorstellung

PHP ist eine Programmiersprache, die bereits auf Seiten des Servers interpretiert wird. PHP wird also bereits ausgeführt, bevor die Website tatsächlich für den Website-Besucher im Browser sichtbar ist. Häufig wird PHP in Kombination mit einer MySQL-Datenbank genutzt, die die benötigten Daten bereithält. So auch im Falle von WordPress. Stellen Sie sich WordPress wie eine Küche vor. Noch bevor das Gericht den Gast (Website-Besucher) erreicht, werden alle Zutaten (Inhalte) aus dem Kühlregal (Datenbank) durch den Koch (PHP) angerichtet. Dann erst wird das fertige Gericht (HTML) dem Gast serviert.

Bild 1.3: Schematische Darstellung der Arbeitsteilung zwischen Datenbank, PHP, WordPress und dem Computer des Seitenbesuchers.

1.3.2   Schreibweise von PHP

PHP kann innerhalb von HTML genutzt werden, um die ansonsten statische Ausgabe zu dynamisieren. Das ist bei WordPress auch der Fall. Anhand eines konkreten Beispiels, wie innerhalb von einfachem HTML eine PHP-Ausgabe stattfindet, möchte ich Ihnen die Schreibweise (Syntax) – von PHP erläutern.

Grundvoraussetzung für die Ausführung von PHP-Code

Beachten Sie bitte, dass PHP nur ausgeführt wird, wenn es erstens auf Ihrem Server ordnungsgemäß installiert ist und zweitens Ihre Datei tatsächlich die Endung .php trägt. Ist das nicht der Fall und heißt eine Datei beispielsweise test.html, wird der PHP-Code einfach nicht interpretiert und stattdessen als Klartext ausgegeben.

Praxisbeispiel: Ausgabe des aktuellen Datums mit PHP

Das folgende Beispiel gibt dem Besucher der Website das aktuelle Datum aus. Dank PHP muss nicht jeden Tag das Resultat manuell angepasst werden, wie es bei einer reinen HTML-Ausgabe der Fall wäre. Darum kümmert sich PHP. Wird beispielsweise folgender Code-Passus in eine neue Datei test.php gespeichert und im Browser Ihrer Wahl aufgerufen, wird das aktuelle Datum ausgegeben.

Heute ist der <?php echo date(d.m.Y); ?>

Charakteristisch für PHP sind der Start und das Ende der Anweisung. Dadurch weiß der Server genau, wann PHP-Anweisungen zum Einsatz kommen. beendet ihn wieder. Tür auf, Tür zu. So einfach ist das. Innerhalb dieser Anweisungen kann nun beliebig mit PHP gearbeitet werden. Ebenfalls anhand des Beispiels wird bereits deutlich: PHP lässt sich prima mit HTML kombinieren, um zum Beispiel statische Inhalte wie »Heute ist der« mit einer dynamischen, sich ständig ändernden Datumsangabe zu kombinieren. Praktisch.

Achten Sie auf Semikolons, Anführungszeichen und Schreibweise

PHP ist recht empfindlich. Haben Sie das Semikolon zum Schluss der PHP-Anweisung bemerkt? Lassen Sie es aus, hat dies unmittelbar einen Fehler zur Folge. PHP ist da nicht gerade zimperlich. Im Falle von Tippfehlern wird oftmals die gesamte Ausgabe der Website unterbrochen. Ähnlich heikel verhält es sich mit Anführungszeichen. Achten Sie daher penibel auf korrekte Schreibweise.

Die PHP-Anweisung echo sorgt für eine Ausgabe. Ihr folgt dann, was konkret ausgegeben werden soll. In diesem Fall greifen wir auf eine praktische PHP-Funktion zurück, die automatisch das aktuelle Datum zurückgibt.

HTML und PHP: Eine sinnvolle Symbiose

PHP-Anweisungen und statische HTML-Elemente lassen sich sehr flexibel miteinander kombinieren. Selbst wenn ein Dokument die Dateiendung .php trägt, muss im Dokument nicht unbedingt alles in PHP programmiert sein. Im Gegenteil: Es ist durchaus sinnvoll, ein Maximum in HTML zu belassen und nur die Passagen per PHP einzuspeisen, die tatsächlich variabel sind und dynamisch ausgelesen werden müssen. Das spart Ladezeit und Ressourcen. In unserem Beispiel weiter oben haben wir auch nur das variable Datum per PHP ausgeben lassen. Für den restlichen, statischen Inhalt kann sich PHP zurücklehnen und muss gar nicht erst in Anspruch genommen werden.

1.3.3   PHP-Funktion verstehen

PHP-Funktionen begegnen Ihnen in WordPress an fast jeder Ecke. Diese Funktionen können Sie sich wie eine zusammengehörige Sammlung von Befehlen vorstellen, die mit einem Namen versehen werden. Diese Befehle oder Befehlsketten werden also in Funktionen gesammelt und können mit nur einem kurzen Befehl an verschiedenen Stellen aufgerufen und eingesetzt werden. Statt z. B. jedes Mal 50 Zeilen Code zu tippen, reicht der Aufruf einer einzigen Funktion. Sie wünschen ein Beispiel, wie eine solche Funktion aussehen könnte? Folgende Funktion, bereits in ein HTML-Gerüst eingebettet, gibt einen kleinen Text aus, dort, wo die Funktion aufgerufen wird:

function gibtext()

{

echo Dieser Text wird ausgegeben.;

}

gibtext();

?>

WordPress stellt zahlreiche solcher Sammlungen in Form von PHP-Funktionen bereit. Erkennen werden Sie diese Funktionen an den Klammern, die dem Namen der Funktion folgen. In unserem Beispiel: gibtext().

Die vorhin eingesetzte Datumsfunktion date() ist übrigens keine WordPress-eigene Funktion. PHP stellt bereits selbst im Kern zahlreiche Funktionen zur Verfügung, die unter anderem von WordPress genutzt werden können.

In einem späteren Kapitel fernab der Grundlagen erfahren Sie, welche Funktionen WordPress konkret bereitstellt und wie Sie diese für Ihr eigenes Theme nutzen können.

1.3.4   Der Einsatz von Variablen

Variablen bilden – neben anderen Bausteinen – bei nahezu allen Programmiersprachen das Herzstück. Dank Variablen lassen sich Werte einmal definieren und anschließend beliebig wie Platzhalter verwenden. Im Falle von PHP werden Variablen mit dem Dollarzeichen $ angeführt. Der Vorteil von Variablen ist schnell erklärt. Ändert sich ein Wert, muss er nicht an zig Stellen verändert werden, sondern nur an einer Stelle. Ein kleines Beispiel (auch wenn es nicht das volle Potenzial von Variablen verdeutlicht):

$alter = 12;

echo Ich werde nächstes Jahr .$alter. Jahre alt!;

?>

In diesem Beispiel wird zuerst mit dem Dollarzeichen $ eine neue Variable $alter definiert. Dieser Variable wird der Wert 12 zugeteilt. Anhand des PHP-Befehls echo wird anschließend die Ausgabe vorgenommen. In dieser Ausgabe können wir nun die Variable $alter einsetzen und den definierten Wert automatisch zuweisen.

1.3.5   Schleifen oder Loops

Schleifen – auf Englisch Loops genannt – werden immer dort eingesetzt, wo ein gewisser Programmteil mehrfach durchlaufen werden muss. Jede Schleife kann mit einer Bedingung versehen werden. Solange diese Bedingung noch zutrifft – und das wird bei jedem Durchlauf kontrolliert – wird die Schleife weiter ausgeführt. Auch WordPress nutzt solche Schleifen, um beispielsweise die zehn neusten Beiträge auf der Startseite, die Suchergebnisse, ein Archiv oder die Beiträge in einer gewissen Kategorie ausgeben zu lassen. Bereits an dieser Stelle sei verraten, dass solche Schleifen ordentlich Performance kosten können, daher ist der Einsatz immer mit einer gewissen Umsicht zu planen. Im Falle von WordPress spricht man meist angelehnt an den englischsprachigen Ursprung von WordPress von einem Loop. Ein recht geläufiger Loop, dem wir zu einem späteren Zeitpunkt noch begegnen werden, sieht folgendermaßen aus:

while ( have_posts() ) : the_post();

get_template_part( 'content', get_post_format() );

endwhile;

 ?>

Dieser Loop beginnt mit while (solange) und sorgt dafür, dass fleißig Beiträge (the_post) ausgegeben werden, solange es welche gibt (have_post). Damit der Loop genau weiß, welche Aufgaben ausgeführt werden müssen, ehe er wiederholt werden soll, wird er mit endwhile; abgeschlossen. In unserem Beispiel wird allerdings immer nur die eine Aufgabe ausgeführt: die einzelnen Beiträge ausgeben.

1.3.6   if / else für einfache Entscheidungen

Klassisch für Programmiersprachen im Allgemeinen: Anhand von nur zwei Begriffen – nämlich if und else – können je nach Bedingung unterschiedliche Aktionen ausgeführt werden. In PHP gibt es leicht unterschiedliche Schreibweisen für diese if/else-Abfragen, im Falle von WordPress wird aber folgende Schreibweise angewandt:

if ($zahl == 1) :

echo Ich bin eine Eins;

else :

echo Ich bin keine Eins;

endif;

?>

Ins Deutsche übersetzt könnte man auch sagen: Wenn (if) der Wert der Variable $zahl identisch mit 1 ist, dann schreibe »Ich bin eine Eins«. Ist das nicht der Fall (else), gib folgenden Text aus: »Ich bin keine Eins«.

In diesem Falle ist das doppelte Ergebniszeichen hinter $zahl übrigens durchaus gewollt. Hätte man nur ein einfaches Ergebniszeichen genutzt, hätte PHP an dieser Stelle der Variablen $zahl den Wert 1 zugewiesen. Dabei möchten Sie ja nichts zuweisen, sondern etwas überprüfen. Mit dem doppelten Ergebniszeichen prüfen Sie also nach, ob die Variable $zahl nun den Wert 1 hat oder eben nicht. Die Variable an sich bleibt unangetastet.

Auch WordPress setzt oftmals auf solche if/else-Abfragen, meistens auch in Kombination mit den vorhin erläuterten Funktionen. Ein Beispiel aus der Praxis?

if ( have_posts() ) :

echo Ja, es gibt Beiträge!;

else :

echo Leider kein Beitrag vorhanden!;

endif;

?>

In diesem Falle wird anhand der WordPress-Funktion have_posts() geprüft, ob es Beiträge gibt. Ist dies der Fall, folgt ein echo – sprich: eine Ausgabe – des Textes »Ja, es gibt Beiträge«. Sie haben vermutlich bereits richtig erkannt, dass eine if/else-Anweisung bei dieser Schreibweise immer mit einem kurzen endif; beendet wird.

1.3.7   Wenn Sie tiefer in das Thema eintauchen möchten

In diesem Kapitel konnten Sie die wichtigsten Basics kennenlernen, um mit WordPress zu arbeiten. Sie werden später feststellen, dass viele Funktionen an unterschiedlichsten Stellen zum Einsatz kommen und Sie auch immer wieder auf gleichartige Funktionen zurückkommen können. Wenn Sie eine Handvoll solcher Funktionen beherrschen, Schleifen zumindest »lesen« können und in etwa wissen, was da vor Ihnen konkret passiert, ist das die halbe Miete und Sie kommen wacker durch Ihren Theme-Alltag. Wenn Sie neugierig und motiviert sind, sollten Sie jedoch ein entsprechendes Fachbuch konsultieren oder das Portal SelfPHP² besuchen, welches zahlreiche Ressourcen zum Thema für Sie bereithält.

¹ http://wpde.org/installation

² http://www.selfphp.info/

2   Theme-Struktur und Aufbau

Gute Themes in WordPress sind keineswegs auf die rein optische Gestaltung begrenzt. Auch wenn zugegebenermaßen die Optik als Erstes ins Auge springt. Ein gutes Theme ist aber in vielen Fällen ein leistungsfähiges Paket, das eine umfassende Funktionalität beinhaltet und zur Verfügung stellt.

Ein Theme besteht also nicht nur aus dem, was Sie an der Oberfläche sehen. Themes bestehen aus vielen Zeilen Code mit leistungsfähigen Funktionen und oftmals jeder Menge CSS und erweitern Ihre WordPress-Basis teilweise beträchtlich. Kostenlose Themes sehen zwar manchmal ganz nett aus, die meisten bieten aber nur eine minimale Funktionalität, für die essentiellen WordPress-Aufgaben.

Da Sie dieses Buch in Händen halten, ist davon auszugehen, dass Sie sich kein 08/15-Theme von der Stange wünschen, sondern selbst Hand anlegen möchten, um Ihre Website mit einem eigens programmierten Theme zu erstellen. Wenn Sie nun also die Entwickler-Neugier gepackt hat, sollten Sie sich die Theme-Maschinerie von WordPress etwas genauer anschauen. Woraus besteht ein Theme genau? Welche Dateien müssen vorhanden sein und wie sollten diese aufgebaut sein? Auf all diese Fragen erhalten Sie in diesem Kapitel Antworten.

Am klarsten wird die WordPress-eigene Theme-Struktur, wenn Sie in einem ersten Schritt das Standard-Theme von WordPress namens Twenty Thirteen etwas genauer unter die Lupe nehmen und grundlegend bearbeiten. Twenty Thirteen wird mit jeder neuen WordPress-Installation ausgeliefert.

Bild 2.1: Das Standard-Theme Twenty Thirteen.

2.1   Die Basis: Der Theme-Ordner