WordPress - Webseiten erstellen mit CMS

  • 5,141 views
Uploaded on

 

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
5,141
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
9
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 1 29.-30.6.2013 WordPress Webseiten erstellen mit CMS VHS Neuss
  • 2. 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. 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. 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. 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. 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. 7 Architektur Datenbank Web Server WordPress PHP-Modul Browser Web-Host 1. Anfrage Link Formular 3. Antwort Webseite 2. Verarbeitung Daten holen Webseite bauen Linux Apache MySQL PHP
  • 8. 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. 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. 10 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  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. 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. 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. 13 WordPress Fakten  Weltweit populärstes CMS über 65 Mio. Webseiten weltweit http://en.wordpress.com/stats/ http://trends.builtwith.com/cms  Geschrieben in PHP, verwendet i.d.R. MySQL Datenbank  Über 25.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/
  • 14. 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. 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 Plugins http://codex.wordpress.org/FAQ_Security  Kostenpflichtiges Angebot http://vaultpress.com/  Aktuell Zwölf Sicherheitslücken, Update Ver. 3.5.2 http://wordpress.org/news/2013/06/wordpress-3-5-2/
  • 16. 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. 17 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
  • 18. 18 Web-Host  Shared Host viel 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 API mit PHP-Skript testen oder Funktion vom Web Host ausführen, es sollte „CGI/FastCGI “ erscheinen, nicht „Apache 2.0 Handler “, mit Skript überprüfen <?php phpinfo(); ?> <?php echo php_sapi_name(); ?> *) http://wordpress.org/about/requirements/
  • 19. 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. 20 Testumgebung  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
  • 21. 21 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  Installationsprogramm Installationsprogramm im Browser starten Benutzernamen ändern, admin  myname
  • 22. 22 Administration  Anmelden www.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. 23 Spam  Kommentarfunktion Spamgefahr  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/
  • 24. 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äche weniger Menüpunkte für Nicht-Admins User Role Permission
  • 25. 25 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)  Administrationsoberfläche Beitrag > Kategorien Beitrag > Schlagworte auch direkt im Beitrag anlegen
  • 26. 26 Inhalt  Beiträge Blog Post, Kommentar, Taxonomie Formatvorlagen, Menüeintrag auf Kategorie  Seiten “statisch“, keine Kommentare und Taxonomie Hierarchie, Templates, Menüeintrag auf Seite  Medien Fotos, Audio, Video, Galerie  Editor WYSIWYG* und Text Formatierung durch HTML-Tags  Medien Fotos, Audio, Video, Galerie *) What you see is what you get
  • 27. 27 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
  • 28. 28 Menüs  Konfiguration Admin-Oberfläche: Design > Menüs  Theme Standard-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
  • 29. 29 Plugins  Verzeichnis http://wordpress.org/plugins/, über 25.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 Youtube Video einbetten http://wordpress.org/plugins/youtube-embed-plus/
  • 30. 30 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
  • 31. 31 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 Titel-Tag  Inhalt wie im Titel-Tag  Layout barrierefreies Theme  Plugins http://wordpress.org/plugins/all-in-one-seo-pack/
  • 32. 32 Facebook Integration  Facebook Plugin für WordPress http://developers.facebook.com/wordpress/ http://wordpress.org/plugins/facebook/  Facebook App Für erweiterte Funktionen App erstellen. https://developers.facebook.com/apps App-ID und Anwendungs-Geheimcode in Plugin kopieren.  Facebook Social Plugins Kö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 WordPress Code 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. 33 Mobile Apps  App für Android http://android.wordpress.org/ wie üblich von Google Play installieren  WordPress Remote-Zugriff über XML-RPC, muss nicht aktiviert werden 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.
  • 34. 34 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 WordPress ist super als Blog! Für CMS gibt es Drupal, Joomla usw.
  • 35. 35 Q & A Fragen?
  • 36. 36 Geschafft Danke für Ihre Aufmerksamkeit!