1 WordPress ist der Motor für Ihre Website

33

1.1 Das World Wide Web ist ein weltweites Gewebe aus Hyperlinks

33

1.1.1 Das Web besteht aus Webseiten und Hyperlinks

34

1.1.2 Verwirrende Begriffe: »Homepage«, »Webseite« und »Website«

35

1.1.3 Webseiten werden auf einem »Webspace« gespeichert

35

1.1.4 Webseiten bestehen aus »Quelltext«, und WordPress schreibt diesen für Sie

36

1.1.5 »Responsives Webdesign«: Webseiten passen sich ihrer Umgebung an

37

1.2 WordPress vereinfacht das Veröffentlichen im Web

38

1.2.1 Ein Content-Management-System (CMS) erleichtert das Webpublishing

38

1.2.2 Ein Blog-Tool ist ein CMS mit einfacher Bedienung und viel Interaktion

39

1.2.3 WordPress ist ein Blog-Tool und ein vollwertiges CMS

40

1.3 Es gibt zwei verschiedene Wege, WordPress zu nutzen

41

1.3.1 Der Unterschied zwischen »wordpress.org« und »wordpress.com«

41

1.3.2 »wordpress.org«: WordPress auf dem eigenen Webspace betreiben

43

1.3.3 »WordPress.com« ist ein kommerzielles Angebot der Firma Automattic

44

1.4 »Projekt Gutenberg«: WordPress erfindet sich neu

45

1.5 WordPress und KI: Kickstart und Hilfe im Alltag

46

1.6 Auf einen Blick

47

2 Ihre Website vorbereiten: Planung, Domain und Webspace

49

2.1 Die Rahmenbedingungen: Ziele, Zeit und Zaster

49

2.2 Der rote Faden: Inhalt, Gestaltung, Funktionen und Technik

50

2.3 Inhalt ist der Grund, Ihre Website zu besuchen

51

2.4 Gestaltung: Themes bestimmen das Aussehen Ihrer Website

52

2.5 Funktionen: Plugins erweitern die Fähigkeiten von WordPress

53

2.6 Technik: Domain-Name und Webspace

54

2.6.1 Der Aufbau von Domain-Namen: »www.mein-name.de«

54

2.6.2 Einen Domain-Namen auswählen: »meine-website.de«

55

2.6.3 Webhosting: Die technischen Voraussetzungen für WordPress

56

2.6.4 HTTPS: Webseiten mit einem SSL-Zertifikat verschlüsselt übertragen

57

2.6.5 Tipps zum Vergleichen von Webhosting-Angeboten

57

2.6.6 Einige konkrete Beispiele für Webhosting mit WordPress

58

2.7 Auf einen Blick

59

3 WordPress installieren

61

3.1 Kostenlos: WordPress mit »TasteWP.com« ein paar Tage online testen

62

3.2 Bequem: Der Webhoster hilft bei der Installation

63

3.2.1 Schlüsselfertig: Ein vorinstalliertes WordPress

63

3.2.2 Halbautomatisch: WordPress mit wenigen Klicks installieren

64

3.3 Manuell: Die Installation auf einem Online-Webspace

64

3.3.1 Schritt 1: WordPress herunterladen und entpacken

65

3.3.2 Schritt 2: Eine FTP-Verbindung zum Webspace herstellen

66

3.3.3 Schritt 3: WordPress-Dateien per FTP auf den Webspace kopieren

67

3.3.4 Schritt 4: Das Installationsprogramm von WordPress aufrufen

69

3.3.5 Schritt 5: Die Zugangsdaten für die Datenbank eingeben

71

3.3.6 Schritt 6: Website-Titel festlegen und Admin-Konto einrichten

73

3.4 Offline: WordPress auf Ihrem Computer installieren

76

3.4.1 Mit einem lokalen WordPress werden Sie quasi selbst zum Webhoster

76

3.4.2 »Local«: WordPress auf Mausklick, Webspace inklusive

77

3.5 WordPress besteht aus einem »Frontend« und einem »Backend«

78

3.5.1 Das »Frontend« ist die Fassade der Website nach außen

78

3.5.2 Das »Backend« ist die Verwaltungsabteilung für die Website

79

3.6 Kickstart mit KI-Builder vom Webhoster

81

3.6.1 Vorab: Die vom KI-Builder in diesem Abschnitt erstellte Website

82

3.6.2 Schritt 1: Website-Titel, kurze Beschreibung und Voreinstellungen

83

3.6.3 Schritt 2: Voreinstellungen des KI-Builders überprüfen und anpassen

83

3.6.4 Schritt 3: Ein Design auswählen

84

3.6.5 Schritt 4: Zusätzliche Seiten hinzufügen

85

3.6.6 Schritt 5: Die fertige Website können Sie nach Belieben anpassen

85

3.7 Auf einen Blick

87

4 Das Backend von WordPress kennenlernen

89

4.1 Das »Backend« von WordPress im Überblick

89

4.1.1 »Admin-Toolbar«: Die Werkzeugleiste am oberen Bildschirmrand

91

4.1.2 Die »Menüleiste« ist die Schaltzentrale im Backend

91

4.1.3 Das »Dashboard« – alles Wichtige auf einen Blick

92

4.2 Das Menü »Einstellungen« im Überblick

94

4.2.1 In diesem Kapitel: »Allgemein«, »Lesen« und »Permalinks«

94

4.2.2 Später: »Konnektoren«, »Schreiben«, »Diskussion«, »Medien« und »Datenschutz«

95

4.3 »Einstellungen • Allgemein«: Website-Titel & Co.

95

4.3.1 Der Name für Ihre Website: »Website-Titel« und »Untertitel«

97

4.3.2 Allgemeine Einstellungen für Zeit, Datum und Sprache der Seite

98

4.4 »Einstellungen • Lesen«: Beiträge, Feed und Suchmaschinen

99

4.5 »Einstellungen • Permalinks«: Aussagekräftige URLs

101

4.5.1 Der Aufbau einer Webadresse (URL)

101

4.5.2 Gebräuchliche Einstellungen für Permalinks

102

4.6 Das Menü »Benutzer«: Ihr Benutzerprofil im Überblick

106

4.6.1 »Persönliche Optionen«: Farbschema für das Backend und mehr

107

4.6.2 Der Name der User: Der Bereich »Name« im Benutzerprofil

108

4.6.3 »Kontaktinformationen«, »Über Dich«, »Kontoverwaltung« und »Passwort ändern«

109

4.7 Die Befehlspalette verkürzt die Wege im Backend

111

4.8 Auf einen Blick

112

5 Die ersten Seiten und Beiträge für Ihre Website

117

5.1 In WordPress gibt es Beiträge und Seiten

118

5.1.1 Im Menü »Beiträge« werden Blogbeiträge hinzugefügt und verwaltet

118

5.1.2 Im Menü »Seiten« werden statische Seiten hinzugefügt und verwaltet

119

5.2 Das Menü »Seiten • Alle Seiten« im Überblick

120

5.3 Den Editor mit der »Beispiel-Seite« kennenlernen

122

5.3.1 Die »Beispiel-Seite« im Editor bearbeiten

122

5.3.2 Nur beim ersten Besuch: »Willkommen beim Editor«

122

5.3.3 Überblick: Der Editor besteht aus drei Bereichen

123

5.3.4 Die obere Werkzeugleiste auf einen Blick

124

5.3.5 Werkzeuge zum Bearbeiten von Blöcken finden Sie in der »Block-Werkzeugleiste« und im »Block-Inspektor«

125

5.3.6 Die »Listenansicht« zeigt die Block-Struktur der Seite

126

5.3.7 Vorschau: Die Symbole »Seite anzeigen« und »Anzeigen«

128

5.3.8 Der Editor hat eine Template-Ansicht mit Header, Footer & Co

128

5.3.9 Die »Beispiel-Seite« in den Papierkorb verschieben

130

5.4 Die ersten eigenen Seiten hinzufügen: »Über mich« und »Kontakt«

131

5.4.1 Eine neue Seite hinzufügen

131

5.4.2 Schritt 1: Den Titel der Seite eingeben

133

5.4.3 Schritt 2: Der erste Block im Inhaltsbereich – ein ganz normaler Absatz

134

5.4.4 Schritt 3: Einen zweiten Absatz-Block einfügen

135

5.4.5 Schritt 4: Die Seite »Über mich« veröffentlichen

137

5.4.6 Die obere Werkzeugleiste hat sich nach der Veröffentlichung geändert

138

5.4.7 Die Zusammenfassung in der Seitenleiste »Einstellungen«

138

5.4.8 Die Seite »Über mich« im Frontend betrachten

140

5.4.9 Übung: Die Seite »Kontakt« hinzufügen und veröffentlichen

141

5.5 Das Menü »Beiträge • Alle Beiträge« im Überblick

143

5.6 Die ersten eigenen Beiträge hinzufügen

145

5.6.1 Den ersten neuen Beitrag hinzufügen: »Der Editor«

145

5.6.2 Einen zweiten Beitrag hinzufügen: »Blöcke auswählen per Schrägstrich«

147

5.7 Beiträge im Frontend: Beitragsseite und Einzelansicht

148

5.7.1 Auf der Beitragsseite werden alle Beiträge ausgegeben

149

5.7.2 Jeder Beitrag hat eine Einzelansicht mit eigenem Permalink

150

5.8 Eine Website mit individueller Homepage und Beitragsseite

151

5.8.1 Übersicht: WordPress mit individueller Homepage und Beitragsseite

151

5.8.2 Standardeinstellung: Die Homepage zeigt die letzten Beiträge

152

5.8.3 Schritt 1: »Willkommen« – eine Seite für die Homepage hinzufügen

152

5.8.4 Schritt 2: »Blog« – eine Seite für die Beitragsseite hinzufügen

153

5.8.5 Schritt 3: Homepage und Beitragsseite in den Einstellungen definieren

154

5.9 Die Reihenfolge der Seiten festlegen

156

5.9.1 Die Übersicht der statischen Seiten in »Seiten • Alle Seiten«

156

5.9.2 Die »Schnellbearbeitung« enthält nützliche Abkürzungen

157

5.9.3 Die Reihenfolge der Seiten im Menü »Seiten • Alle Seiten« festlegen

157

5.9.4 Überraschung: Die neue Seitenreihenfolge gilt auch für die Navigation

159

5.10 Know-how: Verschiedene Arten von Webseiten in WordPress

160

5.11 Auf einen Blick

161

6 Texte schreiben im Editor

163

6.1 Schreiben im Web für Menschen

163

6.1.1 Wie Menschen Texte lesen

164

6.1.2 Webseiten werden nicht gelesen, sondern überflogen

164

6.2 Los geht’s: Texte im Editor bearbeiten

165

6.3 Die »Block-Werkzeugleiste« kennenlernen

166

6.3.1 Die Block-Werkzeugleiste wird automatisch ein- und ausgeblendet

167

6.3.2 Blöcke verschieben mit der Block-Werkzeugleiste

167

6.3.3 Weitere Werkzeuge in der Block-Werkzeugleiste für Text-Blöcke

167

6.3.4 Das 3-Punkte-Menü »Optionen« rechts in der Block-Werkzeugleiste

169

6.4 Verlinken: Hyperlinks erstellen

170

6.4.1 Einen externen Hyperlink erstellen

170

6.4.2 Einen internen Hyperlink erstellen

172

6.4.3 Die Optionen zur Bearbeitung von Hyperlinks

173

6.5 Den »Block-Inspektor« in der Seitenleiste »Einstellungen« kennenlernen

174

6.5.1 Der Aufbau des Block-Inspektors

175

6.5.2 Das Design-Werkzeug »Farbe« in Aktion

176

6.5.3 Die Linkfarbe mit dem 3-Punkte-Menü »Farbe-Optionen« ändern

177

6.5.4 Schrift mit dem Design-Werkzeug »Typografie« gestalten

178

6.5.5 Das 3-Punkte-Menü »Typografie-Optionen« auf einen Blick

180

6.6 Der »Block-Inserter«: Alle Blöcke auf einen Blick

180

6.6.1 Den »Block-Inserter« kennenlernen

180

6.6.2 Die wichtigsten Blöcke auf einen Blick

182

6.7 Texte mittels Überschriften übersichtlich strukturieren

182

6.7.1 Blöcke für Überschriften im Text einfügen

183

6.7.2 H1 bis H6: Auf Webseiten gibt es sechs Überschriftsebenen

184

6.7.3 Übung: Unterhalb des Textes eine Quellenangabe einfügen

185

6.8 Anmerkungen: Notizen für sich selbst und andere

186

6.9 Unfallhilfe: »Revisionen« für Beiträge und Seiten

188

6.10 Tipps & Tricks zum effektiven Umgang mit dem Editor

189

6.10.1 Die Block-Werkzeuge in der oberen Werkzeugleiste fixieren

189

6.10.2 Die »Listenansicht« hilft, den Überblick zu bewahren

191

6.10.3 Den Editor einrichten: Ansichten und Voreinstellungen

192

6.11 Auf einen Blick

194

7 Die Mediathek: Bilder und Galerien einfügen

197

7.1 Schnelldurchgang: Ein Bild auf »Über mich« einfügen

198

7.1.1 Schritt 1: Einen Block »Bild« auf der Seite »Über mich« einfügen

199

7.1.2 Schritt 2: Ein Bild mit dem Block »Bild« einfügen

200

7.1.3 Schritt 3: Die Optionen für einen Bild-Block im Block-Inspektor

201

7.2 So optimieren Sie Bilder für Ihre Website

204

7.2.1 Beispiel: Ein Foto vor und nach der Optimierung

204

7.2.2 Umbenennen: Einen informativen Dateinamen wählen

205

7.2.3 Zuschneiden und Skalieren: Bildausschnitt und Bildgröße

205

7.2.4 Komprimieren: Die Dateigröße optimieren

205

7.3 Die Mediathek von WordPress im Überblick

206

7.3.1 Dateien direkt in die Mediathek hochladen

206

7.3.2 Die Listenansicht in der Mediathek: Kleine Vorschau, viel Information

207

7.3.3 Die »Grid«-Ansicht in der Mediathek zeigt nur die Vorschaubilder

208

7.3.4 Details für Bilder: Titel, Alt-Text, Untertitel und Beschreibung

209

7.3.5 Die Detailinfos in der Listenansicht bearbeiten

209

7.3.6 Die Detailinfos in der »Grid«-Ansicht

211

7.4 Ein Bild aus der Mediathek im Editor einfügen

212

7.4.1 Schritt 1: Einen neuen Beitrag mit einem Block »Bild« erstellen

212

7.4.2 Schritt 2: »Medien hinzufügen« – ein Bild aus der Mediathek einfügen

213

7.4.3 Die Alternative: Bilder mit dem Block-Inserter einfügen

215

7.5 Die Block-Werkzeugleiste für den »Bild«-Block im Detail

216

7.5.1 Die Block-Werkzeugleiste für Bilder auf einen Blick

217

7.5.2 Die Optionen zum Ausrichten von Bildern

218

7.5.3 Bilder verlinken: URL, Bilddatei oder eine einfache Lightbox

219

7.5.4 Zuschneiden: Ein Bild mit der Block-Werkzeugleiste bearbeiten

221

7.6 »Beitragsbilder« sind ganz besondere Bilder

223

7.6.1 Beitragsbilder erscheinen in der Seitenleiste »Einstellungen • Beitrag«

223

7.6.2 Ein »Beitragsbild« für einen Beitrag festlegen

224

7.7 Mehrere Bilder: Eine Galerie erstellen und bearbeiten

225

7.7.1 Schritt 1: Einen neuen Beitrag mit einem Block »Galerie« erstellen

225

7.7.2 Schritt 2: Bilder zur Galerie hinzufügen

226

7.7.3 Schritt 3: »Galerie bearbeiten« – die Reihenfolge der Bilder ändern

227

7.7.4 Schritt 4: Die Einstellungen für den Block »Galerie« anpassen

228

7.8 Bildbearbeitung: Bilder online in der Mediathek bearbeiten

231

7.8.1 Die Seite »Dateianhang-Details« zum Bearbeiten eines Bildes

231

7.8.2 »Skalieren«: Zuerst die Bildgröße verändern

232

7.8.3 Zuschneiden: einen Teil des Bildes entfernen

233

7.9 Auf einen Blick

235

8 Multimedia: Audio und Videos einfügen

237

8.1 Audiodateien im Editor einbinden

237

8.1.1 Schritt 1: Einen Beitrag mit dem Block »Audio« erstellen

238

8.1.2 Schritt 2: Eine MP3-Datei in einen Audio-Block hochladen

239

8.2 Videodateien im Editor einbinden

241

8.2.1 Eine Videodatei mit dem Block »Video« hochladen und einfügen

242

8.3 Externe Medien datenschutzkonform einbetten

244

8.3.1 Einbettungen in WordPress – extrem bequem und ein Problem

244

8.3.2 Die Lösung: Ein Plugin wie »Embed Privacy«

245

8.4 Auf einen Blick

246

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 umbenennen und hinzufügen

250

9.2.3 Kategorien im Editor oder per »Schnellbearbeitung« zuweisen

252

9.2.4 Eine Kategorie wird im Frontend ein Link zur Archivseite

254

9.3 Schlagwörter erstellen und verwalten

255

9.3.1 Schlagwörter für Beiträge erstellen und zuweisen

255

9.3.2 Die Alternative: Schlagwörter mit der »Schnellbearbeitung« zuweisen

258

9.3.3 Schlagwörter im Menü »Beiträge • Schlagwörter« verwalten

258

9.4 Weiterlesen-Links erstellen mit dem Block »Mehr«

260

9.4.1 Der Block »Mehr« erzeugt einen Weiterlesen-Link

260

9.4.2 Einen Weiterlesen-Link für die bisherigen Beiträge erstellen

261

9.5 Der Block »Neueste Beiträge« erzeugt eine dynamische Beitragsliste

263

9.5.1 Den Block »Neueste Beiträge« im Editor einfügen

263

9.5.2 Den Block »Neueste Beiträge« konfigurieren und gestalten

264

9.6 Fertige Vorlagen zur dynamischen Ausgabe von Beiträgen

265

9.7 Auf einen Blick

266

10 Layout: Blöcke zum Gestalten von Inhalten

269

10.1 Der Block »Gruppe«: Basis-Baustein für Layouts

270

10.1.1 Schritt 1: Blöcke markieren und gruppieren

270

10.1.2 Schritt 2: Eine farbliche Gestaltung für den Gruppe-Block

272

10.1.3 Schritt 3: Abstände mit dem Design-Werkzeug »Maße« definieren

273

10.1.4 Optional: Ränder, 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 ein Bild legen

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

279

10.4 Nebeneinander: Der Block »Medien und Text«

280

10.5 Der Block »Buttons«: Call-to-Action für Besuchende

281

10.5.1 Der Block »Buttons« enthält einen oder mehrere Blöcke »Button«

281

10.5.2 Der Block »Buttons« kann mehrere Buttons enthalten

283

10.5.3 Der Buttons-Block kann auch in anderen Blöcken verwendet werden

283

10.6 Flexibel: mehrspaltige Layouts mit dem Spalten-Block

284

10.6.1 Schritt 1: Inhalt zuerst – drei Kästen mit Überschrift und Text

285

10.6.2 Schritt 2: Die drei Kästen in ein Spalten-Layout umwandeln

286

10.7 Ein komplexes mehrspaltiges Layout erstellen und sperren

287

10.7.1 Das Beispiel für das komplexe Layout im Überblick

287

10.7.2 Schritt 1: Mehrere Blöcke mit einem Stapel-Block gruppieren

288

10.7.3 Schritt 2: Den Stapel-Block duplizieren und die Inhalte anpassen

290

10.7.4 Schritt 3: Stapel mit dem Block »Spalten« nebeneinanderstellen

291

10.7.5 Schritt 4: Das Spalten-Layout mit einem Gruppe-Block umgeben

292

10.7.6 »Sperren«: Blöcke vor Verschieben und Entfernen schützen

293

10.8 Auf einen Blick

295

11 Vorlagen: Fertige Block-Layouts zum Einfügen und Anpassen

297

11.1 Vorlagen sind gespeicherte Block-Layouts zum Einfügen und Anpassen

297

11.1.1 Das Register »Vorlagen« im Block-Inserter

298

11.1.2 Die Ansicht »Alle Vorlagen erkunden« ist übersichtlicher

299

11.1.3 Viele Block-Themes bringen eigene Vorlagen mit

300

11.1.4 Die Vorlagen von Twenty Twenty-Five in einer Online-Demo

300

11.2 Über mich: Eine Abschnittsvorlage einfügen und anpassen

301

11.2.1 Schritt 1: Eine Vorlage im Block-Inserter suchen und einfügen

301

11.2.2 Schritt 2: Die Inhalte der Vorlage ändern

302

11.2.3 Schritt 3: Die Layout-Struktur der Vorlage anpassen

304

11.3 Homepage: Eine Seitenvorlage einfügen und anpassen

306

11.3.1 Schritt 1: Eine Seitenvorlage für die Homepage suchen und einfügen

306

11.3.2 Schritt 2: Die Seitenvorlage »Unternehmens-Homepage« kennenlernen

307

11.3.3 Schritt 3: Die Seitenvorlage »Unternehmens-Homepage« anpassen

308

11.3.4 Schritt 4: Die Seite im Frontend ohne den Titel »Willkommen« anzeigen

309

11.4 Praktisch: Eigene Vorlagen erstellen und speichern

310

11.4.1 Schritt 1: Ein eigenes Layout als Vorlage abspeichern

310

11.4.2 Schritt 2: Eine selbsterstellte Vorlage einfügen und anpassen

311

11.5 Synchronisierte Vorlagen: Ein Original, viele Kopien

312

11.5.1 Schritt 1: Eine synchronisierte Vorlage erstellen

313

11.5.2 Schritt 2: Eine synchronisierte Vorlage in ein Dokument einfügen

314

11.5.3 Schritt 3: Das Original einer synchronisierten Vorlage bearbeiten

315

11.5.4 »Loslösen«: Synchronisierte Vorlage vom Original trennen

316

11.6 Genial: synchronisierte Vorlagen mit Überschreibungen

316

11.7 Übersicht: die verschiedenen Arten von Vorlagen

318

11.8 Auf einen Blick

318

12 Kommentare: Interaktion mit Besuchern

319

12.1 Die Kommentarfunktion kennenlernen

319

12.1.1 Einen neuen Kommentar erstellen

320

12.1.2 Neuer Kommentar – Benachrichtigung per E-Mail

322

12.1.3 Neue Kommentare – Benachrichtigung im Backend

323

12.2 Kommentare verwalten: genehmigen, löschen etc.

324

12.2.1 Das Menü »Kommentare« im Überblick: Die Verwaltungszentrale

324

12.2.2 Kommentare kommentieren: Auf einen Kommentar antworten

326

12.3 Das Menü »Einstellungen • Diskussion«

327

12.3.1 »Einstellungen • Diskussion«, Teil 1: Grundlegende Einstellungen

327

12.3.2 »Einstellungen • Diskussion«, Teil 2: Moderation von Kommentaren und Spam

330

12.3.3 »Einstellungen • Diskussion«, Teil 3: Avatare

331

12.4 Kommentare für einzelne Beiträge oder Seiten deaktivieren

334

12.4.1 Kommentar-Deaktivierung für einzelne Beiträge oder Seiten mit der »Schnellbearbeitung«

334

12.4.2 Kommentar-Deaktivierung im Bereich »Diskussion« im Editor

335

12.5 Die Kommentarfunktion von WordPress deaktivieren

335

12.6 Pingbacks – Vernetzung mit anderen Blogs

336

12.7 Auf einen Blick

337

13 Auf der Suche nach dem richtigen Theme

341

13.1 Das Theme-Verzeichnis von WordPress

341

13.1.1 Die Startseite des Theme-Verzeichnisses

341

13.1.2 Jedes Theme hat eine eigene Detailseite

342

13.1.3 So installieren Sie ein Theme aus dem Theme-Verzeichnis

344

13.2 Qual der Wahl: Klassisches Theme oder modernes Block-Theme?

346

13.2.1 Klassische Themes haben zur Anpassung ihren eigenen »Customizer«

346

13.2.2 Alle »Block-Themes« werden mit dem Website-Editor angepasst

347

13.2.3 Sollten Sie ein klassisches Theme oder ein Block-Theme nehmen?

348

13.3 Moderne Block-Themes: Die Zukunft von WordPress

348

13.3.1 »Twenty Twenty-Four« ist ein wirklich gutes Block-Theme

348

13.3.2 »Twentig One«: Ein sehr gutes kostenloses Block-Theme mit Kickstart

349

13.3.3 »Ollie«: Ein Block-Freemium-Theme mit sehr guten Vorlagen

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«

353

13.4.3 Weit verbreitet: das Mehrzweck-Theme »Divi« von Elegant Themes

354

13.4.4 Themes von einem Marktplatz wie »ThemeForest«

355

13.5 Tipps zur Auswahl von WordPress-Themes

355

13.5.1 Worauf Sie bei Themes achten sollten

356

13.5.2 WordPress-Themes haben unterschiedliche Vertriebsmodelle

357

13.5.3 Die Antwort auf die Frage »Welches Theme ist das?«

358

13.6 Auf einen Blick

358

14 Block-Themes: Die Website mit dem Website-Editor anpassen

359

14.1 Den Website-Editor kennenlernen

360

14.1.1 Der Website-Editor hat eine übersichtliche Navigation

360

14.1.2 Den Editor zur Bearbeitung von Blöcken kennen Sie bereits

362

14.2 »Stile«: Die gesamte Website ohne Code gestalten

363

14.2.1 »Stile durchstöbern«: Stil-Varianten, Farbpaletten und Typografie ändern

364

14.2.2 »Stile • Typografie«: Schriftgestaltung für die gesamte Website

365

14.2.3 »Stile • Farben«: Paletten und Farben für Elemente global gestalten

367

14.2.4 »Stile • Layout«: Breite für Inhalte und Innenabstände global gestalten

368

14.2.5 »Stile • Blöcke« und »Stilbuch«: Einzelne Blöcke global gestalten

368

14.3 Eigene Farben für die Theme-Palette definieren

370

14.3.1 Die Theme-Palette »Standard« von »Twenty Twenty-Five«

371

14.3.2 Die Theme-Palette »Standard« von »Twenty Twenty-Five« ändern

372

14.4 Header mit Farben und Vorlagen gestalten

373

14.4.1 Den Header zur Bearbeitung öffnen

373

14.4.2 Den Header farblich gestalten

374

14.4.3 Im Header ein Website-Logo hinzufügen

375

14.4.4 Den Header durch eine andere Header-Vorlage ersetzen

376

14.4.5 Praktisch: Man kann alle Änderungen am Header zurücksetzen

377

14.5 Die Navigation im Header ändern

378

14.5.1 Jede Navigation besteht aus Navigationsmenü und Navigationsblock

378

14.5.2 Schritt 1: Das bereits vorhandene Navigationsmenü umbenennen

378

14.5.3 Schritt 2: Den Block »Seitenliste« aus dem Menü entfernen

380

14.5.4 Schritt 3: Die gewünschten Seitenlinks zum Menü hinzufügen

381

14.6 Mobile Navigation mit eigenem Overlay-Template gestalten

382

14.6.1 Die mobile Navigation mit dem Standard-Overlay

383

14.6.2 Die mobile Navigation mit einem eigenen Overlay-Template

383

14.7 Den Footer anpassen: Vorlage ändern und Navigation hinzufügen

386

14.7.1 Vorbereitung: »Datenschutz« und »Impressum« veröffentlichen

386

14.7.2 Schritt 1: Den Footer durch eine andere Footer-Vorlage ersetzen

387

14.7.3 Schritt 3: Einen Navigationsblock im Footer einfügen

388

14.7.4 Schritt 4: Ein Navigationsmenü mit den Pflichtlinks erstellen

389

14.7.5 Schritt 5: Overlay ausschalten und Menü umbenennen

390

14.8 »Templates« sind die Basis für alle WordPress-Seiten

391

14.9 Templates in Aktion: »Textauszug« statt »Inhalt«

394

14.9.1 Vorbereitung: Einen Beitrag mit Mehr-Block und Textauszug erstellen

394

14.9.2 Das Template für die Beitragsseite anpassen

395

14.10 Genial: Mit wenigen Klicks zum Foto- oder Nachrichten-Blog

397

14.10.1 Twenty Twenty-Five mit wenigen Klicks in einen Foto-Blog verwandeln

398

14.10.2 Mit wenigen Klicks zum Nachrichten-Blog

400

14.11 Der Website-Editor ist ein echtes Powertool

403

14.12 Auf einen Blick

403

15 Klassische Themes: Die Website mit dem »Customizer« anpassen

405

15.1 Das Standard-Theme »Twenty Twenty« installieren

406

15.1.1 Twenty Twenty installieren

406

15.2 »Live-Vorschau«: Twenty Twenty im Customizer

407

15.3 Die »Website-Informationen« anpassen

408

15.3.1 Logo auswählen – und der Website-Titel verschwindet

409

15.3.2 Die Grenzen der Anpassung bei klassischen Themes im Customizer

409

15.4 »Farben« und »Theme-Optionen« anpassen

410

15.4.1 »Farben«: Hintergrundfarben und Akzentfarbe anpassen

410

15.4.2 Die »Theme-Optionen« anpassen

411

15.5 »Menüs«: Eine Navigation für die Website erstellen

412

15.5.1 Übersicht: Menüs in klassischen Themes erstellen

413

15.5.2 Schritt 1: Die Hauptnavigation im Customizer erstellen

413

15.5.3 Schritt 2: Ein Footer-Menü mit den rechtlichen Pflichtlinks

415

15.5.4 Schritt 3: Ein Social-Media-Menü mit Icons erstellen

416

15.5.5 Alle fünf Menüpositionen von »Twenty Twenty« auf einen Blick

417

15.6 Den Customizer mit der »Live-Vorschau« beenden

418

15.7 Auf einen Blick

418

16 WordPress mit Plugins erweitern

423

16.1 Ein Plugin installieren: »Almost Ready Temporary Page«

423

16.1.1 Worauf Sie bei einem Plugin achten sollten

424

16.1.2 Das Backend-Menü »Plugins • Installierte Plugins«

425

16.1.3 Ein Plugin installieren

426

16.1.4 Das Plugin »Almost Ready Temporary Page« installieren

426

16.1.5 Nach der Installation muss das Plugin aktiviert werden

428

16.1.6 Die Seite »Almost Ready« im Editor bearbeiten

429

16.2 »Twentig«: Der Werkzeugkasten für Block-Themes

431

16.2.1 »Twentig« installieren und aktivieren

432

16.2.2 Die Optionen in den »Twentig Settings«

432

16.2.3 Twentig erweitert WordPress um zahlreiche neue Vorlagen

434

16.2.4 »Twentig« bringt neue Optionen im Block-Inspektor

435

16.2.5 Mit »Twentig« die Links in der Navigation gestalten

437

16.3 Ein einfaches Kontaktformular mit »Form Block«

438

16.3.1 Schritt 1: Das Plugin »Form Block« installieren und aktivieren

438

16.3.2 Schritt 2: Ein Kontaktformular einfügen, anpassen und gestalten

439

16.3.3 Schritt 3: Das Kontaktformular testen

441

16.4 Müllvermeidung: »Antispam Bee« gegen Kommentarspam

441

16.4.1 Das Plugin »Antispam Bee« installieren

442

16.4.2 »Antispam Bee« konfigurieren

442

16.5 Besucherstatistiken mit »Koko Analytics«

444

16.6 Einen Cookie-Hinweis mit »Complianz« erstellen

446

16.6.1 Braucht meine WordPress-Website einen Cookie-Hinweis?

447

16.6.2 »Complianz« – das Plugin für den Cookie-Hinweis

448

16.6.3 Das Plugin »Complianz« installieren

448

16.6.4 Der Assistent von »Complianz« hilft beim Erstellen des Cookie-Banners

449

16.6.5 Schritt 1: Allgemein – Infos zur Website und zum Betreiber

449

16.6.6 Schritt 2: Einwilligung – Cookies und Plugins sammeln

450

16.6.7 Schritt 3: Dokumente – Cookie-Richtlinie erstellen und einbinden

451

16.6.8 Schritt 4: Cookie-Banner und Cookie-Blocker fertigstellen

451

16.6.9 Schritt 5: Cookie-Banner gestalten

451

16.7 Auf einen Blick

452

17 Die Optimierung für Maschinen: SEO, Social Media und KI-Tools

453

17.1 Suchmaschinen, KI-Tools und der Quelltext Ihrer Webseiten

454

17.1.1 Die Robots von Suchmaschinen und KI-Tools können nicht lesen

454

17.1.2 Quelltext: Maschinen analysieren den unsichtbaren »head«-Bereich

455

17.1.3 Suchmaschinen liefern eine Linkliste mit URL, Titel und Beschreibung

456

17.1.4 Suchmaschinen sind Wegweiser, KI-Tools sind Gesprächspartner

457

17.2 »Ranking«: Die Reihenfolge der Ergebnisse in Suchmaschinen

458

17.2.1 Der Kern der Sache: Das Web besteht aus Hyperlinks …

458

17.2.2 »Backlinks« und »Social Signals«: Links, die auf Ihre Webseiten zeigen

459

17.2.3 »Performance«: Werden die Webseiten auf allen Geräten schnell geladen?

459

17.3 Das Plugin »The SEO Framework« konfigurieren

460

17.3.1 Das Plugin »The SEO Framework« installieren und aktivieren

462

17.3.2 Das Backend-Menü »SEO« enthält die »SEO-Einstellungen«

462

17.3.3 »Homepage-Einstellungen«: Titel und Beschreibung für die Startseite

463

17.3.4 »Meta-Einstellungen für soziale Medien«: Ein Standardbild zum Teilen

464

17.4 Das Erscheinungsbild der Inhalte in Suchmaschinen optimieren

465

17.4.1 Die »SEO-Leiste« in der Übersichtstabelle für »Seiten« und »Beiträge«

465

17.4.2 Die »SEO-Einstellungen« in der »Schnellbearbeitung«

467

17.4.3 Die »SEO-Einstellungen« im Editor unter dem Inhaltsbereich

468

17.5 Beiträge und Seiten fürs Teilen in Social Media vorbereiten

470

17.5.1 Open Graph: Metadaten für Facebook & Co.

470

17.5.2 Die Einstellungen zum Teilen von Seiten und Beiträgen im Editor

471

17.6 Die »XML-Sitemap«: ein Inhaltsverzeichnis für Suchmaschinen und KI-Tools

472

17.6.1 WordPress erzeugt automatisch eine einfache XML-Sitemap

473

17.6.2 »The SEO Framework« bringt eine eigene XML-Sitemap mit

473

17.6.3 Ihre Webseiten im Index von Google: »site:ihre-domain.de«

474

17.7 Weitere Maßnahmen für Suchmaschinen und KI-Tools

475

17.7.1 Viele klassische SEO-Maßnahmen helfen auch bei KI-Tools

475

17.7.2 Fragen klar und in kurzen Absätzen möglichst zitierbar beantworten

476

17.7.3 Strukturierte Daten: Schema.org-Markup hilft bei SEO und GEO

477

17.7.4 Breadcrumbs: Navigationspfade sind auch strukturierte Daten

478

17.7.5 E-E-A-T: Autorität und Vertrauen aufbauen

478

17.8 Auf einen Blick

479

18 Systemverwaltung: Backups, Updates und Optimierung

481

18.1 Sicher ist sicher: Backups mit »UpdraftPlus« erstellen

481

18.1.1 Backup erstellen: Vom Webhoster, von Hand oder per Plugin

482

18.1.2 Das Plugin »UpdraftPlus« im Plugin-Verzeichnis

483

18.1.3 Schritt 1: UpdraftPlus installieren und aktivieren

483

18.1.4 Schritt 2: »Jetzt sichern« – ein manuelles Backup erstellen

484

18.1.5 Schritt 3: Das Backup herunterladen

486

18.1.6 Überblick: Was UpdraftPlus alles sichert (und was nicht)

487

18.2 Notfall: Website mit »UpdraftPlus« wiederherstellen

488

18.2.1 Option 1: Wiederherstellen mit funktionierendem WordPress-Backend

488

18.2.2 Option 2: Wiederherstellen, wenn das Backend nicht mehr funktioniert

490

18.3 Updates: WordPress, Themes und Plugins aktualisieren

491

18.3.1 Die Seite »Dashboard • Aktualisierungen« im Überblick

491

18.3.2 Automatische Updates für kleine und große Versionen von WordPress

491

18.3.3 Automatische Updates gibt es auch für Themes und Plugins

492

18.4 Der Gesundheitscheck: »Werkzeuge • Website-Zustand«

493

18.5 Praktisch: Automatische Umleitungen mit »Redirection«

495

18.6 Die Benutzerverwaltung von WordPress

496

18.7 Import/Export: Inhalte in ein anderes WordPress übertragen

498

18.7.1 Schritt 1: Daten aus einer WordPress-Installation exportieren

498

18.7.2 Schritt 2: Daten in WordPress importieren

499

18.8 Performance optimieren: Cache, Bilder, Datenbank

500

18.8.1 Cache: Die Auslieferung der Seiten beschleunigen

501

18.8.2 Bilder auf dem Webspace in moderne, platzsparende Formate konvertieren

502

18.8.3 Müllabfuhr: Die Daten in der Datenbank aufräumen

503

18.9 Zusätzliche Sicherheit für WordPress: »Two Factor« und »NinjaFirewall«

504

18.9.1 Zwei-Faktor-Authentifizierung zum Schutz der Benutzerkonten

504

18.9.2 NinjaFirewall – eine Brandschutzmauer für WordPress

505

18.10 Auf einen Blick

506

19 Tipps und Tricks

509

19.1 Superpraktisch: Blöcke ausblenden und wieder anzeigen

510

19.1.1 Eingebaut im Editor: Blöcke ausblenden und anzeigen

510

19.1.2 Blöcke ausblenden mit dem Plugin »Block Visibility«

511

19.2 Icons einfügen – per Block und per Plugin

512

19.2.1 Der »Icon-Block« im Editor

512

19.2.2 »The Icon Block«: SVG-Icons und -Grafiken im Editor einfügen

513

19.3 Dokumente duplizieren: »Yoast Duplicate Post«

514

19.4 Zurück nach oben: »Smooth Back To Top Button«

515

19.5 Inhaltsverzeichnis für lange Beiträge: »SimpleTOC«

516

19.6 Tipps für Datenschutzerklärung und Impressum

516

19.6.1 Die Seite für die »Datenschutzerklärung«

517

19.6.2 Hilfe bei der Datenschutzerklärung: »datenschutz-generator.de«

517

19.7 WordPress und KI: »Konnektoren« und das Plugin »AI«

519

19.7.1 WordPress und KI getrennt nutzen: Einfach, aber umständlich

519

19.7.2 KI innerhalb von WordPress nutzen: Konnektoren und das Plugin »AI«

520

19.7.3 »Einstellungen • Konnektoren«: API-Schlüssel für externe Dienste

520

19.7.4 Schritt 1: Den Konnektor für Mistral installieren und einrichten

522

19.7.5 Schritt 2: Das KI-fähige Plugin »AI« installieren und konfigurieren

523

19.7.6 Schritt 3: Titel, Beitragsbild und Textauszug per KI generieren lassen

525

19.8 Checklisten für Freischaltung und Wartung Ihrer WordPress-Site

527

19.8.1 Checkliste für das Frontend

528

19.8.2 Checkliste für Interaktionen

528

19.8.3 Checkliste für das Backend

529

19.8.4 Checkliste für SEO

529

19.8.5 Checkliste für die Wartung

530

19.9 Sie sind nicht allein: Die WordPress-Community

530

19.10 Auf einen Blick

531