WordPress Grundlagen Kurs

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

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

Diese Dokumente
… liegen auf Rechnern im Netz und
… werden von Browsern abgeholt und übersetzt.
kommunizieren mittels
Browser
Server
6

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

Sendung mit der Maus – Internet
8
Quelle: https://www.youtube.com/watch?v=QKLz4ufCuKk

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

HTML Grundlagen
•Format: <xy>Test 123</xy>
•<head>: definiert Metadaten zur Seite
•<body>: Ausgabe des Inhalts
•Versionen: HTML 4, HTML 5
10

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

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

Ü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

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

Ü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

Aber
•Dokumente sind statisch
•Für Aktualität und Interaktion mit dem Nutzer braucht es Funktionen
•Alle Inhalte manuell verwalten?
16

Daher: Content Management Systeme
•Inhalte werden zentral gespeichert
•Besucher rufen sie kontextbezogen ab
Dokumente
Datenbank
Server
Browser
möchte
17

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

Was macht WordPress?
Es stellt eine Umgebung zur Verwaltung, Darstellung und Erweiterung von Inhalten fürs Netz bereit.
Dokumente
Datenbank
WordPress
19

Datenbank
•Informationsspeicher für WordPress (phpMyAdmin)
Dokumente
Datenbank
WordPress
20

Für WordPress braucht man…
… einen Server
… eine Domain
… eine Datenbank
… Speicherplatz
… Power (PHP)
21

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

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

Das gibt es bei…
… Webhosting Anbietern
•Strato, Netcup, Alfahosting, 1&1, Hosteurope, Domaingo etc.
25

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

Die Werkzeuge
•Webhostingpaketverwaltung (Parallels)
–Domain
–(S)FTP
–Datenbank
–E-Mail
–etc.
28

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

Apropos sichere Passworte
30
Quelle: http://www.youtube.com/watch?v=myvhYZyxN_w

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

Installation von WordPress
Screencast:
33
http://www.youtube.com/watch?v=UnaTk6Mj8_A

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

Aufbau von WordPress – Daten
35
Wichtig!!
Daten via FTP
Daten in der Datenbank

Aufbau von WordPress – Frontend
36
Header
Content
Container / Wrapper
Footer
Logo
Navigation
Sidebar
Widget

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

Aufbau von WordPress – Backend
Login über /wp-admin
38
Inhalt
Übersicht
Struktur, Aussehen
Erweiterungen,
Einstellungen

Backend – Generelle Menüführung
39
WordPress Adminbar links
WordPress Adminbar rechts
WordPress Optionen & Hilfe

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

Was ist ein Feed?
41
Quelle: http://www.youtube.com/watch?v=uNRA4Ds7hbo

Permalinks
•Sind feststehende Links zu eurem Inhalt
•Sollten human readable sein (überprüfen!)
42

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

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

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

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

Datenschutz – Warum?
47
Quelle (ab 21:14): http://video.uni-passau.de/video/Europe-vs-Facebook- Stand-und-Perspektiven-Max-Schrems/34fecd24664eed739076d684f044cdfd

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

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

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

Ü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

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

Backend – Widgets
Ein Widget ist ein Element mit Zusatzfunktionalität, das du innerhalb einer Sidebar platzieren kannst (z.B. Letzte Kommentare).
53

Übung
•Füge Widgets hinzu
•Teste Titel und Anzeige
54

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

Übung
Erstellt ein Menü, das aus mehreren Elementen besteht und macht es zur Topnavigation.
56

Was sind eure Vorstellungen?
Was braucht ein guter Blog?
58

Struktur
•Lesbarkeit, Übersichtlichkeit, Professionalität, Verweildauer, wiederkehrende Besucher
•Formatierungen
•Nicht nur Text (Tweets, Videos, Audios, Bilder, Tabellen, …)
•Design des Themes
•„Accessibility“
59

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

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

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

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

Übung
•Erstellt einen Testartikel mit verschiedenen Formatierungen und Einbettungen
•Als Text könnt ihr auch Lorem ipsum verwenden: www.loremipsum.de
64

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

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

Ü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

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

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

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

Übung
•Wähle ein Theme aus und passe es an.
•Schau dir mögliche Theme Options an.
71

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

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

Tipps für Plugins
•Je weniger, desto besser
•Reviews, Bewertungen und Letztes Update- Datum ansehen
•Immer Up-to-Date halten
74

Ü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

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

TinyMCE Editor
•Erweiterung der Formatierungsbuttons im Artikel und Seiteneditor.
77

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

Lightbox, Fancybox, …
•Schöne Anzeige von Bildern in einer Art Popup, Galerien (teils auch Audios und Videos)
•Plugins: WP Lightbox, Responsive Lightbox etc.
79

Plugin: Custom Sidebars
•Verschiedene Sidebars pro Seite, Inhaltsart etc.
•Kann pro Seite zugeordnet werden (Seitentemplate beachten)
80

Besucherstatistiken
•Google Analytics, Piwik, WordPress Plugins
81

Kontaktformulare
•Plugin: Contact Form 7
•Gestalten von Kontaktformularen mit automatischer Antwort
82

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

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

Mehr…?
Slider?
Newsletter?
Podcasting?
…?
85

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

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

Poedit
•HTML-Schnippsel übernehmen sowie 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

Poedit
89
Alle Elemente
Originalsprache
Übersetzung

Übung
Lad dir in Stud.IP eine Sprachdatei herunter und übersetze sie teilweise.
90

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

Geld verdienen
•Flattr
•PayLater
•Google Adsense
•Amazon Partnerlinks
•PayPal
92

Socializing
•Feedburner, iTunes, Podcast.de etc.
•Facebook Seite oder Abofunktion im Profil?
•Newsletter?
•Share Buttons, Follow-Buttons etc.
•Pluginschnittstellen, z.B. auf Facebook!
93

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

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

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

Sicherheit bei Themes
98
https://wordpress.org/plugins/tac/
http://themecheck.org/

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

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

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

Fazit
Lass es ruhen,
Denk drüber nach,
Mach was!
102

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

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

Wertvolle Links
•Social Media Debugging Tool für Links in FB
•Social Plugins FB
•Google Webmaster Tools
•Feedburner
•Bloglovin
105

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

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

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

Veranschaulichung CSS
110
Quelle: http://wiki.selfhtml.org/images/a/ae/Boxmodell.png

Beispiel
<html>
<head>
<title>Zentrale Formate</title>
<style type="text/css">
h1 { color:red; font-size:48px; }
</style>
</head>
….
111

Ü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

WordPress Grundlagen Kurs

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (18)

Ähnlich wie WordPress Grundlagen Kurs

Ähnlich wie WordPress Grundlagen Kurs (20)

WordPress Grundlagen Kurs