WordPress-Themes entwickeln
HTML5, CSS3, JavaScript und PHP: Praxiswissen und Quellcodes zum Entwurf von WordPress-Themes
Erschienen am 20. November 2013
271 Seiten
978-3-645-20230-5 (ISBN)
Beschreibung
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
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
Weitere Details
Weitere Ausgaben
Personen
Gino Cremer ist Geschäftsführer der auf Weblösungen spezialisierten Agentur Pixelbar aus dem belgischen Eupen. Er hat langjährige Erfahrung mit CMS-basierten Kundenprojekten, vornehmlich auf WordPress-Basis und ist ein Webdesigner der ersten Stunde. Zur Zeit arbeitet Gino Cremer auch als Dozent und Berater am WIFI Wien im Bereich Social Media und Webdesign.
Adrian Lambertz arbeitet als Webentwickler in der von Gino Cremer geführten Webagentur Pixelbar aus dem belgischen Eupen. Während seiner Ausbildung begann er sich massiv mit Wordpress auseinanderzusetzen und entwickelt heute moderne, kundenspezifische Wordpress-Websites nach neuesten Webstandards und -techniken.
Adrian Lambertz arbeitet als Webentwickler in der von Gino Cremer geführten Webagentur Pixelbar aus dem belgischen Eupen. Während seiner Ausbildung begann er sich massiv mit Wordpress auseinanderzusetzen und entwickelt heute moderne, kundenspezifische Wordpress-Websites nach neuesten Webstandards und -techniken.
Inhalt
- WordPress-Themes entwickeln
- Inhaltsverzeichnis
- 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
