![Ü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](https://image.slidesharecdn.com/wordpressonline-141104115346-conversion-gate01/85/WordPress-Grundlagen-Kurs-15-320.jpg)
![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](https://image.slidesharecdn.com/wordpressonline-141104115346-conversion-gate01/85/WordPress-Grundlagen-Kurs-31-320.jpg)
![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](https://image.slidesharecdn.com/wordpressonline-141104115346-conversion-gate01/85/WordPress-Grundlagen-Kurs-37-320.jpg)
![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](https://image.slidesharecdn.com/wordpressonline-141104115346-conversion-gate01/85/WordPress-Grundlagen-Kurs-68-320.jpg)
![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](https://image.slidesharecdn.com/wordpressonline-141104115346-conversion-gate01/85/WordPress-Grundlagen-Kurs-73-320.jpg)
![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](https://image.slidesharecdn.com/wordpressonline-141104115346-conversion-gate01/85/WordPress-Grundlagen-Kurs-108-320.jpg)
Hochgeladen vonBenjamin Hartwich
WordPress Grundlagen Kurs
Das Dokument behandelt die Grundlagen von WordPress und dem Erstellen von Webseiten, einschließlich der Verwendung von HTML, dem Aufbau von Datenbanken und der Implementierung von Content-Management-Systemen. Es erklärt, wie man WordPress installiert und konfiguriert, sowie rechtliche Anforderungen wie Impressum und Datenschutz. Außerdem werden Tipps für die Gestaltung von Blogs und das Einfügen von Medien gegeben, um eine benutzerfreundliche Online-Präsenz zu gewährleisten.
Weitere ähnliche Inhalte
![7 SEO Einsteiger-Tipps [SEODAY 2014, Felix Beilharz]](https://cdn.slidesharecdn.com/ss_thumbnails/seoday2014open-141102073924-conversion-gate02-thumbnail.jpg?width=640&height=640&fit=bounds)
WordPress Grundlagen Kurs
- 1.
- 2. Organisatorisches •Zertifikat fürdas 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.
- 4.
- 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. Diese Dokumente …liegen auf Rechnern im Netz und … werden von Browsern abgeholt und übersetzt. kommunizieren mittels Browser Server 6
- 7. Wie ruft manDokumente 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. Sendung mit derMaus – Internet 8 Quelle: https://www.youtube.com/watch?v=QKLz4ufCuKk
- 9. HTML = Haraldtö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. HTML Grundlagen •Format:<xy>Test 123</xy> •<head>: definiert Metadaten zur Seite •<body>: Ausgabe des Inhalts •Versionen: HTML 4, HTML 5 10
- 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. Kleine HTML 5Seite <!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. Übung •Erstelle einenOrdner 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. Wie gelangen Dokumenteauf einen Server? •(S)FTP = (Secure) File Transfer Protocoll •Programme: FileZilla, WinSCP Eigener Rechner Server Stellt Verbindung her / führt aus 14
- 15. Übung •Loggt euchmit 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. Aber •Dokumente sindstatisch •Für Aktualität und Interaktion mit dem Nutzer braucht es Funktionen •Alle Inhalte manuell verwalten? 16
- 17. Daher: Content ManagementSysteme •Inhalte werden zentral gespeichert •Besucher rufen sie kontextbezogen ab Dokumente Datenbank Server Browser möchte 17
- 18. Was ist eineDatenbank? •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. Was macht WordPress? Es stellt eine Umgebung zur Verwaltung, Darstellung und Erweiterung von Inhalten fürs Netz bereit. Dokumente Datenbank WordPress 19
- 20. Datenbank •Informationsspeicher fürWordPress (phpMyAdmin) Dokumente Datenbank WordPress 20
- 21. Für WordPress brauchtman… … einen Server … eine Domain … eine Datenbank … Speicherplatz … Power (PHP) 21
- 22.
- 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. Zwei Wege WordPressselbst 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. Das gibt esbei… … Webhosting Anbietern •Strato, Netcup, Alfahosting, 1&1, Hosteurope, Domaingo etc. 25
- 26. Webhosting – zubeachten •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.
- 28. Die Werkzeuge •Webhostingpaketverwaltung(Parallels) –Domain –(S)FTP –Datenbank –E-Mail –etc. 28
- 29. WordPress Installation •Softwarevon 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. Apropos sichere Passworte 30 Quelle: http://www.youtube.com/watch?v=myvhYZyxN_w
- 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. BLOGGEN – WIEDENN? 32
- 33. Installation von WordPress Screencast: 33 http://www.youtube.com/watch?v=UnaTk6Mj8_A
- 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. Aufbau von WordPress– Daten 35 Wichtig!! Daten via FTP Daten in der Datenbank
- 36. Aufbau von WordPress– Frontend 36 Header Content Container / Wrapper Footer Logo Navigation Sidebar Widget
- 37. Bitte einloggen Loggteuch jetzt bitte in den Adminbereich eurer Seite ein (siehe Mail mit den Zugangsdaten): http://blogs.summerschool- passau.de/[seitenname]/wp-admin 37
- 38. Aufbau von WordPress– Backend Login über /wp-admin 38 Inhalt Übersicht Struktur, Aussehen Erweiterungen, Einstellungen
- 39. Backend – GenerelleMenüführung 39 WordPress Adminbar links WordPress Adminbar rechts WordPress Optionen & Hilfe
- 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. Was ist einFeed? 41 Quelle: http://www.youtube.com/watch?v=uNRA4Ds7hbo
- 42. Permalinks •Sind feststehendeLinks zu eurem Inhalt •Sollten human readable sein (überprüfen!) 42
- 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. 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. Impressum •Du musstklarstellen, 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. Datenschutz •Dein Besuchermuss 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. Datenschutz – Warum? 47 Quelle (ab 21:14): http://video.uni-passau.de/video/Europe-vs-Facebook- Stand-und-Perspektiven-Max-Schrems/34fecd24664eed739076d684f044cdfd
- 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. 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. Seitentemplate •Je nachTheme 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. Übung •Erstellt eineSeite 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. Was ist eineSidebar? 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. Backend – Widgets Ein Widget ist ein Element mit Zusatzfunktionalität, das du innerhalb einer Sidebar platzieren kannst (z.B. Letzte Kommentare). 53
- 54. Übung •Füge Widgetshinzu •Teste Titel und Anzeige 54
- 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. Übung Erstellt einMenü, das aus mehreren Elementen besteht und macht es zur Topnavigation. 56
- 57.
- 58. Was sind eureVorstellungen? Was braucht ein guter Blog? 58
- 59. Struktur •Lesbarkeit, Übersichtlichkeit,Professionalität, Verweildauer, wiederkehrende Besucher •Formatierungen •Nicht nur Text (Tweets, Videos, Audios, Bilder, Tabellen, …) •Design des Themes •„Accessibility“ 59
- 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. 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. 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. Formatvorlagen •Ähnlich zuSeitentemplates 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. Übung •Erstellt einenTestartikel mit verschiedenen Formatierungen und Einbettungen •Als Text könnt ihr auch Lorem ipsum verwenden: www.loremipsum.de 64
- 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. 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. Übung Such direin (großes) Bild und optimiere es jeweils für das Netz: •mit Photoshop oder Irfanview •Lade es in deiner Mediathek hoch 67
- 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. 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. 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. Übung •Wähle einTheme aus und passe es an. •Schau dir mögliche Theme Options an. 71
- 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. 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. Tipps für Plugins •Je weniger, desto besser •Reviews, Bewertungen und Letztes Update- Datum ansehen •Immer Up-to-Date halten 74
- 75. Übung •Überleg direin 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. 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. TinyMCE Editor •Erweiterungder Formatierungsbuttons im Artikel und Seiteneditor. 77
- 78. Tabellen •Entweder direktim 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. 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. Plugin: Custom Sidebars •Verschiedene Sidebars pro Seite, Inhaltsart etc. •Kann pro Seite zugeordnet werden (Seitentemplate beachten) 80
- 81. Besucherstatistiken •Google Analytics,Piwik, WordPress Plugins 81
- 82. Kontaktformulare •Plugin: ContactForm 7 •Gestalten von Kontaktformularen mit automatischer Antwort 82
- 83. Sharing und SocialCounter •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. 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. Mehr…? Slider? Newsletter? Podcasting? …? 85
- 86. SEO 1x1 •Nutzeein 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. 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. Poedit •HTML-Schnippsel übernehmensowie Platzhalter, z.B. %1 •Sonderzeichen in HTML codieren, z.B. ü => ü (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. Poedit 89 AlleElemente Originalsprache Übersetzung
- 90. Übung Lad dirin Stud.IP eine Sprachdatei herunter und übersetze sie teilweise. 90
- 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. Geld verdienen •Flattr •PayLater •Google Adsense •Amazon Partnerlinks •PayPal 92
- 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.
- 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. 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. 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. Sicherheit bei Themes 98 https://wordpress.org/plugins/tac/ http://themecheck.org/
- 99. Backups •Datenbank regelmäßigbackupen, 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. 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. Und… … nurweil 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. Fazit Lass esruhen, Denk drüber nach, Mach was! 102
- 103. Wertvolle Links •AllgemeinPasswort 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. Wertvolle Links •BloggingEnglische 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. Wertvolle Links •SocialMedia Debugging Tool für Links in FB •Social Plugins FB •Google Webmaster Tools •Feedburner •Bloglovin 105
- 106.
- 107. CSS •HTML definiertden 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. 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. 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. Veranschaulichung CSS 110 Quelle: http://wiki.selfhtml.org/images/a/ae/Boxmodell.png
- 111. Beispiel <html> <head> <title>Zentrale Formate</title> <style type="text/css"> h1 { color:red; font-size:48px; } </style> </head> …. 111
- 112. Übung •Erweitere deinebisher 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