Alle Kapitel aufklappen
Alle Kapitel zuklappen
Liebe Leserin, lieber Leser,
2
Für wen ist dieses Buch?
25
Was Sie bereits wissen sollten
25
Neues in dieser 6. Auflage
27
Die Website zum Buch: »einstieg-in-wp.de«
27
TEIL I WordPress kennenlernen
29
1 WordPress – der Motor für Ihre Website
31
1.1 Das Web ist ein weltweites Gewebe aus Hyperlinks
31
1.1.1 Das Web besteht aus Webseiten und Hyperlinks
32
1.1.2 Verwirrende Begriffe: »Homepage«, »Webseite« und »Website«
33
1.1.3 Webseiten werden auf einem »Webspace« gespeichert
34
1.1.4 Webseiten bestehen aus »Quelltext«, und WordPress schreibt ihn für Sie
34
1.1.5 »Responsives Webdesign«: Webseiten passen sich ihrer Umgebung an
36
1.2 WordPress vereinfacht das Veröffentlichen im Web
37
1.2.1 Ein Content-Management-System (CMS) erleichtert das Webpublishing
37
1.2.2 Ein Blogtool ist ein CMS mit einfacher Bedienung und viel Interaktion
38
1.2.3 WordPress ist Blogtool und vollwertiges CMS
38
1.3 Der Unterschied zwischen WordPress und WordPress.com
39
1.3.1 »wordpress.org«: WordPress auf dem eigenen Webspace betreiben
40
1.3.2 »WordPress.com« ist ein kommerzielles Angebot der Firma Automattic
41
1.3.3 In diesem Buch geht es um WordPress auf einem eigenen Webspace
43
1.4 Das »Projekt Gutenberg«: WordPress erfindet sich neu
43
2 Ihre Website vorbereiten: Planung, Domain und Webspace
47
2.1 Die Rahmenbedingungen: Ziele, Zeit und Zaster
47
2.2 Der rote Faden: Inhalt, Gestaltung, Funktionen und Technik
48
2.2.1 Inhalt ist der Grund, Ihre Website zu besuchen
49
2.2.2 Gestaltung: Themes bestimmen das Aussehen Ihrer Website
50
2.2.3 Funktionen: Plugins erweitern die Fähigkeiten von WordPress
51
2.2.4 Technik: Domain und Webspace für Ihre Website
52
2.3 Domain: So finden Sie einen passenden Namen
52
2.3.1 Der Aufbau von Domain-Namen: »www.mein-name.de«
52
2.3.2 Einen Domain-Namen auswählen: »mein-name.tld«
53
2.4 Webhosting: So finden Sie passenden Webspace
54
2.4.1 Die technischen Voraussetzungen für einen WordPress-Webspace
55
2.4.2 HTTPS: Die Verschlüsselung mit einem SSL-Zertifikat
55
2.4.3 Einfach fragen: Kann man den Webspace kostenlos testen?
57
2.4.4 Preise: Tipps zum Vergleichen von Hosting-Angeboten
57
2.4.5 Einige Beispiele für Webhosting mit WordPress
58
3 WordPress installieren
61
3.1 Zum Testen: WordPress ausprobieren mit TasteWP.com
61
3.1.1 Schritt 1: TasteWP.com – WordPress installieren mit zwei Klicks
62
3.1.2 Schritt 2: Ein Blick auf das frisch installierte WordPress
63
3.2 Die bequeme Installation: WordPress vom Webhoster – vorinstalliert oder mit wenigen Klicks
64
3.2.1 Schlüsselfertig: Ein vorinstalliertes WordPress
65
3.2.2 Halbautomatisch: WordPress mit wenigen Klicks installieren
65
3.3 Die manuelle Installation: WordPress selbst auf einem Online-Webspace installieren
67
3.3.1 Schritt 1: WordPress herunterladen und entpacken
68
3.3.2 Schritt 2: Eine FTP-Verbindung zum Webspace herstellen
69
3.3.3 Schritt 3: WordPress-Dateien per FTP auf den Webspace kopieren
70
3.3.4 Schritt 4: Das Installationsprogramm von WordPress aufrufen
72
3.3.5 Schritt 5: Die Zugangsdaten für die Datenbank eingeben
74
3.3.6 Schritt 6: Titel der Website eingeben und Administrator anlegen
76
3.4 Die Offline-Installation: WordPress auf Ihrem eigenen Computer installieren
80
3.4.1 Mit einem lokalen WordPress werden Sie quasi selbst zum Webhoster
80
3.4.2 »Local for WP«: WordPress auf Mausklick, Webspace inklusive
81
4 Das Backend von WordPress kennenlernen
83
4.1 WordPress besteht aus »Frontend« und »Backend«
83
4.1.1 Das »Frontend« ist die Fassade der Website nach außen
84
4.1.2 Das »Backend« ist die Verwaltungsabteilung für die Website
85
4.2 Das »Backend« von WordPress im Überblick
87
4.2.1 »Admin-Toolbar«: Die Werkzeugleiste am oberen Bildschirmrand
88
4.2.2 Die »Menüleiste« ist die Schaltzentrale im Backend
89
4.2.3 Das »Dashboard« – alles Wichtige auf einen Blick
90
4.3 Das Menü »Einstellungen« im Überblick
91
4.4 »Einstellungen • Allgemein«: Titel der Website & Co.
92
4.4.1 Der Name für Ihre Website: »Titel der Website« und »Untertitel«
94
4.4.2 Allgemeine Einstellungen für Zeit, Datum und Sprache der Seite
95
4.5 »Einstellungen • Lesen«: Beiträge, Newsfeed und Suchmaschinen
96
4.6 »Einstellungen • Permalinks«: Aussagekräftige URLs
98
4.6.1 Der Aufbau einer Webadresse (URL)
99
4.6.2 »Gebräuchliche Einstellungen« für Permalinks und Archive
100
4.7 Das Menü »Benutzer«: Ihr Benutzerprofil im Überblick
103
4.7.1 »Persönliche Optionen«: Farbschema für das Backend und mehr
104
4.7.2 Der Name der User: Der Bereich »Name« im Benutzerprofil
105
4.7.3 »Kontaktinfo«, »Über Dich« und Passwort ändern
107
TEIL II Inhalte erstellen und gestalten
111
5 Die ersten Seiten und Beiträge für Ihre Website
113
5.1 Der Unterschied zwischen Beiträgen und Seiten
114
5.1.1 »Beiträge« sind der Blog und sie werden rückwärts chronologisch ausgegeben
114
5.1.2 »Seiten« sind für statische Inhalte
116
5.2 Das Menü »Seiten • Alle Seiten« im Überblick
116
5.3 Den Block-Editor kennenlernen mit der »Beispiel-Seite«
118
5.3.1 Die »Beispiel-Seite« im Block-Editor bearbeiten
118
5.3.2 Nur beim ersten Besuch: »Willkommen beim Block-Editor«
118
5.3.3 Überblick: Der Block-Editor besteht aus drei Bereichen
119
5.3.4 Wichtige Werkzeuge: »Block-Werkzeugleiste« und »Block-Inspektor«
121
5.3.5 Die »Listenansicht« zeigt die Block-Struktur der Seite
122
5.3.6 Die »Beispiel-Seite« in den Papierkorb verschieben
123
5.4 Die ersten eigenen Seiten erstellen: »Über mich« und »Kontakt«
124
5.4.1 Eine neue Seite erstellen
124
5.4.2 Schritt 1: Den Titel der Seite eingeben
126
5.4.3 Schritt 2: Der erste Block im Inhaltsbereich – ein ganz normaler Absatz
127
5.4.4 Schritt 3: Einen zweiten Absatz-Block einfügen
128
5.4.5 Schritt 4: Die Seite »Über mich« veröffentlichen
130
5.4.6 Die obere Werkzeugleiste hat sich nach der Veröffentlichung geändert
131
5.4.7 Die Zusammenfassung in der Seitenleiste »Einstellungen«
132
5.4.8 Die neue Seite im Frontend betrachten
133
5.4.9 Übung: Die Seite »Kontakt« erstellen und veröffentlichen
134
5.5 Das Menü »Beiträge • Alle Beiträge« im Überblick
136
5.6 Die ersten eigenen Beiträge erstellen
138
5.6.1 Den ersten neuen Beitrag erstellen: »Der Block-Editor«
138
5.6.2 Einen zweiten Beitrag erstellen: »Blöcke auswählen per Schrägstrich«
140
5.7 Beiträge im Frontend: Beitragsseite und Einzelansicht
141
5.7.1 Auf der Beitragsseite werden alle Beiträge ausgegeben
142
5.7.2 Jeder Beitrag hat eine Einzelansicht mit eigenem Permalink
143
5.8 Eine Website mit individueller Start- und Beitragsseite
144
5.8.1 Übersicht: WordPress mit statischer Startseite und Beitragsseite
144
5.8.2 Standardeinstellung: Die Homepage zeigt die letzten Beiträge
145
5.8.3 Schritt 1: »Willkommen« – eine neue Seite für die Startseite erstellen
145
5.8.4 Schritt 2: »Blog« – eine neue Seite für die Beitragsseite erstellen
146
5.8.5 Schritt 3: Startseite und Beitragsseite in den Einstellungen zuweisen
147
5.9 Die Reihenfolge der Seiten festlegen
149
5.9.1 Die Übersicht der statischen Seiten in »Seiten • Alle Seiten«
149
5.9.2 »QuickEdit« enthält nützliche Abkürzungen
150
5.9.3 Die Reihenfolge der Seiten im Menü »Seiten • Alle Seiten«
150
5.9.4 Die Reihenfolge der Seiten gilt auch in der Navigation
152
5.10 Know-how: Verschiedene Seitentypen in WordPress
153
6 Texte schreiben und den Block-Editor kennenlernen
157
6.1 Schreiben im Web für Menschen
158
6.1.1 Wie Menschen Texte lesen
158
6.1.2 Webseiten werden nicht gelesen, sondern überflogen
159
6.2 Los geht’s: Texte bearbeiten im Block-Editor
159
6.3 Die Block-Werkzeugleiste kennenlernen
160
6.3.1 Die Block-Werkzeugleiste wird automatisch ein- und ausgeblendet
161
6.3.2 Blöcke verschieben mit der Block-Werkzeugleiste
161
6.3.3 Weitere Befehle in der Block-Werkzeugleiste bei Text-Blöcken
161
6.3.4 Das 3-Punkte-Menü »Optionen« in der Block-Werkzeugleiste
163
6.4 Verlinken: Hyperlinks im Block-Editor erstellen
164
6.4.1 Einen externen Hyperlink erstellen
164
6.4.2 Einen internen Hyperlink erstellen
166
6.4.3 Die Optionen zur Bearbeitung von Hyperlinks
167
6.5 Der »Block-Inspektor« in der Seitenleiste »Einstellungen«
168
6.5.1 Der Aufbau des Block-Inspektors
169
6.5.2 Das Design-Werkzeug »Farbe« in Aktion
170
6.5.3 Das 3-Punkte-Menü »Farbe-Optionen«: 1. Änderungen zurücksetzen
171
6.5.4 Das 3-Punkte-Menü »Farbe-Optionen«: 2. Optionen einblenden
172
6.5.5 Schrift gestalten mit dem Design-Werkzeug »Typografie«
172
6.5.6 Das 3-Punkte-Menü »Typografie-Optionen« auf einen Blick
173
6.6 Der »Block-Inserter« zum Hinzufügen von Blöcken
174
6.6.1 Den »Block-Inserter« kennenlernen
174
6.6.2 Die wichtigsten Blöcke auf einen Blick
176
6.7 Übersichtlich: Texte mit Überschriften strukturieren
176
6.7.1 Blöcke für Überschriften im Text einfügen
177
6.7.2 H1 bis H6: Auf Webseiten gibt es sechs Überschriftebenen
178
6.7.3 Übung: Eine Quellenangabe unterhalb des Textes erstellen
180
6.8 Unfallhilfe: »Revisionen« für Beiträge und Seiten
181
6.9 Tipps & Tricks zum effektiven Umgang mit dem Block-Editor
182
6.9.1 Die »Listenansicht« hilft, den Überblick zu bewahren
183
6.9.2 Die Block-Werkzeuge in der oberen Werkzeugleiste fixieren
184
6.9.3 »ESC«, »Backspace«, »Enter« – Blöcke blitzschnell löschen
185
6.10 Den Block-Editor einrichten: Ansichten und Voreinstellungen
186
6.10.1 Die Optionen im Bereich »Ansicht«
187
6.10.2 Die Optionen im Bereich »Editor«
188
6.10.3 Die Optionen im Bereich »Werkzeuge«
188
6.10.4 Die Optionen im Bereich »Voreinstellungen«
188
7 Die Mediathek: Bilder und Galerien einfügen
191
7.1 Schnelldurchgang: Ein Bild auf »Über mich« einfügen
192
7.1.1 Vorbereitung: »Einstellungen • Medien«: Die Bildgrößen überprüfen
193
7.1.2 Schritt 1: Einen Block »Bild« einfügen auf der Seite »Über mich«
194
7.1.3 Schritt 2: Ein Bild einfügen mit dem Block »Bild«
195
7.1.4 Schritt 3: Die Optionen für einen Bild-Block im Block-Inspektor
197
7.2 So optimieren Sie Bilder für Ihre Website
199
7.2.1 Beispiel: Ein Foto vor und nach der Optimierung
199
7.2.2 Umbenennen: Einen informativen Dateinamen wählen
200
7.2.3 Zuschneiden: Den Bildausschnitt optimieren
200
7.2.4 Skalieren: Die Bildgröße optimieren
200
7.2.5 Komprimieren: Die Dateigröße optimieren
201
7.3 Die Mediathek von WordPress im Überblick
201
7.3.1 Dateien hochladen direkt in der Mediathek
202
7.3.2 Die Listenansicht in der Mediathek: Kleine Vorschau, viel Information
203
7.3.3 Die Gridansicht in der Mediathek: nur die Vorschaubilder
204
7.3.4 Details für Bilder: Titel, Alt-Text, Beschriftung und Beschreibung
204
7.3.5 Die Detailinfos sind in Listen- und Gridansicht unterschiedlich
205
7.4 Ein Bild aus der Mediathek im Block-Editor einfügen
208
7.4.1 Schritt 1: Einen neuen Beitrag mit einem Block »Bild« erstellen
208
7.4.2 Schritt 2: »Medien hinzufügen« – ein Bild aus der Mediathek einfügen
209
7.4.3 Die Alternative: Bilder einfügen mit dem Block-Inserter
211
7.5 Die Block-Werkzeugleiste für den Bild-Block im Detail
213
7.5.1 Die Block-Werkzeugleiste für Bilder auf einen Blick
213
7.5.2 Die Optionen zur »Ausrichtung« von Bildern
214
7.5.3 Bilder verlinken: URL, Bilddatei oder eine einfache Lightbox
215
7.5.4 »Zuschneiden«: Ein Bild bearbeiten mit der Block-Werkzeugleiste
218
7.6 Beitragsbilder sind ganz besondere Bilder
219
7.6.1 Beitragsbilder erscheinen in der Seitenleiste »Einstellungen • Beitrag«
220
7.6.2 Ein Beitragsbild für einen Beitrag festlegen
220
7.7 Mehrere Bilder: Eine Galerie erstellen und bearbeiten
221
7.7.1 Schritt 1: Einen neuen Beitrag mit einem Block »Galerie« erstellen
222
7.7.2 Schritt 2: Bilder zur Galerie hinzufügen
223
7.7.3 Schritt 3: »Galerie bearbeiten« – die Reihenfolge der Bilder ändern
224
7.7.4 Schritt 4: Die Einstellungen für den Block »Galerie« anpassen
226
7.8 Bildbearbeitung: Bilder online in der Mediathek bearbeiten
228
7.8.1 Die Seite »Dateianhang-Details« zum Bearbeiten eines Bildes
228
7.8.2 »Skalieren«: Zuerst die Bildgröße verändern
229
7.8.3 »Zuschneiden«: Einen Teil des Bildes entfernen
230
8 Multimedia: Audio und Videos einfügen
235
8.1 Audiodateien aus der Mediathek einbinden
235
8.1.1 Schritt 1: Einen Beitrag mit dem Block »Audio« erstellen
236
8.1.2 Schritt 2: Eine MP3-Datei in einen Audio-Block hochladen
237
8.1.3 Audiodateien aus der Mediathek einbinden mit dem Block-Inserter
239
8.2 Videodateien aus der Mediathek einbinden
240
8.2.1 Eine Videodatei mit dem Block »Video« hochladen und einfügen
240
8.2.2 Videodateien aus der Mediathek einbinden mit dem Block-Inserter
242
8.3 Externe Medien datenschutzkonform einbetten
243
8.3.1 Einbettungen in WordPress – extrem bequem und ein Problem
243
8.3.2 Die Lösung: Ein Plugin wie »Embed Privacy«
244
9 Mit Beiträgen wird WordPress dynamisch
247
9.1 Beiträge, Kategorien und Schlagwörter
248
9.1.1 Der Unterschied zwischen Kategorien und Schlagwörtern
248
9.1.2 Die URLs von Archivseiten für Kategorien und Schlagwörter
249
9.2 Kategorien erstellen und verwalten
250
9.2.1 Das Menü »Beiträge • Kategorien« in der Übersicht
250
9.2.2 Kategorien erstellen im Menü »Beiträge • Kategorien«
251
9.2.3 Kategorien zuweisen: im Block-Editor oder per »QuickEdit«
252
9.2.4 Kategorien sind im Frontend ein Link zur Archivseite
254
9.3 Schlagwörter erstellen und verwalten
256
9.3.1 Schlagwörter für Beiträge erstellen und zuweisen
256
9.3.2 Die Alternative: Schlagwörter zuweisen mit der Funktion »QuickEdit«
259
9.3.3 Schlagwörter verwalten: Das Menü »Beiträge • Schlagwörter«
259
9.4 Die neuesten Beiträge dynamisch im Frontend ausgeben
261
9.4.1 Den Block »Neueste Beiträge« im Block-Editor einfügen
261
9.4.2 Den Block »Neueste Beiträge« konfigurieren und gestalten
262
9.5 Weiterlesen-Links erstellen mit dem Block »Mehr«
263
9.5.1 Der Block »Mehr« erzeugt einen Weiterlesen-Link
264
9.5.2 Ein Weiterlesen-Link für die bereits vorhandenen Beiträge erstellen
265
10 Layout: Inhalte gestalten mit dem Block-Editor
269
10.1 Der Block »Gruppe«: Basis-Baustein für Layouts
270
10.1.1 Schritt 1: Die zu gestaltenden Blöcke markieren und gruppieren
270
10.1.2 Schritt 2: Eine farbliche Gestaltung für den Gruppe-Block
271
10.1.3 Schritt 3: Abstände definieren mit dem Design-Werkzeug »Größe«
273
10.1.4 Optional: Rand, Radius und Schatten definieren
274
10.1.5 Der Gruppe-Block und seine Varianten »Zeile«, »Stapel« und »Raster«
275
10.2 Layouts können drei verschiedene Breiten haben
277
10.3 Der Block »Cover«: Text über einem Bild
278
10.3.1 Schritt 1: Einen Cover-Block mit Bild und Text hinzufügen
279
10.3.2 Schritt 2: Die Einstellungen für den Cover-Block anpassen
280
10.4 Nebeneinander: Der Block »Medien und Text«
280
10.5 Der Block »Buttons«: Call-to-Action für Besuchende
282
10.5.1 Der Block »Buttons« enthält den Block »Button«
282
10.5.2 Buttons gestalten und beschriften
283
10.5.3 Buttons verlinken
283
10.5.4 Der Block »Buttons« kann mehrere Buttons enthalten
284
10.5.5 Buttons können auch in anderen Blöcken verwendet werden
285
10.6 Ein komplexes mehrspaltiges Layout mit »Spalten«, »Stapel« und »Gruppe«
285
10.6.1 Das Layout-Beispiel auf einen Blick
285
10.6.2 Schritt 1: Mehrere Blöcke mit einem Stapel-Block gruppieren
287
10.6.3 Schritt 2: Den Stapel-Block duplizieren und die Inhalte anpassen
288
10.6.4 Schritt 3: Stapel mit dem Block »Spalten« nebeneinanderstellen
289
10.6.5 Schritt 4: Den Spalten-Block und die beiden Stapel gestalten
290
10.7 »Sperren«: Blöcke vor Verschieben und Entfernen schützen
291
11 »Vorlagen«: Anpassbare Fertig-Layouts für Abschnitte und Seiten
295
11.1 »Vorlagen« sind gespeicherte Block-Layouts zum Einfügen und Anpassen
295
11.1.1 Das Register »Vorlagen« im Block-Inserter
296
11.1.2 Die Ansicht »Alle Vorlagen erkunden« ist übersichtlicher
297
11.1.3 Viele Block-Themes bringen eigene Vorlagen mit
298
11.2 Eine Vorlage auf der Seite »Über mich« einfügen und anpassen
298
11.2.1 Schritt 1: Eine Vorlage im Block-Inserter suchen und einfügen
299
11.2.2 Schritt 2: Die Block-Struktur der eingefügten Vorlage kennenlernen
300
11.2.3 Schritt 3: Die eingefügte Vorlage anpassen
300
11.3 »Business Homepage«: Eine Vorlage für die Startseite
302
11.3.1 Schritt 1: Eine Vorlage für die Startseite suchen und einfügen
302
11.3.2 Schritt 2: Die Vorlage »Business Homepage« kennenlernen
304
11.3.3 Schritt 3: Die Vorlage »Unternehmens-Homepage« anpassen
305
11.3.4 Schritt 4: Die Seite im Frontend ohne den Titel anzeigen
306
11.4 Eigene Vorlagen erstellen und speichern
307
11.4.1 Schritt 1: Ein eigenes Layout als Vorlage abspeichern
308
11.4.2 Schritt 2: Eine eigene Vorlage einfügen und anpassen
309
11.5 Synchronisierte Vorlagen: Ein Original, viele Kopien
310
11.5.1 Schritt 1: Eine synchronisierte Vorlage erstellen
310
11.5.2 Schritt 2: Eine synchronisierte Vorlage in ein Dokument einfügen
311
11.5.3 Schritt 3: Das Original einer synchronisierten Vorlage bearbeiten
312
11.5.4 »Loslösen«: Synchronisierte Vorlage vom Original trennen
313
11.6 Synchronisierte Vorlagen mit Überschreibungen
314
12 Kommentare: Interaktion mit Besuchern
317
12.1 Die Kommentarfunktion kennenlernen
317
12.1.1 Einen neuen Kommentar erstellen
318
12.1.2 Neuer Kommentar – Benachrichtigung per E-Mail
320
12.1.3 Neue Kommentare – Benachrichtigung im Backend
321
12.2 Kommentare verwalten: Genehmigen, löschen etc.
322
12.2.1 Das Menü »Kommentare« im Überblick: Die Verwaltungszentrale
322
12.2.2 Kommentare kommentieren: Auf einen Kommentar antworten
324
12.3 Das Menü »Einstellungen • Diskussion«
326
12.3.1 »Einstellungen • Diskussion«, Teil 1: Grundlegende Einstellungen
326
12.3.2 »Einstellungen • Diskussion«, Teil 2: Moderation von Kommentaren und Spam
328
12.3.3 »Einstellungen • Diskussion«, Teil 3: Avatare
329
12.4 Kommentare für einzelne Beiträge oder Seiten deaktivieren
332
12.4.1 Für einzelne Beiträge oder Seiten mit der Funktion »QuickEdit«
332
12.4.2 Für einzelne Beiträge oder Seiten im Bereich »Diskussion« im Editor
333
12.5 Die Kommentarfunktion von WordPress deaktivieren
333
12.6 Pingbacks – Vernetzung mit anderen Blogs
334
TEIL III Themes: Das Design Ihrer Website
337
13 Auf der Suche nach dem richtigen Theme
339
13.1 Das Theme-Verzeichnis von WordPress
339
13.1.1 Die Startseite des Theme-Verzeichnisses
340
13.1.2 Jedes Theme hat eine eigene Detailseite
340
13.1.3 So installieren Sie ein Theme aus dem Theme-Verzeichnis
342
13.2 Der Unterschied zwischen klassischen Themes und Block-Themes
344
13.2.1 Klassische Themes haben zur Anpassung einen »Customizer«
344
13.2.2 Alle Block-Themes werden mit dem »Website-Editor« angepasst
345
13.2.3 Sollten Sie ein klassisches Theme oder ein Block-Theme nehmen?
346
13.3 Block-Themes: Die Zukunft von WordPress
346
13.3.1 Twenty Twenty-Three ist wie eine leere Leinwand
347
13.3.2 Twenty Twenty-Four ist ein wirklich gutes Block-Theme
348
13.3.3 Die Block-Themes von Anders Norén
349
13.3.4 »Ollie«: Ein Block-Freemium-Theme mit sehr guten Vorlagen
350
13.3.5 »Rockbase«: Ein kommerzielles Block-Theme
351
13.4 Klassische Themes: Traditionell und bewährt
352
13.4.1 Kostenlose klassische Themes im Theme-Verzeichnis
352
13.4.2 Klassische Freemium-Themes: Kadence, Astra und GeneratePress
352
13.4.3 Das Mehrzweck-Theme »Divi« von Elegant Themes
354
13.4.4 Themes von einem Marktplatz wie »ThemeForest«
354
13.5 Tipps zur Auswahl von WordPress-Themes
355
13.5.1 Worauf Sie bei Themes achten sollten
355
13.5.2 WordPress-Themes haben unterschiedliche Vertriebsmodelle
356
13.5.3 Die Antwort auf die Frage »Welches Theme ist das?«
357
14 Block-Themes anpassen mit dem Website-Editor: 1. Header, Footer und Navigation
359
14.1 Die Online-Demo von Twenty Twenty-Five
360
14.2 Den Website-Editor kennenlernen
361
14.2.1 Der Website-Editor ist nach dem Start im »Browse-Modus«
362
14.2.2 Der Website-Editor im »Bearbeiten-Modus« zum Bearbeiten einer Seite
364
14.3 Dem Header eine andere Vorlage zuweisen
365
14.3.1 Den Header im Website-Editor bearbeiten
365
14.3.2 Den Header durch eine andere Header-Vorlage ersetzen
366
14.3.3 Der neue Header gilt für die gesamte Website
366
14.3.4 Praktisch: Man kann alle Änderungen am Header zurücksetzen
367
14.4 Die Hauptnavigation im Header anpassen
368
14.4.1 Eine Navigation besteht aus einem Block »Navigation« und einem Navigationsmenü
369
14.4.2 Vorbereitung: Alle erforderlichen Seiten erstellen und veröffentlichen
369
14.4.3 Schritt 1: Das bereits vorhandene Navigationsmenü umbenennen
370
14.4.4 Schritt 2: Die »Seitenliste« aus dem Navigationsmenü entfernen
371
14.4.5 Schritt 3: Die wichtigsten Seitenlinks zum Menü hinzufügen
373
14.4.6 Schritt 4: Die mobile Navigation im Frontend
375
14.5 Dem Footer eine andere Vorlage zuweisen
376
14.5.1 Schritt 1: Den Footer zur Bearbeitung im Website-Editor öffnen
376
14.5.2 Schritt 2: Den Footer durch eine andere Footer-Vorlage ersetzen
377
14.6 Eine Navigation mit rechtlichen Pflichtlinks im Footer einfügen
379
14.6.1 Schritt 1: Einen Navigationsblock im Footer einfügen
379
14.6.2 Schritt 2: Ein Navigationsmenü mit den Pflichtlinks erstellen
380
14.6.3 Schritt 3: Das Navigationsmenü immer sichtbar machen
381
14.6.4 Schritt 4: Das Navigationsmenü für den Footer umbenennen
382
15 Block-Themes anpassen mit dem Website-Editor: 2. Stile und Templates
385
15.1 »Stile«: Die gesamte Website gestalten ohne Code
385
15.1.1 Der Bereich »Stile« im Browse-Modus des Website-Editors
386
15.1.2 Die Seitenleiste »Stile« im Bearbeiten-Modus
387
15.1.3 »Stile • Typografie«: Schriftgestaltung für die gesamte Website
389
15.1.4 »Stile • Farben«: Paletten und Farben für Elemente global gestalten
390
15.1.5 »Stile • Layout«: Breite für Inhalte und Innenabstände global gestalten
391
15.1.6 »Stil • Blöcke« und »Stilbuch«: Einzelne Blöcke global gestalten
392
15.2 Eigene Farben für die Theme-Palette definieren
393
15.2.1 Es gibt eine Theme-Palette und eine individuelle Palette
394
15.2.2 Die Theme-Palette »Standard« von Twenty Twenty-Five
394
15.2.3 Die Theme-Palette »Standard« von Twenty Twenty-Five ändern
395
15.3 Den Header für die gesamte Website farblich gestalten
396
15.4 »Templates«: Die Grundlage für alle WordPress-Seiten
397
15.5 Mit Twenty Twenty-Five in fünf Schritten zum Fotoblog
400
15.5.1 Vorbereitung: Beitragsbilder, Standardfarben und Startseite
401
15.5.2 Schritt 1: »Blog-Startseite« – das Template für die Beitragsseite ändern
402
15.5.3 Schritt 2: »Einzelne Beiträge« – das Template für die Einzelansicht ändern
403
15.5.4 Schritt 3: »Alle Archive« – das Template für die Archivseiten ändern
405
15.5.5 Schritt 4: »Seiten« – das Template für statische Seiten ändern
407
15.5.6 Schritt 5: »Abend« – dem Fotoblog eine dunkle Stil-Variante zuweisen
408
15.6 Ein Website-Logo im Header hinzufügen
409
15.6.1 Schritt 1: Eine Header-Vorlage mit einem Website-Logo einfügen
410
15.6.2 Schritt 2: Das Website-Logo einfügen und gestalten
411
15.6.3 Schritt 3: Feintuning für den Website-Titel und die Navigation
412
15.7 Der Website-Editor ist ein echtes Powertool
413
16 Klassische Themes anpassen mit dem »Customizer«
415
16.1 Das Standard-Theme »Twenty Twenty« installieren
416
16.1.1 Twenty Twenty installieren
416
16.1.2 Vorbereitung: Eine statische Seite als Homepage festlegen
417
16.2 »Live-Vorschau«: Twenty Twenty im Customizer
417
16.3 Die »Website-Informationen« anpassen
419
16.3.1 Website-Logo und Website-Icon definieren
419
16.3.2 Die Grenzen der Anpassung im Customizer bei klassischen Themes
420
16.4 »Farben« und »Theme-Optionen« anpassen
421
16.4.1 »Farben«: Hintergrundfarben und Akzentfarbe anpassen
421
16.4.2 Die »Theme-Optionen« anpassen
422
16.5 »Menüs«: Eine Navigation für die Website erstellen
423
16.5.1 Übersicht: Menüs erstellen in klassischen Themes
424
16.5.2 Schritt 1: Das Hauptmenü erstellen im Customizer
424
16.5.3 Schritt 2: Ein Footer-Menü mit den rechtlichen Pflichtlinks
426
16.5.4 Schritt 3: Ein Social-Media-Menü mit Icons erstellen
427
16.5.5 Alle fünf Menüpositionen von Twenty Twenty auf einen Blick
428
16.6 Den Customizer mit der »Live-Vorschau« beenden
429
TEIL IV Plugins, SEO und Systemverwaltung
431
17 WordPress erweitern mit Plugins
433
17.1 Ein Plugin installieren: »CMP – Coming Soon & Maintenance Plugin«
434
17.1.1 Worauf Sie bei einem Plugin achten sollten
434
17.1.2 Das Backend-Menü »Plugins • Installierte Plugins«
435
17.1.3 Ein Plugin installieren
436
17.1.4 Das Plugin »CMP« installieren
436
17.1.5 Das installierte Plugin aktivieren
438
17.1.6 Das Plugin »CMP« konfigurieren und den Vorhang aktivieren
438
17.2 »Twentig«: Der Werkzeugkasten für Block-Themes
440
17.2.1 »Twentig« installieren und aktivieren
441
17.2.2 Die »Twentig Settings« haben nur wenige Optionen
442
17.2.3 Twentig erweitert WordPress um zahlreiche neue Vorlagen
443
17.2.4 Twentig bringt neue Optionen in den Block-Einstellungen
445
17.2.5 Mit »Twentig« die Links in der Navigation gestalten
446
17.3 Ein einfaches Kontaktformular mit »Form Block«
447
17.3.1 Schritt 1: Das Plugin »Form Block« installieren und aktivieren
447
17.3.2 Schritt 2: Ein Kontaktformular einfügen, anpassen und gestalten
448
17.3.3 Schritt 3: Das Kontaktformular testen
450
17.4 Weitersagen: Beiträge teilen mit »Shariff Wrapper«
450
17.4.1 Das Plugin Shariff Wrapper installieren
451
17.4.2 Das Plugin Shariff Wrapper konfigurieren
452
17.5 Müllvermeidung: »Antispam Bee« gegen Kommentarspam
454
17.6 Besucherstatistiken mit »Burst Statistics«
456
17.7 Einen Cookie-Hinweis erstellen mit »Complianz«
458
17.7.1 »Complianz« – das Plugin für den Cookie-Hinweis
458
17.7.2 Der Assistent von Complianz hilft beim Erstellen des Cookie-Banners
459
17.7.3 Schritt 1: Allgemein – Infos zur Website und zum Betreiber
460
17.7.4 Schritt 2: Einwilligung – Cookies und Plugins sammeln
461
17.7.5 Schritt 3: Dokumente – Cookie-Richtlinie erstellen und einbinden
462
17.7.6 Schritt 4: Fertigstellen – Cookie-Banner und Cookie-Blocker
462
17.7.7 Schritt 5: Cookie-Banner gestalten
462
18 SEO – die Optimierung für Suchmaschinen
465
18.1 Schreiben im Web für Maschinen
466
18.1.1 Suchmaschinen denken nicht, sie vergleichen Zeichen
466
18.1.2 Die Robots der Suchmaschinen können nicht lesen
468
18.1.3 Suchmaschinen analysieren den »head«-Bereich im Quelltext
469
18.1.4 Suchergebnisseiten: URL, Titel der Webseite und Beschreibung
470
18.2 »Ranking«: Die Reihenfolge der Suchergebnisse
470
18.2.1 Der Kern der Sache: Google mag Hyperlinks …
471
18.2.2 »Backlinks« und »Social Signals«: Links, die auf Ihre Webseiten zeigen
471
18.2.3 »Performance«: Werden die Webseiten auf allen Geräten schnell geladen?
472
18.3 Das Plugin »The SEO Framework« konfigurieren
473
18.3.1 Das Plugin »The SEO Framework« installieren und aktivieren
475
18.3.2 Das Backend-Menü »SEO« enthält die »SEO-Einstellungen«
475
18.3.3 »Startseiten-Einstellungen«: Titel und Beschreibung für die Startseite
476
18.3.4 »Soziale Netzwerke-Meta-Einstellungen«: Ein Standardbild zum Teilen
477
18.4 Die Darstellung Ihrer Inhalte in Suchmaschinen optimieren
478
18.4.1 Die »SEO-Leiste« in der Übersichtstabelle für »Seiten« und »Beiträge«
478
18.4.2 Die Optionen der SEO-Leiste kann man im »QuickEdit« ändern
480
18.4.3 Die »SEO-Einstellungen« im Block-Editor unter dem Inhaltsbereich
481
18.5 Seiten und Beiträge fürs Teilen in Social Media vorbereiten
483
18.5.1 Open Graph: Metadaten für Facebook & Co.
483
18.5.2 Die Einstellungen zum Teilen von Seiten und Beiträgen im Block-Editor
484
18.6 »XML-Sitemap«: Die Liste mit Inhalten für Suchmaschinen
486
18.6.1 WordPress erzeugt automatisch eine einfache XML-Sitemap
486
18.6.2 »The SEO Framework« bringt eine eigene XML-Sitemap mit
487
18.6.3 Ihre Webseiten im Index von Google: »site:ihre-domain.de«
487
19 Systemverwaltung: Backups, Updates und Optimierung
491
19.1 Sicher ist sicher: Backups erstellen mit »UpdraftPlus«
491
19.1.1 Backup erstellen: Vom Webhoster, von Hand oder per Plugin
492
19.1.2 Schritt 1: UpdraftPlus installieren und aktivieren
493
19.1.3 Schritt 2: »Jetzt sichern« – ein manuelles Backup erstellen
494
19.1.4 Schritt 3: Das Backup herunterladen
495
19.1.5 Überblick: Was UpdraftPlus alles sichert (und was nicht)
497
19.2 Notfall: Backup wiederherstellen mit »UpdraftPlus«
497
19.2.1 Option 1: Wiederherstellen mit funktionierendem WordPress-Backend
498
19.2.2 Option 2: Wiederherstellen, wenn das Backend nicht mehr funktioniert
499
19.3 Updates: WordPress, Themes und Plugins aktualisieren
500
19.3.1 Die Seite »Dashboard • Aktualisierungen« im Überblick
501
19.3.2 Automatische Updates für kleine und große Versionen von WordPress
501
19.3.3 Automatische Updates gibt es auch für Themes und Plugins
502
19.4 Der Gesundheitscheck: »Werkzeuge • Website-Zustand«
503
19.5 »WP-Optimize«: Datenbank, Bilder und Cache
504
19.5.1 Das Register »Datenbank«: Die Daten in der Datenbank aufräumen
505
19.5.2 Das Register »Bilder« zur Komprimierung von Bildern
506
19.5.3 Das Register »Cache«: Die Auslieferung der Seiten beschleunigen
507
19.5.4 Das Register »Minify« ist eher was für Fortgeschrittene
509
19.6 Zusätzliche Sicherheit für WordPress: »WP Security«
509
19.7 Weitere Tools zur Systemverwaltung
512
19.7.1 Die Benutzerverwaltung von WordPress
512
19.7.2 Import/Export: Inhalte in ein anderes WordPress übertragen
514
20.1 Nützliche Plugins kurz vorgestellt
519
20.1.1 Unentbehrlich: Automatische Umleitungen mit »Redirection«
520
20.1.2 Superpraktisch: Blöcke ein- und ausblenden mit »Block Visibility«
520
20.1.3 »The Icon Block«: SVG-Icons und -Grafiken im Block-Editor einfügen
521
20.1.4 Beiträge und Seiten duplizieren mit »Yoast Duplicate Post«
522
20.1.5 Zurück nach oben auf der Seite mit »Scroll To Top«
523
20.1.6 Inhaltsverzeichnis für längere Beiträge mit »Simple TOC«
523
20.2 Tipps für Datenschutzerklärung und Impressum
524
20.2.1 Die Seite für die »Datenschutzerklärung«
524
20.2.2 Hilfe bei der Datenschutzerklärung: »datenschutz-generator.de«
525
20.3 Checkliste für die Freischaltung Ihrer WordPress-Site
527
20.3.1 Checkliste für das Frontend
527
20.3.2 Checkliste für Interaktionen
528
20.3.3 Checkliste für das Backend
528
20.3.4 Checkliste für SEO
529
20.4 Checkliste für die Wartung Ihrer WordPress-Website
530
20.5 Sie sind nicht allein: Die WordPress-Community
530