WordPress Grundlagen Kurs

4.303 Aufrufe

Veröffentlicht am

Meine Folien samt Übungen für den WordPress, den ich an der Uni Passau gehalten habe.

Veröffentlicht in: Internet
0 Kommentare
6 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
4.303
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
1.399
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
6
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

WordPress Grundlagen Kurs

  1. 1. WordPress – Wie?!
  2. 2. Organisatorisches •Zertifikat für das Besuchen der Veranstaltung •Teilnahme an beiden Tagen •Wenn´s zu schnell geht, melden •Wenn Fragen sind, fragen •Pause, Essen und Trinken jederzeit möglich •Alle Folien gibt es auch in Stud.IP 2
  3. 3. Eure Erwartungen? 3
  4. 4. INTERNET – HÄ? 4
  5. 5. Webseiten sind… … Dokumente, die mittels HTML (und CSS) verfasst sind. <html> <head> <title>Beschreibung der Seite</title> </head> <body> <p>Das ist ein Testtext</p> </body> </html> selfhtml.org 5
  6. 6. Diese Dokumente … liegen auf Rechnern im Netz und … werden von Browsern abgeholt und übersetzt. kommunizieren mittels Browser Server 6
  7. 7. Wie ruft man Dokumente im Netz ab? •DNS = Domain Name System (Telefonbuch des Internets) IP-Adresse / Ordner http://test.xy.de DNS / Denic 132.231.12.11 7
  8. 8. Sendung mit der Maus – Internet 8 Quelle: https://www.youtube.com/watch?v=QKLz4ufCuKk
  9. 9. HTML = Harald töpfert mal Lilien? •HTML ist eine Markup Language – ähnlich zu LaTeX •Präsentiert Inhalte mit bestimmtem Format •Große Nachschlagehilfe: http://wiki.selfhtml.org/ 9
  10. 10. HTML Grundlagen •Format: <xy>Test 123</xy> •<head>: definiert Metadaten zur Seite •<body>: Ausgabe des Inhalts •Versionen: HTML 4, HTML 5 10
  11. 11. Häufig genutzte Tags •<p>: Textabsatz •<a href="http://www.xy.de/">XY</a>: Links •<h1>,<h2>,…: Überschriften •<br>: Zeilenumbruch •<img src="baum.jpg" width="320" height="400" name="Baumbild" alt="Abendbaum">: Bild •<audio><source src="audio.mp3" type="audio/mp3" />Ihr Browser kennt das HTML5-audio-Element noch nicht.</audio>: Audio •<ul>, <ol>: Listen •<li>: Listenelement •<div>: Container (fassen mehrere Elemente zusammen) •<meta name="Regisseur" content="Peter Jackson">: Meta-Infos •Weiteres: http://wiki.selfhtml.org/wiki/HTML#Webseitenerstellung 11
  12. 12. Kleine HTML 5 Seite <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="keywords" content="HTML5, nicht mehr so wichtig"> <title>Meine erste HTML5-Seite</title> </head> <body> <h1>Test Überschrift</h1> <p>Das ist ein Beispieltext mit <a href="http://www.test.de">Link </a></p> </body> </html> 12
  13. 13. Übung •Erstelle einen Ordner mit deinem Nachnamen (klein geschrieben, Umlaute ausgeschrieben) auf dem Desktop. •Starte Notepad++ und lade die HTML-Seite aus Stud.IP •Speichere diese Seite mit dem Namen index.html in den Ordner und alle Bilder und Medien, die du darin einbindest. •Überprüfe deine HTML-Seite auf Fehler unter http://validator.w3.org/#validate_by_upload •Los geht´s ;) 13
  14. 14. Wie gelangen Dokumente auf einen Server? •(S)FTP = (Secure) File Transfer Protocoll •Programme: FileZilla, WinSCP Eigener Rechner Server Stellt Verbindung her / führt aus 14
  15. 15. Übung •Loggt euch mit WinSCP auf dem Server ein, klickt in das Verzeichnis /www/html/ und ladet den kompletten Ordner mit eurer index.html etc. hoch. •Tippt im Browser html.summerschool-passau.de/[ordnername] ein => Eure Webseite ist online ;) 15
  16. 16. Aber •Dokumente sind statisch •Für Aktualität und Interaktion mit dem Nutzer braucht es Funktionen •Alle Inhalte manuell verwalten? 16
  17. 17. Daher: Content Management Systeme •Inhalte werden zentral gespeichert •Besucher rufen sie kontextbezogen ab Dokumente Datenbank Server Browser möchte 17
  18. 18. Was ist eine Datenbank? •Ein Informationsspeicher •Besteht aus Tabellen (bestimmte Spalten mit bestimmten Dateiformaten) •Ähnlich wie ein Excel Datenblatt •Meist mit SQL gelöst: Structured Query Language •Hier werden nur textbasierte Infos gespeichert, keine Dateien 18
  19. 19. Was macht WordPress? Es stellt eine Umgebung zur Verwaltung, Darstellung und Erweiterung von Inhalten fürs Netz bereit. Dokumente Datenbank WordPress 19
  20. 20. Datenbank •Informationsspeicher für WordPress (phpMyAdmin) Dokumente Datenbank WordPress 20
  21. 21. Für WordPress braucht man… … einen Server … eine Domain … eine Datenbank … Speicherplatz … Power (PHP) 21
  22. 22. WEBHOSTING 22
  23. 23. Was ist Webhosting „Unter Webhosting oder auch Nethosting versteht man die Bereitstellung von Webspace sowie die Unterbringung (Hosting) von Webseiten auf dem Webserver eines Internet Service Providers (ISP).“ -Wikipedia „Webhosting ist die technische Grundlage, mit der meist einfach und kostengünstig eigene Webseiten betrieben werden können.“ -Benni 23
  24. 24. Zwei Wege WordPress selbst hosten •Relativ eigenständig •Volle Anpassungsmöglichkeit •Kontrolle über die Werkzeuge •Lerneffekt => Selbstständigkeit! WordPress.com nutzen •Abhängig •Wenig Anpassungsmöglichkeit •Premium Modell ohne Werkzeuge •Lerneffekt nur in der Bedienung => Wenig Selbstständigkeit 24
  25. 25. Das gibt es bei… … Webhosting Anbietern •Strato, Netcup, Alfahosting, 1&1, Hosteurope, Domaingo etc. 25
  26. 26. Webhosting – zu beachten •Vertragsdaten (Laufzeit, Kündigung, Upgrade) •Domain und Traffic Flatrate inklusive •Speicherplatz (min. 5 GB) •FTP-Benutzeranzahl, Web-FTP •Datenbankanzahl •E-Mail (Webmail, IMAP(S), SMTP, Spamfilter, Virenfilter, Speicherplatz) •Domainverwaltung (DNS, Subdomains, Routing) •Backups (automatisch / manuell)? •PHP Memory Limit (Power), PHP Upload Filesize (Datei- Upload ohne FTP), PHP Execution Limit (Ausführdauer) •Preis- / Leistung: bei ca. 2-3€ im Monat 26
  27. 27. Webhosting – Beispiel 27
  28. 28. Die Werkzeuge •Webhostingpaketverwaltung (Parallels) –Domain –(S)FTP –Datenbank –E-Mail –etc. 28
  29. 29. WordPress Installation •Software von wordpress.org herunterladen und entpacken •FTP-Verbindung herstellen, (Verzeichnis erstellen), Dateien hochladen •Domain in das Verzeichnis (index.php) routen •Datenbank erstellen (=> Passwort Generator!) •Domain aufrufen •Installation starten 29
  30. 30. Apropos sichere Passworte 30 Quelle: http://www.youtube.com/watch?v=myvhYZyxN_w
  31. 31. Apropos sichere Passworte Rechenzeit eines Brute-Force-Angriffs bei 1 Milliarde Schlüsseln pro Sekunde Passwortlänge Zeichenraum 4 Zeichen 5 Zeichen 6 Zeichen 7 Zeichen 8 Zeichen 9 Zeichen 10 Zeichen 11 Zeichen 12 Zeichen 10 [0-9] <1 ms <1 ms 1 ms 10 ms 100 ms 1 Sekunde 10 Sekunden 2 Minuten 17 Minuten 26 [a-z] <1 Sekunde <1 Sekunde <1 Sekunde 8 Sekunden 4 Minuten 2 Stunden 2 Tage 42 Tage 3 Jahre 52 [A-Z;a- z] <1 Sekunde <1 Sekunde 20 Sekunden 17 Minuten 15 Stunden 33 Tage 5 Jahre 238 Jahre 12.400 Jahre 62 [A-Z;a- z;0-9] <1 Sekunde <1 Sekunde 58 Sekunden 1 Stunde 3 Tage 159 Tage 27 Jahre 1.649 Jahre 102.000 Jahre 96 (+Sonderzeichen) <1 Sekunde 8 Sekunden 13 Minuten 21 Stunden 84 Tage 22 Jahre 2.108 Jahre 202.000 Jahre 19 Mio Jahre 31 Quelle: Wikipedia
  32. 32. BLOGGEN – WIE DENN? 32
  33. 33. Installation von WordPress Screencast: 33 http://www.youtube.com/watch?v=UnaTk6Mj8_A
  34. 34. Besonderheiten bei WordPress •Eine Möglichkeit, eine Webseite zu kreieren •Sowohl Blog als auch Unternehmensseite •Stabil •Einfach und schnell zu installieren •Keine hohen Technikanforderungen •Große Pluginbibliothek, leicht zu erweitern •Große Themebibliothek, leicht zu verwalten 34
  35. 35. Aufbau von WordPress – Daten 35 Wichtig!! Daten via FTP Daten in der Datenbank
  36. 36. Aufbau von WordPress – Frontend 36 Header Content Container / Wrapper Footer Logo Navigation Sidebar Widget
  37. 37. Bitte einloggen Loggt euch jetzt bitte in den Adminbereich eurer Seite ein (siehe Mail mit den Zugangsdaten): http://blogs.summerschool- passau.de/[seitenname]/wp-admin 37
  38. 38. Aufbau von WordPress – Backend Login über /wp-admin 38 Inhalt Übersicht Struktur, Aussehen Erweiterungen, Einstellungen
  39. 39. Backend – Generelle Menüführung 39 WordPress Adminbar links WordPress Adminbar rechts WordPress Optionen & Hilfe
  40. 40. Backend – Einstellungen •Allgemein: Titel, Zeitzone etc. des Blogs •Schreiben: Standardkategorie für Beiträge •Lesen: Anzeige und Ausgabe der Beiträge im Frontend / Feed •Diskussion: Einstellungen für Kommentare auf dem Blog •Medien: Größen der Bilder in der Mediathek •Permalinks: Anzeigeform der URLs des Blogs 40
  41. 41. Was ist ein Feed? 41 Quelle: http://www.youtube.com/watch?v=uNRA4Ds7hbo
  42. 42. Permalinks •Sind feststehende Links zu eurem Inhalt •Sollten human readable sein (überprüfen!) 42
  43. 43. Inhaltstypen in WordPress •Beiträge –Chronologische Einträge, nach Kategorien geordnet –z.B. Beitrag über ein Fußballspiel, eine Buchrezension etc. •Seiten –Feststehende Menüelemente –z.B. Impressum 43
  44. 44. Rechtliches •Urheberrecht! •Einbettungen (Videos, Soundcloud, Vimeo) können problemlos eingebunden werden! => GEMA-Urteil des EuGh (http://www.augsburger- allgemeine.de/digital/EuGH-Urteil-Youtube- Videos-duerfen-auf-Seiten-eingebunden-werden- id31782952.html)! •Aber Vorsicht: Nur legale Uploads! •Impressum, Datenschutzerklärung, Haftungsausschluss 44
  45. 45. Impressum •Du musst klarstellen, wer für das Angebot verantwortlich ist, d.h.: –Name und Adresse –Kontakt und Telefon –Haftungsausschluss •Das Impressum muss auf jeder Seite mit nur einem Klick erreichbar sein. •Generator: http://e-recht24.de/impressum- generator.html 45
  46. 46. Datenschutz •Dein Besucher muss wissen, welche Daten erhoben werden, d.h. du musst eine klare Aussage treffen über: wer erhebt welche Daten und was passiert damit. •Generator: http://rechtsanwalt- schwenke.de/smmr-buch/datenschutz- muster-generator-fuer-webseiten-blogs-und- social-media/ 46
  47. 47. Datenschutz – Warum? 47 Quelle (ab 21:14): http://video.uni-passau.de/video/Europe-vs-Facebook- Stand-und-Perspektiven-Max-Schrems/34fecd24664eed739076d684f044cdfd
  48. 48. Seiten erstellen •Optionen (oben rechts) berücksichtigen! •WYSIWYG Editor (ausklappen) •Diskussion aktivieren? •Reihenfolge für bessere Übersicht und als Sortierung im Menü •Elternseite? •Evtl. Beitragsbild festlegen, wenn Theme das unterstützt 48
  49. 49. Editor in WordPress •WYSIWYG: So wie der Artikel im Backend aussieht, wird er später auch auf der Seite aussehen. •Wie in Word: Text mit Markierungen formatieren •Modus: Visuell für Schreiben, Text für HTML 49
  50. 50. Seitentemplate •Je nach Theme gibt es die Möglichkeit, einer Seite verschiedene Anzeigemodi zuzuordnen •Z.B.: Gesamte Breite oder mit Sidebar •Sinnvoll für Impressum, Kontaktseiten etc. 50
  51. 51. Übung •Erstellt eine Seite für das Impressum und eine für die Datenschutzerklärung (Sharing Buttons werden wir noch einbauen). •Überlegt euch bei der Datenschutz-Erklärung, welche Dienste ihr verwenden wollt. 51
  52. 52. Was ist eine Sidebar? Sidebar is basically a vertical column provided by a theme for displaying information other than the main content of the web page. Sidebars usually contain widgets that an administrator of the site can customize. -WordPress 52
  53. 53. Backend – Widgets Ein Widget ist ein Element mit Zusatzfunktionalität, das du innerhalb einer Sidebar platzieren kannst (z.B. Letzte Kommentare). 53
  54. 54. Übung •Füge Widgets hinzu •Teste Titel und Anzeige 54
  55. 55. Backend – Menüs •Mehrere Menüs erstellen (Topnavigation, Footer, Sidebar etc.) •Kategorien, Links, Seiten als Möglichkeit •Kann als Primäre Navigation aktiviert werden (Reihenfolge bei Seiten dann nicht mehr von Bedeutung) 55
  56. 56. Übung Erstellt ein Menü, das aus mehreren Elementen besteht und macht es zur Topnavigation. 56
  57. 57. AUFBAU EINES BLOGS 57
  58. 58. Was sind eure Vorstellungen? Was braucht ein guter Blog? 58
  59. 59. Struktur •Lesbarkeit, Übersichtlichkeit, Professionalität, Verweildauer, wiederkehrende Besucher •Formatierungen •Nicht nur Text (Tweets, Videos, Audios, Bilder, Tabellen, …) •Design des Themes •„Accessibility“ 59
  60. 60. Schreiben für Online •Mehr erzählen, darstellen •Auf persönlicher Ebene •Keine Pseudo-Infos, sondern wirkliches „Special Interest“ •Länge spielt keine so große Rolle, solange die Infos wichtig, gut aufbereitet und strukturiert sind. •Feedback (Zahlen, Kommentare, Reaktionen) analysieren und reagieren •Mehr: http://www.affenblog.de/blogartikel- strukturieren/ 60
  61. 61. Beiträge verfassen •Optionen (oben rechts) verwenden! •Strukturierung des Inhalts (Überschriften, Zitate, Medien etc.) •Kategorisierung und Verschlagwortung •Medien ressourcensparend einbinden (Bilder!) •Immer an Mobile denken (Mobile first => Ladezeit der Seite, wenn sie viele Medien enthält)! •Auf Formatierungen anderer Texte beim Einfügen achten! •Artikel durch Vorschau und nach Veröffentlichung prüfen •Permalink auf Lesbarkeit überprüfen •Artikel-Format (Postformat) bestimmen •Beitragsbild festlegen, wenn Theme dieses gut einsetzt •Verschiedene Versionen pro Speichern des aktuellen Artikelzustandes 61
  62. 62. Einbettungen •Soundcloud, Vimeo, YouTube, Issu, Instragram.. •WordPress unterstützt viele Anbieter: http://codex.wordpress.org/Embeds •Einfach Link in den Artikel einfügen (ohne Formatierung!) und WordPress generiert automatisch eine Einbettung. 62
  63. 63. Formatvorlagen •Ähnlich zu Seitentemplates und ebenfalls abhängig vom Theme •Ein Artikel kann unterschiedlich aussehen, je nach Formatvorlage, z.B. ein Audiosymbol am Anfang haben bei der Vorlage „Audio“ 63
  64. 64. Übung •Erstellt einen Testartikel mit verschiedenen Formatierungen und Einbettungen •Als Text könnt ihr auch Lorem ipsum verwenden: www.loremipsum.de 64
  65. 65. Bilder •Photoshop, Irfanview (+ Plugins), GIMP •Auflösung anpassen: 1000px X / 1400px X •Option: Für das Web speichern •Buttons / Design-Elemente: PNG •Natürliche Bilder: JPEG •Bei JPEG: Immer mit Qualitätsregler arbeiten (+ Weichzeichner) •Ziel: 50 bis 150 KByte 65
  66. 66. Backend – Mediathek •Uploadgrenze je nach Hoster und Tarif (PHP Upload File Size) •Alternative-Text: Wenn Bild nicht angezeigt werden kann, Maus Hover •Beschriftung: Bildunterschrift (Caption) •Beschreibung: Dient der Mediathek •Ausrichtung: Ausrichtung in der Seite / im Beitrag •Link zu: z.B. wird das Bild an sich verlinkt (Standard: Mediendatei) •Größe 66
  67. 67. Übung Such dir ein (großes) Bild und optimiere es jeweils für das Netz: •mit Photoshop oder Irfanview •Lade es in deiner Mediathek hoch 67
  68. 68. Themes in WordPress •Bilden das Design eurer Seite •Kostenlos: z.B. unter wordpress.org •Kostenpflichtig: z.B. unter themeforest.com •Pfad: /wp-content/themes/[themename] •Installation, Aktivierung und Anpassung in WordPress Backend unter Design/Themes •Theme / Plugins herausfinden: http://www.wpthemedetector.com/ 68
  69. 69. Tipps für Themes •Überprüfe die Formatierungen, die das Theme anbietet. •Wie ist die Struktur der Seite generell? •Gibt es komische Farb-/Kontrastmischungen? •Passt sich das Theme an, sobald du den Browser kleiner machst (responsiv)? •Bietet es eine Sidebar? •Kann es übersetzt werden? •Überprüfe die Ansicht des Themes in verschiedenen Browsern! •Seitenladezeit auf dem Smartphone? •Autorboxen etc.? 69
  70. 70. Aufbau eines Themes 70 Bilder Sprachdateien Vorschaubild Haupt-CSS PHP-Dateien: Aufteilung der einzelnen Komponenten in einzelne PHP-Dateien, z.B. header.php für die Headsektion
  71. 71. Übung •Wähle ein Theme aus und passe es an. •Schau dir mögliche Theme Options an. 71
  72. 72. Weitere Design Erweiterungen •Google Fonts: Mehr Schriftarten fürs Web •Font Awesome: Icons (Vektorgrafiken) •Flaticon: Icons (Vektorgrafiken) •Grid: Mehrere Elemente neben- und untereinander, die sich responsiv verhalten •Parallax: Bildelemente, die beim Scrollen ineinander übergehen 72
  73. 73. Plugins in WordPress Plugins fügen dem Blog zusätzliche Funktionen hinzu, z.B. Sharing-Buttons. •Kostenfrei: wordpress.org •Kostenpflichtig, z.B.: codecanyon.com •Pfad: /wp-content/plugins/[pluginname] •Installation, Aktivierung, Verwaltung im WordPress Backend 73
  74. 74. Tipps für Plugins •Je weniger, desto besser •Reviews, Bewertungen und Letztes Update- Datum ansehen •Immer Up-to-Date halten 74
  75. 75. Übung •Überleg dir ein paar Funktionen, die dein Blog haben soll. •Suche über Google und die WordPress Plugin Bibliothek gezielt Plugins aus. •Wenn sie bereits verfügbar sind, aktiviere sie, ansonsten sag kurz Bescheid. 75
  76. 76. Shortcodes in WordPress •Werden von Themes / Plugins angeboten •Erfüllen eine Platzhalter-Funktion innerhalb eines Artikels / Seite zum Anzeigen bestimmter Inhalte (z.B. Tabs, Akkordions, Kontaktformulare, Galerien etc.) 76
  77. 77. TinyMCE Editor •Erweiterung der Formatierungsbuttons im Artikel und Seiteneditor. 77
  78. 78. Tabellen •Entweder direkt im Editor oder mit Plugin (z.B. Tablepress) •Keine fixen px bei der Gesamtbreite der Tabelle angeben, sondern % nehmen •Tabellen werden nie für das Design verwendet! => Grid-Plugins etc. 78
  79. 79. Lightbox, Fancybox, … •Schöne Anzeige von Bildern in einer Art Popup, Galerien (teils auch Audios und Videos) •Plugins: WP Lightbox, Responsive Lightbox etc. 79
  80. 80. Plugin: Custom Sidebars •Verschiedene Sidebars pro Seite, Inhaltsart etc. •Kann pro Seite zugeordnet werden (Seitentemplate beachten) 80
  81. 81. Besucherstatistiken •Google Analytics, Piwik, WordPress Plugins 81
  82. 82. Kontaktformulare •Plugin: Contact Form 7 •Gestalten von Kontaktformularen mit automatischer Antwort 82
  83. 83. Sharing und Social Counter •Plugins: z.B. Addthis, 2 Click Social Share etc. •Facebook: https://developers.facebook.com/docs/plugins/like-box-for-pages (Iframe) •Twitter: https://twitter.com/settings/widgets/ 83
  84. 84. Open Graph Einstellungen •Sind Metainformationen für soziale Netzwerke zum Generieren der Linkvorschau •Erfunden von Facebook •Überprüfen: https://developers.facebook.com/tools/debug/ •<meta property="og:title" content="The Rock" /> <meta property="og:type" content="video.movie" /> <meta property="og:url" content="http://www.imdb.com/title/tt0117500/" /> <meta property="og:image" content="http://ia.media- imdb.com/images/rock.jpg" /> 84
  85. 85. Mehr…? Slider? Newsletter? Podcasting? …? 85
  86. 86. SEO 1x1 •Nutze ein Plugin, z.B. All in One SEO Pack •Home Description + Keywords •Verschlagworte deine Artikel •Nutze keine verspielten Überschriften (oder füge für Google andere Überschriften hinzu) •Nutze Sitemaps und das Google Webmaster Tool •Verknüpfe deine Seite mit einem Google+ Profil 86
  87. 87. Mehrsprachigkeit •.po / .mo bzw. .pot •meist in Ordner /lang oder /language(s) •Für Plugins, Themes, WordPress •Sprache innerhalb von PHP codiert, in .po extrahiert •Editor: Poedit 87
  88. 88. Poedit •HTML-Schnippsel übernehmen sowie Platzhalter, z.B. %1 •Sonderzeichen in HTML codieren, z.B. ü => &uuml; (http://de.selfhtml.org/html/referenz/zeichen.htm) •In Länderkürzel-Code speichern, z.B. de_DE.po und in language Ordner hochladen 88
  89. 89. Poedit 89 Alle Elemente Originalsprache Übersetzung
  90. 90. Übung Lad dir in Stud.IP eine Sprachdatei herunter und übersetze sie teilweise. 90
  91. 91. Seitenladezeit •Mobile first, daher muss die Seite selbst bei langsamer Verbindung schnell geladen werden. •Hauptprobleme: Zu viele Plugins, zu große Bilder •Tests: http://www.pagespeed.de/, http://tools.pingdom.com/fpt/ •Plugin: Google Pagespeed Insights for WordPress •Lösungen: Caching (Plugins) oder intelligente Ressourcenverwaltung (z.B. Lazy Load) 91
  92. 92. Geld verdienen •Flattr •PayLater •Google Adsense •Amazon Partnerlinks •PayPal 92
  93. 93. Socializing •Feedburner, iTunes, Podcast.de etc. •Facebook Seite oder Abofunktion im Profil? •Newsletter? •Share Buttons, Follow-Buttons etc. •Pluginschnittstellen, z.B. auf Facebook! 93
  94. 94. WordPress aktualisieren? 94
  95. 95. Backend – Werkzeuge •Daten importieren: XML mit allen Artikeln, Seiten und Einstellungen in WordPress importieren (Achtung keine Mediendateien beinhaltet!) •Daten exportieren: Alle Beiträge, Seiten und Einstellungen des Blogs exportieren (Achtung keine Mediendateien beinhaltet!) 95
  96. 96. Backend – Benutzer Mögliche Erweiterungen: Role Scoper, User Role Editor 96 BEFUGNIS ADMIN REDAKTEUR AUTOR MITARBEITER ABONNENT Themes ändern Themes bearbeiten Plugins aktivieren Plugins bearbeiten Benutzer bearbeiten Dateien bearbeiten Einstellungen bearbeiten Importieren Kommentare moderieren Kategorien verwalten Links verwalten veröffentlichte Beiträge bearbeiten Beiträge anderer bearbeiten Seiten bearbeiten Dateien hochladen Beiträge veröffentlichen Beiträge bearbeiten lesen Quelle: http://dokupress.de/wordpress-benutzerhandbuch/administrator-handbuch/rollen-und-befugnisse/#Rollen
  97. 97. Sicherheit in WordPress •Immer aktuell halten (Plugins, WordPress)! •Loginbereich: –Sichere Passworte, schlaue Benutzernamen –Brute Force Attacken abwehren (=> Plugin) •Nicht zu viele Infos verraten •404-Erkennung •Schnittstellen schließen (Live writer) •Backups! •Sicherheitstest: http://wprecon.com/ 97
  98. 98. Sicherheit bei Themes 98 https://wordpress.org/plugins/tac/ http://themecheck.org/
  99. 99. Backups •Datenbank regelmäßig backupen, z.B. durch Export über phpMyAdmin •Gesamten WordPress Blog + Datenbank regelmäßig backupen: Backup-Plugin, z.B. Back WP up, UpdraftPlus Backup and Restoration for WordPress •Werkzeuge: Exportieren 99
  100. 100. Und zum Schluss •Halte deine Blogsoftware up-to-date •Bleib dran und schau nicht dauernd auf die Zahlen •Entwickle / bastle / verbessere von Zeit zu Zeit •Lies, was sich in der Szene tut (Newsletter, Blogger etc.) •Lern googlen und lös deine Probleme selbstständig => Mach dir die Technologie zu eigen! 100
  101. 101. Und… … nur weil du bloggen kannst, bist du noch lang kein Informatiker, ABER: Die Kernkonzepte des Internets zu verstehen, kann bei täglicher Onlineaktivität nicht schaden und du wirst sie nur verstehen, wenn du es selbst machst. 101
  102. 102. Fazit Lass es ruhen, Denk drüber nach, Mach was! 102
  103. 103. Wertvolle Links •Allgemein Passwort Generator •Sichere Passworte erstellen •Übersetzung von Sprachdateien: Poedit •Übersetzung von Sprachdateien online •FTP Programm •Firebug Seitenanalyse Tool •Lokaler Server zum Selbstprobieren •Bilder für das Netz speichern 103
  104. 104. Wertvolle Links •Blogging Englische offizielle Dokumentation von WordPress •11 WordPress Tools, die du vielleicht übersiehst •Deutsche Dokumentation •Medieneinbettung für WordPress Beiträge •WordPress Security Test •Am meisten genutzte Plugins, Themes bei WordPress •Theme / Plugin Detektor •Theme Check Online Tool •Theme Check Plugin Malware •Welche Daten werden wo gesendet •Stop User Enumeration •Ranking WordPress Plugins •Backup Plugin Beispiel (Wichtig: Backup in einen Ordner schreiben lassen, der aus dem Internet nicht erreicht wird, also z.B. in das übergeordnete Verzeichnis von dem Hauptverzeichnis der Domain) 104
  105. 105. Wertvolle Links •Social Media Debugging Tool für Links in FB •Social Plugins FB •Google Webmaster Tools •Feedburner •Bloglovin 105
  106. 106. ZUSATZ 106
  107. 107. CSS •HTML definiert den Inhalt, CSS das Aussehen •Es werden einzelne HTML-Elemente mittels Selektor angesprochen und für diese Elemente werden Formatierungen definiert. •Muster: Selektor { Eigenschaft1: Wert; Eigenschaft2: Wert; } •Beispiel: h1 { color: red; text-align: center; } 107
  108. 108. Mögliche CSS Selektoren •*: universal für alle Elemente •#[name]: Alle Elemente mit dem Namen dieser ID (in html: <div id="test">) •.[name]: Klassen, z.B. <img class="header" /> •a: Alle a Attribute (weitere: img, p, h1) 108
  109. 109. Mögliche CSS Eigenschaften •color: Farbe der Schrift (hex: #...) •background: Farbe des Hintergrunds (hex: #...) •font-size: Schriftgröße (px) •text-align: Textausrichtung (center, left, right) •width: Breite •height: Höhe •margin: Außenabstand •padding: Innenabstand •border: Rahmen 109
  110. 110. Veranschaulichung CSS 110 Quelle: http://wiki.selfhtml.org/images/a/ae/Boxmodell.png
  111. 111. Beispiel <html> <head> <title>Zentrale Formate</title> <style type="text/css"> h1 { color:red; font-size:48px; } </style> </head> …. 111
  112. 112. Übung •Erweitere deine bisher erstellte HTML-Seite um ein Stylesheet und tüftle etwas mit den Selektoren herum •Überprüfe deine HTML-Seite auf Fehler unter http://validator.w3.org/#validate_by_upload •Los geht´s 112

×