WordPress-Themes entwickeln

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

Gino Cremer, Adrian Lambertz

• Verlag: Franzis Verlag
• Jahr: 2013
• eBook-ISBN: 9783645221436
• Thema: Informatik
• Thema: Webprogrammierung

Viele Internetseiten werden mit WordPress umgesetzt, wobei man dem System nicht immer sofort ansieht, dass es mit WordPress läuft. Das liegt an den Themes. WordPress-Themes sind austauschbare Layoutvorlagen für WordPress-Seiten. Die Basis eines Themes bilden HTML5, CSS3, JavaScript und PHP: Die richtige Mischung schafft das optimale Theme. Wenn es richtig gut ist, können Sie es sogar auf diversen Marktplätzen zum Verkauf anbieten. Lernen Sie die Grammatik Ein WordPress-Theme folgt einem bestimmten Aufbau. Neben der Ordnerstruktur sind noch andere Konventionen wichtig. Sie alle gilt es zu kennen und zu beachten, wenn Sie ein eigenes Theme umsetzen. Dabei hilft Ihnen dieses Buch. Das notwendige Wissen in PHP bekommen Sie hier ebenfalls. Nicht das Rad neu erfinden Im Internet gibt es bereits viele vorhandene Themes für WordPress. Bei der Entwicklung eines eigenen Themes müssen Sie deswegen das Rad nicht neu erfinden, sondern können auf einem bereits vorhandenen Theme aufsetzen. Solche Themes werden als Child-Themes bezeichnet. Schritt für Schritt lernen Sie, wie Sie auf Basis eines vorhandenen Themes ein neues aufsetzen und die gewünschten Funktionen darin umsetzen. Quellcode für den Projektalltag Viele Elemente in einem Theme sind auf die eine oder andere Art auch in anderen Themes vorhanden. Ein eigenes Kapitel widmet sich der Wiederverwendung von sogenannten Snippets: Eine Facebook- oder Twitter-Integration zum Beispiel hat fast jede Webseite. Auch das Anbringen von Kommentaren gehört heute bei vielen WordPress-Seiten zum Standard. In praktischen Beispielen wird Ihnen der Einsatz solcher Snippets gezeigt. Damit erweitern Sie sehr schnell Ihr eigenes Theme.Aus dem Inhalt: • PHP-Grundwissen • Theme-Struktur und Aufbau • Child-Themes • Von der Vorlage zum Basis-Theme • Das Theme erweitern • Themes mit CSS3 gestalten • Fotos und Hintergründe • Hooks und Shortcodes • Die functions.php

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 wer...

Inhaltsverzeichnis

• Deckblatt
• Inhaltsverzeichnis
• 1. Grundlagen
• 2. Theme-Struktur und Aufbau
• 3. Child-Themes
• 4. Von der Vorlage zum Basis-Theme
• 5. Das Theme erweitern
• 6. Das Theme optisch aufwerten
• 7. Hooks, Shortcodes und die functions.php
• 8. Codeschnipsel (Snippets)
• 9. Seitentypen, Taxonomien und benutzerdefinierte Felder
• 10. Das Theme testen
• Stichwortverzeichnis