1

29.-30.6.2013

WordPressWebseiten erstellen mit CMS

VHS Neuss

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.0Unported 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

Benutzer

Inhalt

Taxonomy

Menüs

Widgets

Plugins

Themes

Agenda

Mobile Apps

Facebook Integration

Wordpress als CMS

Zeit 2 x 7 U-Std.

4

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, 551-479 v. Chr.

5

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

6

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

7

Architektur

Datenbank

Web Server

WordPress

PHP-Modul

Browser

Web-Host

1. Anfrage Link Formular

3. Antwort Webseite

2. Verarbeitung Daten holen Webseite bauen

LinuxApacheMySQLPHP

8

Konzept

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

9

Datenbank

Anzahl von verknüpften Tabellen

Verknüpfung mit Hilfe von Schlüsseln

Schnelles Finden durch Indizes

Abfragesprache SQL

Client-Server Architektur

DBMS: Programm + Daten

Netzwerkfähig: DBMS auf Server im Internet

Sicherheit: Anmeldung mit Benutzer und Kennwort

Integrität: Mehrbenutzerzugriff, Transaktionssicherheit

Open Source: MySQL, PostgreSQL

Kommerziell: Oracle, MS SQL Server

10

Webanwendung

Client-ServerServer: Anwendungsprogramm, Datenbank, WebserverClient: Browser

Netzwerkprotokoll: HTTPzustandslos Session, CookiesParameter: http://www.xyz.de/index.php?key1=val1&key2=val2

Aktualisierung der Webseite nicht automatisch (F5)Seiteninhalte müssen vom Server geladen werden.

Benutzerfreundlichkeit durch JavaScript

Tip: Back-Button besser nicht benutzen

Info: Statische Webseite ist keine Webanwendung.

11

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

Weit verbreitet

TYPO3

Eigene Skriptsprache

Insbesondere für Firmen

In Deutschland verbreitet

12

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

13

WordPress Fakten

Weltweit populärstes CMSüber 65 Mio. Webseiten weltweithttp://en.wordpress.com/stats/http://trends.builtwith.com/cms

Geschrieben in PHP, verwendet i.d.R. MySQL Datenbank

Über 25.000 ErweiterungenPlugins, http://wordpress.org/plugins/

Tausende von Formatvorlagen (Themes)kostenlos, Preise ab 25 $

Verwendet u.a. von Ebay, CNN, UPS, Mozilla, GM, Sony, Reuters, Forbes, Samsunghttp://en.wordpress.com/notable-users/http://wordpress.org/showcase/tag/fortune-500/

14

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

Verwundbarkeit muss beachtet werden

Unübersichtlichkeit bei größeren Webseiten

Viele Module nötig für komplexere Webseiten

Fehlende Enterprise-Features: ACL, Workflow, Logging

15

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 Pluginshttp://codex.wordpress.org/FAQ_Security

Kostenpflichtiges Angebothttp://vaultpress.com/

AktuellZwölf Sicherheitslücken, Update Ver. 3.5.2http://wordpress.org/news/2013/06/wordpress-3-5-2/

16

Ressourcen

Englisch

http://wordpress.org/

http://wordpress.com/

http://codex.wordpress.org/

en.wikipedia.org/wiki/WordPress

Mobil

http://android.wordpress.org/

http://wpiphone.wordpress.com/

http://wordpress.org/mobile/

Deutsch

http://de.wordpress.org/

http://wpde.org/ (Anmerkung)

deutsches Komplettpaket auf wpde.org

de.wikipedia.org/wiki/WordPress

Dokumentation

http://dokupress.de/

Google

Youtube

Buchhandlung

17

Projekte

Multisite (MU, µ) – Mandatenfähigkeithttp://mu.wordpress.org/

BuddyPress – Social Networkinghttp://buddypress.org/, http://wordpress.org/plugins/buddypress

BbPress – Forum (Bulletin Board)http://bbpress.org/, http://wordpress.org/plugins/bbpress

VideoPress – Video Hostinghttp://videopress.com/

VaultPress, VIP Support – Security, Backup, Supporthttp://vaultpress.com/, http://vip.wordpress.com/

Apps für mobile Geräte

Automattic – Firma, die hinter WordPress.com steht

18

Web-Host

Shared Hostviel kostengünstiger als virtual oder dedicated host, meistens ausreichend

Vorausetzungen*Apache 2.x + mit mod_rewrite Modul, MySQL 5.0 +, PHP 5.2.4 +

Server APImit PHP-Skript testen oder Funktion vom Web Host ausführen,es sollte „CGI/FastCGI “ erscheinen, nicht „Apache 2.0 Handler “,mit Skript überprüfen

<?phpphpinfo();?>

<?phpecho php_sapi_name();?>

*) http://wordpress.org/about/requirements/

19

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/

20

Testumgebung

LAMPLinux – Apache – MySQL – PHP

XAMPPWindows – Apache – MySQL – PHP – Perlhttp://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

21

Installation

WordPress in 5 Minuten installieren (englisch)

InstallationsdateienArchiv herunterladen (ZIP), auspacken und Dateien hochladenoder besser: Archiv auf den Server hochladen und dort auspacken

Datenbankauf dem Web-Host Datenbank anlegenHost-Adresse, Datenbankname, -benutzer, -passwort

Konfigurationsdateiwp-config-sample.php in wp-config.php umbenennenDatenbank, Zeichensatz, Sortierfolge eintragenalle Blogs mit derselben Datenbank Tabellen-Präfix ändern„Salz“-Phrase für Schlüssel eingeben

InstallationsprogrammInstallationsprogramm im Browser startenBenutzernamen ändern, admin myname

22

Administration

Anmeldenwww.mydomain.de/wp-login.php

Administrationsoberfläche

Dashboard

Beiträge

Medien

Seiten

Kommentare

Designs

Plugins

Benutzer

Werkzeuge

Einstellungen

Leiste oben

Links

Zur Seite

Updates

Kommentare

Neu

Profil

Optionen

Hilfe

Version aktualisieren!

23

Spam

KommentarfunktionSpamgefahr

AkismetDatenschutzproblem in Deutschland

Alternativenhttp://wordpress.org/plugins/search.php?q=antispamdatenschutzkonformhttp://wordpress.org/plugins/antispam-bee/Captchahttp://wordpress.org/plugins/captcha/Cookieshttp://wordpress.org/plugins/cookies-for-comments/Forumhttp://wordpress.org/plugins/bbpress-antispam/

24

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

Administrationsoberflächeweniger Menüpunkte für Nicht-Admins

User Role Permission

25

Taxonomy

TierreichSäugetiere

Raubtiere Katzen Löwe

WordPressKategorien, Schlagworte (Tags)nur für Beiträge (Posts), nicht für Seitenhierarchische Struktur, mehrfache Zuordnung möglichUnterstützung durch Menüs und Widgets (Tagwolke)

AdministrationsoberflächeBeitrag > KategorienBeitrag > Schlagworteauch direkt im Beitrag anlegen

26

Inhalt

BeiträgeBlog Post, Kommentar, TaxonomieFormatvorlagen, Menüeintrag auf Kategorie

Seiten“statisch“, keine Kommentare und TaxonomieHierarchie, Templates, Menüeintrag auf Seite

MedienFotos, Audio, Video, Galerie

EditorWYSIWYG* und TextFormatierung durch HTML-Tags

MedienFotos, Audio, Video, Galerie

*) What you see is what you get

27

Widgets

FunktionEin-, Ausgabe in bestimmten Bereichen außerhalb des Inhaltsz. B. Suche, Menüs, Kategorien

Widget-BereichePositionen auf der Seite, in die Widgets gesetzt werden könnenz. B. Seitenleiste, Balken über dem Inhalt, Kasten oben rechtsabhängig vom Theme oder Template

KonfigurationAdmin-Oberfläche: Design > WidgetsWidget mit in Bereich ziehenWidget aufklappen und einstellenInaktive Widgets: Widget entfernen aber Einstellungen beibehaltenOptionen > Zugänglichkeitsmodus aktivieren: Drag & Drop abschalten

ThemewechselAbweichungen bei den Namen der WidgetbereicheWidgets evtl. inaktiv

28

Menüs

KonfigurationAdmin-Oberfläche: Design > Menüs

ThemeStandard-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 erstellenHauptmenü dem Theme zuordnenfür Seitenmenü Widget anlegen

Menüpunkteverfügbar für Links, Seiten, Kategorienggf. neuen Menüpunkt für Homepage erstellenNamen können von ursprünglicher Bezeichnung abweichen

29

Plugins

Verzeichnishttp://wordpress.org/plugins/, über 25.000 PluginsAuswahl: Beschreibung, Bewertung, letzter UpdateHinweis auf inaktive oder verlassene PluginsDescription, Installation, FAQ, Screenshots, ...

InstallationAdmin-Oberfläche: Plugins > InstallierenSuchen – installieren – aktivieren

Konfigurationeigener Menüpunkt in Administrationsoberflächeoder in Einstellungenoder in Plugins > Installierte Plugins > Einstellungenoder als zusätzliche Eigenschaft in andere Funktionen integriert

BeispielYoutube Video einbettenhttp://wordpress.org/plugins/youtube-embed-plus/

30

Themes

Verzeichnishttp://wordpress.org/themes/Suche mit Stich- oder Schlagworten (Tags)

Mobil-freundlichResponsive design: Layout passt sich der Bildschirmgröße an.http://wordpress.org/themes/responsive

Premium-Themeshttp://wordpress.org/themes/commercial/http://www.google.com/search?q=wordpress+premium+themes&lr=lang_de

InstallationAdmin-Oberfläche: Design > Themes > Theme installierenAktivieren, Anpassen, evtl. Einstellungen

KonfigurationTheme , Widgets, Menüs

31

SEO

Suchmaschinenoptimierungsearch engine optimization

URLhttp://www.xyz.de/index.php?key1=val1&key2=val2http://www.xyz.de/kategorie/beitragFormat einstellbar unter Einstellungen > PermalinksVoraussetzung: Apache Modul mod_rewrite und .htaccess

Meta-DatenTitel-Tag

Inhaltwie im Titel-Tag

Layoutbarrierefreies Theme

Pluginshttp://wordpress.org/plugins/all-in-one-seo-pack/

32

Facebook Integration

Facebook Plugin für WordPresshttp://developers.facebook.com/wordpress/http://wordpress.org/plugins/facebook/

Facebook AppFür erweiterte Funktionen App erstellen.https://developers.facebook.com/appsApp-ID und Anwendungs-Geheimcode in Plugin kopieren.

Facebook Social PluginsKönnen in jede Seite eingebunden werden, nicht nur WordPress.Beispiele: Like Button, Share Dialog, Like Box, Login, etc.http://developers.facebook.com/docs/reference/plugins/like-box/

Integration in WordPressCode auf der Facebook Developer Seite generieren.Den ersten Teil davon hinter das <body> Tag kopieren (header.php).Den Rest des Codes in die Seite oder Beitrag einfügen.

33

Mobile Apps

App für Androidhttp://android.wordpress.org/wie üblich von Google Play installieren

WordPressRemote-Zugriff über XML-RPC, muss nicht aktiviert werdenmanche Hosts blockieren XML-RPC FAQxmlrpc.php in xmlrpc2.php umbenennen und Plugin installierenoder Eintrag in .htaccess<IfModule security2_module>SecRuleRemoveById 114</IfModule>

ThemePosten auch möglich ohne Appmit Browser über Webseite mitmobilfreundlichem Theme.

34

WordPress als CMS

Modifikationenhttp://codex.wordpress.org/User:Lastnode/Wordpress_CMShttp://codex.wordpress.org/Custom_Post_TypesCode-Generator für Post Types, Taxonomy, Sidebars, etc.

Pluginshttp://wordpress.org/plugins/tags/cms

Themesfür CMS geeignetes Theme aussuchen, am besten Premium-Theme

KonfigurationStartseite „statisch“ machen

Admin-Oberfläche: Einstellungen > LesenStartseite und Beitragsseite ändern

und, und, und ... http://www.noupe.com/wordpress/powerful-cms-using-wordpress.html

AlternativenWordPress ist super als Blog! Für CMS gibt es Drupal, Joomla usw.

35

Q & A

Fragen?

36

Geschafft

Danke für Ihre Aufmerksamkeit!