WordPress - Webseiten erstellen mit CMS

1
Stand: März 2020
WordPress
Webseiten erstellen mit CMS
VHS Mönchengladbach

2
Über uns
Diese Präsentation ist frei zugänglich auf:
http://www.slideshare.net/thomasjs
Dieses Werk bzw. Inhalt steht unter einer Creative Commons
Namensnennung - Weitergabe unter gleichen Bedingungen 3.0
Unported Lizenz.
Siehe mehr unter: http://creativecommons.org/licenses/by-sa/3.0/deed.de
IT-Beratung, Training, Web-Design, Programmierung
Thomas Siegers ts@interwerkstatt.net

3
 Einführung
 Installation
 Administration
 Inhalt
 Taxonomy
 Menüs
 Widgets
 Plugins
 Themes
 Benutzer
Agenda
 Verwendung als CMS
 Datenschutz
 Blog Clients und Apps
 Integration von
Drittanwendungen
 9:00-15:00 Uhr, 16 UStd.

4
Konventionen
 Begriff
die Erklärung dazu in kleinerer Schrift und nicht fett
 Hauptmenüpunkt
 Untermenüpunkt*
 Englisch
englische Begriffe kursiv
 Verweise
Verweise (Links) in blau und klickbar
 Warnhinweis
hier besonders aufpassen
 Codezeilen
<p>in nichtproportionaler Schriftart</p>
*) Fußnote: Die hier gezeigten Konfigurationsanleitungen erheben nicht
den Anspruch, perfekt zu sein. Bitte flexibel anwenden.

5
Motto
"Sage es mir und ich vergesse es,
zeige es mir und ich erinnere mich,
lass es mich tun und ich behalte es."
Konfuzius, chinesischer Philosoph, 551479 v. Chr.

6
Begriffe
 CMS
 Content Management System, Redaktionssystem
 Webseite
 Webauftritt, Webangebot, website
 Webseiten, Seiten
 Einzelne Seiten des Webauftrittes, web pages
 Frontend, Backend
 HTML, CSS, JavaScript, PHP
 Datenbank, SQL
 Web-Host
 Webspace, Platz im Rechenzentrum

7
Content Management System
 Ablauf aus Sicht des Benutzers
 Benutzer meldet sich an Webseite an
 Benutzer findet dort Menü zur Verwaltung der Webseite
 Eingabe von Beiträgen mit Online-Editor
 kein lokales Erstellen und Hochladen nötig
 neu eingegebene Beiträge erscheinen sofort auf Webseite
 außer Browser keine lokal installierte Software nötig
 Zusätzliche Funktionen beim Blog
 Benutzer können Beiträge und Kommentare eingeben
 Verwaltung (Moderation) von Benutzern, Beiträge, Kommentaren
 Kategorisierung von Beiträgen (Taxonomie)
 automatische Benachrichtigung über Aktualisierungen des eigenen
Blogs

8
Konzept, Funktionen
 Trennung von Inhalt und Layout
 Inhalt in Datenbank oder Textdateien
 Layout mit Vorlagen, templates, themes
 Interaktivität
 Kontaktformular, Kommentare (Blog)
 Benutzerzugriffssteuerung
 ACL, access control list
 Erweiterte Funktionalitäten
 Arbeitsabläufe, work flow
 Integrierte Anwendungen
 Reservierungssystem, Foto Gallery, Forum, Shop

9
Statisch vs. Dynamisch
 Statische Webseite
 Seiten liegen als verlinkte HTML-Dateien “fertig zum Gebrauch” auf
einem Web-Server (oder sogar nur Datei-Server)
 Vorteile: einfach, sicher
 Nachteile: schwierig zu pflegen, nicht interaktiv
 Dynamische Webseite
 Inhalte sind in Datenbank (oder Textdateien) gespeichert
 Web-Anwendung (WordPress) nimmt Anfrage vom Browser
entgegen,
 verarbeitet die Anfrage
 Inhalte aus Datenbank holen
 Inhalte in Vorlagen einbauen
 und liefert Webseite an Browser zurück
 Vor- und Nachteile umgekehrt zur statischen Seite

10
Architektur
Web Server PHP-Modul
Browser
Web-Host
1. Anfrage
Link
Formular
3. Antwort
Webseite
2. Verarbeitung
Daten holen
Webseite bauen
Linux
Apache
MySQL
PHP
WordPress
Datenbank

11
Webanwendung
 Client-Server
Server: Anwendungsprogramm, Datenbank, Webserver
Client: Browser
 Netzwerkprotokoll: HTTP
zustandslos  Session, Cookies
Parameter: http://www.xyz.de/index.php?key1=val1&key2=val2
Struktur: http://URL/Pfad?Schlüssel=Wert&..., z. B. Farbe=rot
 Aktualisierung der Webseite nicht automatisch
Seiteninhalte müssen vom Server geladen werden (F5).
Um Bilder, CSS und JavaScript zu laden Strg+F5 drücken.
 Benutzerfreundlichkeit durch JavaScript
Dropdown-Menüs, Popup-Kalender, Drag & Drop usw.
 Tip: Back-Button besser nicht benutzen
Nur Buttons innerhalb der Webanwendung klicken.

12
Datenbank
 Anzahl von verknüpften Tabellen (Spalten, Zeilen)
 Schnelles Finden von Datensätzen aufgrund von Index
 Abfragesprache SQL
SELECT * FROM tabelle WHERE id=123
 Client-Server Architektur
Client: Webanwendung, Server: Datenbank
 Anmeldung mit Benutzer und Kennwort
Anwendung muss sich an der Datenbank anmelden.
 Weitere Funktionen
netzwerkfähig
Mehrbenutzerzugriff
 Anbieter
Open Source: MySQL, PostgreSQL
Kommerziell: Oracle, MS SQL Server

13
Bekannte CMS
 WordPress
 Insbesondere für Blogs
 Sehr benutzerfreundlich
 Sehr weit verbreitet
 Joomla
 „Schweizer Messer“
 Recht benutzerfreundlich
 Sehr weit verbreitet
 Drupal
 Sehr fein konfigurierbar
 Sehr hochwertige Auftritte
 Weltweit verbreitet
 TYPO3
 Eigene Skriptsprache
 Insbesondere für Firmen
 In Deutschland verbreitet

14
Fertige Angebote für Web-Präsenz
 Soziale Netzwerke
 Facebook, Google+, Myspace
 Beruflich: Xing, LinkedIn
 Besondere Zwecke: Stayfriends
 Blogs
 Twitter, Tumblr, Wordpress.com
 Multimedia
 YouTube, Instagram, Pinterest, Slideshare
 Baukästen
 angeboten von vielen Internet-Providern, Webhost-Anbietern oder
spezialisierten Plattformen, z. B. Jimdo, Wix, Weeby
Anmerkungen: Manche Seiten …
… verschwinden nach einiger Zeit wieder, z. B. SchülerVZ.
… wurden von anderen übernommen, z. B. Instagram von Facebook.

15
Open Source
 OSS – Open Source Software
 Quelloffen, öffentlich zugänglich
 Frage der Freiheit, nicht des Preises
 Vergleich: Redefreiheit, nicht Freibier
 http://www.gnu.org/philosophy/free-sw.html
 Verschiedene Lizenzmodelle
 GPL – GNU General Public License

16
WordPress Fakten
 Weltweit populärstes CMS
fast 75 Mio. Webseiten weltweit (lt. Forbes)
http://trends.builtwith.com/cms
 Geschrieben in PHP, verwendet i. d. R. MySQL Datenbank
 Über 55.000 Erweiterungen
Plugins, http://wordpress.org/plugins/
 Tausende von Formatvorlagen (Themes)
kostenlos, Preise ab 25 $
 Verwendet u.a. von Ebay, CNN, UPS, Mozilla, GM, Sony,
Reuters, Forbes, Samsung
http://en.wordpress.com/notable-users/
http://wordpress.org/showcase/tag/fortune-500/

17
Vor- und Nachteile
Vorteile
 Einfache Bedienung und Administration
 Popularität, Community
 Sehr gut als Blog oder für einfache Webseiten
 Riesige Anzahl von Erweiterungen und Templates
 Starkes „Ökosystem“ durch Projekte und Anwendungen
Nachteile
 Aufgrund Verbreitung beliebtes Angriffsziel
 Unübersichtlichkeit bei größeren Webseiten
 Viele Module nötig für komplexere Webseiten

18
Sicherheit
 Popularität
 Lohnendes Angriffsziel
 Keine offizielle Mailingliste
 Bugs: 20% Core, 80% Plugins
 Studie des BSI (Bundesamt für Sicherheit in der Informationstechnik)
 Maßnahmen: Updates, Auswahl der Plugins
http://codex.wordpress.org/FAQ_Security
 Kostenpflichtiges Angebot
http://vaultpress.com/
 Beispiel
Zwölf Sicherheitslücken, Update Ver. 3.5.2
http://wordpress.org/news/2013/06/wordpress-3-5-2/

19
Ressourcen
Englisch
http://wordpress.org/
http://wordpress.com/
http://codex.wordpress.org/
Anleitungen und technische Hinweise
en.wikipedia.org/wiki/WordPress
Mobil
http://android.wordpress.org/
http://wpiphone.wordpress.com/
http://wordpress.org/mobile/
Deutsch
http://de.wordpress.org/
offizielle deutsche WordPress Version
http://wpde.org/
Seite der deutschen WordPress-
Gemeinde
Info / Support
de.wikipedia.org/wiki/WordPress
Google
Youtube
Buchhandlung

20
Projekte
 Multisite (MU, µ) – Mandatenfähigkeit
http://mu.wordpress.org/
 BuddyPress – Social Networking
http://buddypress.org/, http://wordpress.org/plugins/buddypress
 BbPress – Forum (Bulletin Board)
http://bbpress.org/, http://wordpress.org/plugins/bbpress
 VideoPress – Video Hosting
http://videopress.com/
 VaultPress, VIP Support – Security, Backup, Support
http://vaultpress.com/, http://vip.wordpress.com/
 Apps für mobile Geräte
Automattic – Firma, die hinter WordPress.com steht

21
WordPress.com
 Kostenloser Blog auf http://wordpress.com/
 Adresse: http://interwerkstatt.wordpress.com/
 Werbung
 Begrenzte Anzahl von Themes
 Keine Installation von Themes und Plugins
 Modifikationen nicht möglich
 Eingeschränkter Speicherplatz
 Premium Upgrades auf http://store.wordpress.com/
 Plus: Sicherheit wird durch WordPress.com gewährleistet
 Vergleich: http://en.support.wordpress.com/com-vs-org/
 Features auf eigenem Host mit http://jetpack.me/

22
Web-Host
 Hostauswahl
 Bewertungsportale
http://www.webhostlist.de
http://www.hostsuche.de
 Shared Host
meistens ausreichend,
viel kostengünstiger als virtual oder dedicated host
 Virtual Host
eigenes System durch Virtualisierung, root-Zugang
 Dedicated Host
eigene Hardware, root-Zugang
 Vorausetzungen
Apache 2.x + mit mod_rewrite Modul, MySQL 5.0 +, PHP 5.2.4 +
http://wordpress.org/about/requirements/
Empfohlen: PHP 5.6 oder höher, MySQL 5.6 oder höher
Dez. 2015: Release von PHP Version 7 (11 Jahre nach Version 5)
https://de.wikipedia.org/wiki/Versionsgeschichte_von_PHP

23
Web-Host
 Administration
Verwaltung des Web-Hosts im Web-Browser
Adminoberfläche, Control Panel
cPanel (Demo), Plesk (Demo)
 Adminoberfläche
 Kontoeinstellungen
 E-Mail
 Datenbanken (phpMyAdmin)
 FTP Benutzer, Dateimanager (WebFTP)
 Domainverwaltung, Sub-Domains, Zusatzdomains
 Verzeichnisschutz (.htaccess Passwort)
 Datensicherung, -rücksicherung
 Statistik (Webalizer, AWStats)
 …

24
Benutzer
Passwort
Vorbereitung der Installation
Datenbank
Wordpress
Verzeichnis
Dateien
auf dem Server ein Verzeichnis anlegen
ZIP-Archiv herunterladen
Archiv auspacken
Dateien ins Verzeichnis hochladen
oder besser:
Archiv hochladen
auf dem Server auspacken
auf dem Server eine Subdomain anlegen
die Subdomain mit dem Verzeichnis
verknüpfen
z. B. test.meinedomain.de mit
/home/html/test verknüpfen
Subdomain = Web-Adresse
Verzeichnis = interner Speicherort

25
Ein-Klick Installation
 Ein-Klick Installation (1Click Install)
gängige Webanwendungen mit wenigen Eingaben installieren
Software muss nicht selbst hochgeladen werden
Datenbank muss nicht selbst angelegt werden
 Vorgehensweise
 Verzeichnis anlegen
dazu Dateimanager verwenden
 Subdomain anlegen
die Subdomain mit dem gerade angelegten Verzeichnis verknüpfen
 Webanwendung auswählen
d. h. Eingabeformular für Installation aufrufen
 Subdomain und Verzeichnis wählen
oder vorgegebene Werte belassen
 Eingaben für die Webanwendung
z. B. Titel, Administrator, Passwort, evtl. Datenbank

26
Subdomain anlegen
 Vorgehensweise
1. mit Dateimanager neues Verzeichnis anlegen
2. Subdomain anlegen und mit neuem Verzeichnis verknüpfen
 Dateimanager
auch Web-FTP genannt
oft nicht in der Admin-Oberfläche, sondern eigene Webseite
läuft machmal als Java-Applet, also muss Java lokal installiert werden
statt Web-FTP kann man auch lokales FTP-Programm einsetzen
bei FTP Passwort im Klartext, also SFTP oder FTPS verwenden
im Dateimanager zur Web-Root navigieren, z. B. /home/www/
dort ein neues Verzeichnis anlegen
 Administrationsoberfläche
auch Admin-Panel, Control-Panel o. ä. genannt
Menüpunkt Domainverwaltung
Subdomain angelegen
Subdomain: Namen eingeben, z. B. www, test o. ä.
Domain: meistens nur eine, sonst auswählen
Verzeichnis: vorher angelegtes Verzeichnis eingeben oder auswählen

27
Lokale LAMP-Umgebung
 LAMP
Linux – Apache – MySQL – PHP
 XAMPP
Windows – Apache – MySQL – PHP – Perl
http://www.apachefriends.org/de/xampp.html
 Vorteile
 Geht auch ohne Netzwerk, daher schnell
 Sicherheit kein Problem
 Lokal Dateien kopieren und editieren
Portable Version herunterladen und auspacken
Zur Konfiguration setup_xampp.bat ausführen
Starten mit http://localhost

28
Installation
 WordPress in 5 Minuten installieren (englisch)
 Installationsdateien
Archiv herunterladen (ZIP), auspacken und Dateien hochladen
oder besser: Archiv auf den Server hochladen und dort auspacken
 Datenbank
auf dem Web-Host Datenbank anlegen
Host-Adresse, Datenbankname, -benutzer, -passwort
 Konfigurationsdatei
wp-config-sample.php in wp-config.php umbenennen
Datenbank, Zeichensatz, Sortierfolge eintragen
alle Blogs mit derselben Datenbank → Tabellen-Präfix ändern
„Salz“-Phrase für Schlüssel eingeben
oder, wenn möglich...
Konfigurationsdatei vom Installationsprogramm erzeugen lassen

29
Installation
 Installationsprogramm
Installationsprogramm im Browser starten
eigenen Benutzernamen vergeben (besser nicht admin)
 .htaccess Datei anlegen
notwendig für suchmaschinenfreundliche URLs
Code bei codex.wordpress.org/htaccess herunterladen
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
Hinweise: Der Pfad für RewriteBase und RewriteRule (hier: /) wird von
Wordpress automatisch angepasst, wenn sich die Installation in einem
Unterverzeichnis befindet.
Seit ca. 2019 wird die .htaccess automatisch von WordPress angelegt.

30
Sicherheit
 Konfigurationsdatei sichern
in Web-Host Oberfläche (control panel) Rechte* überprüfen
644 bedeutet, alle könnten potentiell die Datei wp-config.php lesen
Recht für wp-config.php auf 600 oder wenigstens 640 ändern
 Readme Datei löschen
www.meine-seite.de/readme.html
enthält Versionsnummer, vereinfacht Angriff
nach jeder Aktualisierung erneut löschen 
Versionsnummer in Metadaten, im Theme oder mit Plugin entfernen 
 Admin-Login
nicht „admin“ als Benutzernamen verwenden
wenn möglich, Administration nur über SSL (siehe codex.wordpress.org)
 Aktualisierungen
zeitnah durchführen, Sicherheitsupdates werden automatisch durchgeführt
 Erweiterungen
sparsam verwenden, sorgfältig aussuchen
*) http://de.wikipedia.org/wiki/Unix-Dateirechte

31
Sicherheit
 WordPress „härten“
härten – in der IT anderes Wort für absichern
Original-Anleitung von WordPress
http://codex.wordpress.org/Hardening_WordPress
 Erweiterte Maßnahmen
Schutz von Dateien und Verzeichnissen
verschlüsselte Anmeldung – https (siehe Anleitung auf Codex)
dazu in wp-config.php folgende Zeile einfügen
define('FORCE_SSL_ADMIN', true);
evtl. Security-Plugin einsetzten – genau ansehen und abwägen!
 Zusammenfassung
Die wichtigsten Maßnahmen, die jeder unbedingt durchführen sollte:
Tabellen-Präfix ändern, wp_ → abcxyz_
Benutzername und Passwort des Administrators
Recht der Konfigurationsdatei wp-config.php ändern
Aktualisierung von WordPress (core), Plugins und Themes
Plugins – so nur soviel wie nötig, so wenig wie möglich
regelmäßige Datensicherung

32
Aktualisierung
 Versionen
Nummerierung: 1.2.3
neue Version . neue Funktionen . Sicherheitsverbesserungen
 Automatisch
seit Ver. 3.7 automatische Aktualisierung (abschaltbar)
automatisch nur z. B. von 4.1.1 auf 4.1.2, nicht von 4.1 auf 4.2
Jemand muss die Seite besuchen, um die Aktualisierung auszulösen.
 Backup
vor größerer Aktualisierung Datensicherung
Plugin: https://wordpress.org/plugins/backwpup/
 Plugins, Themes
nicht nur Core (WordPress) aktualisieren

33
Administration
 Anmelden
www.mydomain.de/wp-login.php
 Dashboard
 Beiträge
 Medien
 Seiten
 Kommentare
 Design
 Plugins
 Benutzer
 Werkzeuge
 Einstellungen
 Leiste oben
 Links nach WordPress
 Zur Seite
 Updates
 Kommentare
 Neu-Menü
 Profil
 Optionen
 Hilfe

34
Administration
 Übersicht
z. B. Beiträge → Alle Beiträge / Benutzer → Alle Benutzer
 Details / Bearbeiten / Erstellen
z. B. Beiträge → Maus auf „Mein Beitrag“ → Bearbeiten / Erstellen
 Schnelleinstellung
z. B. Beiträge → Maus auf „Mein Beitrag“ → QuickEdit
 Design
Interface unterschiedlich: Vorschau, Text-Editor, Drag & Drop
Themes, Widgets, Menüs, Editor: CSS und PHP Code ändern
 Plugins
Übersicht installierter Plugins
Online-Funktion zum Suchen und Installieren
 Einstellungen
Allgemein, Lesen, Schreiben usw.

35
Konfiguration
 Dashboard
 Aktualisierungen
WordPress, Plugins, Themes, Übersetzungen
 Plugins
 Installierte Plugins
überflüssige Plugins löschen: Akismet, Hello Dolly
 Einstellungen
 Allgemein
Zeitzone: Berlin, UTC+1
 Lesen
Sichtbarkeit für Suchmaschinen: (wurde bei Installation eingestellt)
 Permalinks
z. B. Tag und Name

36
Ping
 Update Service
benachrichtigt andere Dienste automatisch über Aktualisierungen des
eigenen Blogs
http://codex.wordpress.org/Update_Services
Ping-O-Matic – gehört zur WordPress Foundation
http://pingomatic.com/
 Einstellungen
 Lesen
Sichtbarkeit für Suchmaschinen: erlauben
 Schreiben
Update Services: http://rpc.pingomatic.com/
hier noch weitere geeignete Dienste eintragen
Empfehlung: nicht zu viele Dienste eintragen

37
Migration
 Warum Migration?
nach Fertigstellung der Seite von Sub-Domain in Live-Domain
Umzug auf neuen Webhost
 Einstellungen
 Allgemein
 Wordpress-Adresse (URL): neuen Wert eingeben,
z. B. vorher: http://test.mydomain.de, neu: http://www.mydomain.de
 Website-Adresse (URL): am besten gleicher Wert wie oben
 Button „Änderungen übernehmen“ klicken
Danach ist die Webseite nicht mehr erreichbar!
 Installation verschieben
Dateien – download-upload
Datenbank – export-import
Konfigurationsdatei wp-config.php – Datenbankparameter ändern
Datenbanktabelle wp_options – URL für home und siteurl ändern
weitere Infos unter https://codex.wordpress.org/Moving_WordPress

38
Spam
 Kommentarfunktion
Spamgefahr
Gefahr grundsätzlich bei jeder Art der Eingabe, z. B. Kontaktformular
 Akismet
Datenschutzproblem in Deutschland
 Alternativen
http://wordpress.org/plugins/search.php?q=antispam
datenschutzkonform
http://wordpress.org/plugins/antispam-bee/
Captcha
http://wordpress.org/plugins/captcha/
Cookies
http://wordpress.org/plugins/cookies-for-comments/
Forum
http://wordpress.org/plugins/bbpress-antispam/

39
Editor
 Seit Ende 2018 Block-Editor „Gutenberg“
Für jedes Textelement wird ein Block eingefügt,
z. B. Überschrift, Absatz, Bild usw.
Gutenberg ist nach der Installtion voreingestellt.
Plugin https://wordpress.org/plugins/gutenberg/
 „Classic Editor“
Ein großes Feld für Überschrift, Absatz, Bild usw.
wie in einem Textverarbeitungsprogramm.
Man kann den früheren Editor als Plugin installieren.
Plugin https://wordpress.org/plugins/classic-editor/
 Installation Classic Editor
Plugins – Installieren
Plugins durchsuchen: Classic Editor
Aktivieren

40
Theme
 Theme wechseln
einfaches, übersichtliches Theme
wie bei Demoseite wordpress.interwerkstatt.net
nicht mehr in neuer Version von Wordpress enthalten
kann einfach nachinstalliert werden
 Admin-Oberfläche
Design → Themes
Installieren (Neues Theme hinzufügen)
Themes suchen: Twenty Twelve
Installieren
Aktivieren

41
Inhalt
 Beiträge
Blog Post, Kommentar, Taxonomie
Formatvorlagen, Menüeintrag auf Kategorie
 Seiten
Page, „statisch“, keine Taxonomie
Hierarchie, Templates, Menüeintrag auf Seite
 Medien
Bilder, Audio, Video
meist in Beiträgen oder Seiten eingebettet
 Editor
Werkzeugleiste umschalten auf zweizeilig (rechtes Symbol, siehe Tooltip)
Visuell (WYSIWYG*) oder Text (HTML-Code)
Willkommen zur
<a href="http://de.wordpress.org">deutschen Version</a>
von <em>WordPress</em>.
*) What you see is what you get

42
Taxonomy
 Tierreich
Säugetiere
Raubtiere
Katzen
Löwe
 WordPress
Kategorien, Schlagworte (Tags)
nur für Beiträge (Posts), nicht für Seiten
hierarchische Struktur, mehrfache Zuordnung möglich
Unterstützung durch Menüs und Widgets (Tagwolke)
Beiträge → Kategorien
Beiträge → Schlagworte
auch direkt im Beitrag anlegen

43
Beiträge
 Beiträge
 Alle Beiträge
Übersicht, Schnelleinstellungen mit QuickEdit
 Kategorien
hierarchisch, Einstellung über „Eltern“
 Schlagworte
Tags, nicht hierarchisch
 Erstellen
Beiträge im Editor eingeben
 Veröffentlichen
Status, Sichtbarkeit, Revisionen, Datum
 Formatvorlage
Formatierung des Inhalts, abhängig vom Theme
 Beitragsbild
Funktionalität abhängig vom Theme

44
Seiten
 Seiten
 Alle Seiten
Übersicht, Schnelleinstellungen mit QuickEdit
 Permalink
ändern, wenn man den Titel geändert hat
 Erstellen
Seiten im Editor eingeben
Status, Sichtbarkeit, Revisionen, Datum
 Attribute
Eltern: hierarchische Ordnung
Template: Wahl der vom Theme bereitgestellten Vorlage
 Beitragsbild
gedacht um in der Übersicht ein Vorschaubild anzuzeigen
Funktionalität abhängig vom Theme

45
Wiederherstellen
Was tun, wenn man einen Beitrag oder eine Seite versehentlich
geändert oder gelöscht hat?
 Beiträge
 Titel – Bearbeiten
Revisionen nur vorhanden, wenn vorher Änderung vorgenommen wurde
Revisionen – Anzeigen
Revision auswählen und wiederherstellen
 Beiträge
 Papierkorb
neben „Alle“ „Veröffentlichte“
nur vorhanden, wenn vorher Beitrag gelöscht wurde
 Papierkorb
Titel - Wiederherstellen

46
Texte editieren
 WYSIWYG (what you see is what you get)
 WYSIWYM (what you see is what you mean)
englischer Artikel, anschaulicher, Vergleich mit Eisberg
 Tipps
 Stile verwenden
(Absatz, Überschrift, ...)
 Formatierung nicht kopieren
Bei der Übertragung von
Inhalten aus externen Quellen
nur den Text und nicht die
Formatierung kopieren.
 Änderungen nur mit CSS
Will man z. B. eine Überschrift
anders formatieren, dies nicht
einzeln, sondern zentral mit
CSS umsetzen.

47
Bilder
 Mediathek
Bilder können aus der Mediathek gewählt, oder beim Einfügen hochgeladen
werden.
 Beitragsbild
Beiträge / Seiten bearbeiten → Beitragsbild festlegen
Positionierung des Bildes abhängig vom Theme
Vorschau: kleines Bild – Detailansicht: großes Bild
funktioniert so bei vielen Themes nicht
Theme aussuchen, das diese Funktion unterstützt
 Bilder im Text
Mauszeiger dort im Text positionieren, wo das Bild eingefügt werden soll
oberhalb der Symbolleiste auf „Medien hinzufügen“ klicken
Bild aus Mediathek wählen oder hochladen
beim auf das Bild erscheint kleine Symbolleiste
mit Hilfe der Symbolleiste Bild ausrichten und bearbeiten

48
Widgets
 Funktion
Ein-, Ausgabe in bestimmten Bereichen außerhalb des Inhalts
z. B. Suche, Menüs, Kategorien
 Widget-Bereiche
Positionen auf der Seite, in die Widgets gesetzt werden können
z. B. Seitenleiste, Balken über dem Inhalt, Kasten oben rechts
abhängig vom Theme oder Template
 Konfiguration
Admin-Oberfläche: Design → Widgets
Widget mit in Bereich ziehen
Widget aufklappen und einstellen
Inaktive Widgets: Widget entfernen aber Einstellungen beibehalten
Optionen → Zugänglichkeitsmodus aktivieren: Drag & Drop abschalten
 Themewechsel
Abweichungen bei den Namen der Widgetbereiche
Widgets evtl. inaktiv

49
Daten – Verarbeitung – Darstellung
Konzept bei WordPress und den meisten anderen CMS:
Trennung von Inhalt und Layout
Verarbeitung
Core (WordPress)
Widgets, Plugins
Daten
Datenbank
Darstellung
Position im Theme
Seiten-
balken
Inhalt
Fußzeile

50
Widgets
 Plugins
Bei vielen Plugins wird nach deren Installation Plugin ein neues Widget
bereitgestellt
z. B. Sidebar Login – Anmeldeformular in einem Widget
 Sichtbarkeit
Standard: Widgets sind auf allen Seiten sichtbar
keine Möglickeit, die Sichtbarkeit (Visibility) einzustellen
Plugin: JP Widget Visibility
Erweiterung der Funktionalität von Widgets
Einstellmöglichkeiten: Seite, Beitrag, Benutzer, …

51
Menüs
 Konfiguration
Admin-Oberfläche: Design → Menüs
 Theme
Theme „Twenty Twelve“ unterstützt nur ein Menü.
Alle Seiten werden automatisch im Menü angezeigt.
Für Unterseiten werden automatisch Untermenüpunkte angelegt.
 Seitenmenü
zwei Menüs erstellen
Hauptmenü dem Theme zuordnen
für Seitenmenü Widget anlegen
 Menüpunkte
verfügbar für Links, Seiten, Kategorien
ggf. neuen Menüpunkt für Homepage erstellen
Namen können von ursprünglicher Bezeichnung abweichen

52
Plugins
 Verzeichnis
http://wordpress.org/plugins/, über 55.000 Plugins
Auswahl: Beschreibung, Bewertung, letzter Update
Hinweis auf inaktive oder verlassene Plugins
Description, Installation, FAQ, Screenshots, ...
 Installation
Admin-Oberfläche: Plugins → Installieren
Suchen – installieren – aktivieren
 Konfiguration
eigener Menüpunkt in Administrationsoberfläche
oder in Einstellungen
oder in Plugins → Installierte Plugins → Einstellungen
oder als zusätzliche Eigenschaft in andere Funktionen integriert
 Beispiel
Kontaktformular
https://wordpress.org/plugins/contact-form-7/

53
Themes
 Verzeichnis
http://wordpress.org/themes/
Suche mit Stich- oder Schlagworten (Tags)
 Mobil-freundlich
Responsive design: Layout passt sich der Bildschirmgröße an.
http://wordpress.org/themes/responsive
 Premium-Themes
http://wordpress.org/themes/commercial/
http://www.google.com/search?q=wordpress+premium+themes&lr=lang_de
 Installation
Admin-Oberfläche: Design → Themes → Theme installieren
Aktivieren, Anpassen, evtl. Einstellungen
 Konfiguration
Theme, Widgets, Menüs
Für Modifikationen am besten Child-Theme anlegen.

54
Benutzer
Vorgehensweise zur Unterdrückung des Namens des Autors in Beiträgen
 Administration
 Benutzer
 Spitzname
statt Namen Funktion eintragen, z. B. „Redaktion“
 Öffentlicher Name
statt den Namen die Funktion wählen, hier „Redaktion“
 Beiträge
alle Beiträge markieren
Mehrfachaktion: bearbeiten
Autor ändern
 Plugin
Show Hide Author
WP Meta and Date Remover
 Programm
im Code des Themes entsprechenden Zeilen suchen und entfernen

55
Rollen
 Zuordnung Benutzer → Rollen
 Zuordnung Rechte → Rollen
 Dokumentation deutsch, englisch
 Übersicht
 Administrator – kann alles installieren und konfigurieren
 Editor, Redakteur – Recht über eigene und andere Beiträge
 Author, Autor – eigene Beiträge schreiben und veröffentlichen
 Contributor, Mitarbeiter – nur eigene Beiträge schreiben
 Subscriber, Abonnent – Kommentare lesen und schreiben
 Super Admin – nur für Multisite-Installation
weniger Menüpunkte für Nicht-Admins
User Role Permission

56
SEO
 Suchmaschinenoptimierung
search engine optimization
 URL
http://www.xyz.de/index.php?key1=val1&key2=val2
http://www.xyz.de/kategorie/beitrag
Format einstellbar unter Einstellungen → Permalinks
Voraussetzung: Apache Modul mod_rewrite und .htaccess
 Meta-Daten
z. B. Titel-Tag
 Inhalt
entsprechend Titel-Tag
 Layout
barrierefreies Theme
 Plugins
http://wordpress.org/plugins/all-in-one-seo-pack/

57
WordPress als CMS
 Modifikationen
http://codex.wordpress.org/User:Lastnode/Wordpress_CMS
http://codex.wordpress.org/Custom_Post_Types
Code-Generator für Post Types, Taxonomy, Sidebars, etc.
 Plugins
http://wordpress.org/plugins/tags/cms
 Themes
für CMS geeignetes Theme aussuchen, am besten Premium-Theme
 Konfiguration
Startseite „statisch“ machen
Admin-Oberfläche: Einstellungen → Lesen
Startseite und Beitragsseite ändern
und, und, und ...
http://www.noupe.com/wordpress/powerful-cms-using-wordpress.html
 Alternativen
CMS mit mehr Funktionalität: Drupal, Joomla usw.

58
DSGVO
 EU-DSGVO – europäische Datenschutz-Grundverordnung
seit 25.5.2018
 WordPress Administration
 Werkzeuge
 Personenbezogene Daten exportieren / löschen
Mail an Benutzer senden, dieser kann bestätigen, dass er die Daten erhalten
oder gelöscht haben möchte. Admin sendet die Daten dem Benutzer oder
löscht sie.
 Einstellungen
 Diskussion
Opt-in-Checkbox für Kommentar-Cookies anzeigen.
Avatare deaktivieren
 Datenschutz
Seite für die Datenschutzerklärung auswählen oder erstellen
Artikel mit ausführlichen Informationen auf Heise

59
Integration dritter Anwendungen
 Facebook, Twitter
 Google Analytics
 Youtube, Vimeo, Dailymotion
 Amazon, Paypal
 Integration mit Plugin
Plugin für die gewünschte Drittanwendung suchen; diese stellen oft
Shortcodes zur Verfügung, mit denen man die Drittanwendung oder
Elemente davon einbinden kann.
 Integration über Code
Code auf der Seite der Drittanwendung ermitteln (z. B. unter „Embed“).
Den Code in das Theme kopieren, z. B. hinter das <body> Tag in der Datei
header.php. In anderen Fällen genügt es, den Code in die Seite oder
Beitrag einzufügen.

60
Blogging Clients und Apps
 Apps für Desktop und mobile Geräte
https://apps.wordpress.com/
Apps wie üblich von Google Play bzw. App Store installieren
 WordPress
Remote-Zugriff über XML-RPC, ist standardmäßig aktiviert
manche Hosts blockieren XML-RPC → FAQ
xmlrpc.php in xmlrpc2.php umbenennen und Plugin installieren
oder Eintrag in .htaccess
<IfModule security2_module>
SecRuleRemoveById 114
</IfModule>
 Theme
Posten auch möglich ohne App
mit Browser über Webseite mit
mobilfreundlichem Theme.

62
Geschafft
Danke für Ihre
Aufmerksamkeit!

WordPress - Webseiten erstellen mit CMS

Weitere ähnliche Inhalte

Was ist angesagt? (14)

Ähnlich wie WordPress - Webseiten erstellen mit CMS (20)

Mehr von Thomas Siegers (8)

WordPress - Webseiten erstellen mit CMS