WordPress-Themes entwickeln E-Book

Gino Cremer

• Herausgeber: Franzis Verlag
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Deutsch
• Veröffentlichungsjahr: 2013

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

Leseprobe

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

Bequem und schnell: Alle Code-Beispiele online beziehen!

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.

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.