1 Grundlagen
1.1 Grundkenntnisse und Voraussetzungen
1.1.1 Grundlegende WordPress-Kenntnisse sind notwendig
1.1.2 Eine laufende WordPress-Installation ist Voraussetzung
1.1.3 Der Einsatz von HTML und CSS
1.1.4 PHP-Kenntnisse sind von Vorteil
1.2 Grundlegende Begriffe
1.2.1 Sidebars
1.2.2 Widgets
1.2.3 Administrationsoberfläche und Dashboard
1.2.4 Unterschied zwischen Themes und Templates
1.3 PHP-Mini-Crash-Kurs
1.3.1 PHP in der Kurzvorstellung
1.3.2 Schreibweise von PHP
1.3.3 PHP-Funktion verstehen
1.3.4 Der Einsatz von Variablen
1.3.5 Schleifen oder Loops
1.3.6 if / else für einfache Entscheidungen
1.3.7 Wenn Sie tiefer in das Thema eintauchen möchten
2 Theme-Struktur und Aufbau
2.1 Die Basis: Der Theme-Ordner
2.2 Die wichtigsten Dateien und Templates
2.2.1 Aufbau und Struktur der index.php
2.2.2 Die wichtigsten Template-Dateien im Überblick
2.3 Die Template-Struktur von WordPress
2.3.1 Unterschiedliche Templates für jeden Anwendungszweck
2.3.2 ID und Titelform als Auswahlkriterium im Dateinamen
2.3.3 Reihenfolge der Template-Kaskade
2.4 CSS-Einbindung in Themes
2.5 Welchen Zweck erfüllen die CSS-Kommentare zu Beginn?
2.6 Der Loop unter der Lupe: Es werde Inhalt!
2.6.1 Allgemein und einfach: Die index.php
2.7 Zusammenfassung: So sieht ein Theme aus
3 Child-Themes
3.1 Risiken und Nebenwirkungen einer Bearbeitung
3.2 Child-Themes in der Anwendung
3.3 Ein Child-Theme aufbauen
3.3.1 Einen neuen Theme-Ordner erstellen
3.3.2 Per style.css: Child und Parent verknüpfen
3.3.3 CSS-Anweisungen aus dem Parent-Theme importieren
3.3.4 Einen Screenshot hinzufügen
3.3.5 Das Child-Theme aktivieren
3.4 Child-Theme-Templating für erfahrenere Nutzer
3.4.1 Das Template header.php in das Child-Theme übertragen
3.4.2 So lädt WordPress das neue Template aus dem Child-Theme
3.5 Templates bearbeiten mit Ihrem Child-Theme
3.6 Kontroverse Diskussion rund um Child-Themes
3.7 Der Unterschied zwischen Blank Themes und Frameworks
3.8 Blank Themes
3.8.1 Was macht ein gutes Blank Theme aus?
3.8.2 Die Installation
3.8.3 Die Einrichtung
3.8.4 Das eigene Theme aufbauen
3.9 Frameworks
3.9.1 Was macht ein gutes Framework aus?
3.9.2 Einzelne Frameworks im Vergleich
4 Von der Vorlage zum Basis-Theme
4.1 Von der statischen HTML-Seite zum dynamischen Theme
4.2 Eine Vorlage mit Boilerplate
4.3 Initializr: Die Vorlage online zusammenstellen
4.3.1 Initializr: Komplizierter Name, einfache Bedienung
4.3.2 Schritt 1: Pre-configuration
4.3.3 Schritt 2: Fine tuning
4.3.4 Schritt 3: Das fertige Gesamtpaket herunterladen
4.3.5 Aufbau und Struktur der Vorlage
4.4 Die statische Vorlage in WordPress einfügen
4.4.1 Theme-Ordner erstellen und Dateien hochladen
4.4.2 Aus index.html mach index.php
4.4.3 Dem Theme-Ordner eine style.css hinzufügen
4.4.4 Dem Theme einen Screenshot hinzufügen
4.4.5 Das Theme aktivieren
4.4.6 Das Theme aufrufen … und Pfade korrigieren
4.5 Das Theme aufsplitten und aufteilen
4.5.1 Bereiche und Aufteilung der Website bestimmen
4.5.2 Dateien erstellen und Code verteilen
4.6 Die header.php dynamisieren
4.6.1 Was sind Template-Tags?
4.6.2 Seitentitel und Meta-Description mit bloginfo()
4.6.3 Den Haupttitel Ihrer Website auslesen lassen
4.6.4 Den Haupttitel zusätzlich zur Startseite verlinken lassen
4.6.5 wp_head() und wp_footer() als Hook einsetzen
4.6.6 jQuery in Ihr Theme einbinden
4.7 Die index.php dynamisieren
4.7.1 Den Loop in die index.php integrieren
4.8 Das Theme widgetfähig machen
4.8.1 Sidebars in WordPress registrieren
4.8.2 Die Sidebar-Ausgabe im Theme platzieren
4.8.3 Die Fußleiste mit einer Sidebar ausstatten
4.9 Individuelle Menüs einsetzen
4.9.1 Warum auf individuelle Menüs setzen?
4.9.2 Erstellen eines neuen Menüs
4.9.3 Menüorte registrieren über die functions.php
4.9.4 Zuweisung des Menüs
4.9.5 Die Menüorte im Template platzieren
4.9.6 Vorteile dieser Lösung
4.10 Fazit und Ausblick
5 Das Theme erweitern
5.1 Kategorien ausgeben: category.php
5.1.1 Eine Kategorie der Menüleiste hinzufügen
5.1.2 Voraussetzung für eine Kategorieauflistung
5.1.3 Was gehört in eine Kategorieauflistung?
5.1.4 Den Titel der Kategorie hinzufügen
5.1.5 Die Kategoriebeschreibung ergänzen
5.1.6 Den Beiträgen ein Veröffentlichungsdatum hinzufügen
5.1.7 Den Namen des Autors hinzufügen
5.1.8 Das Beitragsbild in der Kategorieauflistung ausgeben
5.2 Das Beitragsdetail: single.php
5.2.1 Ausgabe des Beitragsbilds
5.2.2 Den Namen des Autors ausgeben
5.2.3 Den Beitragstitel ausgeben
5.2.4 Ausgabe der Hauptinhalte
5.2.5 Ausgabe der Tags
5.2.6 Einbau der Kommentarfunktion
5.2.7 Beenden der Schleife und Abschluss des Templates
5.3 Tags ausgeben und auflisten: tag.php
5.3.1 Aufbau und Inhalt der tag.php
5.3.2 Einen Beitrag mit Tags versehen
5.4 Statische Seiten: page.php
5.4.1 Aufbau und Inhalt der page.php
5.4.2 Überflüssige Funktionen entfernen
5.5 Die Kommentarfunktion einbinden
5.5.1 Gesamtaufbau der comments.php
5.5.2 Ausgabe des Templates auf der Website (Beitragsdetail)
5.5.3 Der Aufbau unter der Lupe
5.5.4 Eine Kommentar-Navigation einbauen
5.5.5 Das Kommentar-Formular ausgeben
5.6 Suchergebnisse optimieren mit search.php
5.6.1 Beispielhafter Aufbau der search.php
5.6.2 Weitere Ausgabemöglichkeiten im Loop
5.6.3 Abschluss des Templates search.php
5.6.4 Das Template testen
5.7 Weitere Templates für Ihr Theme
5.7.1 Individuelle Fehlerseiten: 404.php
5.7.2 Alle Beiträge eines Autors auflisten: author.php
5.8 Individuelle Templates
5.8.1 Einsatzgebiete von individuellen Templates
5.8.2 Praxis: »Angebote« und »News« getrennt layouten
5.8.3 Individuelle Templates über den Dateinamen festlegen
5.8.4 Seiten Templates zuweisen
6 Das Theme optisch aufwerten
6.1 Bringen Sie Farbe ins Spiel mit CSS
6.1.1 Links und Lauftext farblich anpassen
6.1.2 Den Hauptmenü-Balken umfärben
6.1.3 Links bei Hover umfärben
6.2 Fotos und Hintergründe verarbeiten
6.2.1 Bildschirmfüllende Hintergründe mit CSS3
6.2.2 Mit Deckung und Transparenz arbeiten
6.2.3 Weitere Hintergründe einarbeiten
6.3 Pimpen Sie Ihr Theme mit CSS3
6.3.1 Text und Titel formatieren
6.3.2 Fotos optisch aufwerten und positionieren
6.3.3 Elemente ausblenden mit CSS
6.3.4 Weitere interessante CSS3-Eigenschaften
6.4 Webfonts einbinden und nutzen
6.4.1 Google Fonts einbinden
6.4.2 Alternative Quellen für Webfonts
7 Hooks, Shortcodes und die functions.php
7.1 Was Sie in diesem Kapitel erwartet
7.2 Die Datei functions.php
7.2.1 Plug-ins vs. functions.php
7.2.2 Tipps zur functions.php
7.3 WordPress-Template-Tags oder auch Hooks
7.3.1 Wie funktionieren Hooks?
7.3.2 Filterhooks
7.3.3 Actionhooks
7.3.4 Vorteile von Hooks
7.3.5 Eigene WordPress-Hooks hinzufügen
7.4 Shortcodes
7.4.1 Wozu dienen Shortcodes?
7.4.2 Die Funktionsweise
7.4.3 Eigene Shortcodes erstellen
7.5 Zusammenfassung
8 Codeschnipsel (Snippets)
8.1 Eigene CSS- und Javascript-Dateien korrekt einbinden
8.2 Snippets, die Widgets erweitern
8.2.1 Shortcodes in Textwidgets ausführen
8.2.2 PHP in Textwidgets ausführen
8.2.3 Ungenutzte WordPress-Standardwidgets entfernen
8.3 Generelle Anpassungen am Inhalt
8.3.1 Facebook- und Twitter-Sharing-Leiste einfügen
8.3.2 Alle Links in Beiträgen in einem neuen Fenster öffnen
8.3.3 Wie bei Twitter: »vor XX Stunden veröffentlicht«
8.3.4 Dokumente aller Art innerhalb des Contents anzeigen
8.3.5 Youtube-Thumbnails eines Videos anzeigen
8.3.6 Das Ende eines Anreißers (the_excerpt) anpassen
8.3.7 Die Länge eines Anreißers anpassen
8.3.8 Erfassen, wie oft ein Artikel aufgerufen wurde
8.4 Benutzerfreundlichkeit erhöhen
8.4.1 Unter den Artikeln »Ähnliche Beiträge« anzeigen
8.4.2 TinyURL auf Wunsch anzeigen
8.4.3 QR-Code in der Druckversion hinzufügen
8.5 Kommentarsnippets
8.5.1 Das URL-Feld aus den Kommentaren entfernen
8.5.2 Links in Kommentaren in neuem Fenster öffnen
9 Seitentypen, Taxonomien und benutzerdefinierte Felder
9.1 Seitentypen (Post Types)
9.2 Was sind Taxonomien?
9.2.1 Benutzerdefinierte Felder: die Custom Fields
9.3 Eigene Seitentypen inklusive Taxonomien und benutzerdefinierten Feldern erstellen
9.3.1 Einen Seitentyp anlegen
9.3.2 Eigene Taxonomien erstellen
9.3.3 Benutzerdefinierte Felder hinzufügen
9.3.4 Die Ausgabe
9.3.5 Aufbauen der Detailansicht
10 Das Theme testen
10.1 PHP-Fehler beheben
10.2 Überprüfen Sie Ihre Template-Dateien
10.2.1 header.php
10.2.2 sidebar.php
10.2.3 footer.php
10.2.4 index.php
10.2.5 archive.php
10.2.6 page.php
10.2.7 single.php
10.2.8 comments.php
10.2.9 search.php
10.3 Validieren Sie Ihr HTML und CSS
10.3.1 Warum validieren?
10.3.2 Wie validieren?
10.4 Testen Sie das Theme in allen gängigen Browsern und auf verschiedenen Endgeräten
10.4.1 Welche Browser sollten getestet werden?
10.4.2 Ich habe Fehler gefunden, was nun?
10.5 Lassen Sie Ihre Freunde und Bekannten über Ihr Theme gucken
Stichwortverzeichnis
Sparen Sie sich die Mühe: Alle in diesem Buch vorgestellten Code-Beispiele können Sie bequem per »Copy & Paste« online beziehen unter www.wordpress-praxis.de/themes. Das erspart mühevolles Abschreiben aus dem Buch und verhindert zudem Flüchtigkeitsfehler.
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.
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
<html>
<head>
<title>Ein erstes PHP-Script</title>
</head>
<body>
Heute ist der <?php echo date("d.m.Y"); ?>
</body>
</html>
Charakteristisch für PHP sind der Start und das Ende der Anweisung. Dadurch weiß der Server genau, wann PHP-Anweisungen zum Einsatz kommen. <?php beginnt den PHP-Passus und ?> 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.
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:
<html>
<body>
<?php
function gibtext()
{
echo "Dieser Text wird ausgegeben.";
}
gibtext();
?>
</body>
</html>
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.
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):
<?php
$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.
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:
<?php
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.
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:
<?php
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?
<?php
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.
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 SelfPHP2 besuchen, welches zahlreiche Ressourcen zum Thema für Sie bereithält.
1 http://wpde.org/installation
2 http://www.selfphp.info/
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.
Jedes Theme besitzt in WordPress einen eigenen Ordner im Dateisystem, der über FTP recht einfach angesteuert werden kann. Im Falle des Themes Twenty Thirteen nennt sich dieser – erraten – twentythirteen und befindet sich im Ordner wpcontent/themes. Diese Ordner werden von WordPress einzeln ausgelesen und in der WordPress-Administrationsoberfläche unter »Themes« als eigenständige Themes entsprechend aufgelistet und dargestellt. Ein neuer Ordner ist daher die Basis und der Anfang eines jeden neuen Themes in WordPress. Doch schauen Sie sich nun den Inhalt des Ordners twentythirteen etwas genauer an.
Bild 2.2: Typische Verzeichnisstruktur für eine WordPress-Installation. In diesem Beispiel handelt es sich um eine lokale Installation.
Damit ein Theme als solches von WordPress erkannt wird, müssen neben einem eigenen Unterordner nur zwei Dateien vorhanden sein: Eine index.php und eine style.css. In der Praxis sind natürlich noch eine Handvoll weiterer Dateien sinnvoll, um wirklich produktiv arbeiten zu können. Aber rein technisch begnügt sich WordPress mit diesen zwei Dateien, um ein Theme als solches in Ihrer WordPress-Administrationsoberfläche zur Aktivierung freizugeben.
Das Theme Twenty Thirteen besteht schon aus sehr vielen Dateien und übertrifft die Mindestanforderungen bei weitem. Logisch, schließlich gilt das Standard-Theme ab Werk als sehr flexibel. Eine Reduktion auf das strikte Minimum würde den Anforderungen sicher nicht gerecht.
Eine einfache HTML-Vorlage, wie sie bei vielen kleineren Websites Anwendung findet, lässt sich mit vier grundlegenden Dateien umsetzen (alle Dateien werden in einem späteren Abschnitt noch genauer durchleuchtet):
• header.php: |
Stellt den Kopfbereich der Website |
• index.php: |
Bildet die Hauptseite und den Inhaltsbereich |
• footer.php: |
Stellt den Fußbereich der Website |
• style.css: |
Stellt alle CSS-Anweisungen zur Verfügung |
Diese vier Dateien – und zugegebenermaßen noch einige mehr – finden Sie auch im Ordner themes/twentythirteen. Die Datei index.php kann als die wichtigste Datei angesehen werden. Wenn Sie schon Websites in HTML umgesetzt haben, wissen Sie vielleicht, dass eine index.php (oder im Falle statischer Websites eine index.html) immer eine besondere Rolle spielt. Eine Index-Datei wird als Erstes aufgerufen und bildet die Hauptseite. Alle anderen Dateien, wie die header.php und die footer.php, werden im Falle von WordPress in diese Datei zusätzlich eingebunden. Im Laufe der Lektüre werden Sie noch zahlreiche andere Dateien kennenlernen, die hinzugefügt werden. So gesehen kann die index.php also mit einem Container verglichen werden, während Dateien wie die header.php und die footer.php wie Pakete hinzugefügt werden.
Öffnen Sie mit einem Editor Ihrer Wahl über eine FTP-Verbindung die Datei index.php. Sie finden diese Datei – wie alle anderen Dateien auch – im Ordner wp-content/themes/twentythirteen/index.php.
Bild 2.3: Der gesamte Inhalt der Datei index.php im Überblick. Umrandet und im Fokus: WordPress-Funktionen, die alle Inhalte zusammenstellen.
Wenn Sie die index.php des Themes Twenty Thirteen öffnen, werden Ihnen manche Anweisungen sicher schon bekannt vorkommen. Erinnern Sie sich an den PHP-Mini-Crash-Kurs in Kapitel 1.3 ab Seite 17? get_header() ist eine dieser typischen WordPress-Funktionen. Übersetzen könnte man die Bezeichnung get_header mit »hole dir den Header«. Entsprechend integriert diese Funktion auf praktische Art und Weise sämtliche Inhalte der Datei header.php in diese index.php.
Gleichermaßen funktioniert WordPress übrigens mit den beiden Funktionen am Ende des Dokuments: get_footer(); sorgt dafür, dass alle Inhalte aus der Datei footer.php integriert werden, während get_sidebar(); die Inhalte der Datei sidebar.php einbindet, um das notwendige HTML für eine Seitenleiste in Ihre index.php-Datei zu laden.
Sie benötigen keine Seitenleiste? Prima, in diesem Fall entfernen Sie einfach die Anweisung <?php get_sidebar(); ?>. Dann wird der Inhalt der sidebar.php nicht geladen und eingebunden. Einfach, nicht wahr?
Neben dieser Index-Datei gibt es im Hauptordner des Themes noch jede Menge weitere Template-Dateien, die darauf warten, von Ihnen entdeckt zu werden. Die folgende Auflistung gibt einen Überblick über die Funktionen der einzelnen Dateien.
In der Datei header.php befinden sich der Code des <head>-Bereichs Ihrer Website sowie der Beginn des <body>-Bereichs. Wenn Sie ein großes Bild im Kopfbereich Ihrer Website darstellen wollen, das auf jeder Seite angezeigt werden soll, können Sie es in die header.php setzen. Die Datei header.php wird – falls vorhanden – auf jeder Seite eingebunden und aufgerufen. Dadurch ist sie der ideale Ort für Informationen, die auf jeder Seite vorhanden sein sollen.
Gut zu wissen: Head- und Bodybereich einer Website
Jede HTML-Datei besteht aus einem Head- und einem Bodybereich. Während Inhalte im Headbereich nicht direkt sichtbar an die Besucher einer Website ausgeliefert werden, beinhaltet der »Dokumentkörper«, sprich: der Bodybereich, alle Inhalte, die der Besucher der Seite tatsächlich sehen soll. Betrachtet Ihr Seitenbesucher den »nackten« Quelltext, wird er natürlich auch den Head-Bereich erspähen, die Website-Ansicht als solche baut sich aber nur aufgrund des HTML-Konstruktes im Bodybereich auf. Der Head ist optimal geeignet für Meta-Informationen und Javascript- sowie CSS-Verlinkungen.
<html>
<head>
<title>Titel der Seite</title>
</head>
<body>
Dieser Text wird dem Besucher ausgegeben.
</body>
</html>
Auch die Datei footer.php wird auf jeder Seite aufgerufen und eingebunden. Dadurch ist sie nicht nur geeignet, um Ihrer gesamten Website eine visuelle Fußleiste für z. B. Copyright-Informationen hinzuzufügen. Sie bietet den idealen Abschluss, um alle HTML-Elemente zu schließen, die Sie in der header.php geöffnet haben. Sie haben Ihren Body-Bereich mit <body> in der header.php geöffnet? Dann müssen Sie den Bereich wieder schließen. Am besten in dieser footer.php, da diese auf jeder Seite am Ende aufgerufen wird.
Der Hamburger-Vergleich
Stellen Sie sich die beiden Dateien header.php und footer.php wie die zwei Hälften eines Hamburger-Brötchens vor. Die obere Hälfte bildet der Header, die untere der Footer. Das sind die Konstanten. Dazwischen findet man je nach Template die unterschiedlichsten »Inhaltszutaten«. Mal eine Kategorienauflistung, mal ein Beitragsdetail. Wie auch immer. Header und Footer bilden immer den Anfang und das Ende Ihrer Website.
Diese Datei wird aufgerufen, sobald ein Besucher den Inhalt einer statischen Seite anfordert. WordPress unterscheidet in der Administrationsoberfläche zwischen Beiträgen und Seiten. Die page.php ist Ihre Anlaufstelle, wenn Sie die Ausgabe einer Seite beinflussen möchten.
Wenn Sie indes steuern möchten, wie der Inhalt eines Beitrags ausgegeben werden soll, sind Sie bei der single.php goldrichtig.
Unterschied zwischen Beiträgen und Seiten
Die Beiträge bilden für gewöhnlich das Herz eines WordPress-Auftritts. In ihnen erscheinen die aktuellen Blog-Artikel meistens in umgekehrter chronologischer Reihenfolge, also die neusten zuerst. Archive, Tags oder Kategorien und weitere Widgets beziehen sich auf die Artikel-Beiträge und nicht auf angelegte Seiten. Sie können z. B. dazu dienen, die Beiträge in ganz unterschiedlicher Zusammensetzung (dynamisch) auszugeben, also zum Beispiel alle Beiträge der Kategorie Software oder alle Beiträge vom vorletzten Monat. Auch die Kommentarfunktion für die Leser erscheint unterhalb der Beiträge. Falls ein RSS-Feed für den Blog angelegt wird, gibt er die Beiträge aus, nicht aber die Seiten.
Die Seiten hingegen werden für dauerhafte, statische Inhalte angelegt. Einfache Beispiele sind die Über-uns-und die Impressum-Seite. Der Nutzen der Seite wird aber kaum eingeschränkt, es können auch umfangreiche Workshops oder Bildergalerien dort abgelegt werden. Häufig werden die Seiten in die Hauptnavigation der Website aufgenommen.
Seiten können im Gegensatz zu Beiträgen in WordPress übrigens hierarchisch verschachtelt werden. So kann eine Seite als Elternelement ausgewiesen werden, während andere als Kindelemente dieser Seite untergeordnet werden. So lassen sich mit Seiten und verschachtelten Elementen klassische Website-Strukturen realisieren. Das ist mit Beiträgen so direkt nicht möglich.
Die sidebar.php ist eine optionale Datei. Sie kann eingesetzt werden, um eine Seitenleiste in Ihr Theme einzubetten. Sie möchten eine Seitenleiste nur in der Einzelansicht eines Beitrags anzeigen lassen, nicht aber auf einer statischen Seite? Rufen Sie über die Funktion get_sidebar(); die Seitenleiste nur in der Datei single.php auf, nicht aber in der Datei page.php. Das war’s.
Die Datei functions.php kann all Ihre Theme-spezifischen Funktionen beherbergen. Zwar ist die Datei nicht zwingend notwendig, damit ein Theme funktioniert, doch wird kaum ein Theme ohne diese Datei auskommen wollen. Sie werden im späteren Verlauf der Lektüre noch feststellen, wie wichtig diese Datei für die Erweiterung Ihres Themes ist.
Plug-ins vs. Themes
Während Plug-ins bei WordPress einen allgemeinen Einfluss auf das gesamte System nehmen (unabhängig vom genutzten Theme), können Sie Ihr Theme mit Funktionen anreichern, die nur wirken, wenn Ihr Theme tatsächlich genutzt wird. So können Sie – vornehmlich dank der vorhin erwähnten functions.php – Ihr Theme um Funktionen erweitern, die sonst nur Plug-ins vorbehalten wären. An dieser Stelle sollte jedoch beachtet werden, dass ein Theme in erster Linie ein Theme bleiben soll und der Anwender mittels Plug-ins selbst entscheiden sollte, welche Funktionen er wünscht und welche nicht. Viele kommerzielle Themes wirken in dieser Hinsicht funktionsüberladen und sind entsprechend langsam. Halten Sie Ihr Theme so schlank wie möglich.
Diese Datei wird für Kategorieauflistungen genutzt und aufgerufen. Ruft ein Besucher eine Kategorie auf, möchte er in der Regel alle Beiträge einsehen, die dieser Kategorie zugeordnet sind. Mit dieser Datei nehmen Sie Einfluss auf die Ausgabe dieser Auflistung.
Identisch mit der category.php, nur auf Tags gemünzt.
Was sind Kategorien und Tags?
Im Falle von Blogs sind Kategorien und Schlagwörter (Tags, wie sie oftmals genannt werden) eine absolute Pflicht. Kategorien und Tags erlauben es, Beiträge mit wichtigen Zusatzinformationen zu spicken, zu ordnen, zu klassifizieren. Während Kategorien dazu dienen, einen Beitrag grob einzuordnen, zielen Tags eher darauf ab, den Inhalt selbst zu beschreiben.
Typisch für Blogs ist die Ausgabe der Artikel in chronologischer Reihenfolge. Blogs besitzen hierzu passend nach Monaten und Jahren gestaffelte Beitragsarchive. Auf diese Form der Auflistung kann mittels der archive.php Einfluss genommen werden.
Ähnlich wie die category.php