SFT PRAXIS: „Das große Wordpress-Handbuch“ Das große Wordpress-Handbuch (Vorschau)

SPIELE I FILME I TECHNIK
praxis präsentiert von den Spiele-Filme-Technik-Experten
Das große Handbuch für
WORDPRESS
Einsteiger- und Expertenwissen für bessere Blogs
Neu!
Ausgabe
2014
Wichtige Plug-ins • Eigene Themes designen • Website absichern
Mehr Individualität mit HTML5 • Für Suchmaschinen optimieren
SFT PRAXIS 03/14
€ 12,99
Österreich 14,50 Euro
Schweiz 22,- SFr
Benelux 15,- Euro
w

ALLE PREMIUM- BOOKAZINES IM ÜBERBLIcK
NEU
NEU
Bequem online bestellen:
shop.computec.de/edition
Jetzt auch für
das iPad in der
Computec-Kiosk-App

Das große Handbuch für
WORDPRESS
Das ist WordPress
WordPress ist die populärste Blogging-Plattform der Welt. Mehr als die Hälfte
aller Websites, die auf Content-Management-Systemen basieren, sind mit der
WordPress-Software erstellt worden. Millionen Blogger rund um den Erdball
betreiben Ihre Weblogs mit WordPress. Bei der Plattform handelt es sich um
freie und Open-Source-Software, die von jedem kosten los verwendet werden
kann. Bisher sind Zehntausende Plug-ins von der WordPress-Community
entwickelt worden, mit deren Hilfe sich die Software mit allen erdenklichen
Zusatzfunktionen ausstatten lässt. Eine endlose Zahl von Designvorlagen
(Themes) steht überdies zur Auswahl.
Werden Sie Bloggerin oder Blogger!
Ein Blog gibt Ihnen die Möglichkeit, Ihre Gedanken und Erlebnisse mit der
Welt zu teilen. Wenn Sie ein bestimmtes Interessengebiet oder Hobby haben
und für Gleichgesinnte oder Neuentdecker darüber schreiben möchten, wenn
Sie mit Ihrer Leidenschaft andere anstecken und der Begeisterung gemeinsam
Ausdruck verleihen wollen, oder wenn Sie etwas von sich und Ihrem
Leben in Texten oder Bildern erzählen möchten – dann könnte ein eigenes
Weblog das goldrichtige Medium für Sie sein. Die technische Seite einer
WordPress-Installation ist so denkbar einfach, dass Sie sich ganz auf die kreative
Gestaltung der Inhalte konzentrieren können, wenn Sie möchten. Doch
auch für versierte Webdesigner oder solche, die es werden wollen, bietet
WordPress eine riesige Spielwiese – so vielseitig ist die Plattform.
Das große WordPress-Handbuch
In diesem Bookazine finden Sie alles, was Sie brauchen, um ein WordPress-
Blog oder eine WordPress-Website aufzusetzen: Beginnend mit einer Einführung
in die grundlegenden Funktionen der Software und einem Leitfaden
für die Installation auf eigenem Webspace über Tutorials, die Ihnen Einblicke
in die technischen Möglichkeiten geben, bis hin zu einer Übersicht über die
besten Plug-ins ist alles da! Viel Erfolg und viel Vergnügen beim kreativen
Arbeiten mit WordPress!

Inhalt
Alles, was Sie brauchen,
um ein WordPress-Blog
aufzusetzen, zu gestalten
und zu perfektionieren
SEITE
146
GRUNDLAGEN
10 Lernen Sie WordPress kennen
30 So finden Sie das passende
Hosting
34 WordPress installieren
36 Mehrere Blogs auf einer
Domain einrichten
38 Mehrere Subdomains
verwalten
40 Benutzerrechte für Ihr Blog
vergeben
42 E-Mail-Konten mit cPanel
verwalten
44 Performance laufend
überwachen mit cPanel
46 Sichern Sie Ihr Blog mit cPanel
48 WordPress mit Sicherheit
SEITE
12
THEMES
58 Maßgeschneiderte WordPress-
Themes
68 Fürs Blog das richtige Theme
74 Erstellen Sie ein grafisches
WP-Theme mit Photoshop
78 Postings in voller Breite
anzeigen lassen
82 Erstellen Sie ein Theme für
WordPress mit Underscores
88 Portieren Sie Ihre WordPress-
Seite für Mobilgeräte
94 Ein Theme auf HTML5
umstellen
SEITE
68
PLUG-INS
100 Die besten Plug-ins für
WordPress
112 WordPress-Plug-ins bearbeiten
114 Bessere Performance durch
Optimierung
118 Bauen Sie eine Infobox mit Infos
über den Verfasser als Plug-in
124 Erstellen Sie ein Plug-in für ein
Gewinnspiel
128 Leistungsfähige und
ansprechende Formulare
130 Machen Sie Ihr WordPress-Blog
mehrsprachig
132 Schnelleres WordPress für SEO
und Besucher
46 Das Mac große OS X Genius WordPress-Handbuch
Guide

WordPress
Inhalt
SEITE
200
TUNING
138 Ein Blick auf frische Retro-
Designs
140 Taxonomien in WordPress
verwenden
144 Überschriften animieren
146 Fotoslider-Header erstellen
und designen
152 Passen Sie Ihr Theme mit
Widgets an
156 Individuelle Fonts verwenden
und stylen
160 Typografie de luxe mit CSS3
und JavaScript
SEITE
100 SEITE
160
HTML5/CSS3
166 Interaktive HTML5-Grafiken
172 Infografik im Vektor-Stil
erstellen mit Photoshop
176 Modernste Navigationseffekte
dank CSS3
180 Persistente Überschriften mit
CSS und jQuery
184 Interaktive Bildbeschriftungen
mit CSS3
188 Animieren Sie Ihre Inhalte
192 Tooltip-Plug-in mit jQuery
schreiben
SEITE
172
196 Eingebettete Twitter-Feed-
QuickInfo mit jQuery
200 Inhalte für das HTML5-Canvas-
Tag erstellen
204 Suchmaschinenoptimierung
für Ihr Blog
206 Webseiten-Daten mit Google
Analytics auswerten
Das große Mac WordPress-Handbuch OS X Genius Guide 75

Das Kult-magazin für gamer
nur Digital für apple ipaD: Jetzt im app store mit gratis-leseprobe
eDge De #267 – Juni 2014
Die Besten Boss-kÄmpfe aller Zeiten
klassiker-konsolen-WieDerGeBurt
Der GaminG-stanDort hamBurG
komplett interaktiv
komplett in Deutsch
nur für apple ipaD
eDGe is the trademark of future publishing limited, a future plc
group company, uk 2013. used under licence. all rights reserved.

SPIELE I FILME I TECHNIK
praxis
Das große Handbuch für
WORDPRESS
Ein Unternehmen der MARQUARD MEDIA INTERNATIONAL AG
Verleger Jürg Marquard
Verlag
Geschäftsführer
Computec Media GmbH
Dr.-Mack-Straße 83, 90762 Fürth
Telefon: +49 911 2872-100
Telefax: +49 911 2872-200
E-Mail: redaktion@sft-magazin.de
www.spielefilmetechnik.de
Rainer Rosenbusch, Ingo Griebl, Hans Ippisch
Chefredakteur SFT PRAXIS (V.i.S.d.P.) Christian Müller, verantwortlich für den redaktionellen Inhalt, Adresse siehe Verlagsanschrift
Redakteur für besondere Aufgaben Lars Craemer
Mitarbeiter dieser Ausgabe MDV Textdienste (Übersetzung, Layout, Lektorat)
Ina Hulm (Lektorat), Christiane Scholz (Layout)
Layoutkoordination SFT PRAXIS
Albert Kraus
Vertrieb, Abonnement Werner Spachmüller (Ltg.)
Marketing Jeanette Haag
Produktion Martin Closmann (Ltg.), Jörg Gleichmar
www.spielefilmetechnik.de
Entwicklung Markus Wollny (Ltg.), René Giering, Aykut Arik, Tobias Hartlehnert
Webdesign Tony von Biedenfeld, Emanuel Popa
Anzeigen
CMS Media Services GmbH, Dr.-Mack-Straße 83, 90762 Fürth
Anzeigenleiter
Gunnar Obermeier, verantwortlich für den Anzeigenteil. Adresse siehe Verlagsanschrift
Anzeigenberatung Print:
Bernhard Nusser: Tel.: 0911-2872-254; bernhard.nusser@computec.de
René Behme: Tel.: 0911-2872-152; rene.behme@computec.de
Alto Mair: Tel.: 0911-2872-144; alto.mair@computec.de
Anne Müller: Tel.: 0911-2872-251; anne.mueller@computec.de
Anzeigenberatung Online:
freeXmedia GmbH
Ein Unternehmen der freenet Group
Deelbögenkamp 4c, 22297 Hamburg
Tel.: +49 (0) 40-513 06-650
Fax. +49 (0) 40-513 06-960
Mail: werbung@freeXmedia.de
www.freeXmedia.de
Anzeigendisposition: anzeigen@computec.de
Datenübertragung: via E-Mail: anzeigen@computec.de
Es gelten die Mediadaten Nr. 27 vom 01.01.2014
Abonnement
Die Abwicklung (Rechnungsstellung, Zahlungsabwicklung und Versand) erfolgt über unser Partner unternehmen DPV Direct GmbH: Post-Adresse: Leserservice Computec, 20080 Hamburg, Deutschland
Ansprechpartner für Reklamationen ist Ihr Computec-Team unter:
Deutschland: E-Mail: computec@dpv.de, Tel.: 0911-99399098, Fax: 01805-8618002*
Support: Montag 07:00–20:00 Uhr, Dienstag–Freitag 07:30–20:00 Uhr, Samstag 09:00–14:00 Uhr
* (14 Cent/Min. aus dem dt. Festnetz, max. 42 Cent/Min. aus dem dt. Mobilfunk)
Österreich, Schweiz und weitere Länder: E-Mail: computec@dpv.de,
Tel: +49-911-99399098, Fax: +49-1805-8618002
Support: Montag 07:00–20:00 Uhr, Dienstag–Freitag 07:30–20:00 Uhr, Samstag 09:00–14:00 Uhr
Online: http://abo.spielefilmetechnik.de
Abonnementpreis für 12 Ausgaben: Inland: € 51,- Österreich: € 58,50 Schweiz/Ausland: € 63,-
Vertrieb und Einzelverkauf: DPV Deutscher Pressevertrieb GmbH, Düsternstr. 1-3, 20355 Hamburg, Internet: www.dpv.de
Druck: Quad/Graphics Europe, 120 Pultuska Street, 07-200 Wyszków, Polen
COMPUTEC MEDIA ist nicht verantwortlich für die inhaltliche Richtigkeit der Anzeigen und übernimmt keinerlei Verantwortung für in Anzeigen dargestellte Produkte und Dienstleistungen. Die Veröffentlichung von Anzeigen setzt nicht die Billigung der
angebotenen Produkte und Service-Leistungen durch COMPUTEC MEDIA voraus. Sollten Sie Beschwerden zu einem unserer Anzeigenkunden, seinen Produkten oder Dienstleistungen haben, möchten wir Sie bitten, uns dies schriftlich mitzuteilen. Schreiben
Sie unter Angabe des Magazins, in dem die Anzeige erschienen ist, inkl. der Ausgabe und der Seitennummer an: CMS MEDIA SERVICES GmbH, Annett Heinze, Anschrift siehe oben.
Einsendungen, Manuskripte und Programme:
Mit der Einsendung von Manuskripten jeder Art gibt der Verfasser die Zustimmung zur Veröffentlichung in den von der Verlagsgruppe herausgegebenen Publikationen. Urheberrecht: Alle in SFT veröffentlichten Beiträge bzw. Datenträger sind
urheberrechtlich geschützt. Jegliche Reproduktion oder Nutzung bedarf der vorherigen, ausdrücklichen und schriftlichen Genehmigung des Verlags.
Lizenz
This bookazine is published under licence from Imagine Publishing Limited. All rights in the licensed material belong to Imagine Publishing Limited and it may not be reproduced, whether in whole or in part, without the prior written consent of Imagine
Publishing Limited. ©2014 Imagine Publishing Limited.
Head of Publishing: Aaron Asadi, Head of Design: Ross Andrews, Production Editor: Jen Neal, Senior Art Editor: Greg Whitaker, Design: Katie Mapes
www.imagine-publishing.co.uk
MARQUARD MEDIA INTERNATIONAL AG
Deutschsprachige Titel: SFT, WIDESCREEN, PC GAMES, PC GAMES MMORE, PC GAMES HARDWARE, N-ZONE, GAMES & MORE, BUFFED, GAMES AKTUELL, PLAY 3, PLAYBLU, XBG GAMES
Internationale Zeitschriften: Polen: COSMOPOLITAN, JOY, SHAPE, HOT, PLAYBOY, CKM, VOYAGE, HARPER’S BAZAAR; Ungarn: JOY, SHAPE, ÉVA, IN STYLE, PLAYBOY, CKM, MEN’S HEALTH

Grundlagen
Handwerkszeug und Technik
10 Lernen Sie WordPress kennen
Machen Sie sich mit der Plattform vertraut
30 So finden Sie das passende
Hosting
Worauf Sie bei der Auswahl achten sollten
34 WordPress installieren
Stellen Sie Ihr Blog oder Ihre Website ins Netz
36 Mehrere Blogs auf einer
Domain einrichten
Ein einzelnes Dashboard genügt
38 Mehrere Subdomains
verwalten
Lernen Sie WordPress Multisites kennen
40 Benutzerrechte für Ihr Blog
vergeben
Individuell angepasster Zugriff
42 E-Mail-Konten mit cPanel
verwalten
Mailverwaltung leicht gemacht
44 Performance laufend
überwachen mit cPanel
Diagnose und Behandlung
46 Sichern Sie Ihr Blog mit cPanel
Eine Einführung in die Backup-Erstellung
48 WordPress mit Sicherheit
Wappnen Sie sich gegen Hacker
Die gelungene
Kombination aus Vielseitigkeit
und Schlichtheit
macht WordPress
so attraktiv.
Top-Tipp
Erstellen Sie
regelmäßig Backups.
Wie häufig Sie Ihre
Daten sichern sollten,
hängt davon ab, wie
oft Sie Ihre Website
aktualisieren oder
überarbeiten.
8 Das große WordPress-Handbuch

WordPress
Grundlagen
Auf den folgenden
Seiten möchten wir Sie
mit den grundlegenden
Funktionen und Werkzeugen
von WordPress
vertraut machen.
Das große WordPress-Handbuch 9

Grundlagen
Lernen Sie
WordPress
kennen
MACHEN SIE SICH ZUNÄCHST MIT DEM
GRUNDLEGENDEN HANDWERKSZEUG VERTRAUT,
DAS IHNEN BEI WORDPRESS ZUR VERFÜGUNG STEHT.
WIR STELLEN IHNEN HIER ALLES WICHTIGE VOR.
DIE GELUNGENE Kombination
aus Vielseitigkeit und
Schlichtheit macht Word-
Press so attraktiv. Einerseits
ist WordPress ein solides, vollwertiges
und erweiterungsfähiges Content-
Management-System (CMS), doch andererseits
findet man sich sehr schnell
darin zurecht. Einsteiger lernen ohne
allzu große Mühe, ein Blog einzurichten,
Beiträge zu verfassen und Plug-ins hinzuzufügen.
Zudem gibt es eine riesige
Community, sodass man schnell Hilfe
finden kann, wenn man einmal nicht
weiter weiß.
Dank dieser Eigenschaften ist Word-
Press die beliebteste CMS-Plattform
der Welt geworden. Mit ihm werden
alle möglichen Internetseiten von
persönlichen Blogs über Community-Websites
und Fanseiten bis
hin zu Webshops betrieben.
Ein wichtiger Grund für den großen
Erfolg von WordPress ist die Möglichkeit,
die Software mithilfe von – zum Teil
kostenlosen – Themes und anderem
Zubehör individuell zu gestalten und auf
die eigenen Vorstellungen maßzuschneidern.
Dabei helfen zusätzlich jede Menge
Tutorials, die im Netz verfügbar sind.
Auf den folgenden Seiten möchten
wir Sie zunächst mit den grundlegenden
Funktionen und Werkzeugen
von WordPress vertraut machen.
10 Das große WordPress-Handbuch

WordPress
Grundlagen
Das große WordPress-Handbuch 11

Grundlagen
Die Elemente des Dashboards
LERNEN SIE DIE GRUNDLEGENDEN FUNKTIONEN DER BENUTZEROBERFLÄCHE KENNEN.
STELLEN SIE SICH das Dashboard („Armaturenbrett,
Instrumententafel“) als das Herz und die Schaltzentrale
von WordPress vor. Besucher Ihrer WordPress-Seite
sehen nur das Äußere: die Inhalte und deren optische
Aufbereitung. Mit dem Dashboard
als Kontrollzentrum im
Inneren hingegen können Sie
Design und Technik Ihrer Webpräsenz
bis in die Details hinein
konfigurieren, wobei Sie zusätzlich zur grundlegenden
Seitenstruktur und -verknüpfung auf Themes und Plugins
zugreifen können. Auf der linken Seite des Dashboards
finden Sie ein Überblicksmenü der einzelnen
Das Dashboard ist das Herz und die
Schaltzentrale Ihrer WordPress-Seite.
Werkzeuge und Einstellungsmöglichkeiten, denen beim
Anklicken jeweils spezifische Optionen und Settings auf
der rechten Seite zugeordnet werden.
Wenn Sie beispielsweise links den Menüpunkt Beiträge
aufrufen, wird Ihnen rechts eine
Übersicht über ihre bisher verfassten
Postings angezeigt. Dazu gibt es Untermenüs
zu den einzelnen
Themenbereichen.
Beiträge: In diesem Untermenü
können Sie Ihre Postings ansehen,
durchsuchen, bearbeiten und
löschen oder neue erstellen.
Mediathek: Hier laden Sie Bilder
und andere Medien hoch, um
sie in Beiträgen verwenden zu
können.
Links: Hinter diesem Menüpunkt
finden Sie die Verwaltung der
Linkliste.
Seiten: Hier gelangen Sie zur
Übersicht über die einzelnen
Webseiten Ihrer WordPress-
Präsenz.
Kommentare: Dieses Untermenü
führt die Kommentare Ihrer Leser
auf, deren Beiträge Sie hier auch
bearbeiten oder löschen können.
Design: Verwalten Sie hier unter
anderem Ihre Themes, und legen
Sie fest, welches jeweils aktiviert
werden soll.
In der Kopfleiste werden Abkürzungen
zu häufig verwendeten
Menüs und Funktionen angezeigt.
Optionen einblenden: Wenn Sie
das Drop-down-Menü aufklappen,
haben Sie die Möglichkeiten,
einzelne Bearbeitungsfelder zu
verbergen.
Schneller Entwurf: Eilige Ge danken
können Sie hier ohne Formatierungserfordernisse
festhalten.
Einstellungen: Allgemeine
Einstellungen sowie Einstellungen
zu bestimmten Bereichen werden
hier zentral vorgenommen.
Werkzeuge: Hier finden Sie diverse
Optionen für das Importieren und
Exportieren von Beiträgen und
Kommentaren.
Benutzer: Hier vergeben Sie
Berechtigungen an die Mitarbeiter
Ihrer WordPress-Website oder
Ihres Blogs.
Das Dashboard anpassen
Einzelne Module im Dashboard-Hauptfenster lassen
sich an eine andere Position ziehen.
Mit dem Dashboard kontrollieren Sie Ihre
WordPress-Site, aber Sie können auch das
Dashboard selbst anpassen.
Sie können Module an eine andere Position
auf dem Bildschirm ziehen, beispielsweise
um häufig verwendete Bearbeitungsfenster
weiter oben zu gruppieren.
Module, die Sie zwar griffbereit halten
möchten, die Sie jedoch seltener benutzen,
können minimiert werden, sodass nur
noch die Titelleiste sichtbar bleibt. Nicht
gebrauchte Module können Sie gänzlich
vom Bearbeitungsbildschirm verbannen.
Um ein Modul zu verschieben, klicken
Sie auf dessen Titelleiste und ziehen Sie es
an die gewünschte Position. Minimieren
können Sie es durch einen Klick auf die
kleine Pfeilspitze rechts in der Titelleiste,
und ein erneuter Klick klappt das Modul
wieder auf.
Wenn Sie die Schaltfläche „Optionen einblenden“
anklicken, gelangen Sie zu einer
Liste der Module, die Sie in der Über sicht
anzeigen oder verbergen lassen können.
12 Das große WordPress-Handbuch

WordPress
Grundlagen
Beiträge erstellen
DAS PUBLIZIEREN NEUER ARTIKEL GESCHIEHT BEI WORDPRESS IM HANDUMDREHEN.
EINEN NEUEN Text für Ihr Blog können Sie verfassen,
indem Sie im Dashboard auf Beiträge >
Erstellen klicken. Für das Publizieren eines Beitrags
sind zunächst nur drei Dinge erforderlich: Eine
Überschrift, der Textinhalt an sich sowie der Veröffentlichungsmodus.
Der Titel wird in die Eingabezeile
direkt unter „Neuen Beitrag erstellen“ eingegeben. Er
sollte nicht zu lang sein und den Inhalt gut beschreiben.
In das große Feld darunter schreiben Sie den
Text Ihres Beitrags. Am unteren Rand des Feldes
wird automatisch die Anzahl der Wörter im Text
angezeigt, was nützlich ist, um den Umfang genauer
einschätzen zu können. Auf der rechten Seite des
Fensters sehen Sie die Abteilung Publizieren. Hier
können Sie festlegen, ob Sie ein Posting sofort oder
zu einem späteren Zeitpunkt veröffentlichen oder
ob Sie den Text zunächst nur als Entwurf oder ausstehenden
Review speichern möchten. Die Bereiche
Format, Kategorien und Tags sind an dieser Stelle
noch nicht zwingend erforderlich.
Für das Publizieren
eines Beitrags sind
zunächst nur drei Dinge
nötig.
Dateien hinzufügen
Mit einem Klick auf diese Schaltfläche
kommen Sie zur Medienauswahl,
von wo Sie vorhandene
Bilder und anderes direkt zu
Ihrem Beitrag hinzufügen oder
neu hochladen können.
Vorschau
Wenn Sie gerne sehen möchten,
wie ihr Posting fertig
publiziert aussieht, können
Sie hier ein Vorschaufenster
öffnen.
Formatierung
In der Formatierungsleiste finden
Sie Icons für das Fetten, die Kursivierung
und das Unterstreichen
von Text sowie weitere Optionen,
Ihre Postings optisch zu gestalten.
Auch Listen, Einrückungen und
Blocksatz lassen sich hier steuern.
Optionen einblenden
Hinter diesem Menü verbirgt sich
die Liste der Bearbeitungsmodule,
die Sie ein- und ausblenden
können.
Kategorien
Ordnen Sie Ihre Texte in eine
oder mehrere Kategorien ein, um
Struktur und Systematik in Ihr Blog
zu bringen.
Perfekte Beiträge veröffentlichen
Text und
01 Über schrift
Geben Sie Ihrem Beitrag einen Titel.
Es empfiehlt sich, die Überschrift relativ
kurz zu halten und aussagekräftig
zu formulieren. Sowohl Text als auch
Titel können Sie einer Rechtschreibprüfung
unterziehen.
Kategorien und
02 Tags
Sie können jedem Beitrag eine oder
mehrere Kategorien sowie Tags zuordnen.
Beides können Sie ohne Vorgaben
beliebig selbst kreieren.
03 Vorschau
Bevor Sie einen Beitrag veröffentlichen,
sollten Sie sich immer die
Vorschau ansehen. Häufig fallen einem
Fehler erst in dieser Ansicht auf. Die
Vorschau öffnet sich immer in einem
neuen Fenster.
04 Publizieren
Zum Schluss stellen Sie Ihr
Posting mit dem Publizieren-Button
online oder setzen den Timer. Falls Sie
einen vorhandenen Text bearbeiten,
steht stattdessen Aktualisieren auf der
Schaltfläche.
Das große WordPress-Handbuch 13

Grundlagen
Textgliederung und Listen
ERHÖHEN SIE DIE LESBARKEIT DER ARTIKEL DURCH ABSATZFORMATIERUNG, UND FÜGEN SIE SONDERZEICHEN EIN.
EINEN EINFACHEN Beitrag ohne besondere Gliederung
zu erstellen, erfordert den geringsten Aufwand,
doch schon mit ein bisschen Textgestaltung können
Sie Ihre Postings übersichtlicher und lesefreundlicher
machen. Gliedern Sie Ihren Text mithilfe von Absätzen,
Einrückungen, Listen und Aufzählungen. Mit Aufzählungszeichen
(Bullet Points) können Sie die einzelnen
Elemente von Listen hervorheben. Sie können die
Elemente auch automatisch durchnummerieren lassen,
dafür steht bei WordPress ebenfalls eine Funktion zur
Verfügung.
Weitere Funktionen erlauben zum Beispiel das Einfügen
von Sonderzeichen wie dem Copyright-Symbol
oder dem Euro-Zeichen, das Schreiben griechischer
Buchstaben oder die Verwendung unterschiedlicher
Textfarben. Um all diese Funktionen nutzen zu können,
müssen Sie die untere Formatierungsleiste herausklappen,
was durch Anklicken des Icons „Toolbar Toggle“ in
der oberen Leiste geschieht. Das richtige Icon finden
Sie, indem Sie mit der Maus über die Symbolreihe fahren,
ohne zu klicken: Es erscheint bei jedem Icon eine
kleine Textblase mit der Bezeichnung des Symbols. So
finden Sie gegebenenfalls
LERNZIEL
auch bei den anderen
Text mithilfe von
Icons jederzeit schnell
Einrückungen und Listen
gliedern können
heraus, welche Funktion
dahintersteckt.
DAUER
5 Minuten
Mit der Zeit wird Ihnen
die Verwendung der
ANSPRUCH
Formatierungs-Icons in
Fleisch und Blut übergehen.
Besondere Format-Funktionen
01
Bullet Points 1
Aufzählungen mit Bullet Points
oder Nummerierung können Sie durch
Klick auf das entsprechende Icon
beginnen. Tippen Sie dann den ersten
Stichpunkt ein.
02
Bullet Points 2
Mit der Eingabetaste erzeugen
Sie den nächsten Aufzählungspunkt,
zweimal Eingabe beendet die Liste.
03 Sonderzeichen
Das Copyright-Symbol, das
Euro-Symbol und andere Sonderzeichen
können Sie aus der Zeichentabelle
einfügen, die mit Klick auf das Omega-
Icon aufgerufen wird.
04 Einrückungen
Sie können einen Absatz
im Ganzen einrücken. Klicken Sie
hierzu einmal auf das Icon „Increase
indent“ oder mehrfach für stärkere
Einrückungen.
14 Das große WordPress-Handbuch

WordPress
Grundlagen
Texteingabefeld anpassen
ORDNEN SIE DIE BEARBEITUNGSKÄSTEN NACH IHREN WÜNSCHEN AN.
DAS LAYOUT DES Texteingabebildschirms ist standardmäßig
so aufgebaut, dass das Verfassen des Beitrags
samt Überschrift in der Mitte des Dashboards geschieht
und die Publizieren-Abteilung sich rechts davon findet.
Sie können dieses Layout jedoch bei Bedarf ändern. In der
Alternativ ansicht sind die beiden Bereiche untereinander
angeordnet. Sie aktivieren sie, indem Sie bei den Optionen
die Anzahl der Spalten von 2 auf 1 ändern.
Weiterhin ist es möglich, das Texteingabefeld zu verkleinern
oder zu vergrößern: Mit der Maus können Sie die
untere rechte Ecke des Feldes nach oben oder unten ziehen.
Das ist nützlich, wenn Sie längere Beiträge schreiben.
Ferner können Sie die einzelnen Bearbeitungskästen
mittels Klick auf die kleine Pfeilspitze an deren oberem
Rand einklappen, also verbergen.
Sie haben außerdem die
LERNZIEL
Möglichkeit, einen Text im
Die Bearbeitungsmodule
Vollbildmodus zu schreiben.
Hierbei wird nichts
auf dem Bildschirm
platzieren können
angezeigt außer dem
DAUER
Texteingabefeld auf einem
5 Minuten
komplett weißen Bildhintergrund.
Aktivieren Sie diese
ANSPRUCH
Option mit dem Icon „Distraction
Free Writing“.
Sie können einen
Text im Vollbild modus
schreiben.
Bildschirmoptionen anpassen
01
Kästen ein/aus 1
Oben rechts in Ihrem
Dashboard sehen Sie die Schaltfläche
„Optionen einblenden“. Dahinter verbirgt
sich eine Liste der zur Verfügung
stehenden Bearbeitungsmodule, die
Sie ein- oder ausblenden können.
02
Kästen ein/aus 2
Wenn Sie in der Auswahl
ein neues Häkchen setzen, beispielsweise
für das Modul „Verfasser“,
erscheint der entsprechende Bearbeitungskasten
neu auf dem Bildschirm.
03 Spalten
Im Optionsmenü haben
Sie außerdem die Möglichkeit, die
Anordnung der Module zwischen
ein- und zweispaltig umzuschalten.
04
Kästen versetzen
Sie können die Anordnung
der Module ändern, indem Sie sie mit
der Maus an die gewünschte Position
ziehen.
Das große WordPress-Handbuch 15

Grundlagen
Ordnung schaffen mit Kategorien
BRINGEN SIE SYSTEM IN IHRE WORDPRESS-PRÄSENZ.
KATEGORIEN SIND QUASI das Ablagesystem Ihrer Textsammlung.
Sie können damit Ihre Postings thematisch
klassifizieren und Ihrer Website insgesamt Struktur und
Ordnung verleihen. Dabei brauchen Sie sich nicht auf
eine einzelne Kategorie für jeden Beitrag zu beschränken –
Sie können diesem im Rahmen Ihrer selbstgewählten Systematik
auch mehrere Kategorien zuordnen. Obendrein
sind Sie bei WordPress völlig frei bei der Benennung der
Kategorien, es gibt keinerlei Vorgaben.
Falls Sie also ein Sportfan sind und zum Beispiel gerne
über Tennis, Handball und Golf schreiben, können Sie
entsprechende Kategorien einrichten, und als Liebhaber
klassischer Musik könnten Sie etwa die Kategorien Beethoven,
Bach und Wagner erstellen, wenn Sie zu den Werken
dieser Komponisten Texte verfassen möchten.
Den Bearbeitungskasten für die Kategorien finden
Sie auf der rechten Seite des Dashboards. Klicken Sie
einfach auf Neue Kategorie hinzufügen, um ebendies
zu tun. Sie sehen dort nun auch, dass es möglich ist,
Oberkategorien einzurichten. Sollten Sie also sowohl
für den Sport als auch für die Klassik ein Faible haben,
können Sie die beiden Bereiche entsprechend als Oberkategorien
verwenden und diese dann nach Sportarten
beziehungsweise Komponisten feiner unterteilen. Sie
können die einem Beitrag zugeordneten Kategorien
natürlich später wieder ändern sowie jederzeit neue
Kate gorien kreieren.
Kategorie hinzufügen
Eine neue Kategorie fügen Sie
ganz einfach hinzu, indem Sie in
das Textfeld eine Bezeichnung
eingeben. Kategorienamen können
auch aus mehreren Wörtern
bestehen.
Kategorien sortieren
In der Leiste über den Kategorien
können Sie bestimmen, nach
welchem Kriterium die Kategorien
in der Liste sortiert werden sollen,
ob etwa nach Name oder Anzahl
der zugehörigen Beiträge.
Bearbeiten oder
löschen
Wenn Sie mit dem Mauszeiger
über den Namen einer Kategorie
fahren, erscheinen mehrere
Options-Links, mit denen Sie die
jeweilige Kategorie aufrufen,
bearbeiten oder löschen können.
Durchsuchen
Falls Sie eine lange Liste von Kategorien
haben, können Sie durch
Eingabe des Namens oder Teilen
des Namens gezielt nach einer
bestimmten Kategorie suchen.
Sammelaktionen
Wenn Sie mehrere Kategorien
gleichzeitig löschen möchten,
können Sie diese mit einem
Häkchen markieren und dann eine
Sammelaktion durchführen.
Wie Sie Kategorien sinnvoll einsetzen
Kategorien sollten an den Hauptthemen Ihrer Beiträge ausgerichtet sein.
Mithilfe von Kategorien können Sie Ihre Inhalte in
Gruppen und Untergruppen aufteilen und dadurch
Ordnung und System hineinbringen. Ihre Leser
können Ihre Seite anhand der Kategorien durchstöbern,
und Sie selbst behalten leichter den Überblick.
Welche Kategorien Sie einrichten, bleibt natürlich
Ihnen überlassen, es gibt jedoch einige nützliche
Grundprinzipien.
Als Erstes ist es wichtig, dass Ihnen der Unterschied
zwischen Kategorien und Tags bewusst ist.
Kategorien bilden die übergeordnete Hierarchie
Ihres Blogs oder Ihrer Website und umfassen daher
in aller Regel mehrere Beiträge. Ein Tag hingegen
kann auch nur ein einziges Mal vorkommen, wenn
nämlich das betreffende Stichwort nur in einem Ihrer
Postings relevant ist.
Falls Sie also regelmäßig über das Golfspiel schreiben
möchten, könnte es sinnvoll sein, hierfür eine
Kategorie einzurichten. Interessiert Sie hingegen
Sport allgemein und schreiben Sie über mehrere
Sportarten und vielleicht nur einmal über Golf, dann
ist es vermutlich sinnvoller, eine Kategorie Sport
einzurichten und Golf nur als Tag in Ihrem einen Golf-
Artikel zu verwenden.
Praktisch ist auch die Option, über- und untergeordnete
Kategorien einzurichten. Mithilfe dieser
Möglichkeit können Sie Themengebiete hierarchisch
zueinander in Beziehung setzen.
Wenn Sie Kategorien aussagekräftige Namen
verleihen und sie clever in Untergruppen unterteilen,
machen Sie Ihre WordPress-Präsenz ein gutes Stück
übersichtlicher!
16 Das große WordPress-Handbuch

WordPress
Grundlagen
Was sind Tags?
ERGÄNZEN SIE IHRE KATEGORIEN DURCH EINE ZWEITE, ASSOZIATIVERE ORDNUNGSEBENE.
WÄHREND KATEGORIEN EINE übergeordnete
Systematik bilden, die einen Artikel als Ganzes einordnen,
sind Tags („Etiketten“) eher so etwas wie
assoziative Schlagwörter, die sich auf Einzelheiten
der Beiträge beziehen. Falls Sie also gerne über
Beethoven, Bach und Wagner schreiben und Ihre
Kategorien generell nach Komponisten sortiert sind,
Sie jedoch in Ihren Texten häufiger Überlegungen
über den Einsatz des Cellos in den Werken der Meister
anstellen, bietet sich Cello als Tag an. In dieser Hinsicht
könnte man Tags auch als Alternativkatego rien
für spezielle Interessen betrachten. Wenn Sie viele
Tags für Ihre Beiträge vergeben, erhalten Sie quasi ein
Schlagwortver zeichnis Ihrer Publikationen.
Wenn Ihre Leser auf ein Tag in der Liste der Tags
unter einem Beitrag klicken, zeigt WordPress alle
Postings Ihres Blogs an, die mit demselben Begriff
getaggt sind.
Wie Sie Tags sinnvoll einsetzen
Schlagwörter sollten weniger zentralen Aspekten zugeordnet werden.
Tags geben Ihnen die Möglichkeit, ein
wenig assoziativer an die Einordnung Ihrer
Beiträge heranzugehen als bei Kategorien.
Wenn Sie beispielsweise ein Blog mit
Nachrufen auf Prominente führen, ist es
sinnvoll, die Persönlichkeiten anhand von
Berufsgruppen zu kategorisieren – also etwa
Politiker, Schauspieler, Sportler und Wissenschaftler
–, da Besucher einer solchen
Seite vermutlich am ehesten diese gedankliche
Klassifizierung vornehmen würden.
Es wären jedoch noch andere
Einordnungs aspekte denkbar, etwa das
Geschlecht, die Nationalität oder das Sterbealter.
Falls nun ein Leser Ihr Blog nach berühmten
italienischen Frauen, die in jungen
Jahren gestorben sind, durchstöbern können
soll, bieten sich hierfür entsprechende Tags
an. Es sei denn natürlich, Sie konzentrierten
sich in Ihrem Blog ganz auf früh verstorbene
weibliche Celebrities aus Italien – dann wären
dies Ihre Hauptkategorien, und ob es sich
um eine Schauspielerin oder eine Sportlerin
handelt, wäre eher nebensächlich und ein
Fall für Tags. Sie sehen also, welche Kategorien
und welche Tags Sie einrichten, sollte
sich an Ihren zentralen und nicht so zentralen
Inhalten orientieren.
Schlagwort hinzufügen
Geben Sie das gewünschte Tag
einfach in das Textfeld ein und
drücken Sie die Eingabetaste.
Sammelaktionen
Wie bei den Kategorien können
Sie auch bei den Tags mehrere
gleichzeitig löschen. Markieren
Sie dazu die betreffenden Schlagwörter
in der Liste und führen Sie
dann die Aktion aus.
Beliebte Schlagwörter
In dieser kleinen Liste werden die
Tags aufgeführt, die sie am häufigsten
verwendet haben. Fahren Sie mit dem
Mauszeiger über einen Begriff, um anzeigen
zu lassen, wie oft Sie ihn bisher
in Beiträgen getaggt haben.
Bearbeiten oder löschen
Wenn Sie über den Namen eines Tags
fahren, erscheinen mehrere Options­
Links, mit denen Sie das jeweilige Tag
aufrufen, bearbeiten oder löschen
können.
Tags sortieren
In der Leiste über der Auflistung
der Tags können Sie festlegen, nach
welchem Kriterium die Schlagwörter
sortiert werden sollen.
Das große WordPress-Handbuch 17

Grundlagen
Ihre WordPress-Mediathek
BEHALTEN SIE DIE ÜBERSICHT ÜBER IHRE WORDPRESS-FILES.
ALLE MEDIENINHALTE wie Bilder, Videos, Audiodateien
und Dokumente, die Sie auf Ihre WordPress­
Präsenz hochladen, werden in
der Mediathek aufgelistet. Den
Link zu Ihrer Mediathek finden
Sie in der Menüleiste am linken
Rand des Dashboards. Im Bearbeitungsbereich
der Mediathek können Sie neue
Dateien hochladen, bestehende löschen oder nach
bestimmten Medien suchen. Neben einer Datei wird
jeweils angezeigt, in welchen Beiträgen sie verwendet
Alle Medieninhalte wie Bilder werden
in der Mediathek aufgelistet.
wird. Die Mediathek ist insbesondere dann praktisch,
wenn Sie in einen neuen Beitrag bereits vorhandene
Medien integrieren möchten – so brauchen Sie diese
nicht erneut hochzuladen – oder wenn Sie bestimmte
Dateien nicht mehr benötigen
und Platz auf Ihrem Webspace
schaffen wollen. Achten Sie aber
darauf, dass Sie parallel zum
Löschen einer Datei auch die
entsprechenden Verknüpfungen in den mit ihr verbundenen
Postings entfernen.
Thumbnails
Dank der Vorschauansichten
vor jeder Mediendatei haben Sie
einen schnelleren Überblick.
Suche
In das Textfeld neben der Schaltfläche
„Dateien suchen“ können Sie
Namen von Mediendateien eingeben,
um nach diesen zu suchen.
Filter
Die Medien können nach
bestimmten Dateitypen oder
Monaten gefiltert werden, dazu
gibt es ein Auswahlmenü neben
der Schaltfläche.
Sammelaktionen
Sie können mehrere Dateien in
einem Rutsch löschen, wenn Sie
sie mit einem Häkchen markieren
und dann eine Sammelaktion
ausführen.
Schnellinfo
Wenn Sie mit dem Mauszeiger
über eine Mediendatei fahren, wird
eine Direktauswahl eingeblendet,
bei der Sie die Optionen Bearbeiten,
Endgültig löschen und Aufruf
haben.
Sortieren, suchen, löschen
Auch ein großes Arsenal an Dateien bleibt beherrschbar.
Da die Mediathek sämtliche Mediendateien
beinhaltet, die Sie jemals
auf Ihren WordPress-Webspace
hochgeladen und nicht wieder
gelöscht haben, kann sich darin im
Laufe der Zeit ein ganz schöner Fundus
ansammeln. Bei Hunderten von
Dateien, insbesondere großen Audiooder
Video­Files, könnten Sie den
Wunsch verspüren, ein wenig Platz zu
schaffen und nicht mehr Benötigtes
zu löschen. Hierbei hilft Ihnen die
Sammelaktion: Markieren Sie einfach
alle Dateien, die Sie löschen möchten,
per Haken im vorangestellten Kontrollkästchen,
und löschen Sie den
gesamten Schwung mit einem Klick.
Wenn Sie nach bestimmten Files
Ausschau halten, leisten Ihnen die
Such­ und die Filterfunktion gute
Dienste. Sie können ferner bestimmen,
dass nur bestimmte Medientypen
(etwa Bilddateien) angezeigt
werden sollen, indem Sie auf die
entsprechenden Links über der Leiste
mit den Sammelaktionen und den
Filtern klicken.
Hinter jeder Mediendatei wird
außerdem angezeigt, ob Kommentare
zu ihr vorliegen.
18 Das große WordPress-Handbuch

WordPress
Grundlagen
Themes in Hülle und Fülle
BIETEN SIE IHREN BESUCHERN ETWAS FÜRS AUGE.
ZU DEN UNBESTRITTENEN Stärken von WordPress
gehört die riesige Auswahl an Designvorlagen – Themes
genannt –, die den Anwendern zur Verfügung
steht. Ein Teil der Themes ist kostenpflichtig, etliche sind
aber auch gratis nutzbar und können sogar bis zu einem
gewissen Grad weiter individuell angepasst werden. Bei
einem Theme handelt es sich um das äußere Erscheinungsbild,
die Präsentation Ihres Blogs, was solche Dinge
wie Farben, Fonts und Anordnungen beinhaltet. Allerdings
ist das Theme technisch abgekoppelt von Ihren Inhalten
wie Beiträgen und Bildern. Dies hat den großen Vorteil,
dass Sie das Design Ihrer WordPress-Präsenz jederzeit
ändern können, ohne dass die Inhalte davon beeinträchtigt
würden oder angepasst werden müssten. Dies
gewährleistet Freiheit und Flexibilität bei der Gestaltung
Ihres Blogs oder Ihrer Website. Die Themes bieten eine
breite Auswahl an Designs: Einige eignen sich besonders
gut für Fotogalerien oder Videosammlungen, andere sind
minimalistisch gestaltet und stellen das geschriebene
Wort ganz in den Vordergrund, wieder andere sind bunt
und verspielt. Sie können bei WordPress mehrere Themes
parallel installieren und gezielt aktivieren – der Wechsel
wird mit nur einem Klick vollzogen. Verwalten Sie Ihre
Themes über Themes > Design im Dashboard-Menü.
Verwendetes
Theme
Das Theme, das Sie derzeit
für Ihre Seite aktiviert
haben, wird oben auf
dem Themes-Bildschirm
angezeigt.
Themes installieren
Über diese Schaltfläche können
Sie neue Themes in Ihre Liste
aufnehmen.
Theme wechseln
Um ein neues Theme zu verwenden,
klicken Sie einfach auf Aktivieren.
Allerdings gibt es eine Reihe
kostenpflichtiger Themes, für die Sie
vor der dauerhaften Benutzung eine
Lizenz erwerben müssen.
Detail-Infos
Zu jedem Theme sind weitere
Informationen verfügbar. Klicken Sie
auf Details.
Bequeme Auswahl
Die Nutzung von WordPress-Themes ist sehr einfach.
Themes sind für das Design und Layout
Ihrer Website zuständig. Mit
einem schicken Theme machen Sie
auf Anhieb einen guten Eindruck.
Für WordPress gibt es einen fantastischen
Fundus kostenloser Themes, die
unter GPL-Lizenz stehen, was bedeutet,
dass Sie sie verwenden und bearbeiten
dürfen. Daneben gibt es auch eine große
Anzahl kommerzieller Themes, für
die Sie die Lizenz erwerben müssen.
All diese Themes können Sie vor und
nach der Installation und Aktivierung
bequem aus Ihrem Dashboard heraus
begutachten, was einen wichtigen
Aspekt der Benutzerfreundlichkeit von
WordPress darstellt. Wenn Sie ein Theme
entdeckt haben, das Sie in Betracht
ziehen, können Sie sich eine Vorschau
dieser Designvorlage anzeigen lassen.
Sind Sie zufrieden mit dem, was Sie
sehen, klicken Sie auf Installieren, um
WordPress automatisch die benötigten
Dateien herunterladen, entpacken und
installieren zu lassen. Anschließend
können Sie das Theme aktivieren und
bei Bedarf anpassen.
Es kann allerdings immer nur ein
Theme zur selben Zeit aktiv sein. Wenn
Sie ein neues Theme aktivieren, deaktivieren
Sie damit automatisch das bisher
genutzte.
Das große WordPress-Handbuch 19

Grundlagen
Individuelle Menüs erstellen
DIE KUNST DES – ÜBERSICHTLICHEN – NAVIGIERENS.
EINE GUT DURCHDACHTE Navigation erleichtert es
Ihren Besuchern, sich auf Ihrer Website zurechtzufinden.
WordPress bietet Ihnen in dieser Hinsicht einige Optionen.
Sie können Ihre eigenen Menüs erstellen, mit deren
Hilfe Sie einzelne Seiten mit einander verlinken oder auch
externe URLs einbinden können. Sie finden die Menüabteilung
unter Design > Menüs auf dem Dashboard.
Mit dem Menü-Editor können Sie einstellen, was innerhalb
des Menüs angezeigt werden soll und an welcher
Position. Sie können etwa festlegen, ob ein bestimmtes
Element sich unterhalb eines anderen befinden soll –
dann wird in vielen Fällen ein Drop-down-Menü erscheinen,
wenn der Mauszeiger über das Mutterelement
geführt wird. Die Umsetzung von derlei Dingen hängt
allerdings vom jeweils gewählten Theme ab, manche
Themes lösen dies anders.
Bei einigen Themes ist es möglich, mehr als ein individuelles
Menü zu verwenden, Sie können also manchmal
sowohl das Hauptmenü als auch ein Seitenmenü
kontrollieren. Oft kann aber auch nur ein Menü selbst
gestaltet werden.
Individuelles Menü
Mit einem Klick auf den Reiter
mit dem Pluszeichen beginnen
Sie die Erstellung eines neuen
Menüs. Vergeben Sie einen Namen
dafür und wählen Sie dann Menü
erstellen.
Pfeilspitze
Klicken Sie auf den kleinen Pfeil,
um Menüs auszuklappen, die
Ihnen jeweils zusätzliche Optionen
bieten.
Seiten und Kategorien
Für Seiten und Kategorien gibt es
jeweils mehrere Tabs, die es Ihnen
erleichtern, die passenden Elemente
zu finden, die Sie einfügen
möchten.
Menüs verschieben
Ziehen Sie Menükästen oder
-leisten mit der Maus an eine
andere Position, wenn Sie Ihren
Arbeitsbereich umgestalten
möchten.
Individuelle Optionen
Eigene Menüs als leistungsfähige Werkzeuge.
Eine stimmige Navigation ist ein wichtiger
Erfolgsfaktor Ihres Blogs, daher
ist es der Mühen wert, sich damit näher
zu beschäftigen und mit unterschiedlichen
Varianten zu experimentieren.
Es gibt drei Basiselemente, die Sie
Ihrem Menü hinzufügen können: Seiten,
Kategorien und Links. Seiten werden
aus denjenigen erzeugt, die Sie in Ihrem
Blog erstellen. Wenn Sie das Kästchen
„Automatisch neue Top-Level-Seiten
hinzufügen“ aktivieren, dann erscheinen
neue Seiten automatisch. Bei den Kategorien
können Sie eine oder mehrere
derjenigen integrieren, die Sie innerhalb
Ihres Blogs erstellt haben.
Links erlauben es Ihnen, im Menü
spezifische Elemente zu erzeugen, die
zu keiner Seite oder Kategorie Ihres
Blogs führen. Sie können entweder
dazu benutzt werden, Ihre Besucher
zu einer anderen Webseite zu leiten,
oder dazu, auf eine Seite ohne Content-
Management-Anbindung innerhalb Ihrer
WordPress-Präsenz zu führen, etwa zu
einer Tag-Seite à la
www.example.org/?tag=win.
Sobald Sie die Elemente Ihres Menüs
beisammen haben, können Sie sie neu
anordnen, indem Sie sie herumziehen.
Nicht benötigte Elemente können Sie per
Mausklick wieder löschen.
20 Das große WordPress-Handbuch

WordPress
Grundlagen
Für jeden Zweck das richtige Plug-in
ERWEITERUNGSMODULE GEBEN IHNEN VIELFÄLTIGE MÖGLICHKEITEN.
URSPRÜNGLICH WURDE WordPress als Software für
Blogger entwickelt, doch sein Open-Source-Ansatz
führte dazu, dass es mit der Zeit für eine größere
Bandbreite von Webpräsenzen als Plattform eingesetzt
wurde. Inzwischen werden von privaten Weblogs
über Fanseiten, berufliche Homepages und Künstlergalerien
bis hin zu Firmen-Websites alle möglichen Internetangebote
mit WordPress betrieben.
Ein wesentlicher Erfolgsfaktor der Software sind die
Plug-ins, die dafür zur Verfügung stehen. WordPress-
Seiten, die beim Bloghosting-Dienst WordPress.com eingerichtet
sind, haben verschiedene Plug-ins wie Statistikund
Webmaster-Tools, Teilen-Buttons für Facebook oder
Twitter, SEO, Kontaktformulare oder Flickr-Unterstützung
bereits fest integriert, doch im Rahmen der selbstgehosteten
WordPress-Software steht für die Benutzer ein
noch weit größeres Arsenal an Plug-ins zur Verfügung.
Derzeit sind über 30.000 Plug-ins für WordPress
erhältlich. Ob Sie einen Like-Button, eine CAPTCHA-
Sicherheitsabfrage gegen Spam, Statistikzähler oder
Widgets für YouTube oder Flickr-Streams integrieren
möchten: All das geht mithilfe von Plug-ins. Wie bei den
Themes gibt es auch bei den Plug-ins sowohl Gratis- als
auch kostenpflichtige Angebote.
Installierte Plug-ins
Hier wird die Anzahl der
aktiven, direkt daneben
die der inaktiven Plug-ins
angezeigt, die Sie installiert
haben.
Anzeigeoptionen
Sie können festlegen, wie
viele Plug-ins gleichzeitig
auf dem Bildschirm dargestellt
und ob Beschreibungstexte
angezeigt
werden sollen.
Hinzufügen
Dieser Link führt Sie zur
Suche nach neuen Plug-ins,
die Sie installieren möchten.
Deaktivieren
Mit einem Klick deaktivieren
Sie ein Plug-in. Das
erneute Aktivieren geht
genauso schnell.
Einige Beispielfunktionen
Was kann man mit Plug-ins alles machen?
Falls die oben im Text aufgezählten
beispielhaften Funktionen von Plugins
Ihnen noch keine hinreichende
Vorstellung vermittelt haben, möchten
wir hier einige weitere Möglichkeiten
nennen, die die Erweiterungsmodule
Ihnen bieten.
Sie können mit Plug-ins Schaltflächen
für Ihre Beiträge generieren,
die Ladezeiten Ihres Blogs verkürzen,
einen Newsletter für Ihre Leser
einrichten und verwalten, Sitemaps
erstellen, Ihre Blog-Inhalte per Backupfunktion
sichern, Bilderpräsentationen
verwenden, Eingabeformulare
erstellen, verschachtelte Kommentare
ermöglichen, die Anzeigeoptionen
für Mobilgeräte verbessern oder eine
Box mit Infos über den Verfasser unter
den Postings einblenden. Es gibt Tools
gegen Spamkommentare auf Ihrem
Blog, E-Commerce-Werkzeuge, Link-
Optimierer, Widget-Kontrollzentren
und Plug-ins für die Auswertung von
404-Fehlern.
Und für so gut wie jede dieser Funktionen
gibt es mehrere Alternativen
unter den zigtausenden Plug-ins, die
für die WordPress-Software entwickelt
wurden. Das offizielle Plug-in-Verzeichnis
finden Sie unter
http://wordpress.org/plugins/.
Das große WordPress-Handbuch 21

Grundlagen
Allgemeine Einstellungen verwalten
LEGEN SIE DIE GRUNDLEGENDEN EIGENSCHAFTEN IHRER WEBSITE FEST.
WENN SIE IHR NEUES WordPress-Blog einrichten,
sollten die Allgemeinen Einstellungen eine der ersten
Anlaufstellen sein. Sie finden diese auf der linken
Seite im Dashboard wenig überraschend unter Einstellungen
> Allgemein. Hier werden die grundlegenden
Eigenschaften Ihrer WordPress-Präsenz festgelegt
beziehungsweise verwaltet. Sie können Ihrem Blog
oder Ihrer Website einen Namen samt Untertitel oder
Motto geben, einstellen, welche Startseite Besucher
vorfinden sollen, und die E-Mailadresse für Systembenachrichtigungen
bestimmen. Ferner können Sie das
Format festlegen, das Datums- und Zeitangaben haben
sollen, und einiges mehr. Neben den Allgemeinen
Einstellungen gibt es diverse Untermenüs für weitere
Einstellungen wie zum Beispiel hinsichtlich des Schreibens
und Lesens der Beiträge, der Mediathek oder des
Teilens von Postings in sozialen Netzwerken. Zu diesen
Punkten kommen wir auf den folgenden Seiten.
Benutzerrechte
Wer darf was?
Sie können anderen WordPress-Benutzern,
die an Ihrem Blog mitarbeiten sollen, gestaffelte
Rechte verleihen. Es gibt fünf Mitarbeiter grade,
bei WordPress „Rollen“ genannt: Adminstrator,
Redakteur, Autor, Mitarbeiter und Abonnent.
Ein Administrator hat fast die gleichen Privilegien
wie Sie als Eigentümer des Blogs (Benutzer
hinzufügen, Plug-ins und Themes installieren und
löschen, Beiträge editieren, Seiten veröffentlichen
und so weiter), kann jedoch keine Netzwerk-
Benutzer, -Themes und -Optionen managen.
Redakteure können Seiten und Postings bearbeiten
und löschen, Kategorien und Links verwalten,
aber beispielsweise keine Themes und Plug-ins
installieren. Autoren dürfen nur Beiträge publizieren
und löschen sowie Dateien hochladen und
betrachten. Mitarbeiter können Postings online
stellen, bearbeiten und lesen, Abonnenten diese
nur lesen.
Machen Sie sich am besten schon vor der Einladung
eines neuen Benutzers Gedanken, welche
Rolle Sie ihm zugedenken möchten.
Slogan
Geben Sie Ihrer WordPress-Seite
einen Untertitel oder ein Motto.
Einstellungen
Unterhalb der Ebene der Allgemeinen
Einstellungen finden Sie noch
die Settings für das Schreiben und
Lesen von Beiträgen, die Mediathek
und einiges mehr, jeweils in
Untermenüs.
E-Mailadresse
Legen Sie hier die Adresse fest, an
die Systembenachrichtigungen
geschickt werden sollen.
Standardrechte
Hier stellen Sie ein, mit welchen
Berechtigungen ein neuer Benutzer
standardmäßig ausgestattet
werden soll.
Zeitzone
Die relevante Zeitzone wird
anhand von Städten in derselben
Zone ausgewählt. Stellvertretend
für die Zeitzonen von Deutschland,
Österreich und der Schweiz sind
Berlin, Wien und Zürich im Menü
eingetragen.
22 Das große WordPress-Handbuch

WordPress
Grundlagen
Einstellungen für das Schreiben
MIT STANDARDEINSTELLUNGEN KÖNNEN SIE BEIM PUBLIZIEREN VON BEITRÄGEN ZEIT SPAREN.
IM UNTERMENÜ Einstellungen für das Schreiben
können Sie diverse Standards beim Posten Ihrer
Beiträge festlegen. Sie können beispielsweise die
Kategorie festlegen, der ein neuer Artikel standardmäßig
zugeordnet werden soll, oder entscheiden,
ob Smileys und andere Emoticons in ein Bildchen
umgewandelt werden sollen. Ebenso stellen Sie
hier die Standard-Beitragsformatvorlage für Ihre
Postings ein.
Besonders interessant ist die Option, Beiträge in
Ihrem Blog per E-Mail zu veröffentlichen. Dazu müssen
Sie zunächst das System eine geheime E-Mailadresse
für Sie generieren lassen (vom Einstellungsmenü
führt ein Link direkt zu der Stelle, wo Sie dies
tun können), und fortan sind Sie in der Lage, Texte
(und sogar Bilder – per Mailanhang) direkt aus Ihrem
Mailprogramm heraus auf Ihrer WordPress-Seite
online zu stellen. Senden Sie einfach eine E-Mail an
die geheime Adresse, und das System erstellt aus
dem Betreff die Überschrift und aus dem Mailkorpus
den Beitragstext.
Von Interesse könnte auch das Feature „Press
This“ sein. Es handelt sich dabei um eine Browser-
Anwendung, die es erlaubt, Texte und andere Inhalte
im Handumdrehen von anderen Webseiten zu
kopieren, um sie dann zu bearbeiten und zum Beispiel
als Zitate in eigenen Beiträgen zu verwenden.
Übliche Kategorie
Hier können Sie per Pulldown-Menü
auswählen,
welcher Kategorie ein neuer
Beitrag standardmäßig
zugeordnet werden soll.
Per E-Mail bloggen
Machen Sie hier die notwendigen
Angaben, um per
E-Mail Beiträge publizieren
zu können.
Code erlauben
Wenn Sie ein Häkchen setzen,
stellen Sie damit sicher,
dass XHTML-Code valide ist
und damit von allen Browsern
korrekt interpretiert
werden kann.
Remote Publishing
Setzen Sie hier ein Häkchen,
wenn Sie zum Beispiel
einen Desktop-Client zum
Bloggen benutzen.
Press This verwenden
Mit einem Klick Dinge aus dem Web kopieren.
Wir möchten hier noch mal einen näheren
Blick auf Press This werfen. Dieses Feature
bietet Ihnen beim Bloggen eine wunderbare
Hilfestellung und kann Ihnen auf die
Dauer viel Zeit sparen. Wenn Sie im Web
unterwegs sind, werden Ihnen sicherlich
etliche Inhalte über den Weg laufen, bei
denen es Ihnen in den Fingern juckt, sie zu
kommentieren oder einfach nur mit Ihren
Lesern zu teilen. Normalerweise würden
Sie nach eingebettetem Code Ausschau
halten oder mit Cut & Paste arbeiten, doch
bei Press This brauchen Sie nichts weiter
zu tun, als zum Lesezeichenmenü Ihres
Browsers zu gehen und die Press-This-
Option auszuwählen, und schon öffnet sich
ein Fenster, das die benötigte Information
bereits enthält. Um Press This zu aktivieren,
müssen Sie zunächst den Press-This-
Link aus dem Einstellungsmenü in die
Lesezeichen ziehen. Press This erscheint
daraufhin dort als zusätzliche Option.
Wenn Sie nun im Netz surfen und Inhalte
sehen, die Sie verwenden möchten – etwa
einen Nachrichtenartikel oder ein YouTube-
Video –, wählen Sie einfach die Press-This-
Option bei den Lesezeichen aus und lassen
das Programm den Rest erledigen. Sie
können das Infofenster entweder direkt
zum Publizieren an Ihre WordPress-Seite
senden oder aber um den kopierten Inhalt
herum einen Beitrag verfassen. Beachten
Sie aber stets das geltende Urheberrecht
und geben Sie bei Zitaten die Quelle an!
Das große WordPress-Handbuch 23

Grundlagen
Kommentare und
Be nutzer bilder
ERMÖGLICHEN SIE ES IHREN BESUCHERN,
KOMMENTARE ZU HINTERLASSEN UND DIESE MIT
EINEM GRAVATAR ZU VERSEHEN.
IN ZEITEN DES Web 2.0 ist es natürlich auch
für eine WordPress-Website essenziell, das
Kommentieren von Beiträgen zu ermöglichen.
Die WordPress-Software sieht dieses
Feature standardmäßig vor. Lebhafte Diskussionen auf
einem Blog sind ein Anreiz für die Leser, regelmäßig vorbeizuschauen.
Allerdings gibt es auch Situation, wo eine Diskussion
außer Kontrolle gerät, beispielsweise wenn es in Beleidigungen
ausartet. Es ist daher ratsam, sich zu wappnen.
Bei WordPress haben Sie einerseits die Möglichkeit, sich
per E-Mail benachrichtigen zu lassen, wenn Kommentare
gepostet wurden. Andererseits können Sie aber direkt
für die Diskussionen an sich Vorgaben machen, etwa die
Angabe von Name und Mailadresse einfordern oder den
Zeitraum des Kommentierens ab Publikation eines Beitrags
begrenzen. Weiterhin können Sie bei den Einstellungen
festlegen, dass Kommentare erst nach Sichtung durch
einen Administrator veröffentlicht werden.
Im Feld Kommentar-Blacklist können Sie unerwünschte
Wörter eintragen. Schreibt jemand eine Antwort mit einem
der Begriffe im Text, wird der Kommentar automatisch als
Spam markiert und in den entsprechenden Kommentarordner
Ihres Dashboards verschoben.
Andere Blogs informieren
Falls Sie ein anderes Blog oder ein
Posting darauf in einem Ihrer Beiträge
verlinkt haben und dessen Beitreiber es
gestattet, können Sie diesen automatisch
über die Verlinkung informieren lassen.
Setzen Sie hierzu ein Häkchen an dieser
Stelle.
Sich benachrichtigen lassen
Sie können sich vom System per E-Mail
benachrichtigen lassen, wenn jemand
einen Kommentar schreibt, Ihrem Blog
folgt und anderes.
Spam vermeiden
Es gibt Roboter, die automatisch
Kommentare in Blogs posten und damit
zuspammen. Ein typisches Merkmal dieser
Spamkommentare ist eine größere
Anzahl Links. Hier können Sie festlegen,
ab wie vielen Links ein Kommentar als
Spam betrachtet werden soll.
Kommentare moderieren
Hier können Sie festlegen, ob ein Kommentar
sofort freigeschaltet werden soll
oder erst nach Genehmigung durch Sie.
Sie haben auch die Option, Kommentare
eines bestimmten Absenders
automatisch sofort freizugeben, wenn
dieser bereits zuvor einen genehmigten
Kommentar verfasst hat.
Gravatare
Universelle Benutzerbilder für WordPress-User.
Bei WordPress ist es möglich, neben Kommentaren
zu Beiträgen die Benutzerbilder
(Avatare) der jeweiligen Absender anzuzeigen.
Dieses Feature ist optional, Sie können es bei den
Einstellungen im Dashboard für Ihr Blog auch
deaktivieren.
WordPress unterstützt standardmäßig das
System global verfügbarer Benutzerbilder
(sogenannte Gravatare). Der zugehörige Gratis-
Anbieter Gravatar ist eine Abteilung des
WordPress.com-Betreibers Automattic. Um sich
ein solches universelles Benutzerbild zuzulegen,
muss man sich auf http://de.gravatar.com mit seiner
E-Mailadresse und einem Passwort registrieren.
Man erhält daraufhin einen Aktivierungslink
zugemailt und kann anschließend ein Bild auf die
Plattform hochladen und dort zurechtschneiden.
Der Benutzer wird aufgefordert, seinen Gravatar
in puncto Jugendschutz zu klassifizieren (hierbei
gibt es vier Abstufungen).
Sie als Betreiber der WordPress-Seite können
in den Diskussionseinstellungen festlegen,
welche dieser Jugendschutz-Abstufungen der
Benutzerbilder angezeigt werden.
24 Das große WordPress-Handbuch

WordPress
Grundlagen
Medieneinstellungen
leicht gemacht
SO
LEGEN SIE BILDGRÖSSEN FEST UND BETTEN
BILDER UND VIDEOS IN IHRE POSTINGS EIN.
EIN BLOG BESTEHT in der Regel nicht nur aus
reinen Texten. Heutzutage sind WordPress-
Websites häufig Multimedia-Angebote mit
eingebundenen Videos und Bildern. Sie haben
verschiedene Einstellungsmöglichkeiten, wie diese Medien
in Ihre Website integriert werden sollen. Unter Einstellungen
> Mediathek können Sie beispielsweise das Format
von Thumbnails (Vorschaubildern) festlegen, ebenso die
Abmessungen von mittleren und großen Bildern.
Medieninhalte können auch automatisch von Portalen
wie YouTube oder Flickr eingebunden werden, hierfür ist
lediglich die Angabe der URL erforderlich. Auch bei diesen
Embedded-Inhalten kann die Bildgröße eingestellt werden.
Für Bildergalerien gibt es diverse Einstellungsmöglichkeiten,
ebenso können Sie eine Sortierung nach Monat und
Jahr festlegen.
Medieninhalte
können auch automatisch
von Portalen wie
YouTube oder Flickr
eingebunden werden.
Vorschaugröße
Setzen Sie hier ein Häkchen, dann werden
Thumbnails automatisch genau auf
die von Ihnen eingetragenen Pixelwerte
gebracht.
Embed-Größe
Wenn Sie das Feld für die Breite leer
lassen, werden Medieninhalte immer so
dargestellt, dass Sie die Maximalbreite
Ihres jeweiligen Themes ausnutzen.
Bildformate
Alle Werte für Breite und Höhe
werden in Pixeln angegeben.
Uploads speichern
Hier tragen Sie den Ordner ein, in
dem alle neuen Uploads gespeichert
werden sollen. Als Einsteiger können
Sie das Feld frei lassen.
Uploads organisieren
Ein Häkchen an dieser Stelle sorgt dafür,
dass Ihre Medien-Uploads nach Monat
und Jahr geordnet in separate Ordner
verteilt werden.
Medieninhalte einbinden
So funktionieren Auto-embeds bei WordPress.
Wenn Sie bei den Medieneinstellungen Ihrer
WordPress-Software ein Häkchen bei „Autoembeds“
gesetzt haben, dann brauchen Sie
beim Schreiben eines Beitrags nur noch die URL
des gewünschten Bildes oder Videos in den
Text einzufügen. Und schon wird der entsprechende
Inhalt (sofern das verlinkte Medium dafür
geeignet ist) im fertigen Posting automatisch
eingeblendet. Falls Sie Ihr Blog bei WordPress.com
aufgesetzt haben, ist dieses Feature standardmäßig
bereits eingebaut.
Sie können nicht nur Bilder und Videos auf
diese Weise einbinden, sondern auch Texte.
Die Auswahl an Websites, von denen Sie Inhalte
einbinden können ist groß und umfasst unter
anderem YouTube, Vimeo, Flickr, Photobucket,
DailyMotion, blip.tv, Viddler, PollDaddy, Scribd,
WordPress.tv, FunnyOrDie.com und SmugMug.
Die Alternative zu Auto-Embed ist das Einfügen
eines entsprechenden HTML-Codes zur
Verlinkung. Dies ist nicht ganz so komfortabel,
funktioniert aber auch. Ihre eigenen in WordPress
gespeicherten Medieninhalte können Sie beim
Verfassen eines Beitrags direkt über die Schaltfläche
„Dateien hinzufügen“ auswählen und in den
Text einbauen.
Das große WordPress-Handbuch 25

Grundlagen
Veröffentlichung
per Timer
LERNZIEL
Im Voraus genau einstellen
können, wann ein Beitrag online
gehen soll
DAUER
2 Minuten
ANSPRUCH
SO WÄHLEN SIE TAG UND ZEIT FÜR DIE AUTOMATISCHE PUBLIZIERUNG EINES BEITRAGS.
ANGENOMMEN, SIE möchten den Lesern
Ihres Blogs ein frohes neues Jahr wünschen,
den entsprechenden Beitrag jedoch bereits
während der Weihnachtsfeiertage schreiben,
weil Sie da mehr Zeit dafür haben. Und weiter
angenommen, Sie möchten, dass der Neujahrsgruß um
kurz nach Mitternacht am 1. Januar online geht, wollen
sich jedoch nicht das schöne Feuerwerk entgehen
lassen, um stattdessen einen Beitragsentwurf zu
publizieren.
Dann brauchen Sie die Timer-Funktion von WordPress.
Mithilfe dieses Features können Sie für jedes Posting individuell
einstellen, an welchem Tag und um welche Uhrzeit
es auf Ihrer Website veröffent licht werden soll. Klicken Sie
dazu im Bedienfeld Publizieren auf den Bearbeiten-Link
neben dem Kalendersymbol. Es öffnet sich ein Auswahlmenü,
in dem Sie Datum und Zeit der Veröffentlichung
einstellen können. Bestätigen Sie die Auswahl per OK-
Button, und klicken Sie zum Abschluss auf die blaue
Publizieren-Schaltfläche. Bis der Artikel tatsächlich online
geht, haben Sie jederzeit die Möglichkeit, den Zeitpunkt
noch zu ändern.
BEItRAgSStAtUS
Ein geschriebenes Posting kann sofort publiziert,
per Timer­Funktion geplant oder als Entwurf beziehungsweise
ausstehender Review gespeichert
werden. Ein publizierter Beitrag ist bereits auf der
Website Ihres Blogs öffentlich sichtbar, ein geplan ter
Beitrag geht erst zum gewählten Zeitpunkt online,
und Entwürfe werden ohne weiteres Zutun gar nicht
veröffentlicht.
Nur zukünftige Termine
Wenn Sie ein Veröffentlichungsdatum
wählen, das in der Vergangenheit liegt,
wird der Beitrag sofort publiziert. Das
Eingabefeld für die Jahreszahl ist vierstellig,
sie können also bis ins Jahr 9999
vorausplanen.
Beitrag speichern
Statt ein Posting sofort zu veröffentlichen
oder es mit der Timer­Funktion dafür vorzumerken,
können Sie es auch als Entwurf
oder ausstehenden Review speichern. Es
verbleibt dann zur späteren Weiterbearbeitung
in Ihrer Artikelliste.
Monat auswählen
Beim Klick auf den Bearbeiten­Link öffnet
sich ein Auswahlmenü. Hier können Sie
den Monat und natürlich auch den Tag,
das Jahr und die Uhrzeit für die Veröffentlichung
Ihres Beitrags einstellen.
Blauer Button
Die Beschriftung dieser Schaltfläche
ändert sich in Abhängigkeit von der
ge wählten Funktion. Wenn Sie ein zukünftiges
Veröffentlichungsdatum einstellen,
erscheint dort Planen statt Publizieren.
So haben Sie noch einen kleinen Sicherheitshinweis,
damit Sie auch wirklich die
Veröffentlichungsart aktivieren, die Sie
haben möchten.
26 Das große WordPress-Handbuch

WordPress
Grundlagen
Permalinks
KREIEREN SIE URLS NACH WUNSCH FÜR IHRE BEITRÄGE.
DIE AUTOMATISCH von WordPress gene rierten des Artikels in die URL integrieren oder nur Monat und Jahr,
URLs Ihrer Blogbeiträge werden im Normalfall oder Sie wählen einen gänzlich individuellen Titel. Dies gibt
genügen. Falls Sie jedoch spezifi schere, einprägsamere
und dauerhafte URLs bevorzugen, sind einer Verzeichnisstruktur optisch klarer zu strukturieren.
Ihnen auch die Möglichkeit, die Inhalte Ihres Blogs mithilfe
auch diese möglich (allerdings nur bei der Selbsthoster­Version
von WordPress). Hierzu dient das Permalink­Feature. Webspace betreiben, sondern das Angebot der Blogging­
Falls Sie die WordPress­Software nicht selbst auf eige nem
Die einfachste Variante ist eine fortlaufende Num merierung Plattform WordPress.com nutzen, steht Ihnen diese Option
Ihrer Postings nach dem Muster „?p=N“, wobei N für eine Zahl jedoch leider nicht zur Verfügung. Dort werden die URLs Ihrer
steht, die anzeigt, um den wie vielten Beitrag es sich handelt. Postings standardmäßig mit dem Datum und der Überschrift
Sie können stattdessen aber auch das Veröffentlichungsdatum gebildet.
Falls Sie
spezifischere,
einprägsamere
und dauerhafte
URLs bevorzugen,
sind auch diese
möglich.
Standard
In der Grundeinstellung werden die
Postings fortlaufend nummeriert und
bilden die jeweiligen Zahlen das Ende
des Links.
Monat und Titel
Bei dieser Variante werden Monat, Jahr
und Titel des Artikels für die Bildung der
URL verwendet.
Tag und Name
Sie können das komplette Veröffentlichungsdatum
nach dem Muster Jahr/
Monat/Tag, also etwa 2013/11/14, in den
Permalink integrieren.
Nummerisch
Bei dieser Variante wird das „?p=“ aus
der URL entfernt und dafür die Kategorie
hinzugefügt.
Individuelle Struktur
Hier haben Sie die Möglichkeit, gänzlich
eigenständig einen Permalink zu
kreieren.
Struktur-Tags verwenden
Was können Sie in das Feld Individuelle Struktur eintragen?
Bei den Struktur-Tags steht Ihnen eine recht breite
Auswahl zur Verfügung. Die Tags tragen Sie in
das Feld Individuelle Struktur bei den Permalink-
Einstellungen ein. Damit lassen sich individuelle URL-
Strukturen kreieren. Die Tags werden jeweils innerhalb
von Prozentzeichen (%) gesetzt.
Wenn Sie %year% eintragen, wird der URL das Jahr
hinzugefügt, in dem ein Beitrag publiziert wurde. Mit
%monthnum% erzeugen Sie die Monatszahl, also
beispielsweise „04“ für April. Mit %day% wird der Tag
der Veröffentlichung in Zahlform angegeben.
Sie können die Publikationszeit im Permalink noch
genauer anzeigen lassen, indem Sie mit %hour% die
Stunde (im 24-Stunden-Modus) und mit %minute%
und %second% sogar die Minute und die Sekunde
hinzufügen, in der ein Beitrag online gegangen ist.
Möchten Sie überhaupt keine Zeitangaben in Ihrer
URL haben, können Sie auch nur mit %post_id% die
ID-Nummer des Postings oder mit %postname% dessen
Überschrift verwenden. Wenn Sie beispielsweise
einen Text mit dem Titel „Mein erster Beitrag“ verfasst
haben, wird die Überschrift in der Form „mein-ersterbeitrag“
der URL hinzugefügt.
Auch Kategorien, Tags und Verfasser lassen sich
mithilfe der Struktur-Tags %category%, %tag% und
%author% in den Permalink einbinden.
Das große WordPress-Handbuch 27

Grundlagen
Widgets machen Ihre
Seite individueller
EIN
KLEINER ÜBERBLICK ÜBER DIE
VIELSEITIGEN MÖGLICHKEITEN, DIE
WIDGETS IHNEN GEBEN.
WIDGETS SIND EINE tolle Möglichkeit,
um zusätzliche Funktionalitäten auf Ihre
Website zu bringen. Und wie die meisten
Komponenten von WordPress sind sie
ziemlich einfach zu handhaben.
Doch was sind Widgets überhaupt? Diese Frage
ist gar nicht so leicht zu beantworten. Widgets sind
kleine Objekte, die innerhalb eines bestimmten
Bereichs eines Themes sitzen und eine spezielle
Aufgabe haben, etwa Funktionen und Informationen
zu liefern. Ein Widget könnte sich um einen Twitter-
Feed kümmern, einen Kalender mit einer Liste der
an bestimmten Tagen geposteten Beiträge anzeigen
oder auch eine Tag-Cloud oder einen externen RSS-
Feed. Widgets können zu Widget-Bereichen hinzugefügt
werden, die vom Designer eines Themes definiert
werden. Ein Widget kann auch mehrfach auf einer
einzelnen Seite vorkommen.
Mithilfe von Widgets lässt sich ein WordPress-Blog
sehr individuell gestalten und anpassen. Sie können
sie für Zusatzinformationen einsetzen, die zu einem
Thema passen, oder sie mit sozialen Netzwerken
verbinden und Ihre Seite so zu einem Drehkreuz Ihrer
Internetaktivitäten machen.
Verfügbare Widgets
In dieser Liste werden alle Widgets
angezeigt, die direkt verwendet werden
können.
Anordnung
Wenn Sie die Widgets anders sortieren
möchten, ziehen Sie sie einfach mit der
Maus an die gewünschte Stelle.
Inaktive Widgets
Zum Deaktivieren eines Widgets ziehen
Sie es einfach in den unteren Bereich der
Widget-Übersichtsseite. Seine jeweiligen
Einstellungen bleiben dabei erhalten.
Sie können inaktive Widgets jederzeit
wieder aktivieren, indem Sie sie einfach
zurück nach oben ziehen.
Andere Themes
Unterschiedliche Themes unterstützen
verschiedene Widget-Bereiche.
Mindestens einen Widget-Bereich gibt
es jedoch bei jedem Theme.
Widget-Optionen
Die Konfigurierungsmöglichkeiten variieren stark.
Das Schöne an Widgets ist, dass sie Ihnen
nicht nur die Möglichkeit geben zu entscheiden,
wo Sie sie platzieren möchten, sondern
auch, was jeweils dargestellt werden soll
und wann. Bei jedem Widget gibt es Optionen,
manchmal einfache, manchmal sehr
komplexe.
Bei dem Suche-Widget gibt es beispielsweise
nur eine einzige Option, nämlich, die
Beschriftung oberhalb des Anzeigekastens
auszuwählen, während das Kategorien-Widget
sich in puncto Titel, Anzeigestil, Anzahl
der angezeigten Postings pro Kategorie und
Hierarchie der Kategorien konfigurieren lässt.
Einen Schritt weiter gehen Sie mit einem
Text- oder RSS-Widget. Ersteres erlaubt es
Ihnen, HTML-Code, normalen Text oder beides
einzufügen und so Code für eine Twitter-
Integration oder einen Wetter-Feed einzubinden;
Sie könnten jedoch auch einfach Informationen
über Ihr Blog in das Text-Widget
stellen. Letzteres gibt Ihnen die Möglichkeit,
per RSS Artikel einer anderen Website in Ihre
WordPress-Präsenz zu integrieren.
Probieren Sie die vielen unterschiedlichen
Möglichkeiten aus, die Widgets Ihnen bieten!
28 Das große WordPress-Handbuch

WordPress
Grundlagen
Kommentare managen
ERFAHREN SIE, WIE SIE DEN ÜBERBLICK ÜBER DIE KOMMENTARE IHRER BESUCHER BEHALTEN UND SIE MODERIEREN KÖNNEN.
WENN SIE IHR WordPress-Blog neu
einrichten, sind die Standardeinstellungen
zunächst so, dass jeder Besucher
(WordPress-Benutzer oder Gast) jeden
Ihrer Beiträge kommentieren kann. Sie als Blog-
Betreiber können hier natürlich Einschränkungen vornehmen.
Sie können außerdem bereits abgegebene
Kommentare moderieren oder löschen. Es kann auch
vorkommen, dass Spam-Kommentare durch Roboter
auf Ihrem Blog hinterlassen werden, und das möchten
Sie sicherlich verhindern. Hierzu gibt es beispielsweise
eine Auto-Detect-Funktion bei WordPress, mit deren
Hilfe Sie eine gute Chance haben, Spam automatisch
herauszufiltern
Auf der anderen Seite sind die Kommentare Ihrer
Leser natürlich eine hervorragende Möglichkeit, um
Feedback zu bekommen und einzuschätzen, wie Ihre
WordPress-Präsenz ankommt.
Welche Bedingungen Sie für das Verfassen von
Kommentaren festlegen können, haben Sie ja bereits
auf Seite 24 in diesem Handbuch erfahren.
Sammelaktionen
Sie können alle angekreuzten
Kommentare per Sammelaktion in
einem Rutsch genehmigen, löschen
oder als Spam markieren.
Antwort auf
In dieser Spalte wird angezeigt, auf
welche Ihrer Postings sich die jeweiligen
Kommentare beziehen. Auch hier
genügt ein Klick, um den Beitrag
aufzurufen.
Verfasser-Spalte
Hier können Sie schnell überfliegen,
wer Kommentare geschrieben hat.
Falls jemand selbst ein WordPress-Blog
betreibt, gelangen Sie per Klick auf den
Benutzernamen direkt dorthin.
Kommentare suchen
Mithilfe der Suchfunktion können
Sie unter einer größeren Anzahl
Kommentare diejenigen zu einem
bestimmten Thema oder Stichwort
herausfiltern.
Unerledigt/Genehmigte
Falls Sie Kommentare unter
Genehmigungsvorbehalt gestellt
haben, werden diese zunächst im Tab
Unerledigt gesammelt und nach der
Freischaltung im Tab Genehmigte.
Kommentare genehmigen
Behalten Sie die Kontrolle über die Antworten Ihrer Leser.
Als Blogger sprechen Sie zumindest theoretisch
den gesamten Querschnitt der Online-
Community an. Sollte Ihre WordPress-Seite im
Laufe der Zeit bekannter werden, könnten Sie
einige regelmäßige Leser gewinnen, und diese
werden vielleicht Ihre Beiträge kommentieren
und im besten Fall sich auch untereinander
antworten. So kann sich eine eigene kleine oder
natürlich auch größere Community entwickeln.
Je mehr Leute sich auf Ihrer Seite äußern,
desto aufwendiger wird natürlich auch die Kommentarmoderation.
Sie haben die Option, alle
Kommentare von Besuchern vor der Publikation
unter den Vorbehalt der manuellen Genehmigung
durch Sie zu stellen. Zusätzlich lässt sich
einstellen, dass Antworten von Schreibern, die
bereits eine Genehmigung für einen Kommentar
erhalten haben, ohne erneute Vorabgenehmigung
veröffentlicht werden.
Ferner können Sie Kommentare vor der Freigabe
moderieren, etwa um Beschimpfungen,
Kraftausdrücke, aber auch fehlerhafte Links
oder urheberrechtlich geschütztes Material
daraus zu entfernen.
Seien Sie aber maßvoll bei etwaigen Bearbeitungen.
Viele Kommentarschreiber mögen es
nicht, wenn man ihre Texte ändert oder kürzt.
Begründen Sie falls nötig Ihre Entscheidung im
Rahmen einer Anmerkung.
In der Abteilung Kommentare des Dashboards
finden Sie im Tab Unerledigt eine Liste der zur Freischaltung
anstehenden Kommentare. Sie können
diese direkt an Ort und Stelle per Mausklick genehmigen,
zurückweisen oder bearbeiten.
Das große WordPress-Handbuch 29

Grundlagen
So finden Sie das
passende Hosting
BEIM WEBHOSTING FÜR IHR WORDPRESS-BLOG SIND EIN PAAR DINGE ZU
BERÜCKSICHTIGEN UND BEACHTEN. WIR SAGEN IHNEN, WELCHE.
Eine Website startklar zu machen, verlangt insbesondere vom Neuling
einiges an Organisation, es gibt viele Faktoren zu berücksichtigen.
Neben dem Content, der Leserschaft und anderen Aspekten, die eine
Website erfolgreich machen, ist das Hosting von großer Bedeutung. Es
ist wie das Fundament eines Hauses: Wenn der Hoster langsam und unzuverlässig
ist, dann werden die Leser schnell verschwinden. Sie müssen sicherstellen, dass der
Server perfekt mit dem Content-Management-System zusammenarbeitet, das Sie
benutzen möchten. Kalkulieren Sie Bandbreite und Speicherplatz, damit Sie nicht zu
viel bezahlen müssen. Auch die Meinungen anderer Nutzer sind bei der Wahl des
Hosters eine Hilfe. Wir geben Ihnen ein paar Tipps, damit Sie eine gute Entscheidung
treffen können. Mit ein bisschen Erfahrung ist das Aufsetzen einer Website samt Hosting
nicht mehr schwierig.
Wo finden Sie gute Hoster?
Es gibt unzählige Webhoster, die teils sehr ähnliche, aber auch sehr vielfältige Dienste
anbieten. Das macht es schwierig, den richtigen Anbieter zu wählen. Das Internet
ist natürlich eine gute Informationsquelle. Wir empfehlen Vergleichsdienste und die
Lektüre von Nutzermeinungen. Wenn Sie Ihre Anforderungen umreißen, bevor Sie
sich auf die Suche machen, sollten Sie damit in der Lage sein, zwei oder drei Hoster
zu vergleichen, die Ihren Wünschen gerecht werden. Es gibt jedoch keine Universallösung.
Unser Rat: nichts überstürzen. Schauen Sie sich alles in Ruhe an, vom Design
der Anbieter-Homepage bis zum Kleingedruckten. Das wird sich auszahlen.
Was ist Webhosting?
© 1&1 Hosting
Ein Hoster vermietet Ihnen Speicherplatz für Ihre Website im Internet.
Ihre Homepage kann auf einem Dedicated Server (wenige Kunden pro Server,
bessere Performance und Stabilität, dafür teurer) liegen oder auf einem
gewöhnlichen Hosting-Server, der viele Websites beherbergt. Ihnen wird je
nach Tarif eine bestimmte Menge an Speicherplatz zur Verfügung gestellt,
die Geschwindigkeit hängt dabei von Ihren Einstellungen ab. Brandbreite ist
ein kritischer Faktor beim Hosting, denn sie bestimmt, wie viele Besucher
während einer bestimmten Zeit auf Ihrer Website sein können. Beim Hosting
handelt es sich im Grunde um die Vermietung einer ferngesteuerten
Festplatte (oder eines Teils davon) in einem Rechenzentrum. Thereotisch
könnten Sie Ihren eigenen Computer einsetzen.
Vergleichsdienste wie etwa www.hostsuche.de sind eine gute Anlaufstelle.
Wie viel kostet Webhosting?
Die Kosten variieren extrem, manchmal kann es sehr schwer sein, den besten Anbieter
zu finden. Die Budget-Angebote richten sich meist an Privatnutzer oder Websites,
die wenig Traffic erzeugen. Für mehr Flexibilität, Bandbreite und Speicherplatz müssen
Sie freilich mehr zahlen. Beachten Sie die kleinen Details, wenn Sie beispielsweise
einen Dedicated Server und mehr Stabilität benötigen. Hosting kann bei unter einem
Euro pro Monat anfangen und bei mehreren Tausend Euro enden. Der Großteil der
Websites kommt mit Paketen für monatlich rund 5 Euro aus. Wenn Sie mit Basis-Features
und wenigen Upgrades zufrieden sind, brauchen Sie kein Vermögen zu investieren.
Hosting ist ein Bereich, in dem man tatsächlich bekommt, wofür man bezahlt.
Wie steht es um die
Sicherheit?
Wenn Sie Ihre Website in die Hände eines Hosting-Anbieters legen, besteht grundsätzlich
natürlich ein gewisses Risiko. Anbieter geben meist an, welche Sicherheitsmaßnahmen
sie treffen, damit Ihre Daten sicher sind. Thereotisch ist das Hosten über
Dritte genauso sicher, als wenn Sie selbst hosten würden. Denken Sie an verschiedene
Möglichkeiten von Website-Backups und Plug-ins, die ebenjenes ermöglichen. Das
stellt Sie im Fall der Fälle nicht vor böse Überraschungen mit einem fremden Hoster.
Es gibt jedoch keine 100-%-Garantie für Sicherheit, größere Anbieter sind bei diesem
Thema nicht immer besser als kleinere.
30 Das große WordPress-Handbuch

WordPress
Grundlagen
Worauf sollten Sie bei
einem Host achten?
Der erste Blick sollte auf die Spezifikationen des Angebots gehen. Sie
brauchen genügend Bandbreite und Speicherplatz. Dann müssen die
Geschwindigkeit und die zugrunde liegenden Technologien passen. Viele
Dienste bieten zusätzliche Domainnamen, E-Mail-Adressen und Software an.
Das zahlt sich auf lange Sicht nicht immer aus. Widerstehen Sie der Versuchung,
gleich alles auf einmal kaufen zu wollen. Kaufen Sie Ihren Domainnamen
später, damit Sie in Zukunft mehr Kontrolle darüber haben. Dasselbe gilt für
E-Mail-Adressen. Prüfen Sie, ob der Server mit Windows oder Linux läuft,
ebenso die Nutzungsbedingungen. Kundenhilfe ist ebenso wichtig, falls Sie
künftig Probleme haben. Schauen Sie also am besten zusätzlich nach Telefonund
nicht nur E-Mail-Support: vorzugsweise 24 Stunden täglich, sieben Tage
in der Woche. Werbeversprechen wie unbegrenzter Speicherplatz, RSS-Feeds
und zusätzliche Sicherheitsfeatures bedeuten nicht automatisch, dass die
Der Preis zählt zwar auch, doch die Features sollten Sie ebenso im Blick
behalten.
Seite gut performen wird. Deswegen wiederholen wir unseren Rat: Lesen Sie
Nutzermeinungen über jeden Dienst, damit Sie langsam, aber sicher zum
Anbieter mit der für Sie besten Performance und dem besten Preis finden.
Bieten alle Hoster Support
für Web-Entwickler-Tools?
Viele Hoster bieten einfache Tools an, damit Sie eine Website von Grund auf aufziehen
können. Das Problem ist, dass diese Programme wirklich sehr simpel sind – mit
WordPress sind Sie sicherlich besser bedient. WordPress ist nicht schwer zu erlernen,
alles von der Installation bis zum Design ist einfach zu beherrschen. Es gibt Tausende
von fertigen Themes, die Ihrer Website einen professionelleren Touch verleihen. Auch
Nutzer ohne Fachwissen können die Themes anpassen, um eine individuellere Website
zu erstellen. Wenn Sie spezielle Anforderungen an bestimmte Tools haben, dann
prüfen Sie den Feature­Umfang Ihres gewählten Anbieters genau. Die Beschreibungen
sind meist vage und verwirren Sie womöglich noch am Ende. Seien Sie also so
akribisch wie möglich bei der Recherche.
Es zahlt sich immer aus zu wissen, welche Dienste man in seinem ausgewählten
Tarif hat. So machen Ihnen keine versteckten Fallen einen Strich
durch die Rechung.
Top-Tipp
Fragen Sie Ihren Hoster
immer, wie viel PHP-Speicher
in Ihrem Tarif enthalten ist.
WordPress benötigt ein
Minimum von 32 MB sowie die
Option, das Volumen temporär
anzuheben.
Kann es böse
Überraschungen geben?
Bei vielen Hosting­Paketen gibt es versteckte Fallen. Es können Extrakosten für
Domainnamen, Strafgebühren für eine überschrittene Bandbreite oder horrende
Preise für den Telefon­Support sein. Sie sollten die Nutzungsbedinungen genau auf
alle versteckten Kosten hin prüfen. Die Anzahl der verfügbaren Features kann manchmal
so hoch sein, dass Sie Probleme bekommen könnten, den Überblick zu wahren.
Daher sollten Sie sich die Zeit nehmen, jedes mögliche Detail zu erörtern. In manchen
Paketen gibt es auch sinnvolle Extras. Auch wenn Sie diese zu Beginn nicht brauchen,
können sie sich später als nützlich erweisen. Behalten Sie also alle Features im Auge.
Was ist eine Uptime-Garantie?
Jeder Anbieter sollte eine Uptime-Garantie anbieten. Diese stellt sicher, dass Ihre Website
ständig erreichbar ist. Dauerhaft eine 100-%-Marke zu halten, ist natürlich unmöglich. Anbieter
sollten daher Backup-Server und Notfallpläne bereithalten, damit die Kunden-Websites online
bleiben. Als am nützlichsten erweisen sich wieder einmal Nutzermeinungen. Bietet der Hoster
keine Uptime-Garantie an, sollten Sie vorsichtig sein. Die effektivste Möglichkeit, Leser zu vergraulen, ist,
ihnen eine unstabile Website zu präsentieren. Der Hoster spielt also eine wesentliche Rolle dabei, wenn Sie
Ihren Lesern dauerhaft etwas bieten möchten.
Das große WordPress-Handbuch 31

Grundlagen
Muss es ein Anbieter im eigenen Land sein?
Es gibt einige gute Gründe, einen Hoster innerhalb der eigenen
Landesgrenzen zu verwenden. Zunächst ist so die Kontaktaufnahme
bei Problemen einfacher. Für viele ist es auch ein gutes
Gefühl zu wissen, dass der ausgewählte Dienst aus demselben
Land kommt. Rechnungen kommen in der eigenen Währung, und
jedes Tarifangebot ist für das Land maßgeschneidert, in dem es
angeboten wird. Andererseits: Das Internet funktioniert weltweit.
Wenn ein Hoster beliebt ist und faire Preise bietet, dann sollte eine
fremde Herkunft nicht unbedingt ausschlaggebend sein. Schließlich
kommen viele der Online-Dienste, die Sie nutzen, wahrscheinlich
ohnehin aus dem Ausland.
Vergleichsdienste zeigen meist an, aus welchem Land ein Hoster kommt.
Können Sie Ihren Anbieter
wechseln?
Viele Anbieter locken mit Rabatten, wenn Sie sich länger binden. Beispielsweise können Sie
vereinzelt einen 20-%-Rabatt bekommen, wenn Sie für zwei Jahre unterschreiben. Häufig
gibt es auch eine kostenlose Testphase, damit Sie Qualitätsfaktoren wie Stabilität, Geschwindigkeit
und Kunden-Support ausloten können. Sie könnten ein WordPress-Blog auf einem
Test-Hosting-Account aufsetzen, um zu schauen, wie es läuft. Es ist jedoch eine gute Idee,
Domain anderswo zu kaufen, nämlich für den Fall, dass Sie irgendwann den Anbieter
wechseln möchten. Wenn Sie mit dem Hoster zufrieden sind, dann kann sich eine längere
Bindung auszahlen. Aber denken Sie daran, dass aktuelle Leistungen nicht denen in der
Zukunft entsprechen müssen. Wie immer sollten Sie die Nutzungsbedingungen studieren,
damit Sie sich im Falle eines Anbieterwechsels nicht ärgern.
Was tun bei mehreren
Websites?
Mit WordPress können Sie mehrere Projekte auf einem Server hosten. Es
benötigt eine manuelle Ersteinrichtung, doch der Aufwand ist im Vergleich zu
einem einfachen Internetauftritt nicht viel größer. Jede Website kann eine eigene
Domain haben. Diese Domains können so eingestellt sein, dass sie auf dieselbe –
Ihre – WordPress-Installation verweisen. Bei mehreren Websites gibt es einige
Vorteile: Sie können alle Ihre Projekte mit einem Klick in Ihrer WordPress-
Installation aktualisieren, Anpassungen lassen sich effizienter durchführen als
zuvor. Es reduziert zudem die Hosting-Gebühren und erlaubt Ihnen somit, sich
anfangs für ein teureres, aber höherwertiges Paket zu entscheiden statt für
mehrere kleine. Nach Abschluss der Ersteinrichtung ist das Management mehrerer
Websites auf einem Server so einfach wie das Arbeiten mit nur einer.
Website selber hosten?
Man kann eine Website auch hosten, ohne einen Drittanbieter in Anspruch zu nehmen.
Selbst ein Low-End-PC kann als effektiver Server fungieren. Man muss viele Einstellungen
und Anpassungen unternehmen, wenn man selbst einen Server einrichtet, doch die Vorteile
sind zahlreich: Es gibt keine Hosting-Kosten, man hat volle Kontrolle über den Server
und die Möglichkeit, jedes Feature beliebig zu ändern. WordPress ist so gestaltet, dass Sie
es ebenso einfach auf einem Heimrechner wie auf dem Server eines Hosting-Anbieters
einrichten können. Der Knackpunkt ist jedoch die Bandbreite. Die meisten Breitbandverbindungen
haben einen eingeschränkten Upload. Dies kann die Performance Ihrer Website
entscheidend behindern. Jedes Mal, wenn ein Besucher Ihre Website aufruft, müssen
Daten hochgeladen werden. Bei einer hohen Anzahl Nutzer steigt das Volumen, bis keiner
mehr Spaß hat. Prüfen Sie Ihre Breitbandgeschwindigkeit, ebenso die verschiedenen
Möglichkeiten für Upgrades seitens Ihres Internet-Anbieters. Leider sind die Kosten für
High-End-Optionen meist höher als die für einen klassischen Hosting-Anbieter. Unter den
richtigen Umständen jedoch kann „Self-Hosting“ extrem gut funktionieren.
Top-Tipp
Die meisten erfahreneren
Webmaster setzen auf
Linux statt Windows als
Server-Betriebssystem.
Versuchen Sie es.
32 Das große WordPress-Handbuch

WordPress
Grundlagen
Webhoster: Eine Auswahl
WIR HABEN EINE KLEINE ÜBERSICHT ÜBER PROVIDER FÜR PRIVATNUTZER, KLEINERE UNTERNEHMEN, DESIGNER
UND ENTWICKLER ZUSAMMENGESTELLT.
1&1
www.1und1.de
1&1 ist wohl einer der bekanntesten und zuverlässig sten
Anbieter. Die Hostingdienste beginnen bei 3,99 € pro Monat.
Oft gibt es auch Rabattangebote, bei denen 1&1 beispielsweise
die ersten zwölf Monate zum halben Preis berechnet.
Empfohlenes Paket
Basic: 6,99 € / Monat
Vorteile
Bei 1&1 haben Sie unbegrenzten Traffic und können
unbegrenzt Webseiten unter zwei Domains aufsetzen.
Nachteile
Es gibt eine Mindestvertragslaufzeit von zwölf Monaten.
Für wen?
Das Paket bietet mit 50 GB genug Speicherplatz und mit
zwei Domains Raum für zwei unabhängige Projekte:
perfekt für Einsteiger und Fortgeschrittene.
All-inkl.com
www.all-inkl.com
500 GB Speicherplatz, 20 Domains, 1.000 Sub-Domains
und Traffic-Flat. Fürs erfolgreiche Business findet sich bei
All-inkl.com das richtige Paket für 24,95 €. Wer sich länger
bindet, erhält einen Rabatt. Effektiv wären so rund
20 € im Monat drin.
Empfohlenes Paket
Business: 24,95 € / Monat
Vorteile
Mit 500 GB Speicherplatz und 100 Datenbanken ist
Platz für viel Content.
Nachteile
Die zahlreichen Features könnten auf unerfahrene User
unübersichtlich wirken.
Für wen?
Betriebe und Entwickler finden bei diesem Paket eine
große Spielwiese.
Strato
www.strato.de
Strato wirbt mit einer Verfügbarkeit von annähernd
100 %. Neben 1&1 gehört Strato zu den bekanntesten
Anbietern.
Empfohlenes Paket
PowerWeb Plus: 8,99 € / Monat
Vorteile
Sie können drei Domains nutzen, haben 60 GB Speicherplatz
und können 20 Datenbanken einrichten, bei ebenso
unbegrenztem Traffic.
Nachteile
Es gibt eine Mindestvertragslaufzeit von zwölf Monaten.
Für wen?
Firmenauftritt, Online-Shop und mehr unter eigener
Domain, dazu gleich bis zu 1.000 E-Mail-Adressen für Mitarbeiter:
Kleinbetriebe und Geschäftsleute greifen hier zu.
Host Europe
www.hosteurope.de
Domainfactory
www.df.eu
WordPress.com
www.wordpress.com
Absolute Neulinge können bei Host Europe einsteigen.
Die wichtigsten Dienste sind am Start, dazu kommt auch
gleich unbegrenzter Traffic. Service und Support sind
zudem vollkommen kostenlos.
Empfohlenes Paket
Basic: 3,99 € / Monat
Vorteile
Ein Premium-Support per E-Mail und Telefon steht
kostenlos zur Verfügung.
Nachteile
Die Mindestvertragslaufzeit beträgt zwölf Monate,
Sie zahlen jährlich im Voraus.
Für wen?
Einsteiger finden hier alle nötigen Leistungen
inklusive kostenlosem Support, sogar per Telefon.
Bei Domainfactory können Sie sich Ihre Wunschdienste
selbst zusammenstellen. Einfaches Hosting
beginnt bei 1,15 € im Monat. Fortgeschrittene, die
wissen, was Sie brauchen und was nicht, kommen
günstig weg.
Empfohlenes Paket
Wunschkonfiguration: ab 1,15 € / Monat
Hinweis: Alle Angaben zu Konditionen und Preisen
auf dieser Seite sind ohne Gewähr.
Vorteile
Sie bekommen eine maßgeschneiderte Lösung.
Nachteile
Anfänger könnten zu Beginn überfordert sein.
Für wen?
Fortgeschrittene und Profis, die genaue Vorstellungen
darüber haben, was sie benötigen, schnitzen sich hier
Ihr eigenes Paket.
Insbesondere die deutsche WordPress-Community
legt Wert auf die Feststellung, dass der Bloghosting-
Dienst WordPress.com ein separates, außenstehendes
Angebot darstellt. Nichtsdestoweniger hat es offiziellen
Charakter, denn es wurde von der Firma des
WordPress-Initiators ins Leben gerufen. WordPress.com
ist eine hervorragende Möglichkeit, sich der WordPress-
Software erstmals anzunähern.
Empfohlenes Paket
.wordpress.com Kostenlos: 0,00 € / Monat
Vorteile
Es gibt ein bereits sehr gut ausgestattetes Gratisangebot.
Nachteile
Eine eigene Domain ist nur gegen Aufpreis erhältlich.
Für wen?
Wer noch nie etwas mit WordPress zu tun hatte und
sich einfach erst mal in der neuen Welt umschauen
möchte, für den ist WordPress.com goldrichtig.
Das große WordPress-Handbuch 33

Grundlagen
• Mit dem Dashboard
kontrollieren Sie jeden Teil
Ihrer Website, vom Design
bis hin zu spezifischen
Hintergrundeinstellungen.
• Sie haben mehrere
Optionen, Medien
hochzuladen, die Ihre
Inhalte lebendig
machen.
• Sie können auch ohne
Programmierkenntnisse
Inhalte erstellen. Die
grafische Benutzeroberfläche
macht Webgestaltung
für alle möglich.
• WordPress informiert Sie,
sobald ein Upgrade zur
Verfügung steht – auch
wenn Sie die Software selbst
installiert haben.
WordPress installieren
LERNZIEL
Eine eigene Website
bei einem Webhost
online stellen
DAUER
120 Minuten
ANSPRUCH
SIE HABEN SIcH ENtScHIEDEN UND EINEN WEBHOSt AUSGESUcHt. NUN GEHt ES DARAN,
WORDPRESS ZU INStALLIEREN UND IHRE WEBSItE INS NEtZ ZU StELLEN.
IN DIESER ANLEITUNG zeigen wir Ihnen, wie Sie
Ihre neue Website online stellen, nachdem Sie sich
für ein Webhosting-Paket entschieden haben. Die
WordPress-Software auf dem Webspace zu installieren
und zum Laufen zu bringen ist nicht schwer, Sie benötigen
nur die richtigen Informationen. Technisches Wissen beschleunigt
den Vorgang natürlich, aber jeder sollte WordPress installieren
und eine Website zum Laufen bringen können.
Wie schlicht oder anspruchsvoll Sie anschließend Ihre Website
gestalten, hängt ganz von Ihrem persönlichen Geschmack
ab. Sie können das Design selbst erstellen oder einfach ein vorhandenes
WordPress-Theme verwenden und gegebenenfalls
anpassen. Sie können auch erst mit einem einfachen Design
beginnen und es zu einem späteren Zeitpunkt verfeinern oder
durch ein anderes ersetzen. WordPress macht Ihnen eine solche
Umstellung sehr leicht.
Jeder sollte WordPress installieren und eine Website innerhalb
weniger Stunden zum Laufen bringen können.
34 Das große WordPress-Handbuch

WordPress
Grundlagen
Einen Host wählen
01 Ihr Webhosting-Service hat Ihnen vermutlich
die Zugangsdaten (Benutzername und Passwort) für
Ihren Webspace mitgeteilt, in der Regel per E-Mail. Loggen
Sie sich damit in den Administrationsbereich für
Ihren Webspace ein. Das Kontrollzentrum sieht bei
jedem Hoster etwas anders aus.
02 FTP
Sie bekommen FTP-Infos – das ist die Adresse,
auf der Sie alle Ordner Ihrer Website finden. Sie sollten am
Datenbank erstellen
03 Sie sollten eine Option „MySQL-Administration“
im Admin-Bereich finden. Wählen Sie „Neue Datenbank“
besten einen FTP-Client auf Ihrem Computer installiert und vergeben Sie Namen und Passwort. Sie bekommen
haben (es gibt viele kostenlose). Versuchen Sie, damit eine dann die Information zur Datenbank, wie Hostname und
Verbindung zur FTP-Adresse herzustellen. Sie sollten daraufhin
einige Standardordner sehen
Username. Notieren Sie diese für einen späteren Schritt.
können.
WordPress downloaden
04 Gehen Sie auf www.wordpress.org, laden Sie
die Software herunter und entpacken Sie sie. Es sollte ein
Ordner mit Unterordnern entstehen. Diese bilden die
Basis Ihrer Website, nachdem Sie auf den Host hochgeladen
wurden. Sie sollten nur spezifische Dateien ändern.
Daten eingeben
05 Im Hauptordner befindet sich die Datei
„wp-config-sample.php“. Öffnen Sie diese mit einem Text-
editor und lesen Sie die Hinweise darin. Sie müssen die
Details aus Schritt 03 wie Username, Datenbank und Passwort
einfügen. Speichern Sie die Datei als „wp-config.php“.
Software hochladen
06 Merken Sie sich, wo Ihre WordPress-Dateien
gespeichert sind, und loggen Sie sich auf dem Host-Server
via FTP-Client ein. Laden Sie den gesamten WordPress-
Ordner auf den Server – in das Hauptverzeichnis (z. B.
www.123.com/wordpress) nur Unterordner und Dateien.
Software konfigurieren
07 Wenn der Upload fertig ist, geben Sie Ihre URL
und „wp-admin/install.php“ ein, zum Beispiel www.123.
com/wp-admin/install.php. Der Prozess sollte jetzt
automatisch beendet werden und Ihre WordPress-Installation
abgeschlossen sein. Es ist an der Zeit, mit der
neuen Website ein wenig zu spielen.
Blog erstellen
08 Sie sehen jetzt das WordPress-Dashboard, die
Basis für alles, was Sie auf Ihrer neuen Website erstellen.
Das Dashboard besteht aus vielen Teilen, aber so gut
wie alles, was Sie zum Erstellen der Seite brauchen, ist in
der linken Spalte zu finden. Nehmen Sie sich Zeit beim
Erstellen der Teile Ihrer Website.
Fertiges Theme nutzen
09 Wenn Sie die Site nicht von Grund auf selbst
gestalten wollen, können Sie in der linken Spalte das Themes-Menü
auswählen und eines aussuchen. Die Site sieht
dann nicht einzigartig aus, aber Sie können alles schnell
einrichten und aus Sicht eines Besuchers sehen. Sie können
später immer noch etwas Individuelles kreieren.
Das große WordPress-Handbuch 35

Grundlagen
Mehrere
Blogs auf
einer Domain
einrichten
URSPRÜNGLICH WOLLTE WORDPRESS EINZELNEN USERN
EINE BLOG-SEITE ZUR VERFÜGUNG STELLEN. INZWISCHEN
KÖNNEN MEHRERE BLOGS MIT EINEM DASHBOARD
VERWALTET WERDEN.
LERNZIEL
Mehrere Blogs mit
nur einer WordPress-
Installation verwalten
DAUER
30 Minuten
ANSPRUCH
WENN SIE WORDPRESS installieren, haben
Sie ein einzelnes Blog erstellt. Vielleicht
brauchen Sie aber eine Site, auf der mehrere
Leute ein Blog haben können. Deswegen
haben WordPress-Entwickler das Feature WordPress
Multisite geschaffen. Seit der letzten Version wird es mit
WordPress installiert. Weil dieses Feature nur von wenigen
Usern verwendet wird, müssen Sie es erst aktivieren.
Um mehrere Blogs innerhalb der WordPress-Installation
zu erstellen, müssen Sie den Network Blog Modus
aktivieren. Dazu müssen Sie zwei Ihrer WordPress-Dateien
modifizieren, ein neues Verzeichnis erstellen und das
Feature im Dashboard aktivieren. Danach können Sie
mehrere Seiten erstellen und verwalten. Diese sind dann
Unterverzeichnisse auf Ihrer Domain, obwohl Sie Word-
Press nur einmal installiert haben.
01 Sicherungskopien
Gehen Sie zum Verzeichnis, in dem WordPress
installiert wurde. Suchen Sie die Dateien .htaccess und
wp-config.php im Main-Verzeichnis. Sie werden diese
verändern, erstellen Sie daher lieber Sicherungskopien
davon. Falls etwas schiefgeht, können Sie sie wiederherstellen.
Sicherungskopien
Geht etwas schief,
kopieren Sie die Sicherungskopie
über die
veränderten Dateien
.htaccess und wp-config.php,
um die Seite
wiederherzustellen.
02
wp-config.php anpassen 1
Für die Netzwerkeinstellungen müssen Sie
eine Zeile in wp-config.php einfügen. Verwenden Sie
einen Editor, um die Datei zu öffnen. Suchen Sie:
002 /* That’s all, stop editing! Happy
blogging. */
Und fügen Sie dies darüber ein:
001 define(‘WP_ALLOW_MULTISITE’, true);
Speichern Sie die bearbeitete Datei in Ihrem Web-Verzeichnis.
Die Netzwerkoption ist aktiviert.
• Im Multisite-Modus können Sie mehrere Blogs
auf einer einzigen WordPress-Site hosten. Bei
WordPress Multisite gibt es ein eigenes Dashboard,
um mehrere Blogs auf derselben
Domain zu verwalten.
• Im integrierten Netzwerk-Dashboard können
Sie neue Blogs hinzufügen. Alle Blogs existieren
auf derselben Website als unterschiedliche
Unterverzeichnisse.
36 Das große WordPress-Handbuch

WordPress
Grundlagen
04 Netzwerk-
Setup
Es sind noch drei Schritte
nötig, um den Vorgang zu
beenden. Zuerst müssen
Sie ein neues Verzeichnis
auf der Seite einrichten. Es
heißt blogs.dir und befindet
sich im Verzeichnis
wp-content. Darin werden
hochgeladene Medien
aller Blogs gespeichert.
03 Netzwerkoptionen
Öffnen Sie das Dashboard Ihres Blogs. Klicken Sie auf das Werkzeug-Menü.
Hier gibt es jetzt eine neue Option: Netzwerk. Anklicken, um
die Einstellungen zu bearbeiten. Wählen Sie aus, ob Sites Subdomains
oder Unterverzeichnisse sein sollen. Weil für Unterverzeichnisse weniger
Änderungen nötig sind, wählen Sie dies. Installieren anklicken.
05
wp-config.php anpassen 2
Fügen Sie den folgenden Code in die Datei wp-config.
php unterhalb der Zeile define(‘WP_ALLOW_MULTISITE’, true);
aus Schritt 02 ein:
001 define( ‘MULTISITE’, true );
002 define( ‘SUBDOMAIN_INSTALL’, true );
003 $base = ‘/’;
004 define( ‘DOMAIN_CURRENT_SITE’, ‘www.
005 YOURDOMAINHERE.com’ );
006 define( ‘PATH_CURRENT_SITE’, ‘/’ );
007 define( ‘SITE_ID_CURRENT_SITE’, 1 );
008 define( ‘BLOG_ID_CURRENT_SITE’, 1 )
Speichern Sie die geänderte Datei im Web-Verzeichnis.
Neue Blogs verwalten
01 Blog hinzufügen
Um eine neue Site hinzuzufügen, wählen
Sie My Sites > Network Admin >
Sites. Den Link „Add New“ anklicken,
Adresse, Titel und Admin-E-Mail eingeben,
und „Add Site“ klicken.
06
Code zu .htaccess hinzufügen
Fügen Sie diese Zeilen zu Ihrer .htaccess-Datei hinzu, und speichern
Sie die geänderte Datei in Ihrem Web-Verzeichnis. Ihr Netzwerk ist nun freigegeben
und konfiguriert. Loggen Sie sich jetzt auf Ihrer Seite ein.
001 RewriteEngine On
002 RewriteBase /
003 RewriteRule ^index\.php$ - [L]
004 # uploaded files
005 RewriteRule ^([_0-9a-zA-Z-]+/)?files/(.+) wp-includes/msfiles.php?file=$2
[L]
006 # add a trailing slash to /wp-admin
007 RewriteRule ^([_0-9a-zA-Z-]+/)?wp-admin$ $1wp-admin/
[R=301,L]
008 RewriteCond %{REQUEST_FILENAME} -f [OR]
009 RewriteCond %{REQUEST_FILENAME} -d
010 RewriteRule ^ - [L]
011 RewriteRule ^[_0-9a-zA-Z-]+/(wp-(content|admin|includes).*)
$1 [L]
012 RewriteRule ^[_0-9a-zA-Z-]+/(.*\.php)$ $1 [L]
013 RewriteRule . index.php [L]
07
Setup beenden
Oben links im Dashboard sollte
jetzt ein neuer Link „My Sites“ zu sehen
sein. Klicken Sie auf My Sites > Network
Admin, um die neuen Kontrollfunktionen zu
sehen. Der Sites-Link ist zum Hinzufügen
neuer Netzwerk-Sites durch einen Klick auf
den „Add New“-Link gedacht.
02 Blog bearbeiten
Zum Bearbeiten My Sites > Network
Admin > Sites wählen. Mit der Maus
über den Namen des Blogs fahren und
auf den Bearbeiten-Link klicken, der
erscheint.
03 Blog entfernen
Um eine Seite zu entfernen, My Sites >
Network Admin > Sites wählen. Mit der
Maus über den Namen des Blogs fahren
und auf „Delete“ klicken, wenn es
erscheint. Sie müssen das Löschen in
einem Fenster bestätigen.
Das große WordPress-Handbuch 37

Grundlagen
Mehrere
Subdomains
verwalten
MIT MULTISITES KÖNNEN SIE MEHRERE SUBDOMAINS AUS
EINEM DASHBOARD HERAUS VERWALTEN UND ALLE PLUG-
INS ZENTRAL MANAGEN.
LERNZIEL
Subdomains hinzufügen
und kontrollieren lernen,
wenn die Website wächst
DAUER
45 Minuten
ANSPRUCH
MIT DER INSTALLATION VON WORDPRESS
wird als Grundeinstellung eine Site mit
einer URL erstellt. Später werden aber verschiedene
Leute einzelne Abschnitte der
Website betreuen und kontrollieren, als wären es individuelle
Sites, nur auf einer Domain. Deswegen können
Sie mit WordPress Subdomains zu Ihrer Site hinzufügen.
Von diesen kann jede einen Administrator haben. Leider
ist das nicht Teil der Grundeinstellungen und Sie müssen
einige Dateien bei WordPress verändern, um diese
Funktion zu aktivieren. Damit schalten Sie den Netzwerk-Blog-Modus
ein. Dazu müssen Sie ein neues Verzeichnis
erstellen und das Multisite-Feature im Dashboard
aktivieren. Danach können Sie mehrere Seiten als
Subdomains erstellen und managen.
01 Sicherungskopie
Öffnen Sie das Verzeichnis, in dem WordPress
installiert ist. Im Main-Ordner die Dateien .htaccess und
wp-config.php suchen. Sie müssen Plug-ins auf Ihrer
Site kurz deaktivieren.
„www“ entfernen
Falls die Adresse Ihrer
Website mit „www“
beginnt, sollten Sie Ihren
Webhoster bitten,
dies zu entfernen, da
es die Subdomains
beeinträchtigen
könnte.
02
wp-config.php verändern
Sie müssen eine Zeile in wp-config.php einfügen,
um die Netzwerkeinstellungen einzuschalten. Die
wp-config.php-Datei mit einem Editor öffnen und
suchen:
002 /* That’s all, stop editing! Happy
blogging. */
Diese Zeile einfügen:
001 define(‘WP_ALLOW_MULTISITE’, true);
Veränderte Datei im Web-Ordner speichern. Dadurch
werden die Netzwerkoptionen eingeschaltet.
• Mit nur einer WordPress-Installation können
Sie dank des Multisite-Modus Subdomains auf
Ihrer Seite einrichten. Zum Beispiel können Sie
news.yourdomainname.com und blog.yourdomainname.com
mit nur einer WordPress-Installation
haben.
• Ihre Subdomains existieren auf Ihrer Website
mit anderen URLs und können über das Netzwerk-Dashboard
hinzugefügt, entfernt und
editiert werden.
38 Das große WordPress-Handbuch

WordPress
Grundlagen
04 Netzwerk-
Setup
Mit den drei Schritten auf
dieser Seite beenden Sie
den Vorgang. Erstellen Sie
ein neues Verzeichnis blogs.
dir auf der Site innerhalb
des wp-content-Ordners.
Hier werden Inhalte der
Subdomains gespeichert.
03
Optionen ansehen
Öffen Sie das Dashboard Ihres Blogs. Werkzeug-Menü anklicken.
Hier gibt es eine neue Option: Netzwerk. Anklicken, um die Einstellungen
Ihres Netzwerk-Blogs vorzunehmen. Es gibt keine Wahl zwischen
Subdomain und Subdirectory, weil die Site bereits existiert. Installieren
anklicken.
05
wp-config.php verändern
Verändern Sie die wp-config.php-Datei. Fügen Sie folgenden
Code unter der Zeile define(‚WP_ALLOW_MULTISITE‘,
false); aus Schritt 02 ein:
001 define( ‘MULTISITE’, true );
002 define( ‘SUBDOMAIN_INSTALL’, true );
002 $base = ‘/’;
003 define( ‘DOMAIN_CURRENT_SITE’, ‘www.
YOURDOMAINHERE.com’ );
005 define( ‘PATH_CURRENT_SITE’, ‘/’ );
006 define( ‘SITE_ID_CURRENT_SITE’, 1 );
007 define( ‘BLOG_ID_CURRENT_SITE’, 1 )
Die veränderte Datei im Web-Verzeichnis speichern.
Subdomains kontrollieren
01 Hinzufügen
Neue Seite mit My Sites > Network
Admin > Sites hinzufügen. Add New
anklicken (oben auf der Seite). Adresse,
Titel und Admin-E-Mail eingeben und
Add Site anklicken.
06
Zu .htaccess hinzufügen
Verändern Sie die .htaccess-Datei. Diese Zeilen hinzufügen und im
Web-Ordner speichern. Ihr Netzwerk sollte jetzt freigegeben und konfiguriert
sein. Sie haben das neue blogs.dir erstellt sowie die .htaccess- und wp-config.
php-Dateien verändert und gespeichert. Browser schließen und einloggen.
001 RewriteEngine On
002 RewriteBase /
003 RewriteRule ^index\.php$ - [L]
004 # uploaded files
005 RewriteRule ^([_0-9a-zA-Z-]+/)?files/(.+) wp-includes/msfiles.php?file=$2
[L]
006 # add a trailing slash to /wp-admin
007 RewriteRule ^([_0-9a-zA-Z-]+/)?wp-admin$ $1wp-admin/
[R=301,L]
008 RewriteCond %{REQUEST_FILENAME} -f [OR]
009 RewriteCond %{REQUEST_FILENAME} -d
010 RewriteRule ^ - [L]
011 RewriteRule ^[_0-9a-zA-Z-]+/(wp-(content|admin|includes).*)
$1 [L]
012 RewriteRule ^[_0-9a-zA-Z-]+/(.*\.php)$ $1 [L]
013 RewriteRule . index.php [L]
07
Setup beenden
Ein neuer Link, My Sites,
erscheint im Dashboard. Auf My Sites >
Network Admin klicken, um die neuen
Optionen zu sehen. Zum Hinzufügen
einer neuen Subdomain den Sites-Link
aufrufen. Add New anklicken, um eine
neue Subdomain zu erstellen.
02 Bearbeiten
Bearbeiten über My Sites > Network
Admin > Sites. Mit der Maus über den
Namen der Seite fahren und im
erscheinenden Fenster Edit auswählen.
03 Netzwerk updaten
Es gibt häufig Updates für Word-
Press-Plug-ins und Themes. Diese
kann man unter Update > View
Updates abfragen und mit Update >
Update Network für alle Subdomains
gleichzeitig aktualisieren.
Das große WordPress-Handbuch 39

Grundlagen
• Wenn Sie fertig sind, haben Sie
eine schöne, übersichtliche
Benutzerliste mitsamt den
zugehörigen Berechtigungen.
Die Nutzerprofile können
jederzeit aktualisiert werden.
Passwortverschlüs
selung
Da auf Ihre Website vermutlich
auch über ungesicherte
WLAN-Verbindungen zugegriffen
wird, empfielt sich
eine Passwortverschlüsselung
mit Chap Secure Login
(siehe Seite 41).
Benutzerrechte
für
Ihr Blog
vergeben
BEHALTEN SIE MITHILFE HIERARCHISCH GESTAFFELTER
BERECHTIGUNGEN DIE VOLLE KONTROLLE ÜBER DIE
ZUGRIFFE AUF IHR WORDPRESS-BLOG.
lernziel
Blog sichern durch
einrichten und verwalten
der Benutzerrechte.
dauer
25 Minuten
anspruch
EIN TOLLER ASPEKT von WordPress sind
die vielseitigen Möglichkeiten, mehrere
Benutzer einzubinden und Ihnen
spezifische Berechtigungen zuzuweisen.
Wenn Sie der Administrator eines Blogs sind, das von
mehreren Autoren und Beiträgern mit Texten versorgt
wird, sollten Sie sich genau überlegen, wem Sie welche
Privilegien verleihen. Wir sehen uns an, wie man eine
Benutzerliste zusammenstellt und die Rolle jedes
Benutzers individuell einstellt. Je mehr Leute an der
Arbeit an einem Blog beteiligt sind, desto wichtiger wird
die Sicherheit Ihrer Seite – darum werfen wir auch einen
Blick darauf, wie Sie mit einfachen Mitteln den
Log-in-Prozess sicher machen.
01 Benutzer-Menü
Klicken Sie auf das Benutzer-Menü links im
Dashboard. Es erscheint eine Liste aller aktiven Benutzer
Ihrer Website. Auf einen Blick sehen Sie deren Nutzernamen,
E-Mail-Adressen und Benutzerrollen.
Hier können Sie diese Angaben bearbeiten.
Sie sollten sich genau
überlegen, wem Sie
welche Privilegien verleihen.
40 Das große WordPress-Handbuch

WordPress
Grundlagen
02 Nutzer
hinzufügen
Wenn Sie neue Mitarbeiter
manuell hinzufügen,
müssen Sie den Benutzernamen
und eine gültige
E-Mail-Adresse, an die die
Log-in-Daten gesendet
werden, eintragen. Die
Passwörter, die Sie ebenfalls
vergeben müssen, sollten
ein ausreichendes Sicherheitslevel
erreichen – dieses
wird durch die Bewertung
„stark“ angezeigt.
03
Benutzerrechte vergeben
Wie bereits gesagt, besonders wichtig ist die Entscheidung,
welchem Nutzer Sie welche Berechtigungen verleihen möchten. Es
gibt fünf (bei Netzwerken sechs) verschiedene Benutzerrollen, vom
Abonnenten zum Administrator. Eine genaue Übersicht finden Sie auf
http://codex.wordpress.org/Roles_and_Capabilities.
04 Registrierung
Falls Sie die Benutzer nicht alle selbst von Hand
eintragen möchten, können Sie bei den Allgemeinen Einstellungen
die Registrierungsoption freischalten (Häkchen
setzen). Dann können sich die zukünftigen Mitarbeiter
selber bei Ihrem Blog anmelden. Diesen wird eine Standardrolle
zugewiesen, die Sie ebenfalls auf der Einstellungsseite
festlegen.
06 Rolle
ändern
Dieses Ändern der Benutzerrolle
ist ganz einfach: Gehen
Sie zurück zum Benutzer-
Menü, setzen Sie ein Häkchen
in der Checkbox vor dem
User, dessen Berechtigungen
Sie anpassen möchten, und
wählen Sie im Aufklappmenü
„Rolle ändern in...“ die neue
Benutzerrolle aus. Ein Klick
auf den „Ändern“-Button
schließt die Aktion ab.
05
Standardrolle festlegen
Wenn die Registrierungsoption aktiviert ist, kann
sich jeder über die wp-admin-Seite Ihrer WordPress-Präsenz
registrieren. Aus Sicherheitsgründen sollten Sie daher die Standardrolle
bei Neuanmeldungen möglichst niedrig ansetzen.
Wir empfehlen, allen Neumitgliedern zunächst den Status als
Abonnent zuzuweisen – Sie können die Benutzerrolle ja danach
jederzeit heraufsetzen.
07 Suchfilter
Sie können die Benutzerliste alphabetisch
nach Namen oder E-Mail-Adressen sortieren
und haben außerdem noch ein Suchfeld zur
Verfügung, um direkt nach einem bestimmten
Benutzer suchen zu können.
Chap Secure Login
01 Plug-in installieren
Gehen Sie in WordPress zum Plug-ins-
Menü, wählen Sie „Hinzufügen“, suchen
Sie nach „Chap Secure Login“ und
klicken Sie auf „Installieren“.
02 Plug-in aktivieren
Kehren Sie ins Plug-ins-Menü zurück,
wählen Sie das Plug-in aus und klicken
Sie auf „Aktivieren“. Eine Konfiguration
ist nicht nötig.
03 Plug-in testen
Loggen Sie sich aus WordPress aus und
dann wieder ein, um zu prüfen, ob das
Plug-in funktioniert: Wird ein Schloss-Icon
angezeigt, dann überträgt Chap Secure
Login das Passwort verschlüsselt.
Das große WordPress-Handbuch 41

Grundlagen
E-Mail-
Konten
mit cPanel
verwalten
MIT CPANEL WIRD DIE MAILVERWALTUNG DEUTLICH
VEREINFACHT. SIE KÖNNEN ALLES AUS DEM WEBBROWSER
HERAUS STEUERN.
LERNZIEL
Mailkonten mit cPanel
verwalten können
DAUER
30 Minuten
ANSPRUCH
VON JEHER IST die E-Mail-Verwaltung eine
komplexe Angelegenheit – man muss sich
dabei mit Spool-Verzeichnissen, Warteschlangen,
Transfer-Agents und anderem
technischem Kram befassen, der Laien schnell durcheinanderbringen
kann. Zum Glück schafft das Konfigurationstool
cPanel hier Abhilfe: Damit können Sie alle
Aspekte eines modernen Mailservers über ein Web-
Interface managen.
Wir beginnen damit, dass wir einen vollwertigen
E-Mail-Account anlegen, mit dem Sie Nachrichten
empfangen und speichern können, und danach folgen
Weiterleitungsadressen (also ohne zugeordneten Speicherplatz).
Außerdem sehen wir uns das Standardverhalten bei
unzustellbaren E-Mails, Autoresponder, Abwesenheitsnotizen,
Filterregeln und Spam-Management an.
01
cPanel öffnen
Wenn Sie sich in cPanel einloggen, sollten Sie
einen E-Mail-Bereich auf dem Startbildschirm sehen.
Die Gestaltung des Startbildschirms kann variieren, da
es mehrere Designvarianten von cPanel gibt. Alle Einstellungsmenüs
lassen sich über Icons aufrufen.
Spam ade!
cPanel wird in der
Regel mit dem Spam
Assassin geliefert. Sie
können bei dem
Programm auf einer
Zahlenskala einstellen,
wie streng ausgesiebt
werden soll.
02
Neues Mailkonto erstellen
Wählen Sie das Icon für E-Mail-Accounts aus.
Hier sehen Sie die bereits vorhandenen Konten und
können neue einrichten. Erstellen Sie ein neues Mailkonto,
indem Sie einen Postfachnamen und ein Passwort
eintragen. Falls Sie mehrere Domains mit cPanel
verwalten, können Sie den Teil der Adresse hinter dem
@-Zeichen entsprechend wählen.
• cPanel ermöglicht die Nutzung verschiedener
Webmail-Clients. Probieren Sie aus,
welcher für Sie am besten geeignet ist.
• Es gibt außerdem eine Setup-Anleitung
für Desktop-Clients und Mobilgeräte,
die cPanel Ihnen basierend auf Ihren
Einstellungen bereitstellt.
42 Das große WordPress-Handbuch

WordPress
Grundlagen
04 Weiterleitungsadresse
Den vollwertigen E-Mail-Account ergänzen wir nun um eine Weiterleitungsadresse, einen
sogenannten Alias. Klicken Sie dazu auf das Icon „Forwarder“ im Mailbereich. Tragen Sie hier den
Namen der Weiterleitungsadresse ein und geben Sie das Mailkonto an, an welches die Nachrichten
umgeleitet werden sollen.
03
Speicherplatz begrenzen
Sie können dem neuen Konto an dieser Stelle auch Speicherplatz
(in MB) zuweisen. Falls Ihr System mehrere Nutzer mit Mailadressen
versorgt, sollten Sie hier ein Limit setzen. Es kann auch sein, dass
Ihr Webhoster den für E-Mails verfügbaren Speicherplatz beschränkt.
Denken Sie insbesondere an den Platzverbrauch von Attachments.
06 Autoresponder 1
Wenn Sie eine automatische Mailantwort erstellen möchten, klicken
Sie auf das Autoresponder-Icon im E-Mail-Menü. Lassen Sie den Zeichensatz
auf „utf-8“ stehen, da dies der gebräuchliste ist. Tragen Sie die Adresse ein, für
die der Autoresponder gelten soll. Sie können ein Zeitintervall festlegen, damit
die Mailantwort nicht zu häufig verschickt wird.
05 Catch-all-Option
Statt eine Reihe Aliase festzulegen,
haben Sie auch eine Catch-all-
Option, das heißt, alle Nachrichten an
nicht vorhandene Mailadressen mit Ihrem
Domainnamen werden an ein einziges
Postfach umgeleitet. Dieses können Sie
bei „Default-Adresse“ angeben. Sie können
aber auch eine Fehlernachricht verfassen,
die automatisch an jeden Absender verschickt
wird, der an eine nicht existente
Mailadresse Ihrer Domain mailt. Die Catchall-Option
macht Sie allerdings anfälliger
für Spam.
07 Autoresponder 2
Die Nachricht an sich tragen
Sie in das Feld „Body“ ein. Falls Sie
HTML-Code in der Nachricht verwenden,
kreuzen Sie die entsprechende
Checkbox an. Falls der Autoresponder
nur über einen bestimmten Zeitraum
aktiv sein soll, tragen Sie die entsprechenden
Daten ein.
E-Mail-Filter
01 Filterart auswählen
Sie können Filter auf Konto- oder
Benutzerebene setzen. Wählen Sie mit
dem entsprechenden Icon eine Option
aus und klicken Sie auf „Neuen Filter
erstellen“.
02 Filterregeln setzen
Filter bestehen aus Regeln und
Aktionen. Mit den Regeln bestimmen
Sie, welche Nachrichten betroffen sind,
und eine Aktion ist das, was mit den
Nachrichten dann geschehen soll.
03 Aktion festlegen
Mögliche Aktionen sind löschen, umleiten
oder verschieben. Haben Sie sich
für ein Verfahren entschieden, klicken
Sie den „Aktivieren“-Button.
Das große WordPress-Handbuch 43

Grundlagen
Performance
laufend
überwachen
mit cPanel
ERFAHREN SIE, WIE SIE EINE SCHLECHTE PERFORMANCE
IHRER WEBSITE DIAGNOSTIZIEREN UND BEHEBEN
LERNZIEL
Die Performance
Ihres Blogs mit cPanel
überwachen
DAUER
30 Minuten
ANSPRUCH
SOBALD IHRE Internetpräsenz einen
gewissen Bekanntheitsgrad erreicht hat,
werden Sie feststellen, dass Ihre Seite
durch den ansteigenden Traffic belastet
werden kann. Das mag unwahrscheinlich gewesen
sein, als Sie Ihren Blog eingerichtet haben, aber wer
weiß schon, was die Zukunft bringt. Einige Probleme
werden vermutlich mit einigen Mausklicks zu beheben
sein, während andere darauf hinweisen, dass Sie auf ein
leistungsfähigeres Hosting-Paket wechseln sollten.
cPanel gibt Ihnen dabei viele Einblicke in die Effizienz
Ihrer Seite. Es ist hierbei wichtig, sich mit den verschiedenen
Anzeigeelementen auseinanderzusetzen,
während Ihre Seite inaktiv ist. Nur so können Sie im
späteren Verlauf identifizieren, welche Veränderung
Ihre Seite ausbremst.
Das Wissen, welches Anzeigeelementen für welches
Problem zuständig ist, hilft Ihnen dabei, die
geeignete Lösung zu finden.
• Eine effektive Seite sollte in der Lage sein,
auf einen stetig steigenden Zugriff durch User
adäquat reagieren zu können. Hiermit überwachen
Sie, wie sich die Leistung Ihrer Seite
unter einer wachsenden Anzahl von Benutzern
entwickelt.
• Wenn die Antwortzeit Ihrer Seite auf einem
konstanten Niveau bleibt, während die
Zugriffszahl steigt, läuft alles in einem
effektiven Rahmen.
Eine effektive Seite sollte
in der Lage sein, auf einen
stetig steigenden Zugriff durch
User adäquat reagieren
zu können.
44 Das große WordPress-Handbuch

WordPress
Grundlagen
01 Bandbreite
Nachdem Sie in cPanel eingeloggt sind, klicken
Sie auf das Icon „Bandwith“. Hier werden Ihnen Grafiken
über die genutzte Bandbreite des letzten Tages, der letzten
Woche und des letzten Jahres angezeigt. Die Grafik
über die tägliche Nutzung ist hierbei die nützlichste Option,
mit der Sie mit Leichtigkeit Zugriffsspitzen erkennen
können und zu welchem Zeitpunkt diese stattfanden.
02
Aktuelle Besucher
Hat eine Zugriffsspitze stattgefunden,
gehen Sie ins Detail, indem Sie „Latest
Visitors“ wählen. So sehen Sie die Besucher
auf einer weiteren Seite. Abgebildet sind IP-
Adresse des Besuchers, Zugriffszeitraum
und wie viele Daten geladen wurden. Auch
lässt sich herausfinden, ob es sich bei dem
Zugriff um einen Webcrawler gehandelt hat.
03
Raw Access Log
Für tiefere Analysen, klicken Sie auf „Raw Access Logs“. Wählen
Sie dann den Domainnamen aus, für den Sie die Protokolle möchten, und
die Protokolldateien werden vom Server geladen. Dies ist im Zusammenhang
mit speziellen Programmen wie dem WebLog Expert sehr nützlich.
Website-Last prüfen
04
Netzbasierte Analyseprogramme
cPanel beinhaltet für gewöhnlich AWStats.
Dieses browserbasierte Analyseprogramm
gibt Ihnen die Möglichkeit, Protokolldateien
grafisch darzustellen, ohne
diese als Rohdaten herunterzuladen
oder ein externes Programm verwenden
zu müssen.
06 Prozessorauslastung
cPanel kann Ihnen die CPU-Auslastung Ihres
Server anzeigen. Überprüfen Sie die Belastung Ihrer CPU
unter regulärem Traffic und vergleichen Sie dies bei einer
Veränderung Ihrer Konfiguration, zum Beispiel nach der
Installation eines Plug-ins. Eine signifikante Steigerung
weist zumeist auf einen schlecht geschriebenen Code hin.
05 Fehlerprotokoll
Wählen Sie „Error Log“ von der cPanel-Homepage
aus, um sich die Fehlermeldungen
des Servers anzuschauen. Meist
handelt es sich um fehlende Dateien, die
aufgerufen wurden. Fehlende Dateien
senken die Performance, da so eine Seite
mit einer Fehlermeldung erzeugt und
anstelle der Datei dargestellt werden muss.
Ein fehlender Hintergrund kann also die
Belastung des Servers verdoppeln.
Überblick
behalten
Auch wenn cPanel einen
gewissen Einblick in die Performance
gewährleistet, so
gibt es keinen Gesamteindruck
über deren Status. Es
liegt an Ihnen, anhand der
Daten die Effizienz Ihrer
Online-Präsenz
zu beurteilen.
07 Speicher-
belegung
Sie können auch auf die durchschnittliche Speicherbelegung
achten. Dies weist zwar weniger auf eine schlechte
Programmierung hin, kann aber ein Indikator dafür sein,
dass zu viele Ressourcen gleichzeitig beansprucht werden.
Beispiel: Werden Hintergrundbilder auf Anfrage skaliert,
zeigt ein hoher Speicherverbrauch an, dass die Ergebnisse
nicht hinreichend im Cache hinterlegt werden.
01 Online-Belastung
Beim Performance-Monitoring überprüfen
Sie, wie sich die Seite bei hohem Traffic
verhält. Mit Programmen wie Load Impact
simulieren Sie eine hohe Anzahl Besucher.
02 Tests durchführen
Geben Sie die URL Ihrer Seite ein und
wählen Sie die auszuführenden Tests
(einige sind umsonst, andere – umfangreichere
– müssen bezahlt werden).
03 Ergebnisse
Die Ergebnisse werden grafisch dargestellt.
Beim Testdurchlauf sehen wir, dass
mit steigender Anzahl an Usern die Reaktionszeit
der Seite stabil bleibt.
Das große WordPress-Handbuch 45

Grundlagen
Sichern Sie
Ihr Blog mit
cPanel
SCHÜTZEN SIE IHR BLOG UND FÜHREN SIE
UPGRADES OHNE SORGEN DURCH, INDEM SIE
SICH MIT BACKUPS VERTRAUT MACHEN.
LERNZIEL
Wenn Sie Ihr Blog via cPanel
sichern, schützen Sie
sich vor unangenehmem
Datenverlust.
DAUER
30 Minuten
ANSPRUCH
SEINE DATEN ZU sichern ist ein stetes Mantra,
das bis zu dem Zeitpunkt nur eine lästige
Pflicht zu sein scheint, an dem man eine
Sicherheitskopie dann tatsächlich braucht.
Je einfacher ein Backup durchzuführen ist, desto wahrscheinlicher
ist es, dass tatsächlich eins erstellt wird.
Glücklicherweise macht cPanel es einem recht leicht, alle
systemrelevanten Daten eines WordPress-Blogs zu
sichern, sollte das Schlimmste eintreffen.
Eine WordPress-Installation besteht aus zwei Bereichen:
erstens die Dateien auf der Festplatte, die wiederum
leichter ersetzbare Elemente wie die WordPress-Kerndateien
sowie hochgeladene Bilder und Videos umfassen,
und zweitens die Datenbank, welche die Texte Ihrer Beiträge
sowie die Konfiguration Ihres Blogs beinhaltet.
Die beiden Teile sind stark miteinander verwoben.
Der eine Teil ist ohne die Unterstützung des anderen
nutzlos. In diesem Abschnitt schauen wir uns näher an,
wie man Backups beider Teile anfertigt, und wie man sie
wiederherstellt, sollten Probleme auftauchen.
• Sichern Sie mit dem cPanel Backup Wizard die
wichtigsten Daten Ihres WordPress-Blogs. Mit
nur ein paar Klicks sind Ihre Dateien geschützt.
• Im Falle eines unvorhergesehenen Ereignisses
können Sie die Daten mit Leichtigkeit wiederherstellen,
indem Sie die Dateien des Backup
Wizards manuell hochladen.
Sichern Sie mit dem
cPanel Backup Wizard die
wichtigsten Daten Ihres
WordPress-Blogs.
46 Das große WordPress-Handbuch

WordPress
Grundlagen
01
Der Backup Wizard
Loggen Sie sich in cPanel ein und suchen Sie das
Files-Fenster. Dort werden Sie zwei Backup-Optionen finden
– eine lediglich Backups genannt und die andere mit dem
Namen Backup Wizard. Wir beginnen mit dem Wizard, der
uns durch den ganzen Prozess führen wird.
02
Backup oder
Wiederherstellen
Im ersten Bild entscheiden Sie sich, ein
Backup durchzuführen oder Daten wiederherzustellen.
Hier werden Teile der Installation
aufgeführt, die gesichert oder geladen
werden können. Anfangs unterscheiden
sich die Listen nicht, da es nichts zum Wiederherstellen
gibt. Wir wählen Backup aus.
03
Teilweise oder ganz
Sie haben die Möglichkeit, ein volles oder ein Backup in Teilen
durchzuführen. Ein vollständiges Backup ist vor allem dann sinnvoll,
wenn Sie zu einem anderen Host umziehen wollen. Meistens braucht es
einige manuelle Feineinstellungen, damit Ihre Installation wieder läuft.
Machen Sie anteilige Backups von individuellen Bereichen Ihrer Seite,
sodass diese automatisch von cPanel wiederhergestellt werden können.
Wizard überspringen
04
Home-Verzeichnis sichern
Klicken Sie auf Home Directory und im nächsten
Bildschirm wiederum darauf. Hierdurch wird ein
Download der WordPress-Kerndateien, Plug-ins, Bilder,
Videos und aller Dateien, die Sie per FTP hochgeladen
haben, eingeleitet. Abhängig von der Datenmenge Ihres
Blogs kann dies eine relativ große Datei sein, daher
kann der Prozess eine Weile dauern.
06
Wiederherstellen des
Backups
Mit dem Wizard spielen wir die Backup-Daten auch wieder
zurück. Jetzt wählen wir jedoch im ersten Schritt Restore
und dann das, was wir wiederherstellen (hier das
Home-Verzeichnis) wollen, aus. Der Wizard wird Sie auffordern,
das gesicherte Archiv auf Ihrem Computer auszuwählen,
das dann auf den Server geladen und entpackt
05
07
Die Datenbank
Um die Datenbank, die
Postings und Konfiguration enthält,
zu sichern, müssen Sie
einen Schritt zurückgehen
und MySQL Databases
auswählen. Das Home-
Directory-Backup wird alle
Dateien Ihrer Installation
sichern. Haben Sie mehrere
Websites, so werden Sie
auch mehrere Datenbanken
besitzen. Klicken Sie dann auf
den Namen der zu sichernden
Datenbank, um den Download zu starten.
Wiederherstellen der
Datenbanken
Das richtige
Timing
Fertigen Sie regelmäßig
Backups an. Sollten Sie mehrmals
am Tag Einträge machen,
dann kann ein tägliches
Backup durchaus sinnvoll sein.
Stellen Sie sicher, dass Sie vor
der Installation von Plug-ins
oder Upgrades eine Siche-
rung durchführen.
Das Wiederherstellen einer Datenbank läuft identisch ab. Sie
werden das vielleicht erwartet haben, da wir uns entscheiden
mussten, welche Datenbank wir wieder hochladen wollten.
Tatsächlich ist der Name der Datenbank in das Archiv
implementiert, sodass Sie einfach die Datei hochladen und
danach cPanel den Rest erledigen lassen können.
01 Ohne Wizard
Haben Sie sich erst einmal mit dem Prozess
der Backups und des Wiederherstellens
vertraut gemacht, können Sie
eine Menge Zeit sparen, indem Sie den
Wizard außen vor lassen und direkt auf
das Backups-Icon klicken.
02 Sicherung und
Wiederherstellung
Hier haben Sie einen schnellen Zugriff
auf Backups, ohne dass Sie sich durch
mehrere Schritte arbeiten müssen.
03 E-Mail-Backups
Haben Sie weitreichende Veränderungen
an Ihren E-Mail-Einstellungen vorgenommen
oder wollen diese auf einen
anderen Provider verlegen, können Sie
auch von diesem Bildschirm aus ein
Backup erstellen.
wird.
Das große WordPress-Handbuch 47

Grundlagen
48 WordPress Genius Guide

WordPress
Grundlagen
WordPress
mit Sicherheit
SO FUNKTIONIERT HACKEN BEI WORDPRESS UND ANDEREN OPEN-SOURCE-CMS
EiN sichErEs systEm bedeutet Aufwand,
egal ob bei einer Website oder einem
Atomreaktor. Was Ziele für Hacker attraktiv
macht, ist ein Mix aus Prestige, Erfolg und
Geld. Wenn Hacker Ihr Open-Source-Projekt entdecken,
liegen sie mit der Einschätzung meist richtig, dass Sie
nicht für etwas Prestigeträchtiges wie Facebook oder für
etwas Finanzstarkes wie eine Bank arbeiten. Hacker würden
Sie als einfaches, aber wegen des Einsatzes eines
Open-Source-Unterbaus dennoch attraktives Ziel einstufen.
Das bedeutet, dass Website-Betreiber, die offene
Systeme wie WordPress, Joomla oder Drupal einsetzen,
besonders vorsichtig sein sollten.
Angriffe auf ein Open-Source-System sind einfacher, als
man denken könnte. Viele Profi-Hacker sind darauf spezialisiert,
offene Systeme ins Visier zu nehmen; einige
von ihnen zielen auch ausschließlich auf eine Handvoll
der beliebtesten Systeme. Hat ein Open-Source-Projekt
eine kritische Masse an Nutzern erreicht, wird es für kriminell
orientierte Hacker mit finanzieller Motivation
ZIELE MIT
AUSGEWÄHLTEM
OPEN-SOURCE-
CODE
IDENTIFIZIEREN
Ja
AUSWAHL POPULÄRER
OPEN-SOURCE-SYSTEME
ANALYSE DES
OPEN-SOURCE-CODES
WURDEN SICHERHEITSLÜCKEN
GEFUNDEN?
Nein
PLUG-INS MIT
SCHWACHSTELLEN
IDENTIFIZIEREN
Nein
SCHÄDLICHES PLUG-
IN ENTWICKELN, UM
SCHWACHSTELLEN
AUSZUNUTZEN
Vorteile
Das Verfahren vermeidet
einfache server-sicherheitsgefahren,
die zu größeren
Problemen führen
können, und stellt sicher,
dass sie rechtzeitig reagieren
können, wenn irgendetwas
schiefläuft
TOOLS ENTWICKELN,
DIE SCHWACHSTELLEN
AUTOMATISCH
AUSNUTZEN
HTML-FORMULARE
ANGREIFEN
ANGRIFF AUF
ANFÄLLIGE ZIELE
SCHADCODE IN SKRIPTE
EINSCHLEUSEN
NEUEN CODE
HINZUFÜGEN
Wer mit Open-
Source-Systemen
arbeitet, sollte besonders
vorsichtig sein
SPAM-MAILS
MAIL- UND
DATENBANKINFORMA- DATENBANKEN
VERSCHICKEN SERVERDATEN STEHLEN TIONEN STEHLEN MANIPULIEREN
WEBSEITENBESUCHER
UMLEITEN
INFORMATIONEN DER
BESUCHER STEHLEN
BESUCHER
AUSSPIONIEREN
OBEN: So gehen Hacker beim Angriff auf Open-Source-Systeme vor
Das große WordPress-Handbuch 49

Grundlagen
Vorteile
Erschweren Sie es
Schadcode, an Ihre
Datenbank zu kommen,
und sichern Sie Ihre
Daten. Benutzen Sie
schwer zu erratende,
am besten „gehashte“
Passwörter.
Passwort
sichern
„Gehashte“ Passwörter für
mehr Sicherheit generieren
Die Auswahl einfach zu erratender Passwörter
ist ein häufig gemachter Fehler. Egal ob Datenbank-Verbindung
oder Admin-Bereich: Hacker
können Passwörter via Brute-Force mithilfe einer
Liste der am häufigsten verwendeten Passwörter
einfach knacken; sogar automatisch. Das
heißt, dass Hacker lediglich ein paar Minuten
Aufwand betreiben müssen, um ihren Angriff zu
starten. Dann müssen sie nur noch auf das Resultat
warten.
Nutzen Sie für den Admin-Bereich Passwörter
mit Zahlen, die nur Ihnen etwas sagen und die
nicht erraten werden können – aber die Sie sich
dennoch merken können. Ein Beispiel:
• Datum + Haustiername + letzte drei Ziffern
Ihrer Telefonnummer = 230413Tigger389
Für eine Datenbank-Anbindung benötigen Sie
etwas noch Sichereres als oben. Es handelt sich
um den Zugriff auf Ihre Datenbank für Ihren
Code. Es ist weniger wichtig, dass Sie sich daran
erinnern müssen, da Sie es nicht regelmäßig eingeben
müssen. Für mehr Sicherheit empfiehlt es
sich, per Hash-Generator ein gewähltes Passwort
zu kodieren. Damit lässt sich ein Passwort nicht
mehr erraten. Testen Sie www.md5hashgenerator.com,
um eine verschlüsselte Version des
zuvor ausgewählten Passworts zu generieren.
• Ursprüngliches Passwort: 230413Tigger389
interessant. Sie entwickeln spezielle Methoden und
Tools, um Websites auf Basis eines bestimmten Open-
Source-Codes anzugreifen. Die Grafik auf der rechten
Seite zeigt, wie Hacker schädlichen Code entwickeln.
Die Lösung für das Sicherheitsproblem: die richtigen
Vorkehrungen treffen, um Risiken frühzeitig einzudämmen.
Dieser Artikel zeigt Ihnen, wie Sie Ihr System sicherer
machen können, egal ob Sie ein WordPress-Einsteiger
ohne Programmierwissen sind oder zu den erfahreneren
Nutzern gehören.
Einfache Sicherheitsmaßnahmen
Die Mehrzahl der Sicherheitsprobleme können Sie mit
einfachen Mitteln vermeiden, ohne Programmierwissen
mitbringen zu müssen. Mit Ratschlägen von Debs
Williams, Internet-Marketing-Expertin (www.debbidoo.
com), und mithilfe eines Beispiels, wie Anfänger Word-
Press-Websites sichern können, zeigen wir Ihnen, wie
Sie die Risiken eines WordPress- oder anderen
Open-Source-Systems ohne Programmierkenntnisse
verringern können.
Auswahl des richtigen Hosts
Egal ob Sie Profi oder Webdesign-Anfänger sind: Mit
dem Support eines Hosting-Anbieters, der sein Handwerk
versteht, können Sie bereits viele Sicherheitsrisiken
im Keim ersticken. Ein guter Premium-Support
lässt sich meist gut bezahlen, doch denken Sie an das
Thema Sicherheit, bevor Sie sich für den günstigsten
Anbieter entscheiden.
Williams berichtet, wie ein vorheriger Anbieter entscheidende
Mithilfe für eine WordPress-Website leistete,
die oftmals gehackt wurde. „Ich war nie bei diesem
Anbieter und habe ihn seit dieser Geschichte auch nie in
Erwägung gezogen. Einmal besuchte ich jene Webseite.
Eine Browser-Nachricht teilte mir mit, dass die Website
gefährlich sei und geblockt wurde.
Obwohl der Anbieter einige zweifelhafte Dateien
löschte, kam die Fehlermeldung immer wieder. Der
Grund bleibt bis heute unbekannt. Ich kann aber
sagen, dass bei mindestens drei anderen Anbietern
niemals Sicherheitsprobleme auftauchten.“ Auch wenn
der Grund für Williams Probleme alles Mögliche hätte
sein können, ist die Wahrscheinlichkeit groß, dass ein
unsicheres Plug-in oder Theme dafür verantwortlich
war – etwas, das eine richtige Server-Einstellung unterbunden
hätte.
Ein anderer Nachteil günstiger Anbieter ist, dass Sie
Shared-Server mit anderen, auf dem gleichen Speicherplatz
eingerichteten Webseiten einsetzen. Damit sparen
Anbieter einerseits Kosten. Andererseits entstehen so
weitere Sicherheitslücken für Ihre Webseite. Mit den richtigen
Einstellungen können Sie auf Shared-Servern das
Risiko für sich selbst verringern. Hier sind Sie aber von
der Kompetenz des Administratorenteams Ihres Anbieters
abhängig. Die folgenden Punkte müssen Sie zur
Sprache bringen, wenn Sie sich für einen Anbieter mit
Shared-Servern entscheiden:
• Fähigkeit von Skripten, auf Speicherplatz
außerhalb Ihrer eigenen Domain zuzugreifen
• Diese Sicherheitslücke würde schädlichen
Skripten oder Plug-ins von anderen Webseiten
auf dem gleichen Server wie Ihrem erlauben,
Ihre Homepage anzugreifen. Dazu muss lediglich
Ihre Webseite auf dem Server gefunden
werden. Anschließend kann der Schadcode
Ihren Hosting-Space angreifen und Skripte
umschreiben.
• Die gleiche Sicherheitslücke würde einem Nutzer
erlauben, auf dem Server nach fremden
Webseiten zu scannen und auf Ihre Dateien
zuzugreifen. So könnte jener Nutzer alle Ihre
gehosteten Dateien stehlen, inklusive Codezeilen,
die Zugriff auf Ihre Datenbank ermöglichen.
• Zugriff auf Ihre Datenbank
• Wenn andere Webseiten auf Ihrem Server den
Nutzernamen und das Passwort zu Ihrer Datenbank
abgreifen können, dann haben Fremde
Zugriff auf Ihre Daten. Das ginge per Brute-Force-Angriff
oder per Diebstahl direkt aus
Ihren PHP-Skripten.
• E-Mail-Zugriff
• Ein Server, der nicht derart konfiguriert ist,
bedeutet auch, dass schadwillige Nutzer und
Skripte E-Mails abgreifen können – inklusive Ihren
eigenen. Das Risiko können Sie verringern, wenn
Sie einen Drittanbieter für E-Mails nutzen.
• E-Mail-Versand
• Spam-E-Mails sind ein weiteres Risiko, das falsche
Server-Einstellungen mitbringen.
• Hashed-Passwort:
82b78173308696c7141a972e4deb3641
Damit Ihre Daten optimal geschützt sind, sollte
das unkodierte Passwort sicher gewählt sein,
damit Hacker nicht mit Hash-Versionen gängiger
Passwörter Zugriff auf Ihre Datenbank
erlangen können.
• Das Standard-Präfix für WordPress-Datenbanken ist wp_. Eine Änderung des Präfixes erschwert Hackern die Arbeit.
50 Das große WordPress-Handbuch

WordPress
Grundlagen
Den Code Kodieren
Nutzen Sie einen PHP-Kodierer wie etwa ionCube
(www.ioncube.com), können Sie Ihr PHP- und
HTML-Dateien in ausführbare Dateien
(„Executables“) kompilieren. Der große Vorteil ist,
dass Ihre Webseite nicht mehr auf PHP-Dateien
basiert, die manipuliert werden können. Die
„Executables“ funktionieren identisch, liegen aber
in Maschinencode vor. Versuche, zusätzliche
Zeilen hinzuzufügen, werden fehlschlagen.
Natürlich brauchen Sie ein Backup des Original-
Codes auf Ihrem eigenen Rechner, sonst können
Sie künftig selbst keine Updates vornehmen.
Denken Sie daran, dass Sie
ACHTUNG: eine Kodierung von Dateien
nicht vor Plug-ins und Skripten schützt, die für
krumme Aktivitäten designt wurden. Eine
Kodierung Ihres Codes ist ein großer Schritt zu
mehr Sicherheit, aber auch nur ein Teil des
Gesamtpuzzles.
Das könnte das Ergebnis eines unberechtigt
installierten Skripts sein, das eine fremde Webseite
auf Ihrem Server-Speicherplatz eingerichtet
hat. Da Ihre Webseite mit der gleichen
IP-Adresse ausgestattet ist wie die des
Spam-Servers, könnten Ihre E-Mails von
E-Mail-Anbietern als Spam markiert werden.
Das passiert, wenn Anbieter jene IP auf die
Blacklist genommen haben. Richten Sie sich
mit diesen Bedenken an Ihren potenziellen
neuen Anbieter mit Shared-Servern, bevor Sie
unterschreiben.
Nicht nur schädliche Plug-ins sind
eine Gefahr für Ihre Webseite.
nen Sie „wp_“ also beispielsweise um in „myBlog1707_“,
haben es Hacker und ein gewöhnlicher Schadcode
schwerer, Ihre WordPress-Datenbank anzugreifen. Denken
Sie daran, dass Sie lediglich Hackern die Arbeit
erschweren. Gut geschriebener Schadcode lässt sich
davon jedoch nicht beeindrucken.
Wenn Sie Ihre bestehende WordPress-Installation um
diese Sicherheitsvorkehrung erweitern wollen, dann
können Sie dies via PHP MyAdmin und einem anschließenden
Update Ihrer WordPress-Konfigurations-Datei
(wp-config.php) realisieren. Suchen Sie in der wp-config.
php nach:
001 $table_prefix = ‘wp_’;
und ersetzen Sie die Zeile mit:
001 $table_prefix = ‘[Your prefix here]_’;
Andere Open-Source-Systeme mit einem ebensolchen
Standard werden ähnliche Einstellungen bieten: entweder
eine Änderung der Tabellen-Präfixe via Backend-Systemeinstellung
oder eine hauseigene Funktion zur maßgeschneiderten
Definition von Tabellennamen..
Prüfen Sie Themes und Plug-ins
Nicht nur schädliche Plug-ins sind eine Gefahr für Ihre
Webseite. Auch nützlich designte Plug-ins können unbeabsichtigt
in einer Art und Weise programmiert sein, die
Hackern das Ausnutzen von Lücken und den Zugriff auf
Ihre Webseite somit erleichtern.
TimThumb ist beispielsweise ein Plug-in, das ungewollt
Sicherheitsrisiken mitbringt. Das Skript wurde für
Vorteile
Verhindert, dass Sie
Schadcode in Ihre
Webseite integrieren,
und identifiziert vorab
riskante Plug-ins. Fehlerhafte
Plug-ins führen
häufig zu Hacker-
Angriffen.
Installationstabellen
richtig benennen
WordPress hat eine nützliche Funktion im Installationsprozess,
mit der Sie Präfixe für die Tabellenbezeichnungen
der Datenbank vergeben können. WordPress bietet
dieses Feature, damit Ihre Installationen eine Datenbank
mit anderen Apps und Ihrem eigenen Code teilen können.
Dieses Feature ist auch aus Sicherheits-Sicht sinnvoll.
Wie zuvor beschrieben, werden Ihre Web-Apps
umso sicherer, je mehr Sie sie individualisieren. Benen-
Vorteile
Verhindert, dass Dritte,
Schad-Skripte und Plugins
Ihren Code manipulieren
können. Heben
Sie stets ein Backup
Ihres Original-
PHP-WordPress-
Codes auf.
• Prüfen Sie die Bewertungen
von Plug-ins vor der Installation
Das große WordPress-Handbuch 51

Grundlagen
Weil WordPress
eine so bekannte Blogging-Plattform
wurde,
wurde es zum Ziel für
Hacker
das WordPress-Theme Mimbo Pro programmiert, um
einen automatischen Zuschnitt von Grafiken zu ermöglichen.
TimThumb erwies sich als sehr nützlich und wurde
in vielen anderen WordPress-Themes und
Open-Source-Systemen übernommen. Das Problem des
Plug-ins ist, dass es Dateitypen nicht validiert. Somit
konnten darüber PHP und andere Skripts eingeschleust
werden. Das bedeutete:
• WordPress-Webseiten und Projekte auf Basis
anderer Open-Source-Systeme mit Themes, die
TimThumb nutzten, waren sehr gefährdet.
• Viele TimThumb-Nutzer wussten nicht über das
Risiko Bescheid. Das führte zu Berichten von über
1,2 Millionen betroffenen Webseiten.
• Hacker können gefährdete Webseiten identifizieren:
lediglich durch eine Suche nach Word-
Press-Webseiten, die TimThumb einsetzen.
• Die Standard-Code-Struktur von WordPress erlaubt
Hackern, automatisierte Bots zu programmieren, die
selbstständig nach gefährdeten Webseiten suchen.
Das führte dazu, dass Webseiten-Betreiber unwissend darüber
waren, dass ihre Projekte allerhand Schaden anrichten
konnten: Code-Phishing, um Logins und Kreditkarteninformationen
abzugreifen, Code zum Server-Hijacking,
Spam-Mails und mehr.
Williams erklärt, wie sie die Risiken für ihre Webseite
durch eine Selektion von Plugin minimierten. „Ich bin
ziemlich vorsichtig mit Plug-ins. Ich nutze nur die mit den
besten Bewertungen. Doch nichts ist wirklich sicher, vor
allem wenn jeder im Open-Source-Code rumpfuschen
darf.“ Folgendes sollten Sie beachten, wenn Sie Plug-ins
oder Themes für Ihr Open-Source-System verwenden:
• Lesen Sie Tests und Bewertungen
• Bei Plug-ins von WordPress.org ist es einfach: In
der rechten Spalte der Download-Seite sehen Sie
die Anzahl der Testberichte und die durchschnittliche
Bewertung. Je mehr Bewertungen
ein Download erhalten hat, desto vertrauenswürdiger
ist er.
Vorteile
Vertrauen Sie Berichten
und Bewertungen nicht
bedingungslos. Laden
Sie nur von sicheren
und seriösen Download-Quellen.
• Vertrauenswürdigen Quellen nutzen
• Die erste Anlaufstelle für WordPress-Plug-ins
sollte immer www.WordPress.org/extend/plugins
sein.
• Googeln Sie nach anderen Meinungen
• Suchen Sie speziell nach Sicherheitsaspekten zu
Downloads, die Sie nutzen wollen: etwa
„TimThumb plug-in exploit“.
• Wiederholen Sie dies für alle Plug-ins und Themes,
die Sie nach der Einrichtung Ihrer Word-
Press-Webseite nutzen wollen..
• Aktualisieren Sie Themes und Plug-ins, um nicht
Opfer bekannter Sicherheitslücken zu werden
• Im Admin-Bereich von WordPress können Sie regelmäßig
nach Updates für das Backend suchen. Einige
Plug-ins können Sie auch so einrichten, dass Sie
Ihnen bei einem Update eine E-Mail senden.
• Suchen Sie einmal im Monat selbst via Google
nach Updates für Ihre Plug-ins.
• Installieren Sie Plug-ins nicht
wahllos und in Massen
• Je mehr Plug-ins Sie verwenden, desto mehr
kann schiefgehen und desto mehr Zeit müssen
Sie in das Thema Sicherheit investieren.
Jedes Plug-in kann Sicherheitslücken (Exploits) enthalten.
Dass noch keine bekannt sind, garantiert keinerlei Sicherheit.
Eine natürliche Reaktion auf den TimThumb-Exploit
wäre ein schneller Umtausch. Doch es gibt keine Garantie,
dass das Ersatz-Plug-in sicherer ist. Nun wurde das
spezielle Problem mit TimThumb behoben, mit der
aktuellen Version des Plug-ins sollte man also sicherer
unterwegs sein als mit einem völlig anderen Download.
Einschränkungen von Dateizugriffen mit .htaccess
Wenn Sie Hackern oder Ihren Nutzern nicht völlige Kontrolle über Ihr Backend
geben wollen, dann schützen Sie Ihre Dateien
Open-Source bedeutet, dass Hacker Ihre Code-Basis
kennen und wissen, wie sie Einstellungen ändern und
Schaden anrichten können. Mit Einschränkungen von
Dateizugriffen via .htaccess können Sie Ihr System
sicherer machen. Folgende Dateien kommen infrage:
• Die „wp-config.php“-Einstellungen
• Vermeiden Sie das Risiko, Einstellungen in der
Datei wp-config.php sichtbar zu machen.
Benutzen Sie .htaccess, um den Web-Zugriff
auf die Datei zu sperren.
• Code:
001 deny from
all
• Der „wp-content“-Ordner
• In diesem Ordner befinden sich Themes, Plug-ins
und Nutzer-Uploads. Nutzer ohne Admin-Rechte
sollten keinen Zugriff darauf haben, genauso
wenig wie Hacker. WordPress erlaubt den Zugriff
auf PHP-Dateien nicht via HTTP. Wir können die
Sicherheit also steigern, indem wir nur
Dateitypen wie Bilder oder JavaScript-Code für
Themes erlauben.
• Code:
001 Order Allow,Deny
002 Deny from all
003
004 Allow from all
005
• Hinweis: Es gibt Ausnahmen für PHP-Dateien, auf
die Nutzer via HTTP zugreifen sollten.
Beispielsweise PHP-Dateien in Ajax-Themes. Sie
können diese Ausnahmen in der .htaccess-Datei
wie folgt hinzufügen:
001
002 Allow from all
003
Sie können Nutzern auch den Zugriff via Browser auf
Ordner ohne index-Datei verbieten. Mit der
folgenden Ergänzung sind Sie geschützt:
001 Options All –Indexes
002
52 Das große WordPress-Handbuch

WordPress
Grundlagen
Admin-Bereich und Updates
Die URL zum Admin-Bereich in Verbindung mit
einem festgelegten Standard-Passwort lädt Hacker
geradezu ein. Eine Umbenennung des „wp-admin“-Ordners
und eine Änderung oder Löschung
des Standard-“admin“-Nutzernamens macht Ihren
WordPress-Login sicherer.
Nick Stockbridge, Leiter des WordPress-Training-Anbieters
Transmedia (www.transmedia.co.uk),
berichtet über einfachste Maßnahmen, um eine
Webseite sicherer zu machen.
„Weil WordPress eine solch populäre Blogging-Plattform
mit einem einfachen CMS wurde,
haben Hacker den Dienst ins Visier genommen und
suchen ständig nach Sicherheitslücken in alten Installationen.
Die meisten unserer Experten beschäftigen
sich mit Sicherheitsaspekten und Praxis-Tipps, um
WordPress weniger anfällig gegen Gefahren zu
machen. Am einfachsten ist es, seine WordPress-Installation
auf dem aktuellen Stand zu halten, die Installation
nicht im Standard-Ordner zu lassen und sichere
Zugangspasswörter einzurichten.
FORTGESCHRITTENE
TECHNISCHE MASSNAHMEN
Servereinstellungen
anpassen
Ein Code kann niemals hundertprozentig sicher sein,
egal ob Dritthersteller-Plug-ins, eigener Code von
Ihnen oder Ihres Teams. Eine erste Verteidigungsmaßnahme
ist, dass Ihr Hoster jegliche ungewollten
Aktivitäten unabhängig vom Code unterbindet. Das
heißt, dass die Server-Einstellungen einschreiten sollten,
selbst wenn Sie aus Versehen ein schädliches
Plug-in installieren, das Server-Hijacking versucht.
PHP für Datei-Operationen
anpassen
Wir haben uns bereits das Einschränken von Skripts
angesehen. Es ist jedoch besser, eine Notfall-Lösung
parat zu haben, wenn etwas schiefläuft. Wenn Ihr
Anbieter es erlaubt, dann erstellen Sie eine Datei
namens „php.ini“, die Ihren PHP-Code kontrolliert. Die
Haupteinstellung ist folgende:
Session ID
CLIENT BrOwSEr
(Session ID)
SERVER
Session ID
001 open_basedir
• Dies limitiert PHP-Operationen auf Dateien in
bestimmten Ordnern. Das ist nützlich, es kann
Skripte stoppen, die sich selbständig in Ihrer Word-
AUSFÜHRENDES SKRIPT
Session ID
Session ID
Details...
Details...
Details...
Details...
Details...
Details...
Session
Details...
Details...
Details...
Details...
Details...
Details...
OBEN: Nutzen Sie Sitzungen, um via HTML oder Cookies
sensible Informationen unsichtbar zu machen.
• Wenn Sie ein WordPress-
Plug-in entwickeln, dann
machen Sie es so sicher
wie möglich
Das Feature, dass Sie
eigene Funktionen
entwickeln können, macht
Open-Source-Systeme wie
WordPress so flexibel
Das große WordPress-Handbuch 53

Courtesy of Dell Inc.
Grundlagen
Press-Installation verbreiten und so Schaden anrichten
können. Schauen Sie in Ihrer „php.ini“ nach
„open_basedir=“. Falls davor ein Semikolon steht, entfernen
Sie es. Ersetzen Sie die Zeile mit dem Folgenden.
Der eigentliche Pfad entspricht dem realen Ort
Ihres WordPress-Upload-Ordners.
001 open_basedir = ‘/home/www/public_html/
wp- content/uploads/’
• Achtung: Das Ändern dieser Einstellung verhindert
Datei-Funktionen außerhalb des Upload-Ordners.
Sie müssen also andere Ordner definieren, in
denen Sie Datei-Operationen innerhalb der „open_
basedir“-Einstellung erlauben, indem Sie jeden Ordner
mit einem Doppelpunkt trennen. Wenn Sie das
Plug-in A also weiterhin bearbeiten möchten, dann
muss Ihre “open_basedir“ so aussehen:
001 open_basedir = ‘/home/www/public_html/
wp- content/uploads/:/home/www/public_html/
wp- content/Plug-inA/’
Prüfen Sie immer,
welche Dateitypen
hochgeladen werden.
• Achtung: Auch wenn „open_basedir“ nützlich für
das Einschränken von PHP-Skripten ist, es limitiert
keine Skripte, die in anderen Programmiersprachen
wie etwa Python geschrieben sind.
Entwicklung von
Plug-ins und Themes
Das Feature, dass Sie eigene Funktionen entwickeln können,
macht Open-Source-Systeme wie WordPress so
flexibel. Es ist jedoch wichtig, dass Sie Sicherheitsaspekte
für Ihre eigenen Plug-ins ebenso im Blick haben wie
bei Programmen von anderen Nutzern.
Server- vs. Client-Seite
Daten auf dem Server sind sicherer als jegliche andere
Informationen, die Sie versteckt via HTML-Formularen
oder URL query strings veröffentlichen. Es ist verlockend,
von Skripten benötigte Daten, die Sie nicht sichtbar
machen wollen, in HTML-Formularen zu verstecken.
Das ist eine einfache Lösung, birgt jedoch Risiken.
Anstatt Informationen über HTML-Formulare zu versenden,
belassen Sie sie besser auf dem Server. Das hat
den Vorteil, dass Sie sie besser schützen können, da
schadwillige Nutzer nicht an sie herankommen und
Ihren Code offenlegen können. Dies können Sie auf verschiedene
Arten und Weiten lösen. Am einfachsten sind
Server-Sitzungen (sessions), die Sie mit der „session_
Vorteile
PHP ist nützlich –
es kann Skripte stoppen,
die sich selbstständig in
Ihrer WordPress-Installation
verbreiten und so
eventuell Schaden
anrichten.
start()“-Funktion von PHP und „$_SESSION“-Werten nutzen
können.
Server-Sessions bieten eine gute Möglichkeit, vom
Nutzer benötigte Daten auf dem Server zu belassen.
Doch manchmal braucht es bessere Lösungen, um auf
Dateien zuzugreifen, die alle Nutzer brauchen. Ein Beispiel
wären Daten für das Produkt-Management eines
eCommerce-Plug-ins. Mit einer Tabelle für Datenprofile
können Sie Informationen als „JSON-string“ (PHP-Funktion:
json_encode()) speichern. Mit einem versteckten
Feld im Formular können Sie entsprechend benötigte
IDs später wieder aufrufen. So können Sie die benötigten
Daten zur Bearbeitung weiterleiten und geben lediglich
die ID aus dem Datenprofil frei.
Datei-
Berechtigungen
Diese Einstellungen
brauchen Sie als
WordPress-Profi
Wenn Sie selbstständig WordPress installiert
haben, dann wissen Sie, wie FTP-Programme wie
FileZilla oder CyberDuck funktionieren. Mit diesen
Programmen können Sie Datei-Berechtigungen
vergeben. So können Sie Plug-ins und Skripten auf
Ihrer Webseite die Rechte verwehren, Daten zu
verändern. Die folgenden Einstellungen sollten
Sie übernehmen:
• Datei-Ordner sollten auf den Wert 755 eingestellt
sein. Dateien können so gelesen und ausgeführt
werden, doch nur Sie dürfen sie verändern.
• Gewöhnliche Dateien versehen Sie mit dem Wert
644. Das hindert sie daran, an Skripten in Ihrer
Installation zu werkeln.
• Dateien, die Sie weiterhin im WordPress-Theme-
Editor bearbeiten möchten, bekommen den Wert
666. So kann WordPress-PHP-Code sie ändern.
Seien Sie mit der Einstellung jedoch sparsam.
Auch Plug-ins können diese Dateien
anschließend bearbeiten.
54 Das große WordPress-Handbuch

WordPress
Grundlagen
Datei-Prüfung mit Tokens
Wenn Sie mit Daten hantieren, speziell sensiblen wie
etwa Zahlungsinformationen, dann müssen Sie sicherstellen,
dass die Informationen authentisch sind. Tokens
sind ein vom Skript generierter Prüfungs-Code, der verifiziert,
dass wiedergegebene Informationen das sind,
wofür sie sich ausgeben. Machen Sie sich dies zunutze,
um Ihr System sicherer zu machen. Kombinieren Sie
dies mit serverseitigen Datenprofilen, haben Hacker
nichts mehr zu lachen.
Tokens können Sie mit einem MD5 hash produzieren.
Dies realisieren Sie mit einer Kombination von Informationen
aus den zu verifizierenden Daten und Details, die
nur Ihr Server kennt: beispielsweise dem Zeitstempel
des Nutzerlogins und dem geheimen Passwort. Der folgende
Code zeigt eine Lösung via PHP:
001 $token = md5($data[‘id’] + $_
SESSION[‘loginTime’] + $systemPassword);
Dateitypen verifizieren
Wenn Ihr Code Datei-Uploads akzeptieren soll, dann
sollten Sie stets prüfen, um welche Dateitypen es sich
handelt. Das erwähnte „TimThumb“-Skript wurde für
Bilder-Uploads designt. Der Fehler, Dateitypen nicht
zu prüfen, führte zu einer gravierenden Sicherheitslücke.
In einem ersten Schritt sollten Sie den Upload
von PHP-Dateien verbieten. Doch hier entstehen
Lücken für Skripte in anderen Sprachen wie etwa
Python, die der Server womöglich unterstützt. Anstatt
Bei sensiblen Daten, müssen Sie sicherstellen,
dass die Informationen authentisch sind.
einer großen Liste von zu sperrenden Dateitypen sollten
Sie auf unsere 100-Prozent-Lösung setzen: Prüfen
Sie alle hochgeladenen Dateien auf akzeptierte Funktionen,
ohne Raum für Bedrohungen.
Eval() ist verzichtbar
Manchmal kann es vorteilhaft sein, PHP-Code in Inhalte
einzubetten, etwa bei Berechnungen und beim Ausführen
von Server-Funktionen innerhalb Ihrer Datenbankinhalte.
Wer nicht über die Sicherheitsgefahren Bescheid
weiß, hält die PHP-Funktion „eval()“ womöglich für eine
gute Wahl, um Daten dynamisch zu bearbeiten. Das Problem:
Werden Sie gehackt, findet der Cyberkriminelle
recht einfach den auszuführenden PHP-Code. Von hier
aus braucht er ihn nur noch auszutauschen, um Schaden
anzurichten, wie beispielsweise:
• Das Finden und Kopieren ihrer installations-
Einstellungen
• Das Schreiben neuer Skripte auf dem Server, um
neue Sicherheitslücken einzubauen
• Das injizieren von PHP-Skripten mit schädlichem
Phishing-Code
• Datendiebstahl via E-Mail
Die Lösung: Verzichten Sie darauf, „eval()“ zu verwenden.
Stattdessen setzen Sie auf einen etwas komplexeren
Ansatz: einen, der Ihre Inhalte verschiedene Schalter
(Trigger) durchlaufen lässt: Trigger, die Skripte aufrufen
und anschließend Resultate in den Content schreiben,
damit Sie die volle Kontrolle über den auszuführenden
Code behalten. Diese Trigger liefern alle Informationen
für Ihren Content, den es zur dynamischen Informationsverarbeitung
braucht, ohne dass Sie bei Ihren ursprünglichen
Aufgaben eingeschränkt sind.
Vorteile
Tokens machen Ihr
System sicherer, indem
Sie die Echtheit der
wiedergegebenen Daten
prüfen. Kombiniert mit
Server-Daten, haben
Hacker nichts
zu lachen.
CONTENT-
DATEN
Content- und
Triggerliste
Für jeden
Content-Trigger
AUSFÜHrENDES
SKriPT
Content ID
Dateiname und Aktion
triggern (freischalten)
Ergebnisse
TriggEr
Trigger-ID
Content-ID
PHP-Dateiname
Aktion
TriggErN
AUSZUFÜHrENDEr
DATEiEN
OBEN: Datenbankinhalte mit Schaltern bringen mehr Sicherheit für in die Datenbank eingebetteten PHP-Code
Das große WordPress-Handbuch 55

Themes
Persönliche Note für Ihr Blog
58 Maßgeschneiderte WordPress-
Themes
Erstellen Sie Ihr eigenes Design
68 Fürs Blog das richtige Theme
Grundlagen für die Auswahl
74 Erstellen Sie ein grafisches
WP-Theme mit Photoshop
Lassen Sie Ihrer Kreativität freien Lauf
78 Postings in voller Breite
anzeigen lassen
Entfernen Sie die Seitenleiste
82 Erstellen Sie ein Theme für
WordPress mit Underscores
Der ideale Ausgangspunkt für neue Designs
88 Portieren Sie Ihre WordPress-Seite
für Mobilgeräte
Darstellung für Smartphones und Tablets anpassen
94 Ein Theme auf HTML5 umstellen
Entdecken Sie die vielen Neuheiten
56 Das große WordPress-Handbuch
SEITE
68
Top-Tipp
Heutzutage wissen die
meisten User intuitiv, dass sie
ein Bild oder eine Überschrift
anklicken können, um sich
den kompletten Text eines
Postings anzeigen zu lassen.
Sie können also auf explizite
Hinweis-Links in der Regel
verzichten.

WordPress
Themes
Top-Tipp
Es gibt kein richtig
oder falsch, wenn es
darum geht, welche
Elemente Sie in Ihr Theme
integrieren. Nehmen Sie
sich einfach alles, was
Ihnen gefällt, und lassen
Sie alles andere
weg.
Es ist wichtig, ein
Theme auszu wählen,
das möglichst gut mit
den Inhalten des Blogs
korrespondiert.
Das große WordPress-Handbuch 57

Themes
58 Das große WordPress-Handbuch

WordPress
Themes
Maßgeschneiderte
WordPress
Themes
DESIGNEN UND ENTWICKELN SIE IHR EIGENES WORDPRESS-THEME.
WORDPRESS IST DAS weltweit erfolgreichste CMS. Ein wichtiger Grund
dafür ist die Möglichkeit, sehr einfach Themes und Plug-ins selber
erstellen zu können. Jeder, der sich mit HTML, CSS und ein bisschen PHP
auskennt, kann ein einfaches WordPress-Theme designen. In diesem Artikel
zeigen wir Ihnen genau das: die Erstellung eines Themes von Grund auf.
Zuerst sehen wir uns die Werkzeuge an: Bei WordPress-Themes sind das HTML,
CSS und PHP, hinzu kommen gewöhnliche Bilddateien. Der PHP-Anteil beschränkt sich
dabei jedoch auf WordPress-Funktionen – man muss kein PHP-Profi sein, um Themes
zu erstellen. Die Template-Tags nutzen PHP, und die Art und Weise, wie Parameter weitergegeben
werden, ähnelt PHP, aber Sie benötigen kein tiefgründiges PHP-Wissen, um
damit zurechtzukommen.
Nach den Template-Tags kommt das Eigentliche. Das zu bauende Theme wird einfach
gestrickt sein – mit minimalem HTML und CSS –, damit wir uns mehr auf
WordPress als auf Kleinigkeiten konzentrieren können.
Anschließend setzen wir die Bausteine zusammen, Datei für Datei. Sie werden am
Ende ein voll funktionsfähiges Theme haben, mit dem Sie weiter arbeiten können.
Los geht’s!
Das große WordPress-Handbuch 59

Themes
Theme-Struktur
WordPress-Themes bestehen aus Template-Dateien,
Stylesheets, Bildern und weiteren Elementen, die eine
Website ausmachen. Ein Theme hat keinen Content im
eigentlichen Sinne in der WordPress-Datenbank, wenngleich
eine Sprachdatei für den internationalen Einsatz
vorhanden sein kann. Es fehlen ebenso Bilder oder
Videos als Teil des Inhalts. Im Grunde ist ein Theme das
Design Ihrer WordPress-Website; es bestimmt, wie Ihr
Content präsentiert wird.
Themes liegen im Verzeichnis wp-content/themes/
in ihrem eigenen Ordner. Es muss eine index.php und
eine style.css mit Theme-Header vorhanden sein.
Dieser Header enthält die nötigen Informationen, die
WordPress zur Identifizierung des Themes braucht.
Normalerweise gibt es weitere Dateien, die folgenden
haben wir in unserem Theme:
• style.css – Theme-Deklarierung und CSS
• index.php – Fallback-Template
• header.php – Seitenheader
• footer.php – Seitenfooter
• sidebar.php – Seitenleiste (Sidebar)
• single.php – für Einzelbeiträge
• page.php – für Einzelseiten
• archive.php – für verschiedene Archive
• content.php – Code für die Content-Ansichten
• content-single.php – Content-Ansichten für
Einzelbeiträge
• content-page.php – Code für Content-Ansichten
auf Einzelseiten
• nav-bottom.php – Code für Navigationselemente
im Theme
• comments.php – Code für den Kommentarbereich
• functions.php – Code zur Registrierung von Features
und Funktionen
• screenshot.png – für Admin-Zwecke
Template-Tags und Code
Die meisten Theme-Templates bestehen aus HTML-Auszeichnungen,
CSS-Klassen, IDs und PHP-Code. Der PHP-
Code kann alles Mögliche beinhalten. Wir konzentrieren
uns für unsere Zwecke auf den WordPress-Teil.
Wie erwähnt brauchen Sie kein PHP-Experte zu sein,
um Themes zu entwickeln. Das liegt an den Template-
Tags, die bereits fertigen PHP-Code für Ihre Zwecke
enthalten. Als Beispiel nehmen wir die Ausgabe des
Site-Titels als Text oder die Ausgabe von Tag-Listen für
einen Beitrag. Neben dem Komfort bei der Erstellung
von Themes heißt das, dass Sie den verwendeten PHP-
Code gar nicht zu verstehen brauchen. Sie müssen nur
wissen, welches Template-Tag Sie benötigen und wie
Sie die richtigen Parameter senden, damit diese die entsprechenden
Daten zurückgeben.
Einige Template-Tags akzeptieren keine Parameter.
Das bedeutet, dass sie einfach feste Aufgaben erfüllen.
Wenn Sie deren Output steuern möchten, dann
wählen Sie natürlich die Template-Tags, die Parameter
annehmen. Wir schauen uns nun zwei verschiedene
Unser fertiges Theme wird auch mit den neuen customisation-Optionen für Themes funktionieren.
Template-Tags an. Zuerst bloginfo(), das die URL der
Website, deren Titel und anderes ausgeben kann. Wenn
wir den Titel haben möchten, dann sieht das so aus:
001
Das war’s schon. Wo immer diese Zeile steht, wird der
Titel der Website angezeigt. Diesen können Sie im
Admin-Interface von WordPress unter Settings > General
verändern. Die Informationen in den Klammern sind
die Parameter – in diesem Fall ist es nur ‚title‘.
Einige Template-Tags akzeptieren mehrere Parameter.
Hier das Tag, das die getaggten Stichworte der
einzelnen Postings ausgibt:
002
Dieser Code erzeugt eine Liste verlinkter Tags, die zum
entsprechenden Beitrag gehören. Die Liste wird mit
Kommata getrennt, der Text „Tags: “ steht vor der Liste.
Das sind die Standard-Werte für die drei Parameter,
die dieses Template-Tag verarbeiten kann. Solange wir
keine vergeben, sieht es so aus:
003
Der erste Parameter bestimmt den Inhalt vor der
verknüpften Tag-Liste. Der zweite Parameter besagt,
wie die Tags getrennt werden (im oberen Fall Komma
und Leerzeichen). Der dritte Parameter definiert den
Inhalt nach der Tag-Liste: nichts. Oder:
004
Was ist mit
Child-Themes?
Child-Themes sind untergeordnete Themes,
die Elemente übergeordneter Parent-Themes
verwenden. Jedes Theme kann ein Parent-
Theme sein, Child-Themes erben dann alles von
den ausgewählten Parent-Themes. Das betrifft
CSS, jeglichen Code, wirklich alles. Das Gute:
Alle Änderungen am Child-Theme überstimmen
die entsprechenden Anweisungen der Parent-
Variante. Möchten Sie ein anderes Template für
Einzelseiten? Ergänzen Sie einfach eine page.
php-Template-Datei im Child-Theme, WordPress
verwendet dann diese anstatt jener Datei im
Parent-Theme.
Child-Themes haben wie alle anderen Themes
ihre eigenen Ordner unter wp-content/
themes/. Einziges Alleinstellungsmerkmal eines
Child-Themes ist, dass es unvollständig ist (wenn
nicht, dann sollte es kein Child-Theme sein), da
es die fehlenden Elemente vom Parent-Theme
übernimmt. Die style.css im Child-Theme gibt an,
welches das Parent-Theme ist. Das ist nützlich,
um bestehende Designs zu ändern, ohne das
Haupt-Theme zu verändern. So können Sie mit
weniger Risiken am Parent-Theme arbeiten.
Wenn Sie sich mit WordPress-Themes ein bisschen
besser auskennen, dann sollten Sie definitiv
mehr über Child-Themes lernen. Wir empfehlen
den WordPress-Codex: codex.wordpress.org/
Child-Themes.
60 Das große WordPress-Handbuch

WordPress
Themes
HTML5 - die neue Hypertext
Markup Language
Die Auszeichnungssprache unseres Themes ist
das neue HTML5. Das heißt, dass ältere Browser
(beim Internet Explorer alle vor Version 9) Probleme
machen könnten. Falls Sie auch diese unterstützen
möchten, bedarf es spezieller Stylesheets
Starter-Themes
Themes, auf die Sie mit eigenen Ideen weiter
aufbauen können, nennt man Frameworks
oder Starter-Themes. Starter-Themes eignen
sich für den Einsatz zu Beginn Ihres Projekts,
das heißt, dass Sie ein solches Theme entweder
weiter aufbohren oder ein Child-Theme
auf Basis des Starter-Themes erstellen können.
Wir haben Ihnen hier eine kleine Liste guter
Starter-Themes zusammengestellt:
• _S Starter Theme: underscores.me
• Roots: www.rootstheme.com
• Bones: themble.com/bones
• Thematic: wordpress.org/extend/
themes/thematic
• Hybrid Core: themehybrid.com/hybridcore
• Starkers: viewportindustries.com/
products/starkers
für den Microsoft-Browser. Wir werden einfaches
JavaScript ergänzen, um einige HTML5-Probleme
in alten Browsern zu beheben, auch wenn das
noch keine 100-%-Lösung ist. Aber man kann damit
arbeiten.
Nun möchten wir, dass vor der Tag-Liste „Topics“ steht,
die Tags durch Bullets getrennt werden und ein Link am
Ende stehen soll:
005
&bull ist der Code für ein Bullet-Zeichen. Er befindet sich
auch vor dem Link im $after-Parameter, weil $sep nur
die Tags in der Liste trennt, nicht den Teil vorher oder
danach.
Das ist nicht sehr kompliziert. Das WordPress-Codex
bietet eine Liste aller verfügbaren Template-Tags
zusammen mit Beispielseiten: codex.wordpress.org/
Template_Tags.
Unser Theme
Genug der trockenen Theorie. Schreiten wir nun zur
Realisierung des Themes. Wir könnten etwa in folgender
Reihenfolge vorgehen:
1. Wir überlegen uns eine Idee. Das kann eine Farbpalette
oder ein bestimmter Website-Typ sein.
2. Wir skizzieren etwas auf Papier oder arbeiten am
Rechner und fertigen Drahtmodelle per CAD an,
nutzen das Tablet oder Photoshop. Es braucht noch
keine genauen Maße.
3. Wir notieren zusätzliche Designideen.
4. Wir starten mit HTML und CSS. Manchmal lohnt es
sich, mit einer reinen HTML-Webseite anzufangen
und diese anschließend in ein WordPress-Theme zu
konvertieren. Meistens werden wir in diesem Schritt
jedoch an der CSS-Datei (style.css) arbeiten und dann
fortfahren.
5. Dann können wir mit dem Code für das Theme
beginnen.
Unser Theme wird recht einfach gestrickt sein. Der
Zweck dieses Artikels ist es nicht, Ihnen zu zeigen, wie
Sie allerlei in HTML oder CSS schreiben oder mit jQuery
umsetzen können. Vielmehr sollen Sie sehen, wie einfach
man ein WordPress-Theme erstellen kann.
Zuerst kommt der Header, der Kopf der Site mit
einem Titel (oder einem Logo) und einem einfachen
waagrechten Menü. Die linke Spalte ist die Content-
Spalte. Auf der rechten Seite gibt es eine Seitenleiste
(Sidebar). Ein Footer unten rundet das Ganze ab.
WordPress bietet nun einige nützliche Features wie
etwa Widgets und Menüs. Wir nutzen beides, das horizontale
Menü im Header und einen Widget-Bereich auf
der rechten Seite. Wir nutzen individuelle Hintergrundfarben
und ein Bild als Logo.
Das HTML wird simpel. Dies ist der Code für das
Grund-Layout, das später richtigen Content erhält.
001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
Das lässt sich leicht auf unseren Entwurf übertragen.
Wir haben nun angelegt:
A. #header-container
B. #header-navigation (im #header-container)
C. #content-container
D. #sidebar-container
E. #footer-container
Also ans Werk!
Wie erwähnt brauchen Sie kein PHP-Experte
zu sein, um Themes zu entwickeln. Das liegt an
den Template-Tags, die bereits fertigen PHP-Code
für Ihre Zwecke enthalten.
Das große WordPress-Handbuch 61

Themes
Header erstellen
Normalerweise beginnen wir mit der Theme-
Deklarierung in der style.css-Datei. Aber da wir
hauptsächlich den Rest der Primär-Theme-Struktur
innerhalb der Template-Dateien bearbeiten werden,
heben wir uns die Deklarierung für das Ende
auf. Es sinnvoll, mit der header.php anzufangen. Die
Datei beinhaltet immerhin den Site-Header. Es ist
auch die Datei, die alle notwendigen Deklarierungen
und „Includes“ des Kopfbereichs der Website enthält.
Wir erstellen diese Datei nun Schritt für Schritt.
01
Metadaten richtig setzen
Wir beginnen oben mit der HTML-Deklarierung
und den notwendigen Metadaten. Das ist
Basis-Stoff, also lassen Sie es uns schnell hinter uns
bringen. Das einzig WordPress-trächtige ist, dass
wir die bloginfo()-Funktion verwenden, um die Site-
Description und den Namen zu bekommen.
001
002 ” />
007
020
03
Das Stylesheet
Wir müssen unser Stylesheet einbauen,
die Datei style.css. Dabei müssen wir auch an Pingback-Support
denken, damit uns andere Blogs und
Websites anpingen können. Außerdem müssen wir
HTML5 integrieren – mit JavaScript-Support, um den
Internet-Explorer bis vor Version 9 zu unterstützen.
Abgesehen von der bloginfo()-Funktion sind das
recht grundlegende Dinge:
001 ” />
003
04
Header vervollständigen
Der Header ist fast fertig. Zuerst wollen
wir das JavaScript für einzelne Beiträge und Seiten
verfügbar machen, das die Kommentare und Antworten
steuert. Das ist nötig, um eine Baumstruktur für
Kommentare zu realisieren. Außerdem müssen wir
WordPress mit wp_head() starten.
001
009
010
05
Header-Title oder Bild
Hier starten wir mit dem Body-Tag, welches
das body_class()-Template-Tag benötigt, um alles Nötige
an CSS-Code im Body-Tag anzuwenden. Vergessen
Sie dies nicht! Wir wollen die Möglichkeit bieten,
ein Header-Image hochladen zu können – beispielsweise
ein Logo. Doch sollte keines zur Verfügung stehen,
sollen lediglich Site-Title und -Description angezeigt
werden. Das wird nun ein bisschen trickreich,
denn wir haben bislang noch keinen Support für den
Header integriert. Das erledigen wir in der functions.
php-Datei. Also müssen Sie sich später wieder auf diesen
Code beziehen, wenn wir an der entsprechenden
Stelle angekommen sind. Den Code finden Sie auf
www.webdesignermag.co.uk/tutorial-files/.
So sieht das Theme mit und ohne Header-Bild aus.
06
Menü und Fazit
Der letzte Teil der header.php-Datei ist
das Menü. Das wird auch in der Datei functions.php
deklariert. Der theme_location-Parameter sagt uns,
welches Menü angezeigt wird. Das ist wichtig, wenn
Sie mehrere Menüs einsetzen. In unserem Fall ist
es das Hauptmenü (main-menu). Zuletzt schließen
wir das Header-Tag und sind fertig mit der Datei
header.php.
001
002
006
007
62 Das große WordPress-Handbuch

WordPress
Themes
Seitenleiste
Das sidebar.php-Template ist ebenfalls ziemlich
simpel. Es soll lediglich die nötigen Auszeichnungen
enthalten, wir positionieren es an die richtige Stelle,
und anschließend erscheint der Code, der für die Widget-Area
sorgt. In der Datei functions.php geschieht
die eigentliche Registrierung. Also ist die Datei sidebar.php
im Grunde nur ein Platzhalter.
Der Code für die Datei sidebar.php ist das aside-
Tag im #sidebar-container. Darin steht ein ul-Tag.
Das kommt daher, dass wir unsere Seitenleiste als
ungeordnete Liste bauen. Dies ist möglich, wenn man
dafür die functions.php verwendet.
Dies ist die gängigste Lösung. Jedes Widget im
Widget-Bereich liegt in einer li-Liste, die Teil einer
ungeordneten Liste ist. Dennoch ziehen viele Entwickler
div- oder aside-Tags vor. Natürlich liegt die Wahl
bei Ihnen, aber da viele Widget-Bereiche im Grunde
eine Liste sind, ist diese Methode sinnvoll.
Das Template-Tag, das den Widget-Bereich aufruft,
ist dynamic_sidebar(). Alles, was Sie tun müssen, ist,
den Namen der Seitenleiste weiterzugeben, die Sie
anzeigen lassen möchten. In unserem Fall ist das die
Primär-Spalte auf der rechten Seite. Diese ist gleichzeitig
der einzige Widget-Bereich, den wir haben.
001
002
003
004
005
Footer erstellen
Es geht weiter mit dem Footer. Dieses Template
bietet manchmal Widget-Bereiche oder andere
coole Sachen. Wir halten es aber einfach. Das
Wichtige für die Datei footer.php ist, dass Sie die
wp_footer()-Funktion einbauen, kurz bevor Sie das
Body-Tag schließen. Dann weiß WordPress, dass wir
mit der Seite fertig sind. Entwickler können am Fuß
der Seite aber auch noch coole Features und Funktionen
einbauen.
01
Der eigentliche Footer
Der Footer für dieses Theme ist simpel, wir
haben eine Zeile Text mit Links. Vielleicht erinnern
Sie sich an die home_url()-Funktion aus der header.
php-Datei: ein Template-Tag, das per echo zur Ausgabe
überredet wird und auf das Root-Verzeichnis
Ihrer WordPress-Installation abzielt. Mit der Funktion
site_url() kommen Sie zum Root-Verzeichnis.
001
002
003 ”> is
powered by WordPress and
Kihon by TDH
004
005
02
Footer abschließen
Zum Schluss machen wir alle verwendeten
Tags zu. Das betrifft im Folgenden die Divs #outer-wrap
und #inner-wrap in der Datei header.php. Dann haben
wir die Funktion wp_footer() kurz vor dem Body-End-
Tag. Wie gesagt: Wir halten es einfach und schlicht.
001
002
003
004
005
006
007
008
Das große WordPress-Handbuch 63

Themes
Index
Wir kommen einem funktionierenden Theme
näher. Das index.php-Template ist das Haupt-Fallback-
Template für alles. Fehlt also ein dediziertes Template
oder dergleichen, wird die index.php-Datei verwendet.
Lassen Sie uns direkt beginnen:
01
Der Kopf
Die Verknüpfung mit der Datei header.
php via get_header ist das Erste, das wir in diesem
Template machen – genau wie in allen anderen
Template-Dateien, die mit dem eigentlichen Content
arbeiten sollen:
001
007
008
02 404er
Wir haben kein 404.php-Template, die
index.php-Datei übernimmt das also. Mit einem
Check der Funktion have_posts() auf Beiträge können
wir feststellen, ob auf eine nicht existente Seite
zugegriffen werden soll. Ist das der Fall, geben wir
eine kurze Nachricht aus und holen das Suchformular
via get_search_form() ab. Mit einem searchform.
php-Template können Sie Ihr eigenes Suchformular
nach Gusto zusammenbasteln. Anderenfalls verwenden
Sie das Standard-Template wie hier:
001
004
005 Not Found
006
007 Sorry, there is nothing here. You
might want to try and search for whatever it
was you were looking for?
008
009
010
011
04
index.php abschließen
Um die Datei index.php abzuschließen,
machen wir das Element zu. Wir wollen jedoch auch
das sidebar.php-Template mit einschließen, das
unsere rechte Spalte enthält. Das passiert via get_
sidebar()-Funktion. Die footer.php-Datei rundet das
Ganze ab, also nutzen wir den Befehl get_footer().
001
002
003
05
nav-bottom.php im
Fokus
Bevor es weitergeht, schauen wir auf den Inhalt des
nav-bottom.php-Templates. In Schritt 03 haben wir es
aufgerufen. Dieser Code wird nur interessant, wenn
die Schleife (repräsentiert durch den Aufruf von
$wp_query) mehr als eine Seite beinhaltet. Sind es
beispielsweise 15 und Sie haben WordPress nur auf
die Anzeige von maximal 10 Elementen eingestellt,
bekommen Sie die zusätzlichen Navigationslinks –
ziemlich einfach und ein gutes Beispiel dafür, dass
sich der Einsatz der Funktion get_template_part()
auszahlen kann. Das Template nav-bottom.php wird
schließlich auf jeder Archiv-Seite gebraucht.
001
004
005
006
007
008
009
010
011
012
64 Das große WordPress-Handbuch

WordPress
Themes
Content
Trennen Sie den auszugebenden Content von allen
Templates, ist es einfacher, den Code später noch
einmal zu verwenden. In diesem Theme nutzen wir
die Funktion get_template_part(), um die passende
content-X.php-Datei zu erhalten. Das X ist der Content,
den Sie haben möchten. Das heißt, dass einzelne
vom single.php-Template kontrollierte Beiträge nach
der Datei content-single.php suchen werden, während
Webseiten auf content-page.php zurückgreifen.
Existieren diese nicht, nutzen sie das content.php-
Template. Genau wie index.php das Haupt-Fallback
ist, ist content.php das Fallback für jeglichen Content.
Lassen Sie uns das genauer anschauen.
Bevor es losgeht, erinnern wir uns daran, dass
Content in einer Liste oder komplett eigenständig
in einer Seite verankert sein kann, beispielsweise in
einem Beitrag. Da ein content.php-Template beides
können muss, werden wir beides berücksichtigen.
01
Der Content-Header
Wir platzieren jeglichen Content in einem
article-Tag, das wiederum ein post_class()-Template-
Tag enthält. Damit bekommt WordPress die Möglichkeit,
die notwendigen Styles anzuwenden. Der Titel
des Contents sitzt im Header-Tag, das entweder eine
H1- oder eine H2-Auszeichnung ausgibt. Das kommt
Das Theme mit eigenem Header
und Hintergrund.
darauf an, ob wir einen Beitrag, eine Seite oder eine
Art Archiv-Liste haben. Das Conditional-Tag is_singular()
verrät uns das, denn es gibt nur dann den Wert
true aus, wenn die entsprechende Seite für ein einzelnes
Content-Element ausgelegt ist.
Wir nutzen die Funktion the_permalink(), um den
Link zum Beitrag zu erhalten, wenn wir ihn benötigen.
Darüber hinaus verwenden wir die Funktion the_title(),
um den Beitragstitel, und die Funktion the_title_attribute(),
um einen passenden Titel für das title-Tag zu
erhalten.
001 >
002
003
004
005
006
007
008
009 ”
rel=”bookmark”>
010
011
012
013
014
02
Für Archive
Als Nächstes differenzieren wir, wie wir den
Haupt-Content ausgeben, in Abhängigkeit davon, ob
wir ein Archiv oder einen einzelnen Beitrag haben.
Hier kommen einige Conditional-Tags ins Spiel, wie
etwa is_archive() und is_search(). Diese sind ziemlich
selbsterklärend. Mit der Funktion the_excerpt werden
wir nur einen 55-Wörter-Auszug aus unseren Beiträgen
ziehen – oder was immer im Admin-Interface
auf dem „Edit Post“-Bildschirm in das „Excerpt“-Feld
eingetragen ist.
001
004
005
006
007
010
011
012 •
013
014 ”
rel=”bookmark”>
015 Continue reading →
016
017
018
03
Für Einzelbeiträge und
Seiten
Alles, was kein Archiv ist, ist ein Einzelelement. Wir
nutzen die Funktion the_content() anstatt the_excerpt
für den Content, was uns den kompletten Haupt-
Inhalt beschert. Manchmal kann dieser in mehrere
Seiten aufgespalten sein (in der Regel sollte dies
jedoch vermieden werden). Also nutzen wir die Funktion
wp_link_pages(), um dies zu regeln.
001
004
005
006
011
012
006
content.php ist
das Fallback für alle
Inhalte.
Das große WordPress-Handbuch 65

Themes
Style
Jedes Theme benötigt eine Datei style.css. Es
ist wichtig, dass diese eingangs so formatiert
ist, dass WordPress sie erkennt. Hier kommen
die Theme-Informationen ins Spiel. Das ist der
Teil, den Sie im Admin-Interface unter Design
> Themes sehen. Einige Themes halten mehr
Informationen bereit als andere. Die Tags-Zeile
ist beispielsweise nur für offizielle Themes aus
dem WordPress.org-Bestand gedacht.
Unten sehen Sie den Theme-Header der
style.css für unser Theme. Wir haben es Kihon
genannt, das ist das japanische Wort für Fundament.
Entsprechend können neugierige
WordPress-Entwickler unser Theme als Fundament
für weitere Projekte nutzen. Ist doch
nett, oder?
Der Theme-Header ist das einzige Element,
das von WordPress vorgegeben wird, wenn es
um die Datei style.css geht. Abgesehen davon
können Sie mit CSS machen, was Sie möchten.
Es gibt allerdings ein paar Klassen, die Sie in
jedem Fall unterstützen sollten, etwa für Bilder.
Um mit Ihrem Stylesheet für alle Eventualitäten
gerüstet zu sein, konsultieren Sie am besten
die Seite codex.wordpress.org/CSS#WordPress_
Generated_Classes.
001 /*
002 Theme Name: Kihon
003 Theme URI: http://tdh.me/wordpress/
kihon/
004 Author: Thord Daniel Hedengren
005 Author URI: http://tdh.me
006 Description: A simple theme meant
as a foundation for your adventures in
the WordPress world.
007 Version: 1.0
008 License: GNU General Public License
v2 or later
009 License URI: http://www.gnu.org/
licenses/gpl-2.0.html
010 Tags: light, two-columns, rightsidebar,
fixed-width, custom-background,
custom-header, custom-menu, sticky-post
*/
Die Datei
functions.php
aktiviert Features
und bringt mehr
Funktionalität.
Funktionen
Die Datei functions.php aktiviert Features und
bringt mehr Funktionalität. Sie ist sehr mächtig, Sie
können fast alles damit machen. Wir werfen hier nur
einen kurzen Blick auf die Datei – eigentlich ist sie
ein wichtiges Thema für sich, dem man einen eigenen
Artikel widmen könnte.
Einige Dinge, die wir hier mit der functions.
php-Datei machen, bauen auf Themen auf, die wir
schon vorher beleuchtet haben, beispielsweise das
Header-Bild und das Menü in der Datei header.php
sowie der Widget-Bereich in der Datei sidebar.php.
01
Theme aufsetzen
Zuerst müssen wir das Theme aufsetzen.
Wir erstellen eine Funktion mit Features, die das
Theme bieten soll. Mit der Funktion add_action()
hängen wir dies an das Element after_setup_theme.
In der Funktion kihon_setup() finden Sie die hinzuzufügenden
Features. Hier finden Sie das Header-Bild,
zusammen mit einer Reihe von Features wie flexible
Breite und Höhe (aber empfohlenen Größen),
ebenso wie register_nav_menu(), das das Menü aus
der Datei header.php erstellt. Mit dem Feature für
eigene Hintergründe können wir RSS-Feeds erkennen
lassen.
02 Widget-Bereich
erstellen
Als Nächstes kommt der Widget-Bereich. Dieser sitzt
ebenso in einer Funktion, genannt kihon_widgets_
init(). Wir hängen ihn an das Element widgets_init
mit add_action(). Widget-Bereiche oder Seitenleisten
werden mit der Funktion register_sidebar() registriert.
Diese nehmen eine Reihe von Informationen
innerhalb eines Arrays auf: Name, ID, Inhalt davor,
danach und so weiter. Hier sehen Sie, dass Widgets
in li-Tags sitzen, wie wir zuvor ausgeführt haben.
001 // REGISTER SIDEBARS
002 function kihon_widgets_init() {
003
004 // Primary right column
005 register_sidebar( array(
006 ‘name’ => ‘Primary Right Column’,
007 ‘id’ => ‘primary-right-column’,
008 ‘description’ => ‘The primary right
column.’,
009 ‘before_widget’ => ‘’,
010 ‘after_widget’ => ‘’,
011 ‘before_title’ => ‘’,
012 ‘after_title’ => ‘’
013 ) );
014
015 }
016 add_action( ‘widgets_init’, ‘kihon_
widgets_init’ );
03 Kommentar-Rückruf
Jetzt kommt der Kommentar-Callback-
Teil, auf den wir hier aus Platzgründen allerdings
nicht ausführlich eingehen können. Die Funktion
kihon_comment() lässt sich via wp_list_comments()
in der Datei comments.php aufrufen, um zu steuern,
wie Kommentare angezeigt werden. Schauen Sie
sich die Datei comments.php im Theme an und Sie
sehen, wie es funktioniert.
Zum Schluss müssen wir das geöffnete
004 ”>
005
008
009
010
011
012
013
014
015 ”>
016
017
018
019
020
021
022
023
66 Das große WordPress-Handbuch

WordPress
Themes
Das fertige Theme
Damit ist Kihon jetzt fertig!
Das stimmt allerdings nicht ganz, denn Themes sind
eigentlich nie fertig, man kann immer weiter an ihnen
herumschrauben. Das Theme Kihon funktioniert jetzt
zwar, aber es ist längst nicht abgeschlossen. Wenn Sie
die Theme-Dateien durchsuchen, werden Sie feststellen,
dass es dort mehr Dateien gibt, als wir hier durchgesprochen
haben. Besonders erwähnenswert sind single.
php, content-page.php und comments.php. Inzwischen
sollten Ihre Kenntnisse dafür ausreichen, eigenständig
Anpassungen an diesen Dateien vorzunehmen.
Features wie etwa „Hervorgehobene Bilder für Beiträge“
konnten wir hier nicht behandeln. Das Theme sollte
ebenso responsive sein und flexiblere Seitenleisten
bieten. Auch könnten die neuen Artikel-Formate (Post-
Formats) nicht schaden.
Es gibt immer Dinge, die man machen kann, was Sie
als Web-Entwickler sicher wissen. Auf WordPress trifft
das in besonderer Weise zu. Warten Sie ein bisschen
und es kommt eine neue Version der Plattform, die Sie
mit Ihren eigenen Schöpfungen ausprobieren können.
Wir raten Ihnen, sich den Kihon-Code genauer anzuschauen.
Lernen Sie, soviel Sie können, und bedienen
Sie sich für Ihre eigenen Projekte an unserem Code.
Außerdem empfehlen wir, sich die Standard-Themes
von WordPress genauer anzusehen.
Oben: Kein angehängter Beitrag, nur laufender Content.
Nützliche Links
codex.wordpress.org/Theme_Development
Unter dieser Adresse finden Sie einen Überblick
über die verschiedenen Bereiche der Theme-Entwicklung
bei WordPress (in englischer Sprache).
codex.wordpress.org/Theme_Unit_Test
Dies ist eine Checkliste für das korrekte Funktionieren
eines Themes (in englischer Sprache).
Oben: Wir testen Bilder-Anordnungen.
wordpress.org/extend/plugins/theme-check
Es gibt auch ein Plug-in, mit dem Sie ein Theme
automatisch durchtesten können. Unter der
angegebenen Adresse können Sie es herunterladen.
Themes sind
eigentlich nie fertig,
man kann immer
weiter an ihnen herumschrauben.
Oben: Ein Einzelbeitrag mit einigen Kommentaren.
Das große WordPress-Handbuch 67

Themes
fürs blog
das richtige
th
68 Das große WordPress-Handbuch

WordPress
Themes
THEMES UND WORDPRESS
GEHÖREN UNTRENNBAR
ZUSAMMEN. WIR ENTHÜLLEN
DIE GRUNDLAGEN FÜR DIE
WAHL DES PASSENDEN THEMES.
WORDPRESS-THEMES gibt es in großer Vielfalt,
und eines auszuwählen, das perfekt mit dem Inhalt
korrespondiert, ist von entscheidender Wichtigkeit.
Themes bewirken, dass ein WordPress-Auftritt
ansprechend und geschmackvoll rüberkommt. Ein nachlässig
gestaltetes, unterdurchschnittlich attraktives Theme wird
die Besucher von der Seite vertreiben, egal wie interessant und
eme
bedeutsam deren Content ist. Studien haben gezeigt, dass ein
Besucher innerhalb von zehn Sekunden die Entscheidung zum
Verbleib auf einer Website trifft. Daraus folgt, dass eine Homepage
ins Auge springen muss, um das Interesse des Besuchers
zu wecken. Ist die Aufmerksamkeit erst mal da, sind es Content
und Navigation, die den Besucher dazu verführen, auf den
Seiten zu bleiben. Während also Themes den Ausschlag dafür
geben, den Besucher für die Website zu interessieren, fällt es
dem Inhalt zu, dieses Interesse zu halten.
Wie also etwas Passendes finden? Es gibt unzählige Kategorien
und darunter Tausende Themes zur Auswahl. Sparten wie
Blog, Magazin, Portfolio, Business, Kreativ, Responsive, Entertainment,
Digital oder E-Commerce bieten eine erste Orientierung.
Innerhalb einer Kategorie ist weiteres Feintuning erforderlich,
bevor die endgültige Entscheidung fallen kann. Geht es um
einen starken Eindruck, aufbereitete News und Zugriff auf alle
Kategorien? Wenn ja, fragen Sie sich, was Sie dafür brauchen,
und bleiben Sie am Ball, bis Sie genau das richtige Theme
gefunden haben.
Das große WordPress-Handbuch 69

Themes
Weblog
DAS BLOG (WEB-LOGBUCH) IST DER INBEGRIFF EINES ONLINE-TAGEBUCHS, IN
DEM PERSÖNLICHE BETRACHTUNGEN MIT DER WELT GETEILT WERDEN.
PERSÖNLICHE BLOGS gaben den Auftakt für die Blogging-
Bewegung. Als die ersten Blogs aufkamen, handelte es sich um
individuelle Online-Tagebücher mit Geschichten aus dem Alltag
des Autors und Einblicken in dessen Gedanken, sein Leben,
seine Interessen. Mit der Technologie entwickelte sich auch
das Blog weiter, doch spiegelt es weiterhin die individuelle
Persönlichkeit.
Ein Blog gibt den Blick auf die Welt des Autors frei, auf seine
Belange. Immer mehr Leute machen mit, und noch viel mehr
Menschen lesen Blogs. Das eigene Blog erlaubt dem Einzelnen,
sich frei mitzuteilen. Interessierte Gleichgesinnte können den
Gedankenströmen folgen, als ob sie Freunde wären – nur online.
Wenn ein Blogger ein Produkt verkaufen oder eine Dienstleistung
anbieten möchte, kann sein Blog zur Anlaufstelle dafür
werden. Das richtige WordPress-Theme auszuwählen, ist auch
hier sehr wichtig.
5
wesentliche Eigenschaften
eines persönlichen Themes
1. Zwei Spalten
2. Unkomplizierter Stil
Nicht jeder, der ein Blog einrichten möchte, kennt
sich gut mit Webdesign aus oder hat die kostspielige
Photoshop-Software zur Verfügung.
Daher beschränkt man sich am besten auf einen
nicht zu komplizierten Grafikstil.
Drei
Top-Themes
Anivia
www.shindiristudio.com
Ein frischer Blick auf ein traditionelles
Personal-Theme, das schlicht und
modern rüberkommt. Das Theme ist
mit gängigen Browsern kompatibel
und kommt in drei verschiedenen
Layouts, wobei das Blog-Layout ideal
für den persönlichen Gebrauch ist.
Charisma
www.momizat.net
Charisma gehört zu den Responsive-
Themes im Multiple-Header-Design,
bietet erweiterte Theme-Optionen
und sechs Posting-Arten – nützlich
für verschiedene Layouts. Es bietet
HTML5-Hilfe und ist Retina-fähig.
Das zweispaltige Standardlayout bietet eine Spalte für Postings und
Platz für eine Seitenleiste. Diese schlichte, doch effektive Variante
zeigt die neuesten Artikel und bietet einfachen Zugriff auf die
anderen Bereiche des Blogs. Üblicherweise wird die Seitenleiste
rechts platziert.
3. Seitenleiste
In der Regel hat ein
WordPress-Theme eine
Seitenleiste, in die eine
standardisierte Auswahl an
Widgets eingebettet ist.
Dazu zählen die Suchfunktion,
Archive und Kategorien,
oft auch Tags, Links
und Metadaten.
5. Kontakt
Kontakt mit dem Autor oder Betreiber eines Blogs
aufnehmen zu können, ist von zentraler Bedeutung.
Es gibt dafür zwei übliche Optionen: per
E-Mail (was jedoch zu Spam führen könnte) oder
über ein Kontaktformular. Eine separate Seite mit
schlichtem Layout ist ideal dafür.
PixelPower
http://cudazi.com
Ein sachlich-modernes und kraftvolles
WordPress-Microblogging-
Theme für viele unterschiedliche
Verwendungen – vom Blog bis zum
Design-Portfolio. Es ist responsive,
enthält ein anpassbares Bio-Widget
und Social-Media-Links.
4. Über mich
Persönliche Websites werden – wie die
Bezeichnung nahelegt – von einer einzigen
Person unterhalten und gepflegt. Und genau
aus diesem Grunde sollte man einen „Über
mich“-Bereich einrichten. Dazu gehört ein
Foto, eine Kurzbio oder ein Statement zu den
Hintergründen des Blogs.
70 Das große WordPress-Handbuch

WordPress
Themes
Drei
Top-Themes
Rewind
http://rewind.
monstrothemes.com
Dieses Theme bietet schmale und
vollbreite Darstellungsfelder mit linksseitigen
oder mittigen Layoutpositionen.
Der Galerie-Gucker ist responsive
und für Touchscreens geeignet.
Raw
http://demo.udthemes.com/
raw/wordpress
Raw ist ein responsives HTML5-
Theme und ideal für Fotografen und
Kreative. Es gibt mehrere Homepage-
Layout-Optionen und Voll- sowie
Kleinbild-Gitteransichten.
Bilderblog
DIE ONLINE-GALERIE IST EINE JEDERZEIT ZUGÄNGLICHE
BILDERSAMMLUNG MIT MAXIMALER VISUELLER SCHLAGKRAFT.
EINE GALERIE IST EIN ORT, an dem Bilder ausgestellt werden,
damit Besucher sie ansehen und sich daran erfreuen
können. Dazu kommt, dass im Netz viel Gestalterisches passiert
und es sich um die einzige Plattform handelt, die angehenden
Künstlern, Illustratoren, Designern und Fotografen ein weltweites
Publikum bietet.
Eine Bildergalerie muss visuell beindrucken. Hierin liegt der
Schlüssel dieser Seiten. Wenn ein Fotograf Besuchern die Tiefe
seines Schaffens verdeutlichen möchte, greift er zu Vollbild-
Ansichten. Dasselbe gilt für Illustratoren und Kommunikationsoder
Webdesigner. Kreative schaffen auch nicht nur einen Werkzyklus,
sondern produzieren fortlaufend Neues, und eine Bildergalerie
ist die perfekte Plattform, um ein stetig wachsendes Portfolio
zu zeigen. Lightbox heißt ein beliebter Effekt, der auf Gitteransichten
oder Listen angewendet wird. Das fokussiert den Blick auf ein
einzelnes Foto – der übrige Bildschirm wird abgedunkelt.
5
wesentliche Eigenschaften
eines Bildergalerie-Themes
1. Bildkraft
2. Lightbox/Diashow
Zwei beliebte Arten, Einzelbilder auszustellen, sind
Lightbox und die altehrwürdige Diashow. Aktuelle
Themes verwenden den Lightbox-Effekt, der ein
Bild in voller Größe anzeigt, während der übrige
Bildschirm abgedunkelt wird. Diashows folgen
einem ähnlichen Konzept, stützen sich aber auf
Bedienelemente oder Voreinstellungen, um eine
Bildauswahl anzuzeigen.
Lens
http://pixelgrade.com/
demos/lens/
Dieses hochwertige WordPress-Theme
zielt direkt auf Fotografen ab. Es verwendet
ein schlichtes, minimales Design
und verfügt über Vollbild-Diashows und
-Galerien, gitterbasierte Bildergalerien
und ein Journal für Anmerkungen.
Bilder sind die Schlüsselelemente von Galerie-Seiten. Sie werden
oft für gewerbliche oder künstlerische Präsentationszwecke
benutzt. Ein großes Bild im Zentrum und oben auf der Seite vermag
Auf merksamkeit zu wecken und zieht den Besucher auf die Seite.
3. Gitter und Listen
In regelmäßigen Aktualisierungen
besteht der Trick, das
Interesse eines Besuchers
am Blog wachzuhalten. Eine
typische Bildergalerie ist auf
visuelle Wirksamkeit hin konzipiert
und bietet die Option,
zwischen Postings zu wechseln,
die entweder als Gitteransicht
oder in traditioneller
Listenform mit Bild und Text
angezeigt werden.
5. Flickr
4. Vollbild-Video
Die Einbindung von Bewegtbild
in eine Bildergalerie
gehört inzwischen dazu.
Anspruchsvollere Websites
verwenden Videos (statt Fotos)
als Hintergrund für einzelne
Seiten oder die ganze
Website.
Beim Gratis-Hostingdienst Flickr können Sie Fotos
hochladen und teilen. WordPress bietet eine Anzahl
von Plug-ins an, die es leicht machen, eine Sammlung
in die Seiten- und Fußleiste einzubinden. Hier
bekommen Besucher einen Vorgeschmack und finden
einen Link zu Flickr für weitere Erkundungen.
Das große WordPress-Handbuch 71

Themes
Fanblog
PERSÖNLICHKEITEN, FILMSTARS, POPSTARS ODER COMICHELDEN:
WIDMEN SIE IHREM STAR EINEN ONLINE-TEMPEL.
DAS NETZ BIETET Ihnen die perfekte Plattform dafür, Ihrem
Star oder persönlichen Helden zu huldigen. Sie vergöttern
jemanden so sehr, dass Sie ihm eine Website widmen – da ist es
doch nur recht, dass die ganze Welt daran teilhaben kann. Das
Design von Fanseiten lässt oft zu wünschen übrig. Hier kann ein
sorgfältig ausgewähltes WordPress-Theme einiges wiedergutmachen.
Fansites sind zu unterschiedlich, als dass sie sich einem
bestimmten Designtyp zuordnen ließen, wenngleich sie trotzdem
5
bestimmte Eigenschaften teilen: Die Grafikbereiche enthalten oft
Fotos oder Illustrationen, die per Google-Suche gefunden wurden,
doch hier gilt äußerste Vorsicht. Bilder ohne Genehmigung
zu verwenden, stellt in der Regel eine Urheberrechtsverletzung
dar. Andere Fans suchen die Interaktion und gründen eine Art
Online-Community: Zitate und Abstimmungen sind hierfür sehr
willkommen. Denn wenn eine Fansite richtig gut gemacht ist, werden
Gleichgesinnte folgen und ihre Verehrung bezeugen.
wesentliche Eigenschaften
eines Fanblog-Themes
1. Hero-Theme
2. YouTube
Es gibt auf YouTube Videos zu so ziemlich allen Themen
dieser Welt, vor allem von und mit Künstlern,
Sängern, Bands und so weiter. Sie lassen sich schnell
und einfach in ein Theme oder Posting einbetten.
Den Code stellt YouTube zur Verfügung, sodass kein
eigener Webspace dafür verbraucht wird.
Drei
Top-Themes
RockWell
http://bit.ly/1gFiwFO
RockWell ist ein großer, lauter, vielseitig
einsetzbarer Spaß. Das Theme
kommt mit einem Vollbild-Slider
und einer Auswahl an Hintergrundfarben.
Auf den Punkt!
Muzak
http://www.cssigniter.com
Nutzer können Audio-Tracks
hinzufügen, den Content
arrangieren und sogar Stücke
verkaufen, wenn Sie über die
Rechte verfügen.
Fansites sind einer Person oder Gruppe gewidmet, die mindestens
ihrem Zielpublikum bekannt ist. Um wen oder was es auch geht, die
Würdigung der Persönlichkeit/en steht im Vordergrund. Die ausgestellten
Bilder des Filmstars, Comic-Helden oder sonstigen Idols machen
eine Fansite sofort als solche erkennbar.
3. Zitate und Umfragen
Dass Sie einen Filmstar oder
Musiker verehren, zeigt sich
zumeist dadurch, dass Filmzitate
oder Liedzeilen für Sie
eine besondere persönliche
Bedeutung gewonnen haben.
Im Fanblog können Sie
diese Stellen präsentieren.
Auch Abstimmungen über
den besten Film oder Song
kommen gut an.
5. Biografie
Der Gegenstand des Blogs zieht Fans an. Sie möchten
mehr über die Persönlichkeit, den Verein oder
die Gruppe erfahren. Es können aber auch Besucher
auf die Seite kommen, die sich noch nicht so
auskennen. Für diese ist eine einführende Biografie
(als Text oder tabellarisch) genau richtig.
Kingsize
www.kingsizetheme.com
Dies ist ein vielseitig verwendbares
Theme, ideal für die Präsentation
toller Fotos dank seiner Vollbild-
Hintergründe. Es lässt sich extem
gut anpassen und es gibt fünf
Galerie-Stile.
4. Soziale Netzwerke
In sozialen Netzwerken steckt der
Kick des Internets und die Verbindung
zu Millionen von Nutzern. Fansites
sind da nicht anders und bieten
eine Verlinkung zu sämtlichen beliebten
(und weniger be liebten) Diensten
im Netz. Dies geschieht mithilfe von
Icons, die in der Seiten- oder Fußleiste
des Thems angezeigt werden.
72 Das große WordPress-Handbuch

WordPress
Themes
Drei
Top-Themen
BusinessBox
http://presscastle.com/
item/businessbox-bytrendywebstar/
Dies ist ein responsives HTML5-Theme,
das einen großen Bilder-Slider verwendet,
um die Botschaft zu übermitteln.
Das Farbschema suggeriert Business
und verleiht dem Content Gewicht. Das
Theme ist suchmaschinenoptimiert
und hält über 40 Variationen des Farbschemas
vor.
Dynamo
http://jellythemes.com/
themes/dynamo/
Dynamo ist ein minimalistisches,
flächiges und responsives One-Page-
WordPress-Theme. Der Einfluss von iOS
7 wird im schicken, schlanken Design
deutlich. Es kann sich eines Vollbild-
Sliders rühmen.
Businessblog
UNTERNEHMEN UND GESCHÄFTSBETRIEBE KÖNNEN MIT DEM
RICHTIGEN THEME IHRE REPUTATION STEIGERN.
BUSINESSBLOGS wirken oft farblos und einschläfernd
und stützen sich auf schlichte, funktionale Themes, um
Unternehmensinformationen zu kommunizieren. Die Wahl
eines angemessenen Themes ist jedoch immens wichtig,
denn das Blog ist wie ein Schaufenster für ein weltweites
Publikum. Ein zu trendiges Theme könnte Besucher augenblicklich
vertreiben, was bedeutet, dass der Content gar
nicht erst wahrgenommen würde. Magnolia-Themes bieten
5
Bilder-Slider sind inzwischen Standard im gesamten Spektrum unterschiedlicher
Theme-Stile. Sie eignen sich dazu, mehr als nur eine
Info in einem Einzelbereich anzuzeigen. Bilder-Slider stehen oft im
Vordergrund der Homepage und ermöglichen es, dem Besucher die
unverzichtbaren Kernelemente des Unternehmens zu präsentieren.
einen passenden Rahmen, haben aber den Haken, dass viel
Information in einem einzigen Bereich präsentiert wird. Der
beliebte Bilder-Slider hilft hier weiter. Das Unternehmen wählt
fünf Kommunikationsbausteine aus und kann dadurch sicherstellen,
dass Besucher wenigstens diese betrachten können.
Ein weitereres wichtiges Element, das keinesfalls fehlen darf,
sind gut auffindbare Kontaktinformationen, denn nichts ist
lästiger, als danach suchen zu müssen.
wesentliche Eigenschaften
eines Business-Themes
1. Bilder-Slider
2. Footer-Designs
Die übergroße Fußzeile hat in den letzten Jahren an
Beliebtheit zugenommen und eignet sich hervorragend
zur Präsentation von nützlichen Informationen
über das Unternehmen. Der Footer enthält
nebengeordnete Infos wie Kontaktdetails, Niederlassungen
und Sitemaps, des Weiteren Kontaktformulare
und Menüführungen.
3. Angepasste Widgets
WideBox
http://anpsthemes.com
Ein aufgeräumt-frisches, responsives
und leicht anpassbares, vielseitiges
und hochkarätiges WordPress-Theme
mit Stil. Dem Vollbild-Slider steht eine
Gitteransicht zur Seite, um Projekte zu
präsentieren. Es gibt ein Mega-Menü
für leichtes Navigieren.
Lange war es allgemein üblich, Widgets in der Seitenleiste zu platzieren.
Die Weiterentwicklung der Themes und ihrer technischen Finessen
macht es nun möglich, ein Widget an beliebiger Stelle in ein Theme
zu integrieren. Das erlaubt dem User, eigene Widgets zu erstellen
und innerhalb des Themes zu verschieben.
5. Über uns
4. Portfolio
Für Geschäfte und Unternehmen dreht
sich alles um ihre Produkte oder Dienstleistungen.
Ein Portfolio, das diese
auffächert, sollte keinesfalls fehlen. Das
gibt Ihnen die Möglichkeit, Ihr Produkt
oder Ihre Dienstleistung anzupreisen.
Begleitet von eigens erstellten Bilddokumentationen
präsentieren Sie ihr Produkt
im bestmöglichen Licht.
Eine „Über uns“-Box bietet einem Unternehmen
oder einer Person eine Option, sich kurz und knapp
oder auch mit einem ausführlichem Text zu verkaufen,
sie sollte nicht fehlen. Viele Besucher, die noch
nicht exakt wissen, worum es auf der Website geht,
machen sich zunächst hier schlau. Und entscheiden
auf Basis dieser Texte, ob sie bleiben. Das Intro
muss also gut sein!
Das große WordPress-Handbuch 73

Themes
• auf der startseite bekommen besucher
einen ersten eindruck des themes – vom
angegebenen ton durch Farbgebung, stil
und Hintergrundbebilderung.
• Der blog abschnitt wird hier mit einer reihe
von test-beiträgen gezeigt, die durch das
Cms des blogs eingepflegt werden.
• Das Design der seite kann auf Ihre
Zielgruppe zugeschnitten werden, was Ihnen
ermöglicht fantastische seiten, wie diese hier
zu gestalten.
Erstellen
Sie ein WP-
Theme mit
Photoshop
SEIEN SIE KREATIV, BRECHEN SIE REGELN UND DENKEN
SIE AUSSERHALB DES GEWOHNTEN, UM TOLLE
WORDPRESS-DESIGNS ZU BAUEN.
LERNZIEL
DEsIgN EINEs
aNspREchENDEN
WoRDpREss-ThEmEs mIT
phoToshop
DaUER
120 minuten
aNspRUch
Das Hauptproblem von Wordpress Vorlagen
ist, dass es zu viele gibt, die mehr oder
weniger gleich aussehen. Weil sie zu einfach
zu erstellen sind, kommt es oft vor, dass Designer
viele Vorlagen auf einmal produzieren, ohne dabei
auf die Qualität zu achten. Es ist höchste Zeit, dass Designer
beginnen den Horizont von WordPress zu erweitern
– dadurch wird auch WordPress selbst über die Jahre immer
innovativer werden. Machen wir WordPress zu etwas,
das mit uns innovativer wird, anstatt Designer innovativer
zu machen. Unausweichlich gibt es nur einen Weg, um
dies zu realisieren, und zwar selber kreativ zu werden. In
dieser Anleitung werden wir Ihnen anhand unseres Surf-
Theme-Modells ein paar Möglichkeiten vorstellen, um
genau das zu tun.
Es wird Zeit, dass
WordPress mit uns
innovativer wird.
74 Das große WordPress-Handbuch

WordPress
Grundlagen
Leeren Sie den Papierkorb
01 Der erste Schritt sollte immer derselbe sein,
egal was Sie gestalten – leeren Sie den Papierkorb. Richtig,
schmeißen Sie die Netz-Standards raus – Sie brauchen
die „Regeln“ des Internets nicht. Das Wichtigste ist
völlig, uneingeschränkt kreativ zu werden. Denken Sie
sich ein einzigartiges Thema für Ihre Vorlage aus. In diesem
Fall ist das Thema Kalifornien.
Grenzen Sie die Idee ein
02 Da wir nun wissen, dass wir eine Seite zum
Thema Kalifornien erstellen, lassen Sie uns diese Idee
noch mehr eingrenzen und etwas erschaffen, das sich
spezifisch auf das Surfen bezieht. Kalifornien an sich ist
als Thema viel zu weit und höchstwahrscheinlich wäre
Ihre erste Design-Wahl, Palmen einzubauen – halten Sie
sich aber von solchen Klischees fern.
Schneller Aufbau
03 Seien Sie schnell beim Aufbau, aber schränken
Sie sich nicht ein. Wir gestalten kein Modell für späte
Anwender, diese Seite wird von frühen Anwendern mit
größeren Bildschirmen angesehen. Also machen Sie
das Ganze etwas breiter. Erlauben Sie der Größe, sich im
Schaffensprozess noch zu verändern.
Kein
Standard-Blog
Klasse Startseite
04 Lassen Sie es krachen! Diese Seite legt fest,
ob jemand sich länger als eine Sekunde auf Ihrer Seite
aufhält und, wenn Sie Glück haben, darüber nachdenkt,
wieder zu kommen. Die meisten werden dies nicht tun,
üblicherweise weil die Homepage langweilig und
unübersichtlich ist. Kreieren Sie also etwas Einzigartiges,
um die Nutzer bei der Stange zu halten.
05 Above-the-fold-Mythos
Ignorieren Sie die Regel, alles Wichtige „above
the fold“ – also im ohne Scrollen sichtbaren Bereich – zu
platzieren. Der Bereich „above the fold“ unserer Zielgruppe
beträgt in diesem Fall meist mindestens 1,000
Pixel. Erstellen Sie also ein auffälliges, interaktives Logo
oder eine Karte, platzieren Sie dies in der Mitte und vergessen
Sie die Regel.
01 Seite an Seite
Sie müssen nicht den Standard-Header
benutzen, um Aussehen, Textkörper und
Kommentar-Stil zu unterstützen. Versuchen
Sie etwas Außergewöhnliches …
06 aber
Einfach,
großartig
Die meisten Leute denken,
„einfach“ bedeute „kein
Inhalt und schlichte Farben“,
doch weit gefehlt. Es einfach
halten meint – genau
genommen – den Schwerpunkt
auf qualitative Inhalte
zu legen. Für dieses Design
heißt einfach halten das
perfekte Hintergrundbild zu
erstellen, einen größeren
Schriftstil, aber weniger
Worte zu benutzen und am
wichtigsten, keine unnötigen
Design-Details einzubauen.
Den Blog schön
und sauber halten
Sie brauchen keine kleinen
„Weiterlesen“ oder „Weiter“
CTAs auf Blogs. Überladen
Sie die Seite nicht – die meisten
Menschen wissen, dass
man auf Bilder oder Titel
klicken kann, um einen
Blog-Beitrag zu lesen.
02 Twitter
... etwas wie die Anzeige von Tweets.
Dies ist eine sehr wirkungsvolle Art,
Gespräche weiterzuführen. Nutzer kommentieren
nicht nur auf Ihrer Seite, sondern
verfassen einen Tweet mit einer
kurzen URL im Anhang.
03 Twitter-Status teilen
Ein Trick, um Ihr Blog immer aktuell
erscheinen zu lassen, ist das Hinzufügen
Ihrer Tweets beziehungsweise Ihres
Twitter-Status oben auf Ihrer Seite.
Das große WordPress-Handbuch 75

Themes
Ein Hintergrund der spricht
07 Der wichtigste Teil im Modell ist die Bildnutzung. Sie fügt den visuellen
Effekt hinzu, den alle Designer anstreben. Sie sollten kein x-beliebiges, altes Hintergrundbild
wählen. Kreieren Sie einen Hintergrund den niemand sonst hat. Ein gut
durchdachter Hintergrund kann Ihnen helfen, Inhalte auf kreative Weise voneinander
zu differenzieren.
Weniger Schrift
08 Je weniger Sie auf Ihrer Seite schreiben, desto klarer und ansprechender
sieht sie aus. Machen Sie Ihr Produkt sichtbarer und beschreiben Sie es weniger. Visualisieren
Sie die Daten auf kreative Weise. Kreieren Sie, was auch immer Sie erreichen
wollen, mit visuellen Effekten anstatt Texten. Denken Sie daran: Interaktion sagt mehr
als Worte.
09 Übertragen
Wenn Ihr Design der Startseite fertig ist, übertragen
Sie jedes einzelne Pixel auf die inneren Seiten.
Ein Blick auf die inneren Seiten in der Vogelperspektive
zeigt Ihnen, dass sie nun alle zu einer einzigartigen
Familie gehören.
Unterstützen Sie
11 Ihre Überschrift
Setzen Sie ein paar unterstützende Zeilen
unter Ihre Überschrift. Dies hilft zu
beschreiben, was für Inhalte die Menschen
erwarten, die auf Ihr Blog stoßen.
Es ist nicht immer nötig, aber eine gute
Ergänzung zu jeder Überschrift, besonders
wenn Sie kein guter Texter sind.
Lifestyle Blogging
10 Seien wir ehrlich – je weniger Worte desto besser.
Wenn Sie ein schönes Bild einsetzen können, am
besten in einer einzigartigen Größe, ziehen Sie es einem
Text vor. Lassen Sie das Bild „Hallo“ sagen und überlassen
Sie der Überschrift die wichtige Aussage: „ich bin...“.
Visuelle Effekte wirken.
Schreiben Sie es groß
12 Halten Sie es groß und klein. Das heißt: große Schrift, aber wenige
Worte. Worte können mächtig sein. Streichen Sie alle Fülltexte und
richten Sie die Aufmerksamkeit auf die bleibenden Texte, indem Sie diese
größer machen. Testen Sie neue WebKit Schriftarten. Wenn Sie in
Helvetica ein paar Wörter vergrößern, können Sie nichts falsch machen.
Es ist
schwerer, als
Sie denken
Eines der aufregendsten Dinge ist
es, ein einzigartiges Hintergrundbild
für Ihr Design zu gestalten. Viele
denken wahrscheinlich, es würde
ausreichen, einfach irgendein Bild
einzufügen, aber es erfordert eine
Menge Nachdenken. Beispielsweise
bekommen Sie bei diesem Hintergrundbild
das Gefühl von Tiefe, das
den restlichen Inhalt herausstechen
lässt. Außergewöhnlich ist auch,
dass die Hälfte des Bildes eine
Unterwasserlandschaft zeigt. Der
Nutzer bekommt das Gefühl, beim
Runterscrollen abzutauchen, eine
tolle Erfahrung. Wird es skalieren?
Oder auf breiteren Bildschirmen an
den Seiten langsam verblassen? Soll
es sich bewegen, wenn der Nutzer
scrollt? Es gibt eine Menge kreative
Variablen in der Wahl des richtigen
Hintergrundbildes zu bedenken.
76 Das große WordPress-Handbuch

WordPress
Grundlagen
13
Unterstützen Sie Vimeo
... nur, wenn Sie wollen, dass Ihre Videos super
aussehen. YouTube-Videos bekommen zwar mehr
Klicks, aber Sie können den Vimeo-Player viel besser
dem Design Ihrer Seite anpassen. Die Schlichtheit des
Players sieht auf jeder Seite gut aus. YouTube dagegen
eher nicht.
14
Große grafische Regel
Warum etwas in mehreren Paragrafen Text ausdrücken, wenn Sie
es auch einfach zeigen können? Die Infografiken dieses Designs sprechen
auf eigene, kreative Weise für sich. Sie bringen nicht nur visuelle Klasse,
sondern erübrigen auch das Lesen der unnötigen Texte. Sie können nie zu
wenig Infografiken haben.
Seltsame
Schaltflächen
Nicht alle Schaltflächen
müssen mit Schlagschatten
angeschrägt werden oder
wie süße, kleine Gelee-
Bonbons aussehen. Verlieren
Sie sich nicht in Standard-Schaltflächen,
nutzen
Sie anstelle dieser
lieber Texte.
15
Kleine Fußzeilen
Große Fußzeilen sind überholt. Sie fügen überladen wirkende
Inhalte hinzu, die Sie mit Leichtigkeit auch woanders unterbringen können,
beispielsweise auf einer „Über uns“-Seite oder Ähnlichem. Um die
visuell bestmögliche Seite zu gestalten, sollten Sie nicht versuchen,
alles in einem Bereich unterzubringen.
16 Stören
erwünscht
Es ist immer eine gute Idee, Elemente
und Stil durchgängig zu halten. Ein
Trick dabei ist, in Photoshop die Ebenenüberlagerung
über alles zu ziehen.
Ein anderer Trick ist, Störungsfilter
über alle Ebenen zu legen, sogar
über die Fotos, die Sie als Inhalte
hochladen. Fügen Sie einfach einen
Störungsfilter ein, um eine angenehm
dezente Textur zu schaffen.
18 Farbfeinschliff
Wenn Sie gerade erst mit dem Designen angefangen
haben, ist es kaum möglich, dass Sie direkt die richtige
Farbwahl getroffen haben. Gehen Sie alles noch mal durch
und finden Sie heraus, was funktioniert und was nicht. Keine
Farbe ist genauso wichtig wie Farbe an sich. Weiß kann mehr
herausstechen als die Farbe Orange, wie zum Beispiel hier.
17 Soziale
Bedeutung
Überladen Sie Ihre Seite nicht
mit sozialen Schaltflächen: „500
Leute liken das“ und Ähnliches.
Marken machen das nur zu
Marketingzwecken, es könnte
Ihre Inhalte abwerten, wenn Sie
keine große Zahl an Followern
haben. Halten Sie es schlicht
und stellen Sie nur custom
icons ans Ende jeder Seite.
19
Mehr Tiefe
Wenn Sie glauben, dass Ihr
Design trotz kreativem Hintergrundbild
immer noch zu wenig Tiefe hat, versuchen
Sie, kleinere Bilder über Ihre Inhalte
zu setzen. Legen Sie sogar welche über
Ihre Webtypografie. In diesem Fall zeigt
das die interaktive Karte kreuzende Surfboard
die hinzugefügte Tiefe auf..
20
Wichtige Details
Nicht alle Details nützen dem Design einer Seite. Hier jedoch hilft
das Hinzufügen von kreativen Hinweisen wie das Durchstreichen von vergangenen
Veranstaltungen im Handschrift-Look, das Auswählen der Navigationsbegriffe
mit handgemalten Kreisen oder die Nutzung von dezenten
handgemalten Pfeilen, die angestrebte Wirkung der Seite zu verstärken.
21
Fix und fertig
Mit einem Blick aus der Vogelperspektive sollten
Sie nun sehen, dass Sie gerade ein wunderbares
Modell gestaltet haben, das einige kreative Grenzen von
WordPress erweitert. Mit Kreativität durch Einfachheit,
großer Schrift, einer minimalen Wortzahl, einfachen Formen
und – am wichtigsten – durchbrochenen Standards.
Das große WordPress-Handbuch 77

Themes
Postings in
voller Breite
anzeigen
lassen
MANCHMAL MÖCHTE MAN KEINE SEITENLEISTE NEBEN
EINEM EINZELNEN POSTING HABEN. HIER ERFAHREN SIE,
WIE SIE DIE SEITENLEISTE GEZIELT ENTFERNEN KÖNNEN
LERNZIEL
Die Seitenleiste meistern
und selbst entscheiden,
wann diese angezeigt
werden soll
DAUER
120 Minuten
ANSPRUCH
Quelldateien
• Alle benötigten Dateien
für .PHP theme
• Code
www.webdesignermag.
co.uk/tutorial-files/
EINIGE THEMES HABEN bei der
Einzelbeitragsansicht eine Seitenleiste,
andere nicht. Warum sollte diese Entscheidung
jedoch auf einer allgemeinen Grundlage gefällt
werden? Warum nicht bei jedem einzelnen Post? Das wäre
sicherlich eine wesentlich bessere Möglichkeit, Ihre Seite zu
verwalten. Auf diese Art und Weise könnten Sie über den
Verbleib der Leiste entscheiden, abhängig von Ihrem
Content, und nicht von dem, was der Designer des Themes
sich dabei gedacht hat.
In diesem Tutorial lernen wir, wie die Seitenleiste aus der
Template-Datei entfernt wird, und benutzen dann ein
benutzerdefiniertes Feld, mit dem darüber entschieden wird,
ob die Leiste gezeigt wird oder nicht. Zum Schluss werden
wir unsere eigene Checkbox erstellen, statt uns auf die
benutzerdefinierte Feldbox zu verlassen.
Das Prinzip der Durchführung ist bei fast allen Themes
gleich, sodass Sie durchaus in der Lage sein sollten, unseren
Lösungsweg auf alle möglichen Themes anzuwenden, die
Sie auf Ihrer WordPress-Seite verwenden.
01
Holen Sie sich die Dateien des Themes
Für unsere Testzwecke verwenden wir das Theme Notes Blog, das Sie
auf tdh.me/wordpress/notes herunterladen können. Es ist kostenlos und besitzt
eine GPL-Lizenz, sodass Sie mit ihm machen können, was Sie wollen. Alle Dateien
zu diesem Tutorial finden Sie auf www.webdesignermag.co.uk/tutorial-files/.
02
Machen Sie sich mit single.php vertraut
Da wir eine optionale Seitenleiste zu Posts erstellen möchten, müssen
Sie sich mit der Datei single.php vertraut machen. Diese beinhaltet den Header
(header.php), sucht dann nach der loops-single.php, wird diese nicht finden und
stattdessen auf die loop.php zugreifen. Danach holen wir die Seitenleiste (sidebar.
php), die unser Hauptinteresse ist. Der Footer (footer.php) rundet das Ganze ab.
001
002
003
007
008
009
03
Entfernen Sie die Seitenleiste
Beginnen wir mit dem Entfernen der Seitenleiste und schauen einfach
mal, was passiert. Kommentieren Sie in der single.php den get.sidebar()-Eintrag
mit diesem Befehl aus:
001
\\
Sie werden keine Seitenleiste mehr in einzelnen Posts sehen, da wir sie nun
auskommentiert haben.
04
Finden Sie sich in style.css zurecht
Nachdem wir die Seitenleiste losgeworden sind, müssen wir das Aussehen
aufpolieren. Dort, wo die Leiste ursprünglich war, ist ein leeres Feld, welches
definitiv dort nichts zu suchen hat. Um Abhilfe zu schaffen, müssen wir ein wenig
mit CSS arbeiten. Öffnen Sie also die Datei style.css. Gehen wir einfach mal davon
aus, dass Sie die Contentspalte zentrieren möchten. Geben Sie Folgendes ein:
• Manchmal ist eine Seitenleiste unersetzlich.
In anderen Fällen verschwendet
sie einfach nur Platz. Ihnen eine
schnelle Möglichkeit zu geben, die
Leiste zu entfernen, ist daher sinnvoll.
Das Anpassen
Ihres Themes ist
jetzt eine Sache von
einem Klick.
001 div.post, div.page, div.attachment, div. hentry { margin:
20px 0 40px 20px; clear:both; } /* 640 pixels */
05
Zentrieren der Post-Div
Im Wissen, dass wir den Rest der Seite kaputt machen, lassen Sie uns
das Konzept von der Positionierung des Inhalts in der Mitte in single.php weiterführen.
Die volle Bildschirmbreite, mit der wir arbeiten, ist 960 px und das Inhaltsfeld
ist 640 px breit. Das heißt, dass wir es um 160 px vom linken Rand verschie-
78 Das große WordPress-Handbuch

WordPress
Themes
• Wie Sie sehen können, ist der Inhalt zentriert
• Geben Sie einen Namen und einen Wert ein,
und klicken Sie auf „Add Custom Field“, um ein
benutzerdefiniertes Feld mit dem entsprechenden
Namen und Wert zu erzeugen
• Dieses Posting hat ein benutzerdefiniertes
Feld mit dem Namen Sidebar und dem Wert
nosidebar
ben müssen, damit es in der Mitte liegt. Daher ersetzen wir folgende Zeilen:
001 div.post, div.page, div.attachment, div. hentry { margin:
20px 0 40px 20px; clear:both; } /* 640 pixels */
Und zwar durch diese:
001 div.post, div.page, div.attachment, div. hentry { width:
640px; margin: 20px 0 40px 160px; clear:both; } /* 640 pixels
*/
06
Stellen Sie die Spalte auf volle Breite um
Damit sind wir noch nicht fertig, da die umgebende #content-Spalte
volle Bildschirmbreite haben muss. Suchen Sie nach dieser Zeile in der style.css
(ungefähr bei Zeile 114):
001 div#content {float: left;}.
Fügen Sie die Breite wie folgt ein:
001 div#content {float: left; width: 100%;}.
So haben wir eine Inhaltsspalte auf voller Breite, was bedeutet, der Post ist zentriert.
07 Umdenken
Mit dieser Formatierung kommen wir erst mal weiter. Trotzdem wird sie
nicht ganz unseren Ansprüchen genügen, da aufgrund unserer Eingriffe im CSS
der Rest der Seite auseinanderfallen wird. Nebenbei bemerkt: Manchmal möchten
wir die Seitenleiste ja auch bei einzelnen Posts darstellen, sodass wir um eine flexiblere
Lösung nicht herumkommen – das heißt benutzerdefinierte Felder.
08
Die Lösung
Wir verwenden benutzerdefinierte Felder in unserem Theme, um zwei
Dinge zu erreichen. Wir müssen überprüfen, ob der User sich dafür entschieden
hat, die Seitenleiste zu verbergen – oder nicht. Ist die Leiste verborgen, müssen wir
andere Designs verwenden, sodass die Seite nicht auseinanderfällt wie im Augenblick.
Das benutzerdefinierte Feld zu erschaffen ist einfach. Dies können Sie im Edit-
Post-Bildschirm machen, aber Sie müssen wahrscheinlich eine benutzerdefinierte
Feldbox im Screen-Optionsmenü oben rechts aktivieren.
09
Die Überprüfung
Wir verwenden get_post_meta(), um den Wert des benutzerdefinierten
Feldes zu holen, darauf zu reagieren und zu entscheiden, ob die Seitenleiste in
single.php ausgegeben wird. Ersetzen Sie den get_sidebar()-Eintrag wie folgt:
001

Themes
• Ein Posting ohne Seitenleiste
• Ein Posting mit Seitenleiste
• Hier ist unsere nagelneue Box,
die weitaus benutzerfreundlicher ist
als das benutzerdefinierte Feld
001 div.nosidebar div#comments { margin-left: 160px; }.
Fehlt die Seitenleiste, wird die das Kommentarfeld umgebene div richtig ausgerichtet.
14
Machen Sie einen Feldversuch
Damit sollte wieder alles laufen. Zur Überprüfung, ob alles so funktioniert,
wie es sollte, experimentieren Sie ein wenig mit Ihrem Browser herum.
15
Fügen Sie Ihre eigene Box hinzu
Benutzerdefinierte Feldboxen sind nicht unbedingt benutzerfreundlich.
Lassen Sie uns aus diesem Grund einen eigenen Kasten mit einer Checkbox
erstellen. Öffnen Sie die functions.php und geben Sie Folgendes ein:
001 // CUSTOM SETTINGS BOX
002 // Defining custom box for sidebar settings
003 // Add and save the data
004 add_action( 'add_meta_boxes',
005 'notesblogsidebar_add_custom_box' );
006 add_action( 'save_post', 'notesblogsidebar_save_postdata' );
007 // Add the box on posts only, to the right (side)
008 function notesblogsidebar_add_custom_box() {
009 add_meta_box(
010 'notesblogsidebar_sectionid',
011 __( 'Hide sidebar?', 'notesblog' ),
012 'notesblogsidebar_inner_custom_ box',
013 'post',
014 'side'
015 );
016 }
Dies fügt zusätzliche Aktionen zur „Hide sidebar?“-Box hinzu, die wir mit add_
meta_box() erschaffen haben, und speichert die Daten. Wir wollen sie auf die
rechte Seite festlegen, das geschieht mit dem Parameter in add_meta_box().
16
Funktionalität der Box
Geben Sie die oben genannte Box aus, indem Sie notesblogsidebar_
inner_custom_box() aus add_meta_box() erzeugen.
001 // Output custom box
002 function notesblogsidebar_inner_custom_box( $post ) {
003 // Use nonce for verification
004 wp_nonce_field( plugin_basename( __FILE__ ),
'notesblogsidebar_noncename' );
005 // The actual fields for data entry
006 echo '';
007 _e('Check box to hide the sidebar on this post.',
'notesblog' );
008 echo '';
009 $checked = get_post_meta($post->ID, 'sidebar', true);
Wir müssen die Daten speichern und verhindern, dass dies bei jedem Autosave
geschieht. Dafür folgen Sie der nachstehenden Code-Sequenz.
001 // Save our custom data with post save
002 function notesblogsidebar_save_postdata( $post_id ) {
003 // Don't submit form on autosave
004 if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
005 return;
006 // Check permissions
007 if ( 'page' == $_POST['post_type'] )
008 {
009 if ( !current_user_can( 'edit_page', $post_id ) )
17
Speichern Sie die Metadaten
Jetzt speichern wir die Metadaten wie zuvor, jedoch mit update_post_
meta() statt einer manuellen Eingabe. Achten Sie auf die if/else-Überprüfung am
Ende, die abhängig davon, ob die Checkbox angekreuzt ist oder nicht, eine 1 oder 0
speichert. Den Code finden Sie unter www.webdesignermag.co.uk/tutorial-files/.
001 // Update (or create) post meta sidebar
002 update_post_meta( $post_id, 'sidebar', ($_POST
003 ['notesblogsidebar_new_field'] ? 1:0) );
004 }
Mit diesem Code in der functions.php bekommen wir einen separaten Kasten mit
einer Checkbox und müssen uns nicht mehr mit dem benutzerdefinierten Feld im
WordPress-Admin-Panel abplagen.
18
Suchen Sie die single.php erneut auf
Wenn wir eine Funktion wie diese verwenden, müssen wir den Code in
der single.php ein wenig anpassen. Zuerst müssen wir überprüfen, ob der Metawert
Sidebar eine 1 beinhaltet. Ist dies der Fall, müssen wir nosidebar ausgeben.
001

WordPress
Themes
Seiten in voller
Bildschirmbreite
SO FÜGEN SIE IHREM WORDPRESS-THEME EINE SEITE
IN VOLLER BILDSCHIRMBREITE HINZU
ES GIBT SITUATIONEN, in denen Sie eine Vorlage in voller
Bildschirmbreite – ohne eine Seitenleiste links oder rechts – für Ihr Blog
verwenden möchten. Seiten-Templates sind ein hervorragendes Werkzeug,
um ein benutzerdefiniertes Layout für Ihr WordPress-Blog zu erstellen. Die
meisten Blogs beinhalten Über-, Kontakt- oder Service-Seiten. Gerade bei
diesen möchten Sie womöglich keine Seitenleiste haben, da es ohne die
Leiste professioneller aussieht. Wenn Sie also auf der Suche sind, wie man
eine Seite in voller Bildschirmbreite darstellen kann, so wird Ihnen dieses
Tutorial anhand des Themes Twenty Eleven zeigen, wie einfach das Ganze
ist.
Es gibt Situationen, in denen Sie eine Vorlage in voller
Bildschirmbreite für Ihr Blog verwenden möchten
01
Das Erstellen einer
Seitenvorlage
Als Erstes müssen Sie eine Seitenvorlage (Template)
erstellen. Suchen Sie dazu in Ihrem WordPress-
Verzeichnis nach der Datei page.php, kopieren Sie
sie, benennen Sie sie in fullwidth_page.php um und
öffnen Sie sie mit einem beliebigen Texteditor. Danach
ist alles, was Sie machen müssen, jeglichen Inhalt in
den Kommentaren der ersten Zeilen zu löschen und
– wie in unserem Beispiel gezeigt – durch „Template
Name: Full-Width“ zu ersetzen. Überzeugen Sie sich im
Anschluss davon, dass der get_sidebar-Eintrag gelöscht
ist. Zusätzlich haben wir einen neuen div-Eintrag mit der
Bezeichnung content.fullpage hinzugefügt, sodass wir
mit CSS die neue Bildschirmbreite anpassen können.
02
CSS für die Breite
hinzufügen
Wenn Sie die styles.css-Datei mit einem
Texteditor öffnen, können Sie mithilfe von
CSS die Breite Ihrer Seite beeinflussen.
Gehen Sie also zum div-Eintrag mit dem
Namen #content.fullpage und geben Sie
innerhalb des Kommentars die Breite Ihrer
Seite ein, die Sie haben möchten. Speichern
Sie im Anschluss und laden Sie die Daten
hoch.
03
Die Seite
erstellen
Loggen Sie sich ins Admin-Panel
von WordPress ein. Klicken Sie im
Dashboard auf Seiten, geben Sie
Ihren Inhalt ein und bevor Sie die
Seite veröffentlichen, vergewissern
Sie sich davon, dass Sie unter
„Page Attributes“ das Template
„Full Width“ im Drop-down-Menü
ausgewählt haben. Klicken Sie
danach auf Veröffentlichen und
schauen Sie sich Ihre Seite an.
Das große WordPress-Handbuch 81

Themes
Erstellen Sie
ein Theme
für WordPress
mit Underscores
DAS VON AUTOMATTIC ENTWICKELTE UNDERSCORES
IST DER IDEALE AUSGANGSPUNKT FÜR DIE ERSTELLUNG
MASSGESCHNEIDERTER THEMES.
LERNZIEL
Ein sauberes und
professionelles WordPress-
Theme entwerfen
DAUER
60 Minuten
ANSPRUCH
Quelldateien
www.webdesignermag.
co.uk/tutorial-files/
UNDERSCORES IST ein Basis-Theme
von Automattic, dem Unternehmen des
WordPress-Initiators. Das Theme – bisweilen
einfach nur mit _s bezeichnet – ist dabei nicht
als Parent-Theme zur Grundlage von Child-Themes
konzipiert, sondern der Anwender soll Underscores
nach seinen Wünschen individuell anpassen.
Wenn Sie mithilfe von WordPress eine Website
für einen Kunden erstellen, ist der erste Arbeitsschritt
meist, ein bestehendes Theme zu wählen
und alle un wichtigen Funktionen zu entfernen.
Underscores beschränkt sich auf das Wesentliche,
also können Sie diese Bereinigung überspringen
und sich gleich auf die Gestaltung der Website konzentrieren.
Grundsätzlich geht es darum, dass Sie
alle erwünschten Funktionen erhalten, aber keines
der schicken nicht-essenziellen Features deaktivieren
– und im Endeffekt nur das bekommen, was
Sie wirklich brauchen. Dieses Tutorial befasst sich
mit dem Underscores-Theme und seinen Vorteilen
und beschreibt, wie Sie es für die Optimierung Ihres
nächsten WordPress-Projekts nutzen können.
82 Das große WordPress-Handbuch

WordPress
Themes
• Starten Sie mit einer gewöhnlichen
WordPress-Installation, ob lokal
oder per Remote-Server.
• Nutzen Sie Underscores.me zur
Erstellung einer benutzerdefinierten
und fertig umbenannten
Version des Underscores-Themes.
• Nicht alle Funktionen sind sofort
nach Aktivierung verfügbar. Für
Header- und Theme-Optionen
müssen erst einige Änderungen
vorgenommen werden.
• Im Auslieferungszustand sieht
Underscores eher schlicht aus,
aber da sind wir gefragt!
01
WordPress installieren
Wenn Ihre Hosting-Plattform über eine Ein-
Klick-Installation für WordPress verfügt, ist das meist die
schnellste und einfachste Option. Alternativ laden Sie die
neuesten WordPress-Dateien manuell hoch, erstellen
eine Datenbank und folgen der 5-Minuten-Installation.
Wenn Sie mit einer lokalen Installation arbeiten, erstellen
Sie eine neue WordPress-Umgebung in Ihrem lokalen
LAMP/MAMP/WAMP-Stack. Mit Shell-Zugang (SSH)
können Sie WordPress auch direkt herunterladen und
entpacken.
001 mkdir underscores
002 cd underscores
003 wget http://wordpress.org/latest.tar.gz
004 tar xfz latest.tar.gz
02
Nach Root verschieben
Nach Download und Entpacken befindet
sich WordPress meist in einem eigenen Ordner.
Verschieben Sie die Dateien ins Rootverzeichnis
Ihrer Seite (etwa Underscores). Für die Verschiebung
benutzen Sie die Drag&Drop-Funktion Ihres Desktops
oder die Kommandozeile. Löschen Sie anschließend
den leeren WordPress-Ordner sowie das ZIP-
Archiv. Wir nehmen an, Sie befinden sich gerade im
Underscores-Ordner:
001 cd wordpress
002 mv * ../
003 cd ..
004 rm -rf wordpress
005 rm latest.tar.gz
03
Der einfache Weg
Falls Sie Underscores nicht direkt auf den
Server klonen, sondern mit einer lokalen Installation
arbeiten, führt der einfachste Weg zur Personalisierung
des Themes über Underscores.me. Geben Sie dazu einfach
Ihre bevorzugten Parameternamen für das Theme
ein, und erstellen Sie so ein benutzerdefiniertes ZIP-File
für Underscores, in dem alle Dateien und Funktionen
bereits korrekt referenziert sind.
04
Underscores runterladen
Am schnellsten können Sie ein Theme auf
dem Server verwenden, indem Sie alles direkt aus
dem GitHub-Repository klonen. Öffnen Sie die Kommandozeile,
gehen Sie ins Hauptverzeichnis Ihrer
Seite und führen Sie die folgenden Befehle aus. Sie
greifen damit einfach auf das WordPress-Themes-
Verzeichnis zu und kopieren das Underscores-Theme
aus GitHub in Ihr eigenes Themes-Verzeichnis.
Ist dies erledigt, erscheint ein Ordner mit der
Bezeichnung _s im Themes-Verzeichnis.
001 cd wp-content/themes
002 git clone git://github.com/Automattic/_s.
git
05
Wesentliche Änderungen
Wenn Sie Underscores von GitHub beziehen,
müssen einige Details des Themes vor dem Fortfahren
umbenannt werden. Kopieren Sie das _s-Theme-
Verzeichnis und ändern Sie den Namen entsprechend
(hier im Beispiel underscores_theme). Wenn Sie sich
noch in der Kommandozeile befinden, können Sie
den untenstehenden Befehl verwenden. Anschließend
führen Sie die Suchen-und-Ersetzen-Funktion über das
gesamte Theme hinweg aus. Ersetzen Sie „_s“ durch
„underscores_theme“, „_s_“ durch „underscores_theme_“
und „ _s“ durch „ underscores_theme“ (jeweils mit einem
Leerzeichen am Anfang). Verwenden Sie keine Bindestriche
und sonstigen Zeichen, die PHP-Funktionen
beeinträchtigen.
001 mv _s underscores_theme
06
Suchen und Ersetzen
Ein guter Texteditor sollte über eine Suchen-und-
Ersetzen-Funktion verfügen, die auf das Theme-Verzeichnis
begrenzt ist. Wenn Sie gerne mit der Kommandozeile
arbeiten, können Sie auch damit suchen und ersetzen. Im
Das große WordPress-Handbuch 83

Themes
• Underscores kann alle WordPress-
Menüs als Hauptnavigation
nutzen. Legen Sie einfach fest,
welches Menü Sie wünschen.
• Underscores unterstützt
benutzerdefinierte Header, aber
erst nach ein wenig Anpassung.
• Modernizr ist nicht standardmäßig
enthalten, lässt sich aber leicht im
Austausch gegen das existierende
HTML5Shiv installieren.
• Nach Aktivierung der Theme-
Options erscheint eine Beispielseite
mit typischen Eingabetypen als
Kopiervorlage.
Folgenden sehen Sie Beispiele für die Umbenennung von
Referenzen auf _s mithilfe der OS X-Kommandozeile (ersetzen
Sie die Referenzen von underscores_theme mit dem
Namen Ihres eigenen Themes).
001 find . -type f -print0 | xargs -0 perl -pi
-e "s/\'_s\'/\'underscores_theme\'/g;"
002 find . -type f -print0 | xargs -0 perl -pi
-e "s/_s_/underscores_theme_/g;"
003 find . -type f -print0 | xargs -0 perl -pi
-e "s/_s\b/Underscores_theme/g;"
07
Underscores aktivieren
Öffnen Sie im Administrationsbereich von
WordPress Design > Themes und klicken Sie unter
dem Namen Ihres Themes auf „Aktivieren“. Sehen
Sie sich das Theme im Browser an: Sehr spartanisch!
Wahrscheinlich möchten Sie zunächst die Referenz
auf das Underscores-Theme in der Fußzeile abändern.
Öffnen Sie die footer.php in einem Editor Ihrer Wahl und
ändern oder entfernen Sie den Code entsprechend.
001

WordPress
Themes
Hinzufügen und suchen Sie nach WP Example Content.
Installieren und aktivieren Sie das Plugin und wählen Sie
danach in dessen Menü auf der linken Seite den Punkt
„Add Bundle of Sample Posts“.
11
Menüs erstellen
Underscores unterstützt Menüs. Fügen Sie im
Administrationsbereich unter Design > Menüs eines
hinzu. Benennen Sie es entsprechend (unser Vorschlag
wäre „Menü“) und fügen Sie Links von der linken Seite
hinzu. In diesem Beispiel haben wir alle Beispielseiten
ausgewählt und sie ineinander verschachtelt. Standardmäßig
erzeugt dies ein einfaches Dropdown-Menü aus
den verschachtelten ul-Elementen, das viele Klassen
enthält, was für das Styling hilfreich ist:
001
002 Grandchild Page
003
12
Responsives Design
Underscores verfügt standardmäßig nur über
das width-Attribut (auf 100 %) für Bilder – perfekt für
responsive Designs. Das Hauptmenü (welches in Schritt
11 erstellt wurde) wird unterhalb einer bestimmten Viewport-Breite
zu einer Menü-Schaltfläche. Der Standard
hierfür sind 600 px. Passen Sie die Datei js/small-menu.js
an den folgenden Stellen an:
001 // Check viewport width on first load.
002 if ( $( window ).width() < 450 )
003 $.fn.smallMenu();
004 // and:
005 if ( browserWidth < 450 )
13 Template-Tags
Die benutzerdefinierten Template-Tags gehören
zu den hilfreichen Features des Underscores-
Themes. Die entsprechende Datei findet sich in
/template-tags.php und enthält Funktionen, um zum
Beispiel den Beitrags-Metadaten, Navigationslinks
der Beiträge, Links und Kommentaren Klassen
zuzuordnen. Editieren Sie einfach die Datei, um für
De signzwecke neue Klassen zu erstellen. Hier fügen
wir den Kommentaren eine Klasse für Artikel-Feedback
hinzu:
001

Themes
'_underscores_theme' ); ?>
21
Textbereich anpassen
Wenn Sie auch den Textbereich anpassen
möchten, editieren Sie die jeweiligen Zeilen 47 und 43. Falls
Sie keine Anzeige der anderen Optionen im Administrationsbereich
wünschen, kommentieren Sie einfach die dafür
relevanten Zeilen aus (etwa von Zeile 44 an). Beispiel:
001 /* add_settings_field( 'sample_select_
options', __( 'Sample Select Options',
'_underscores_theme' ), 'underscores_theme_
settings_field_sample_select_options', 'theme_
options', 'general' );
002 add_settings_field( 'sample_radio_buttons',
__( 'Sample Radio Buttons', '_underscores_
theme' ), 'underscores_theme_settings_field_
sample_radio_buttons', 'theme_options',
'general' );*/
22 Theme-Optionen
nutzen
Jetzt sind die Theme-Optionen
eingestellt und der Template-
Inhalt soll angezeigt werden.
Erstellen Sie dazu
entweder ein neues
Template oder öffnen Sie
ein bereits bestehendes
(es wird in page.php
hinzugefügt). Fahren Sie
fort mit der Erstellung der
Wrapping-Tags für Ihre Felder
und fügen Sie diese folgendermaßen
ein, wobei Sie die Namen
jeweils durch die Ihrer eigenen Optionsfelder
ersetzen:
Keine Bange
Es gibt kein richtig oder
falsch bei der Erstellung
eines auf Underscore
basierenden Themes. Es
geht darum, alles
Unwichtige zu entfernen
und alles Notwendige
hinzuzufügen.
001
• Nun da die inc/theme-options/theme-options.php
angepasst ist, stehen die entsprechenden
Theme-Auswahlmöglichkeiten im Dashboard zur
Verfügung.
Code-Bibliothek
Eigene Body-Klassen hinzufügen
Underscores stellt schon im Auslieferungszustand viele Styling-Features
bereit. Zusätzliche Klassen lassen sich aber einfach hinzufügen.
Hier wurde, wie
in Schritt 18, dem
Textkörper eine
Klasse für die
Seitenansicht
hinzugefügt.
Vielleicht möchten Sie
eine Klasse erstellen,
die anzeigt, ob ein
Beitrag Kommentare
erhalten hat.
Oder vielleicht, ob ein
Beitrag zu einer
bestimmten Kategorie
gehört? Fügen Sie
eine nach der anderen
hinzu.
001 function underscores_theme_body_classes( $classes ) {
002 // Adds a class of group-blog to blogs with more than 1
published author
003 if ( is_multi_author() ) {
004 $classes[] = 'group-blog';
005 }
006 // Adds a class if a page
007 if ( is_page() ) {
008 $classes[] = 'this-is-a-page';
009 }
010 return $classes;
011 }
012 add_filter( 'body_class', 'underscores_theme_body_classes' );
001 if (get_comments_number()!==0) {
002 $classes[] = 'yep-i-have-comments';
003}
001 function underscores_theme_body_classes( $classes ) {
002 // Adds a class of group-blog to blogs with more than 1
published author
003 if ( is_multi_author() ) {
004 $classes[] = 'group-blog';
005 }
006 // Adds a class if a page
007 if ( is_page() ) {
008 $classes[] = 'this-is-a-page';
009 }
010 if ( get_comments_number()!==0 ) {
011 $classes[] = 'yep-i-have-comments';
012 }
013 if ( in_category('design') ) {
014 $classes[] = 'a-design-post';
015 }
016 return $classes;
017 }
018 add_filter( 'body_class', 'underscores_theme_body_classes' );
86 Das große WordPress-Handbuch

WordPress
Themes
Instant
WordPress
VERWANDELN SIE MIT INSTANT WORDPRESS EINEN WINDOWS-PC
IN EINEN WORDPRESS-ENTWICKLUNGSSERVER.
DIESES TUTORIAL ZEIGT, wie Sie Instant Word-
Press installieren und direkt loslegen können.
Die Software ermöglicht die schnelle und einfache
Einrichtung einer lokalen WordPress-Entwicklungsumgebung.
Sie installiert alles Notwendige
für die lokale Arbeit mit WordPress-Seiten, damit
Sie Feineinstellungen und Änderungen testen
können, ohne auf einen Remote-Server angewiesen
zu sein. Das klingt ziemlich gewagt, bedenkt
man alle für eine WordPress-Seite erforderlichen
Elemente wie beispielsweise einen Apache-
Webserver, PHP und MySQL, aber es ist komplett
selbstkonfigurierend, und jedes Element startet
und stoppt automatisch, je nach Bedarf. Sie
können sogar beliebig viele separate Versionen
von Instant WordPress gleichzeitig verwenden.
Alles ist in einem einzigen Ordner untergebracht,
was Ihnen erlaubt, Versionen zu duplizieren, um
sie zu testen und zu vergleichen. Wenn Sie fertig
sind, können Sie einfach den Ordner löschen und
es bleibt nichts zurück, was unnötig Speicherplatz
belegen würde. Instant WordPress startet
sogar von einem USB-Stick, so können Sie auch
unterwegs auf Ihre Website zugreifen. Sobald Sie
einmal die Installationsdateien haben, brauchen
Sie nicht einmal mehr eine Internetverbindung,
um Ihre lokale WordPress-Seite aufzurufen.
01
Instant WordPress
herunterladen
Laden Sie die aktuellste Version von Instant
WordPress von www.instantwp.com/download/
herunter. Die Software wird regelmäßig aktualisiert,
um mit neuen Veröffentlichungen Schritt zu halten.
Instant WordPress Version 4.3 enthält:
[ ] WordPress 3.4.2
[ ] Apache 2.2.15 (Win32)
[ ] PHP 5.3.2
[ ] MySQL 5.1.46-community-nt
[ ] WordPress-Beispielinhalte von wpcandy.com
Klicken Sie die Downloadschaltfläche und speichern
oder öffnen Sie die Datei. Möglicherweise
müssen Sie der Software zunächst Installationsrechte
einräumen. Wählen Sie anschließend das
Installationsverzeichnis.
02
Instant WordPress starten
Öffnen Sie den Ordner. Klicken Sie auf die
Anwendung InstantWP. Es erscheint eine Benutzeroberfläche
mit Zugang zu folgenden Funktionen:
[ ] WordPress Frontpage – Ihre lokale Website,
die gerade installiert wurde.
[ ] WordPress Admin – mit Standard-Benutzer-namen
und Passworteingabe.
[ ] Plugins- und Themes-Ordner – dieser Menüpunkt
öffnet den jeweiligen Ordner im Dateimanager und
gibt Ihnen direkten Zugang zu den Dateien, die
außerhalb von WordPress liegen, analog zum Zugriff
per FTP.
[ ] MySQL Admin – per Klick öffnet sich phpMyAdmin
zur Verwaltung der Website-Datenbank.
03
Instant WordPress
verwenden
Die Hilfefunktion kann ebenfalls über diese Oberfläche
aufgerufen werden, die Schaltfläche ruft allerdings die
Online-Hilfe auf. Um Instant WordPress ohne Internetverbindung
zu nutzen, empfiehlt es sich, wichtige Seiten
aus dem Handbuch vorher zu speichern. Jetzt sind Sie
startklar für die Eroberung Ihrer Website. Sie können
Plugins und Themes herunterladen und sie entweder
selbst in den jeweiligen Ordnern entpacken oder sie wie
gewöhnlich über den Administrationsbereich von Word-
Press hinzufügen. Sie können sogar per Dashboard ein
Upgrade von WordPress durchführen, genau wie Sie es
online machen würden.
Das große WordPress-Handbuch 87

Themes
Portieren
Sie Ihre
WordPress-
Seite für
Mobilgeräte
DIE PASSENDE DARSTELLUNG FÜR SMARTPHONES UND TABLETS.
LERNZIEL
Ein Child-Theme erstellen
und dieses an verschiedene
Bildschirmauflösungen
anpassen können
DAUER
60 Minuten
ANSPRUCH
MOBILGERÄTE WIE Smartphones
und Tablets machen einen wachsenden
Teil der Zugriffe auf Websites
aus, daher wird es zunehmend
wichtiger, die Seiten für diese Art der Nutzung fit
zu machen. Zwar werden die meisten Webseiten
auch auf Smartphones noch halbwegs vernünftig
dargestellt, doch das ständige Aufziehen mit den
Fingern zum Vergrößern der Inhalte, um sie lesen
zu können, ist auf die Dauer beschwerlich. Machen
Sie sich also besser heute als morgen mit dem
Gedanken vertraut, Ihre Webseiten für die mobile
Nutzung zu portieren.
Es führen hierbei mehrere Wege zum Ziel. Für
WordPress stehen mehrere Plug-ins zur Verfügung,
die die Anpassung bewerkstelligen. Allerdings
möchte nicht jeder Seitenbetreiber ein solches
Plug-in benutzen.
In diesem Tutorial zeigen wir Ihnen, wie Sie
mithilfe von Media Queries (Medienabfragen)
das WordPress-Theme Twenty Ten „responsive“
machen, das heißt, es so zu konfigurieren, dass es
sich automatisch an das zugreifende Gerät anpasst.
01
Child-Theme erstellen
Wir beginnen mit der Erstellung eines Child-
Themes – hierbei handelt es sich um eine Ableitung
eines anderen Themes (in unserem Fall von Twenty
Ten), dessen Funktionen es erbt, das jedoch verändert
werden kann. Erstellen Sie für das neue Theme einen
eigenen Ordner wp-content/themes/
twentyten-responsive und eine Datei style.css mit
folgendem Code:
• Das Child-Theme sieht zunächst noch
genauso aus wie die Vorlage Twenty Ten.
001 /*
002 Theme Name: Twenty Ten Responsive
003 Theme URI: http://tdh.me/wordpress/twentyten-responsive/
004 Description: A child theme that makes
Twenty Ten responsive.
005 Author: Thord Daniel Hedengren
006 Author URI: http://tdh.me/
007 Template: twentyten
008 */
009
010 @import url('../twentyten/style.css');
011
02
Child-Theme aktivieren
Verwenden Sie eine Entwicklungsinstallation
mit Twenty Ten, die entweder bereits mit der
WordPress-Software mitgeliefert wird oder die Sie von
wordpress.org/extend/themes/twentyten herunterladen
können. Aktivieren Sie das Theme Twenty Ten Responsive
innerhalb von WordPress. Das Theme sieht jetzt
noch genauso aus wie Twenty Ten, denn wir haben ja
noch nichts verändert.
88 Das große WordPress-Handbuch

WordPress
Themes
• Diese Darstellung eignet sich zwar besser für die
Betrachtung auf einem Mobilgerät, sieht aber nicht
besonders schick aus.
• Schon mit ein paar Abständen (Padding) kann man
eine Menge erreichen. Übertreiben Sie es jedoch nicht,
sondern achten Sie auf das Verhältnis von Abständen
und zur Verfügung stehender Bildschirmbreite.
03
header.php kopieren
Bevor wir Medienabfragen durchführen und
mit der style.css herumspielen können, müssen wir
noch eine kleine Codeanpassung in der Datei header.
php vornehmen. Da alle Änderungen prinzipiell nur an
dem Child-Theme vorgenommen werden, kopieren Sie
die header.php aus dem Ordner wp-content/themes/
twentyten in den Ordner /twentyten-responsive und
fügen Sie dies in die Kopie – ungefähr bei Zeile 14 in der
Meta-Sektion – ein:
001
002
04
Menüfragen
Die Menüs für
umfangreiche Websites sind
oft nicht gut für kleine Displays
geeignet. Sie könnten eine
zweite Version des Menüs
erstellen und in Abhängigkeit
von der Medienabfrage die
eine oder die andere
anzeigen lassen.
Stufen für die Bildbreite
In diesem Tutorial kreieren wir keine fließend,
sondern in Stufen adaptierende Version von Twenty
Ten. Die Standardseitenbreite ist 980 px, damit sollten
die meisten aktuellen Displays zurechtkommen. Wir
werden eine Medienabfrage für Breiten von 320 px
aufwärts durchführen und weitere Regeln für Breiten
ab 480 px hinzufügen.
05
Medienabfragen setzen
Die Medienabfragen (Media Queries) werden
– wie bei allen vorgenommenen Veränderungen – nur
in unser Child-Theme eingefügt. Öffnen Sie dazu die
style.css aus dem Ordner /twentyten-responsive, und
integrieren Sie die folgenden Codezeilen zur Medienabfrage.
001 /* ===============
002 MEDIA QUERIES */
003
004 /* 320 px and up */
005 @media only screen and (min-width: 320px) {
006
007 /* This goes for everything 320 pixels
and up */
008
009 }
010
011 /* Up to 480 px */
012 @media only screen and (max-width: 480px) {
013
014 /* Up to 480 pixels */
015
016 }
017
018 /* From 481 px and upwards */
019 @media only screen and (min-width: 481px) {
020
021 /* For screens 481 pixels and wider */
022
023 }
024
025 /* From 640 px */
026 @media only screen and (min-width: 640px) {
027
028 /* Special styling from 640 pixels and
up */
029
030 }
031
032 /* 980 px and up */
033 @media only screen and (min-width: 980px) {
034
035 /* Where we set everything straight again
*/
036
037 }
06
Was weglassen?
Nun müssen wir festlegen, welche Elemente
der Seite bei den Versionen für kleinere Displays verborgen
werden sollen. Dies ist eine essenzielle Frage,
denn damit die Mobilversion gut aussieht und dennoch
gut zu benutzen ist, müssen entbehrliche Elemente
verborgen und unentbehrliche gegebenenfalls neu
positioniert werden. In unserem Beispiel lassen wir den
Header verschwinden, außer in der Desktopversion,
und wir verschieben die rechte Spalte ans untere Ende
der Seite. Das konkrete Vorgehen wird jedoch stets vom
jeweiligen Design einer Seite abhängen.
07
Zuerst die Mobilversion
Die erste Medienabfrage (ab 320 px, also
Smartphone-Standard) lässt alles weg, was wir vom
Twenty-Ten-Layout nicht zwingend brauchen, und
nimmt einige Verschiebungen vor. Die referenzierten
Styles finden sich in der style.css von Twenty Ten.
Kopieren Sie sie von dort und übertragen Sie sie an
den Anfang der style.css des Child-Themes.
001 /* 320 px and up */
002 @media only screen and (min-width: 320px) {
003
004 #wrapper {
005 margin: 0;
006 padding: 0; }
007
008 #site-title {
009 width: 100%;
010 margin-bottom: 0;
011 text-align: center; }
012
Das große WordPress-Handbuch 89

Themes
• Dies ist die Neuformatierung des Themes für
Tablets (im Landscape-Modus).
• Hier sehen Sie das Design in der vollen
Desktop-Anzeige.
• Für die kleineren Auflösungen von Smartphones
ist diese Variante optimiert (hier im Portrait-
Modus).
013 #site-description {
014 width: 100%;
015 float: left;
016 margin-top: 10px;
017 text-align: center; }
018 #access, #access .menu-header, div.menu,
#colophon, #branding, #main, #wrapper {
019 @media only screen and (min-width: 481px) {
020 width: 100%; }
021
022 #branding img {
023 display: none; }
024
025 div#content {
026 width: 100%;
027 margin: 0; }
028
029 div#primary {
030 width: 100%;
031 margin-top: 20px;
032 padding-top: 20px;
033 border-top: 3px double #000; }
034
035 #main .widget-area ul {
036 padding-right: 0; }
037
038 #footer {
039 margin-bottom: 0; }
040
041 #site-info, #site-generator {
042 width: 100%;
043 float: left;
044 text-align: center; }
045
046 }
08
Abstände hinzufügen
Nach diesen Anpassungen ist unser Twenty
Ten Responsive zwar sehr viel besser lesbar auf einem
Smartphone-Bildschirm, aber es muss noch ein wenig
aufgehübscht werden. Lassen Sie uns bei der nächsten
Medienabfrage (bis zu 480 px) einige Abstände hineinbringen:
001 /* Up to 480 px */
002 @media only screen and (max-width: 480px) {
003
004 .post, div.page, li.widget-container {
005 padding: 0 10px; }
006
007 }
008
Sobald Bilder ins Spiel kommen, sind
weitere Anpassungen vonnöten.
09
Widgets
Falls Sie auf Ihrer Website
Widgets einsetzen, sollten Sie
sich überlegen, welche Sie
gegebenenfalls per CSS
anpassen und welche Sie
womöglich ganz
weglassen.
Die nächste Stufe
Displays, die breiter als 480 px, aber schmaler
als 640 px sind, können vermutlich noch etwas größere
Abstände vertragen. Erhöhen wir hier also den Padding-
Wert von 10 px auf 15 px.
001 /* From 481 px and upwards */
002 @media only screen and (min-width: 481px) {
003
004 .post, div.page, li.widget-container,
#comments {
005 padding: 0 15px; }
006
007 }
10
Seitenleiste verschieben
Womöglich fragen Sie sich, wozu die zusätzliche
Medienabfrage für Bildbreiten ab 640 px dient.
Der Grund ist, dass es ab dieser Größe möglich ist, die
Seitenleiste rechts anzuordnen. Um die Breite der Leiste
jeweils angemessen zu gestalten, legen wir diese nicht
absolut, sondern als Prozentwert fest.
001 /* From 640 px */
002 @media only screen and (min-width: 640px) {
003
90 Das große WordPress-Handbuch

WordPress
Themes
004 #container {
005 width: 62.5%;
006 margin: 0; }
007
008 .post, div.page, li.widget-container {
009 padding: 0 20px; }
010
011 div#primary {
012 width: 32.5%;
013 margin-top: 0;
014 padding-top: 0;
015 border: 0; }
016
017 }
11 Desktopversion
wiederherstellen
Zu diesem Zeitpunkt sieht die Desktopversion der Webseite
noch suboptimal aus, wie auf dem Screenshot gegenüber
zu erkennen – was natürlich daran liegt, dass wir
einige Styles des Themes überschrieben haben. In unserer
letzten Medienabfrage – ab 980 px – stellen wir die ordentliche
Desktopversion von Twenty Ten wieder her.
001 /* 980 px and up */
002 @media only screen and (min-width: 980px)
{
003
004 #access .menu-header, div.menu,
#colophon, #branding, #main, #wrapper {
005 width: 940px; }
006
• Dank des Responsive-Themes können Sie
Videos auch auf kleinen Displays einbinden.
007 #wrapper {
008 margin: 20px auto;
009 padding: 0 20px; }
010
011 #site-title {
012 width: 700px;
013 margin-bottom: 18px;
014 float: left;
015 text-align: left; }
016
017 #site-description {
018 width: 220px;
019 float: right;
020 text-align: right; }
021
022 #branding img {
023 display: block; }
024
025 #footer {
026 margin-bottom: 20px; }
027
028 #site-info {
029 width: 700px;
030 float: left;
031 text-align: left; }
032
033 #site-generator {
034 width: 220px;
035 float: right;
036 text-align: right; }
037
038 }
12 Zwischenbilanz
An dieser Stelle haben wir eine ganz passable
Mobilversion der Seite, ein mittelgroßes Layout sowie
eine Standard-Desktopversion. Allerdings war das noch
längst nicht alles. Für eine reine Textseite würde es so
funktionieren, aber sobald Bilder und andere grafische
Elemente ins Spiel kommen, sind weitere Anpassungen
vonnöten. Auch haben wir uns noch nicht um das Layout
einzelner Beiträge gekümmert.
13
Padding für Kommentare
Ein Blick auf einen Einzelbeitrag genügt, um
festzustellen, dass die Kommentare noch eine Designüberarbeitung
benötigen. Derzeit berühren sie den Rand
des Fensters. Abhilfe kann zum Glück schnell geschaffen
werden, da die Kommentare in div#comments stehen.
Sehen Sie sich nochmals Schritt 07 an und ergänzen Sie
#comments wie unten gezeigt, und gehen Sie beim Code
der Schritte 08 und 09 analog vor.
001 /* Up to 480 px */
002 @media only screen and (max-width: 480px) {
003
004 .post, div.page, li.widget-container,
#comments {
005 padding: 0 10px; }
006
007 }
14
Andere Elemente anpassen
Nicht nur der Code für die Kommentare muss
angepasst werden, sondern auch der anderer Elemente
wie zum Beispiel der Navigationslinks bei Twenty Ten.
Diese Links verweisen etwa auf die vorherige Seite in
Archiven oder den vorhergehenden Beitrag. Wenn der
Padding-Wert für #wrapper auf null gesetzt ist, fügen
Sie einfach analog zu Schritt 13 die Klasse .navigation zu
den Medienabfragen hinzu:
001 /* Up to 480 px */
002 @media only screen and (max-width: 480px) {
003
004 .post, div.page, li.widget-container,
#comments, .navigation {
005 padding: 0 10px; }
006
007 }
HTML5 auf
dem Internet
Explorer
Zwar ist Twenty Ten nicht in HTML5 programmiert,
aber viele andere WordPress-
Themes schon. Dies kann zu Problemen
bei der Anzeige im Internet Explorer
führen, wenn eine ältere Version des Browsers
verwendet wird, denn erst ab Version
9 kommt der IE gut mit HTML5 und CSS
klar. Im Netz sind etliche Workarounds
verfügbar, doch der beste ist vielleicht die
exzellente JavaScript-Lösung html5shim
von Remy Sharp, die Sie gratis bei Google
Code bekommen. Binden Sie das Skript wie
folgt ein:
001
Es wird generell empfohlen, von WordPress
generierte Seiten und JavaScript mithilfe
der Funktionen wp_enqueue_script() und
wp_register_script() zu verbinden, daher ist
dies auch in diesem Fall ratsam.
Das große WordPress-Handbuch 91

Themes
15
Eingebundene Videos
Falls Sie Videos von YouTube oder anderen
Plattformen in Ihre Beiträge einbinden, sollten Sie auch
hierauf achten. Da die Videos vermutlich in der Breite
320 px überschreiten, können Sie das Problem dadurch
lösen, dass Sie einen Prozentwert eingeben. Mit 100 %
wird die Breite des Viewports vollständig ausgenutzt.
Fügen Sie der ersten Medienabfrage den folgenden
Code hinzu:
001 embed, iframe, object {
002 width: 100%; }
16
• Mithilfe eines Screenshots können
Sie ein Vorschaubild des neuen
Themes kreieren.
• Hier sehen Sie die Beitragsformate
Galerie und Kurzmitteilung (Aside).
Bilder skalieren
Standardmäßig skaliert das Twenty-Ten-Theme
Bilder bereits in der Weise, dass nicht breiter werden
als die Content-Spaltenbreite. Das heißt, Sie brauchen in
dieser Hinsicht keine Anpassungen vorzunehmen. Bei
anderen Themes würden Sie aber möglicherweise ein
max-width zu .aligncenter und .alignnone hinzufügen.
Was jedoch bei Twenty Ten nicht geregelt ist, sind Bilder,
um die der Text herumfließt – hier sollten Sie sich
noch um eine Skalierung kümmern. Bei Auflösungen bis
480 px wären vielleicht 35 % der Breite angebracht:
001 img.alignleft, img.alignright {
002 width: 35%;
003 height: auto; }
Ab 481 px nehmen wir 40 %:
001 img.alignleft, img.alignright {
002 width: 40%;
003 height: auto; }
Ab 640 px nehmen wir 45 %:
001 img.alignleft, img.alignright {
002 width: 45%;
003 height: auto; }
Und in der Vollauflösung ab 980 px in der Medienabfrage
setzen wir die Breite auf automatisch:
001 img.alignleft, img.alignright {
002 width: auto;
003 height: auto; }
17
Menü anpassen
Wenden wir uns danach dem Menü zu. Da
auf einem Smartphone nicht allzu viel in eine Zeile
passt, können wir uns damit behelfen, Schriftgröße und
Padding zu reduzieren (siehe Code unten). Auch durch
eine verringerte Zeilenhöhe lässt sich wichtiger Platz
auf einem kleinen Display sparen. Falls Ihr Menü sehr
umfangreich ist, wäre es aber möglicherweise angebracht,
es für die Mobilversion ganz neu zu gestalten.
001 div.menu {
002 font-size: 11px; }
003
004 #access a {
005 padding: 0 8px;
006 line-height: 32px; }
007
18
Format Kurzmitteilung
Twenty Ten unterstützt das Beitragsformat
Kurzmitteilung (Aside), daher gilt dasselbe für unser
Child-Theme. Wir müssen dafür sorgen, dass auch für
dieses Format die passenden Abstände festgelegt werden.
Leider geht das nicht auf die gleiche Weise wie ab
Schritt 07 beschrieben, nämlich durch ein Hinzufügen
von .format-aside zu den Padding-Blocks, denn Twenty
Ten verwendet spezielle Stylings für die Kurzmitteilungen.
Stattdessen müssen wir Margins festlegen. Verwenden
Sie diesen Code für die Medienabfrage bis 480 px:
001 .format-aside {
002 margin-left: 10px;
003 margin-right: 10px; }
Entsprechend können Sie bei den Medienabfragen ab
481 px (15 px Margin) und ab 640 px (20 px Margin) vorgehen.
Achten Sie lediglich darauf, dass Padding- und
Margin-Werte einander innerhalb der Medienabfragestufen
entsprechen.
19
Galerien anpassen
Auch um die Formatierung der Galerien für
kleinere Displays sollten wir uns kümmern. Die einfachste
Lösung ist, die Größe von img.attachment-thumbnail
in den Medienabfragen zu ändern. Beginnen wir mit der
Abfrage bis 480 px:
001 img.attachment-thumbnail {
002 width: 75%;
003 height: auto; }
Für die Auflösung ab 481 px wählen wir einen etwas
höheren Wert:
001 img.attachment-thumbnail {
002 width: 80%;
003 height: auto; }
Und die Auflösung ab 640 px bekommt einen nochmals
erhöhten Wert:
001 img.attachment-thumbnail {
002 width: 85%;
003 height: auto; }
Schließlich stellen wir die Breite für die Vollversion wieder
auf automatisch:
001 img.alignleft, img.alignright {
002 width: auto;
003 height: auto; }
20
Vorschaubild kreieren
Zum Schluss könnten Sie noch ein Vorschaubild
für Ihr Theme Twenty Ten Responsive erstellen, um damit
den grauen Kasten zu ersetzen, der jetzt noch in der
Themes-Liste erscheint. Machen Sie einen Screenshot des
Designs in der Mobilauflösung, bringen Sie ihn auf das Maß
300 x 225 px, und speichern Sie das Ganze als PNG-Bild
unter dem Namen screenshot.png ab. Dieses fügen Sie
dann dem Ordner /twentyten-responsive hinzu, und schon
haben Sie ein Vorschaubild für das Child-Theme.
92 Das große WordPress-Handbuch

WordPress
Themes
Was sind
Responsive
Frameworks?
ENTWICKELN SIE (FAST) IM HANDUMDREHEN FEATUREREICHE
WEBSEITEN MITHILFE VORGEFERTIGTER SETS.
RESPONSIVE FRAMEWORKS SIND dynamische
Programmiergerüste, beim Webdesign Sets
vorgefertigter Gestaltungselemente. Diese Sets
nehmen Ihnen viel Arbeit beim Coden von Webseiten
ab, da sie Benutzeroberflächenelemente
und andere Features beinhalten und Unterstützung
für verschiedene Geräte und Auflösungen
bieten. Die meisten dieser Frameworks sind
Open-Source-Software und kostenlos.
Wie können Sie nun die Vorzüge von Responsive
Frameworks genießen und gleichzeitig die
Vorteile einer WordPress-Umgebung nutzen? Sie
könnten Ihr Theme von Grund auf neu zusammenstellen
und ein Responsive Framework
darin integrieren. Oder Sie gehen von einem
WordPress-Starter-Theme aus und nutzen das
Responsive Framework als Basis. Schließlich
könnten Sie auch ein Plug-in installieren, das
Ihrem Theme einige der Features eines Responsive
Frameworks hinzufügt.
Ein guter Anfang ist, mit einem Starter-Theme
herumzuexperimentieren. Wir möchten Ihnen
hier drei davon vorstellen.
Programmiergerüste
nehmen Ihnen viel
Arbeit beim Coden ab.
01 WP-Bootstrap
WP-Bootstrap ist ein WordPress-Theme auf
Basis des Starter-Themes Bones. Es verwendet LESS,
einen der beiden wichtigsten CSS-Präprozessoren
neben Sass (LESS wird eher von PHP-, JavaScript- und
somit auch WordPress-Entwicklern bevorzugt und
Sass eher von Ruby- oder Haml-Programmierern).
WP-Bootstrap bietet einige zusätzliche Optionen,
die Einsteigern dabei hilft, schneller ein ausgereiftes
Design zu entwickeln, beispielsweise bootswatch.com-
Themes, Seiten-Templates, ein Theme-Options-Panel
sowie Boostrap-Shortcodes.
Download: www.320press.com/wpbs
02 WP-Foundation
Dieses Theme benutzt Foundation von Zurb
in der Version 3.0 als Framework sowie den anderen
wichtigen CSS-Präprozessor, Sass. Auch WP-Foundation
basiert auf Bones und bietet Seiten-Templates, einige
Foundation-Shortcodes und den beliebten Slider Orbit.
Laut Zurb ist Foundation das fortschrittlichste Front-
End-Framework der Welt. Das Theme wird individualisiert,
indem man die Datei _settings.scss modifiziert und
mithilfe von Compass (wofür Sie eine Ruby-Installation
benötigen) rekompiliert.
Download: www.320press.com/wp-foundation
03 Bones
Sowohl WP-Bootstrap als auch WP-Foundation
basieren auf dem Starter-Theme Bones, das
wiederum das Theme 320 and Up zur Grundlage
hat. Bones ist noch einen Schritt näher an den Rohelementen,
auf denen diese Themes aufbauen, und
besitzt sozusagen eine noch leerere Leinwand, auf
die Sie Ihr Theme-Design malen können. Erwarten
Sie daher nicht viele eingebaute Optionen. Bones ist
allerdings extrem sorgfältig dokumentiert und beinhaltet
verschiedene Beitragsformen und Dashboard-
Funktionen. Das Theme folgt dem „Mobile First“-
Ansatz, ermöglicht somit die Bedienung kleiner Viewports
mit minimalem Ressourceneinsatz und wird
entsprechend auf die größeren Formate hochskaliert.
Download: www.themble.com/bones
Das große WordPress-Handbuch 93

Themes
Ein Theme
auf HTML5
umstellen
HTML5 BIETET GEGENÜBER FRÜHEREN HTML-GENERATI-
ONEN EINIGE VORTEILE. DIE UMSTELLUNG EINES THEMES
AUF HTML5-CODE IST GAR NICHT SO SCHWER.
LERNZIEL
Einen ersten Einblick in die
semantischen Elemente
von HTML5 bekommen
DAUER
60-120 Minuten
ANSPRUCH
ZU DEN WICHTIGSTEN Neuerungen von
HTML5 gehört, dass semantische Elemente
nun besser unterstützt werden. Das bedeutet,
dass der Code, aus dem eine Webseite
erzeugt wird, mit den neuen Spezifikationen in vielen
Fällen „sprechender“ ist, man also mehr direkt daran
ablesen kann.
Das alleine wäre wohl noch kein hinreichendes Argument,
ein bestehendes WordPress­Theme auf HTML5
upzugraden, aber es gibt weitere Vorteile: Webseiten
werden dadurch suchmaschinenfreundlicher, und der
HTML-Code wird sauberer und tendenziell kürzer, was
wiederum bedeutet, dass er vom Browser schneller
geladen und angezeigt wird.
In diesem Tutorial zeigen wir Ihnen am Beispiel eines
bestehenden WordPress­Templates, wie die Umstellung
auf HTML5 vonstattengeht. Darüber hinaus verwenden
wir ein bisschen CSS3, um auch die grafischen Effekte
zu verbessern.
HTML5-Code wird vom
Browser schneller geladen
und angezeigt.
• Wenn Sie Ihr Blog auf
HTML5 umstellen,
verändert sich
äußerlich nichts, aber
der Webseitencode
wird optimiert.
01
Semantische Elemente
Mit HTML5 wurden einige neue semantische
Elemente eingeführt, das heißt, Elemente, deren Name
etwas über ihre Funktion aussagt. Bisher haben Webdesigner
dem ­Tag unterschiedliche Klassen à la
oder zugeordnet, um
spezifische Bezeichnungen für Elemente zu kreieren,
aber mit HTML5 kann man jetzt direkt ,
, und Ähnliches verwenden. Der
folgende Code stellt die typische Struktur eines Theme­
Templates in HTML5 dar:
001
002 …
003
004 …
005
006
007 ….
008 ….
009
010
011 ….
012 ….
013
014
015
016 ….
017
018 …
019
020
94 Das große WordPress-Handbuch

WordPress
Themes
02
Was ist neu in
der Dokumentenstruktur?
In unserem Beispiel steht zwischen
dem und dem des
HTML5-Dokuments das -Tag,
das hier den Hauptinhalt der Seite
enthält, während das -Tag die
in den meisten WordPress-Themes
vorkommende Seitenleiste (Sidebar)
repräsentiert. Innerhalb von
sind die einzelnen Blog-Beiträge noch
einmal durch -Tags voneinander
abgegrenzt und enthalten in sich wiederum
-Tags für die Artikelüberschriften.
Die Seitenleiste enthält den
Menübereich .
03
Eigenes Theme ebenfalls
möglich
Wir verwenden ein beliebtes Standard-Theme, Sie können
das Tutorial aber auch anhand Ihres eigenen Themes
durchgehen. Lassen Sie sich dazu zunächst im Browser
den Quelltext einer Webseite des Themes anzeigen. Im
Seitenquelltext ist oben der Dokumententyp angegeben.
Ist er mit HTML4 oder XHTML kompatibel, können Sie
unseren Anleitungen problemlos folgen.
04 Kopie
machen
Bevor Sie irgendwelche
Änderungen am Code
vornehmen, erstellen Sie
eine Kopie Ihres Theme-
Ordners innerhalb von
/wp-content/ und benennen
Sie sie ihn in
/html5-test/ oder etwas
Ähnliches um. Sie sollten
stets an einer Kopie
arbeiten, denn es kann
vorkommen, dass Sie
irgendwann auf das Original
zurückgreifen wollen
oder müssen.
Animation per CSS
05 Theme­Editor
Die WordPress-Software enthält
praktischerweise einen Editor für
die Dateien eines Themes. Sie finden ihn
im Dashboard unter dem Menüpunkt
Design > Editor. Wenn Sie eine Datei aus
der Liste auf der rechten Seite auswählen,
wird der Inhalt der Datei im Textfeld
angezeigt. Sie können ihn ändern und
speichern.
001
07
06
header.php bearbeiten
Die erste zu bearbeitende Datei ist header.
php. Sie steht am oberen Ende jeder Ihrer Webseiten
und legt Styles, Struktur und Dokumententyp der Seite
fest, daher gibt es viel zu ändern. Ersetzen Sie zuerst
die
003 ”>&nbsp;
004
005

Themes
010 }
011 ?>
012
021 class=”header_title”>”
title=””>
class=”header_
desc”>
024
Was genau
ist HMTL5?
In den letzten Jahren wurde sehr
viel über HTML5 berichtet. Das
Ganze wurde forciert durch den
Siegeszug der Mobilgeräte wie
Smartphones und Tablets sowie
Apples Weigerung, Adobe Flash
auf dem iPhone und iPad laufen
zu lassen. HTML5 wird häufig
als Sammelbegriff für diverse
tech nische Neuerungen im
Webdesign verwendet und
schließt dann neben der neuesten
HTML-Generation selbst auch
CSS3 (Stylesheets) und JavaScript-
Bibliotheken (wie jQuery) mit ein.
Es lohnt sich in der Regel zu
prüfen, ob ein vorhandenes
WordPress-Theme, ein Widget oder
ein Plug-in mittels HTML5 auf der
Codeseite optimiert werden kann.
09
Tag für Navigationsleiste
Entsprechend verfahren Sie mit ,
das Sie durch das HTML5-Element ersetzen
können. Bei den meisten (aber nicht allen) Themes wird
die Navigationsleiste direkt unterhalb des Headers positioniert.
Vergessen Sie auch hier nicht den Austausch
des End-Tags.
001
002
003
004
017
018
019
020
021
022
023
036 &nbsp;
037
038
10
11
CSS-Datei aufrufen
Würden Sie Ihr Theme jetzt im Browser
betrachten, gäbe es ein Kuddelmuddel. Wir müssen
nämlich noch die CSS-Datei anpassen, um die Änderungen
wirksam werden zu lassen. Öffnen Sie dazu
die Stylesheet-Datei style.css, die bei jedem WordPress-
Theme vorhanden ist.
Theme umbenennen
Oben im Stylesheet befindet sich eine
Beschreibung des Themes. Diese wird im Dashboard
angezeigt. Ändern Sie die Beschreibung und legen Sie
einen neuen Namen für das neue Theme fest, damit es
vom vorherigen Nicht-HTML5-Theme unterschieden
werden kann.
001 /*
002 Theme Name: GrapheneHTML5
003 Theme URI: n/a
004 Description: This is an updated
version of the Graphene theme, adapted
to use HTML5 instead of XHTML. It is
based on the original theme by Syahir
Hakim.
005 Version: 1.5.6
006 Original Author: Syahir Hakim
007 Original Author URI: http://www.
khairul-syahir.com
008 Revision Author: samhs
009 License: GNU General Public License,
v2 (or newer)
010 License URI: http://www.gnu.org/
licenses/old-licenses/gpl-2.0.html
011 */
HTML5Shiv
Ältere Browser ignorieren
Tags, die sie nicht kennen
– dies kann zu Problemen
bei Block- und Inline-
Elementen führen. Abhilfe
schafft das JavaScript-
Workaround HTML5Shiv.
96 Das große WordPress-Handbuch

WordPress
Themes
12
Selektoren anpassen
In der style.css müssen wir durchgehend alle
Bezüge auf die geänderten Elemente anpassen. Bisher
haben wir nur zwei Elemente geändert, daher geht es
schnell. Ersetzen Sie durchweg #header mit header und
#nav mit nav.
001 header {
002 background-position: center top;
003 background-repeat: no-repeat;
004 border-top:1px solid #000;
005 height: 198px;
006 width: 100%;
007 position: relative;
008 }
009 header .sidebar-wrap {
010 position: absolute;
011 z-index: 1000;
012 }
013 nav, nav ul {
014 padding: 0;
015 margin: 0;
016 list-style: none;
017 z-index: 100;
018 }
019 nav a {
020 display: block;
021 }
022 nav li {
023 float: left;
024 }
025 nav li ul {
026 position: absolute;
027 width: 200px;
028 left: -999em;
029 }
030 nav li:hover ul {
031 left: auto;
032 }
13
Vorschau und Test
Nun da Sie auch das Stylesheet geändert
haben, können Sie das neue HTML5-Theme im Dashboard
aktivieren und im Browser betrachten. Bei einem
modernen Browser sollte Ihre Website mit dem alten
Nicht-HTML5-Theme und dem neuen gleich aussehen.
14
Ältere Browser
Ältere Browser ignorieren im Regelfall Elemente,
die sie nicht kennen. Allerdings möchten wir ja, dass
unsere Inhalte angezeigt werden und die Webseiten so
aussiehen, wie sie sollen. Um auch ältere Browser die
neuen HTML5-Elemente interpretieren zu lassen, können
wir auf das von Google Code gehostete JavaScript-
Workaround HTML5Shiv zurückgreifen. Binden Sie es
wie folgt in den -Bereich von header.php ein:
001
15
Footer-Tags austauschen
Als Nächstes bearbeiten wir den Fußzeilenbereich.
Hierfür ist die Datei footer.php zuständig. Ersetzen
Sie darin das Tag durch das HTML5-Tag
. Anschließend nehmen Sie analog zu Schritt 12
die entsprechenden Änderungen im Stylesheet vor, das
heißt, #footer wird zu footer in der style.css.
001 /* =Footer
002 -----------------------------------
--------------------------- */
003 footer {
004 background: url(images/sprite_h.
png) left -952px repeat-x #111;
005 border-top: 1px solid #d5d5d5;
006 padding-top: 50px;
007 margin-bottom: 30px;
008 min-height: 80px;
009 position: relative;
010 color: #999;
011 }
012 #copyright {
013 margin: 0 20px 20px;
014 float: left;
015 width: 300px;
016 }
017 #copyright p{
018 margin-top: 10px;
019 }
16
Tag für Seitenleiste
Bei einem typischen WordPress-Blog enthält
die Seitenleiste (Sidebar) Zusatzinhalte. Das dafür oft
verwendete semantische HTML5-Tag heißt .
Öffnen Sie die Datei sidebar.php und ändern Sie in um. Die style.css brauchen Sie diesmal
nicht zu bearbeiten.
17
loop.php bearbeiten
Ein Blog besteht im Wesentlichen aus einer
Sammlung einzelner Postings. Statt wie bisher die
Beiträge durch -Tags voneinander zu trennen,
hält HTML5 auch hier eine semantische Alternative
bereit, das -Tag.
Öffnen Sie die Datei loop.php, und ersetzen Sie
darin die Zeile > durch den nachfolgenden
Code. Denken Sie auch wieder an das End-Tag
(von zu ).
001 >
18
Semantische Tags auf allen
Ebenen
Sie können die semantische Struktur auch innerhalb der
-Bereiche fortführen. Sie können direkt mit dem
Header des Beitrags beginnen.
19
Titel in Header verpacken
Suchen Sie den Code in der loop.php, der den
Titel des Blogs ausgibt. Ersetzen Sie hier jedoch keine
Tags, sondern platzieren Sie zusätzliche -Tags
um die h1-Tags herum (in unserem Beispiel Zeile 001
und 005).
001
002
003
004
005
20
Mehr Elemente
umbenennen
Verfahren Sie nach demselben Prinzip mit den anderen
Elementen der Seite. So könnten Sie beispielsweise
jedes Element innerhalb der Seitenleiste wiederum
in -, - und -Bereiche unterteilen.
Falls Sie im Fußzeilenbereich ein nach Spalten
angeordnetes Navigationsmenü haben, könnten Sie
jede Spalte mit einem eigenen -Tag versehen.
Behalten Sie bei all diesen Schritten jedoch die
grundsätzliche Hierarchiestruktur Ihrer Website im
Hinterkopf, das verbessert die Verarbeitung durch
Suchmaschinen.
21
Testen, testen, testen
Testen Sie Ihr überarbeitetes Theme. Prüfen
Sie, ob jedes Inhaltselement (Beiträge, Seiten, Permalinks,
Widgets und so weiter) nach wie vor richtig dargestellt
wird, auch in unterschiedlichen Browsern. Sehen
Sie sich insbesondere auch die Anzeige Ihrer Website
im Internet Explorer vor Version 9 an, denn hier lauern
oft Probleme.
Das große WordPress-Handbuch 97

Plug-ins
Funktionsumfang erweitern
100 Die besten Plug-ins für
WordPress
Holen Sie zusätzliche Features in Ihr Blog
112 WordPress-Plug-ins
bearbeiten
Passen Sie die Module Ihren Wünschen an
114 Bessere Performance durch
Optimierung
Steigern Sie die Leistung Ihrer WordPress-
Seite
118 Bauen Sie eine Infobox mit
Infos über den Verfasser als
Plug-in
So erstellen Sie ein WordPress-Plug-in
124 Erstellen Sie ein Plug-in für
ein Gewinnspiel
Ein Preisausschreiben auf Ihrem Blog
128 Leistungsfähige und
ansprechende Formulare
Verwenden Sie das paktische Plug-in
cformsII
130 Machen Sie Ihr WordPress-
Blog mehrsprachig
Multilinguale Unterstützung mit qTranslate
132 Schnelleres WordPress für
SEO und Besucher
Erhöhen Sie die Geschwindigkeit Ihres Blogs
SEITE
100
Top-Tipp
Mit einem
E-Commerce-Plug-in
können Sie Ihre
Website von einem
statischen Katalog in
einen interaktiven
Shop verwandeln.
Bei Zehntausenden
verfügbaren
Plug-ins können Sie
sicher sein, eines zu
finden, das zu Ihren
Bedürfnissen passt.
SEITE
118
SEITE
128
98 Das große WordPress-Handbuch

WordPress
Plug-ins
SEITE
130
SEITE
117
SEITE
132
SEITE
112
Das große WordPress-Handbuch 99

Plug-ins
100 Das große WordPress-Handbuch

WordPress
Plug-ins
Die besten
Plug-ins für
WordPress
WENN IHNEN DIE STANDARD-WORDPRESS-FEATURES NICHT AUSREI-
CHEN, IST ES ZEIT, ÜBER DEN TELLERRAND ZU SCHAUEN. MITHILFE VON
PLUG-INS ERREICHEN SIE MIT IHREM BLOG EINE GANZ NEUE EBENE.
WORDPRESS IST DIE beste vorhandene freie
Open-Source-Blogging-Software und bietet uns große
Flexibilität, eine bereits standardmäßig eine Vielzahl an
Optionen. Manchmal möchten Sie aber in der Lage sein,
auch andere Dinge zu tun. Vielleicht wollen Sie einen RSS-Feed anzeigen
oder einen Online-Shop anlegen. Oder vielleicht wollen Sie auch
Bilder in einer anderen Art und Weise anzeigen, als WordPress das
sonst macht.
Diese Funktionslücken füllen Plug-ins für WordPress auf, indem sie den
Funktionsumfang erweitern und es Ihnen so erlauben, den Funktionsumfang
des Blogs in tausend verschiedenen Arten zu erweitern. In
der Tat, mit mehr als 17.000 zurzeit erhältlichen Plug-ins können Sie
sich sicher sein, eines zu finden, das zu Ihren Bedürfnissen passt. Und
falls nicht, können Sie sich Ihr eigenes Plug-in erstellen – vorausgesetzt,
Sie besitzen die erforderlichen Kenntnisse.
Wir werden uns insgesamt zehn verschiedene Kategorien von Plugins
ansehen. Diese Übersicht ist bei weitem nicht vollständig, aber wir
führen das auf, was wir als die wichtigsten fünf Plug-ins für jede Kategorie
halten. Dabei zeigen wir nicht nur, welche neuen Funktionen diese
Ihrer Seite hinzufügen, sondern auch die schiere Vielfalt, die es
unter den Plug-ins gibt.
Es ist sehr einfach, ein Plug-in zu installieren. Dazu gibt es zwei Wege:
automatisch oder manuell. Die erstere ist die einfachste Methode.
Dazu klicken Sie einfach auf „Add new“ unter Plug-ins und durchsuchen
das Plug-in-Verzeichnis. Installieren Sie das gewünschte und aktivieren
Sie es. Manuelle Installationen sind schwieriger. Diese können
über WordPress oder über einen FTP ausgeführt werden. Normalerweise
sind diese Plug-ins nicht über das Verzeichnis zu finden. Alle
Plug-ins können deaktiviert werden, sodass Sie ohne Sorge damit
rumspielen können. Viel Spaß!
Das große WordPress-Handbuch 101

Plug-ins
E-Commerce
DaS GeLDVerDIeNeN KaNN DUrCh
eIN PLUG-IN eINFaCher werDeN
Früher war DaS aufsetzen einer kommerziellen
website teuer und umständlich.
Mit der Hilfe von Plug-ins für Word-
Press wird dies sehr viel einfacher, weshalb
Sie mehr Zeit haben, Gewinn mit Ihrer
Unternehmung zu erwirtschaften. Nahezu
alle Plug-ins arbeiten mit PayPal oder anderen
Zahlungsdienstleistern zusammen,
sodass Sie Ihre Seite innerhalb von Minuten
aufgesetzt und am Laufen haben und
schnell ein komplettes Einkaufserlebnis
bieten können. Das Gleiche gilt für Auktionen
oder einfachen „Dem Warenkorb hinzufügen“-Funktionen.
Das Schöne an diesen
Plug-ins ist, dass sie mit Ihrem eigenen
Design arbeiten, sodass Ihre Seite als ein
professionelles Ganzes wirk, und der Shop
als Teil Ihres Blogs erscheint. Einige Plugins
erlauben es auch, andere URLs zu verlinken,
falls Ihre Produkte dort gehostet
werden. Das ist ein Vorteil, wenn Sie beispielsweise
Kindle-E-Books oder Apps verkaufen
möchten – und das gesammelt an
einem Ort.
Fast alle Plug-ins arbeiten mit PayPal
oder anderen Zahlungsdienstleistern
zusammen, sodass Sie Ihrer Seite innerhalb
von Minuten aufgesetzt haben.
Quick Shop
wordpress.org/plugins
eShop
Quirm.net
Dank des umfangreichen
Wikis werden Sie sich bei den
ersten Schritten mit dem
eShop-Plug-in sehr gut fühlen.
Das Wiki werden Sie aber
nicht oft benötigen. Das Plugin
erstellt automatisch sechs
Seiten, vom Warenkorb bis
zum Bezahlvorgang und der
Dankeschön-Seite. Sie nutzen
WordPress-Postings, um Produkte
zu erstellen, und die
integrierten Statistikfunktionen,
um sie zu überwachen.
Für dieses Plug-in müssen Sie die Sidebar-Funktion installiert haben.
Sobald Sie den Shop eingerichtet haben, ist PayPal-zahlung für Kunden
möglich. Das alles gelingt mit einem sehr kurzen Zeitaufwand. Es ist nicht
das am weitesten verbreitete Plug-in, allerdings hat es die obligatorische
Bezahlseite und Sie können sich schnell einarbeiten.
WP e-Commerce
GetShopped.org
WP e-Commerce ist ein etabliertes und vielseitiges Plug-in, welches von sich
selbst behauptet, zu 100 Prozent konfigurierbar zu sein. Mit etwas hTML- und
CSS-Code adaptieren Sie das Plug-in für Ihren eigenen Gebrauch. Zudem gibt es
kein Limit über die maximalen Verkäufe. Das hinzufügen von Produkten ist sehr
einfach. es gibt viele Optionen für jede art von Listung: inklusive Namen,
Gewicht, Preis, reduzierter Preis und Lagerstand. Sie können auch auf andere
Seiten verlinken, wenn das Produkt nicht direkt auf Ihrer Seite erhältlich ist. Das
Plug-in reduziert die Seiten, die ein Kunde bis zum Bezahlvorgang durchklicken
muss, was Sie ermutigt, den kompletten Vorgang durchzugehen. Das Plug-in
arbeitet auch mit Google Checkout, Paypal und Payment express sowie auch
anderen Diensten zusammen. wP e-Commerce besitzt ebenfalls schlaue
Lieferoptionen. Die Qualität des Service hängt davon ab, wie viel Sie bezahlen,
das Plug-in ist allerdings einer unserer Favoriten.
WP Auctions
WPauctions.com
Auktionen sind immer noch eine der verlockendsten Möglichkeiten für
einen Kunden zum Einkaufen. WP Auctions verleiht Ihrer Seite die Fähigkeit,
gebotsbasierte Verkäufe auf Ihrer Seite zu hosten. Das Plug-in unterstützt
nur PayPal. Das diese aber eine großer Zahlungsanbieter sind, sollte
das kein Problem darstellen. Der größte Vorteil ist, dass das Plug-Ihrer
Seite ein erfrischendes Aussehen verleiht.
WooCommerce
wordpress.org/plugins
Verwandeln Sie Ihre WordPress-Website in einen vollwertigen Online-
Shop. Das Plug-in bietet eine Qualität und Features auf einem unternehmerischen
Niveau und wird von einem Namen getragen, dem Sie vertrauen
können. Sagen Sie „Hallo“ zum WooCommerce eCommerce-Plug-in.
102 Das große WordPress-Handbuch

WordPress
Plug-ins
Mobile
AucH SMARTPHONE-ANWENDER SOLLTEN
IHRE SEITE PERFEKT NuTZEN KÖNNEN.
EINE IMMER GRÖSSERE ANZAHL von Nutzern greift mit dem
Mobiltelefon auf das Internet zu. In der Tat, mit der steigenden
Beliebtheit von hochmotorisierten Smartphones, welche mehr oder
weniger alles können, was auch ein PC oder Laptop schafft, schalten
immer weniger Nutzer ihren PC ein. Deshalb ist es wichtig, dass
Smartphone-Nutzer, welche Ihre Seite besuchen, sie in der bestmöglichen
Art und Weise sehen. Anstatt dass Nutzer auf der Seite, auf der
sie hineingezoomt haben und zu navigieren versuchen die übergroßen
Bilder mit dem Finger umherschieben müssen, können Sie auch
ein Plug-in nutzen, das erkennt, ob jemand ein Smartphone nutzt. Die
Seite wird dann so angepasst, dass sie sich gut auf dem Smartphone
nutzen lässt. Verschiedene Plug-ins tun verschiedene Dinge. Manche
behalten Ihr Website-Theme, manche verwenden ein Smartphonefreundliches
Theme, manche nehmen einfach Ihre Einträge und listen
sie auf eine Weise auf, durch die sie einfach überflogen und geöffnet
werden können. Abhängig davon, wie viel Einfluss Sie über das haben
wollen, was die Nutzer sehen, können Sie auch auf ganz einfache
Plug-ins zurückgreifen: solche, die Bilder entfernen, um das Surfen zu
beschleunigen, oder solche, die Ihnen alle Optionen für eine wirklich
angepasste Benutzererfahrung geben.
WPtouch
Bravenewcode.com
Wenn Sie Ihre Seite für Telefone optimieren
wollen, geht es nicht besser als mit
WPTouch. Deaktivieren Sie es und auf den
Mobiltelefonen der Besucher wird die normale
Seite sichtbar sein. Aber nach der Aktivierung
werden Sie ein klarere,
mobilfreundliche Version der Seite sehen,
welche Ihre Blogs in einer Liste anzeigt. Ein
Klick auf einen Listenpunkt öffnet den zugehörigen
Beitrag. Natürlich hört es hier nicht
auf. Sie können das Admin-Panel nutzen,
um die Erscheinung der Smartphone-Version
zu verändern – das beinhaltet das
Ändern des Titels, der Hauptseite, Textausrichtung
sowie der Fußzeile. Sie können
bestimmte Kategorien und Tags ausblenden
und es gibt eine Reihe von fortgeschrittenen
Optionen. Es gibt eine kostenpflichtige
Pro-Version des Plug-ins, welches eine
weitergehende Personalisierung der Seite
mit mehr Stilen und Farben erlaubt. Für
jene, die es unkompliziert wollen, ist
WPTouch das richtige Werkzeug.
MobileChief
WordPress Plugin Directory
MobileChief ist ein erweiterbarer Baukasten für mobile Webseiten, welcher dem Nutzer
hilft, mobile Startseiten und Unterseiten mit einem Drag&Drop-Interface zu erstellen.
MobileChief unterscheidet sich von anderen Plug-ins dadurch, dass es nicht nur vorhandene
Inhalte konvertiert, sondern auch die Erstellung eigener Inhalte speziell für die
mobile Seite ermöglicht.
Mobile
Detector
wordpress.org/plugins
Ein sehr cleveres Plug-in, welches
gleich vom Start weg beeindruckt. Statt
sein eigenes Theme anzuzeigen, skaliert
es Ihre eigenen WordPress-Seiten,
sodass sie auf einen Mobil-Bildschirm
passen. Sie sehen aus, als wäre sie eine
speziell für das Smartphone entworfene
Seite. Das sorgt dafür, dass Ihr Branding
erhalten bleibt.
WP Mobile
Detector
Websitez.com
WP Mobile Detector bietet ein schönes Angebot an Einstellungen:
Zum einen für sehr grundlegende Mobilseiten,
wo alle Bilder und höhere HTML-Funktionen aus der
Seite entfernt werden, und zum anderen für fortgeschrittene
Smartphones, für die Bilder, die zu groß sind,
skaliert werden. Sie können WP Detector auf der Seite
einsetzen, das Plug-in aber auch entfernen. Zudem können
Sie auch mobile Statistiken aufzeichnen.
WordPress Multi
Site Mobile Edition
wordpress.org/plugins
Mit dem Carrington-basierten Mobile-Theme vorinstalliert,
aber nicht aktiviert, zeigt dieses Plug-in eine
saubere Seite für Mobiltelefone an. Der Effekt ist clever,
wenn auch nicht funktional, macht das Navigieren
und das Durchsuchen der Seite auf dem Telefon
aber sehr einfach. Es funktioniert auf einer großen
Anzahl von Smartphones.
Das große WordPress-Handbuch 103

Plug-ins
Analyse
WERDEN SIE EIN RICHTIGER STATISTIKER,
INDEM SIE DIE ENTWICKLUNG IHRER
SEITE VERFOLGEN
EINE WEBSITE ZU BETREIBEN, ist viel mehr, als
nur neuen Inhalt hinzuzufügen. Wenn Sie es ernst
meinen, brauchen Sie etwas, um die diversen Aspekte
rund um Ihr Blog zu analysieren: Wer besucht das
Blog, wann kommen die Nutzer auf die Seite und wie
lange bleiben sie? Sie wollen in der Lage sein, die
Seite nicht nur dahingehend zu optimieren, dass
neue Besucher angezogen werden, sondern auch
so, dass das Interesse von Werbenden geweckt wird.
Je mehr Menschen Ihre Seite besuchen und je besser
Sie bei der Analyse Ihrer Statistiken sind, desto
eher können Sie einen ausgewogenen Service bieten.
Von allen Statistik- und Analyse-Addons ist Google
Analytics der Platzhirsch. Extrem umfangreich bietet
es verständliche Statistiken noch und nöcher. Sie
werden niemals in die Situation geraten, eine Entwicklung
oder das Fallen von Besucherzahlen auf
Ihrem Blog nicht erklären zu können.
Google Analytics
for WordPress
wordpress.org/plugins
Google Analytics ist der Premium-Statistik-Tracker und Analyse-
Werkzeug und mit diesem Plug-in von Yoast ist die Installation eine
einfache Angelegenheit. Installieren Sie es und beginnen Sie, Besucher,
Klicks, Unique Visits und mehr zu erfassen. Das Plug-in benutzt
den asynchronen Google Analytics Code, den Google Analytics anbietet.
Dieser gilt als der schnellste und verlässlichste Tracking-Code, den
Google Analytics anbietet. Es gibt die Option, den Tracking-Code manuell
an anderen Orten zu integrieren, sodass Sie für mehr als eine Seite
Statistiken erhalten. Für fortgeschrittene Benutzer besteht zudem die
Option, eigene Variablen zu verwenden und Suchmaschinen zu tracken,
welche nicht in Google Analytics Standardumfang integriert sind.
WP SlimStat
WordPress Plugin
Directory
Das Schöne an SlimStat ist, dass es Ihre Website
analysiert und die Informationen auf dem Admin-Panel
zur Verfügung stellt, sodass Sie nicht irgendwo
anders hin müssen. Es loggt Bildschirmauflösungen,
bekannte Kommentatoren und facebookartige
Klicks („Like“). Sie können Sich die Statistiken auch
auf dem Mobiltelefon ansehen.
trendcounter Stats
for WordPress
wordpress.org/plugins
Nachdem Sie sich für einen trendcounter-Account angemeldet
haben, kann dieses Plug-in sehen, wie viele Nutzer Ihre
Seite besuchen. Sie können sogar feststellen, aus welchem
Land sie stammen. Sie bekommen außerdem einen Code,
der – in Ihre Webseite integriert – die Trendcounter-Informationen
in der Kopf- oder Fußzeile Ihrer Webseite anzeigen.
Word Stats
wordpress.org/plugins
Obwohl dafür bezahlen müssen – die Kleinigkeit von 2 Euro – ist
Word Stats eine gute Möglichkeit zum Analysieren Ihres Texts.
Sie können die Gesamtanzahl der Worte herausfinden, jedes
Keyword, das Sie benutzen und alles in Grafiken anzeigen. Es
gibt sogar eine Analyse zum Schwierigkeitsgrad Ihrer Beiträge.
Graphical
statistics report
wordpress.org/plugins
Dieses Statistik-Plug-in gibt Ihnen unkompliziert
Informationen, beispielsweise die Anzahl der
Beiträge während eines Monats, die Anzahl der
bisher abgegebenen Kommentare und wie viele
Nutzer sich bisher registriert haben. Die
Anzahl der Beiträge für jede Kategorie wird auch
angezeigt. Es ist einfach benutzbar und kann
über die Einstellungsseite aufgerufen werden.
104 Das große WordPress-Handbuch

WordPress
Plug-ins
SEO
BETREIBEN SIE
SUCHMASCHINENOPTIMIERUNG
ES IST GUT, eine auf Hochglanz polierte Website
zu haben. Wenn aber niemnd weiß, dass sie existiert,
war Ihre Arbeit umsonst. SEO (Search Engine
Optimization = Suchmaschinenoptimierung) hilft
Ihnen, die Sichtbarkeit Ihrer Website für Suchmaschinen
wie Google zu verbessern. Je effektiver Ihre
Seite SEO-optimiert ist, desto wichtiger wird sie von
den Suchmaschinen eingestuft. SEO-Optimierung
kostet nichts und ist ein effektives Marketing-Tool.
Die besten Plug-ins stellen sicher, dass Sie nicht
zurückfallen. Graphen zeigen, wie effektiv Ihre
Schlüsselwörter sind und welche Sektionen Besucher
aufrufen. Das ermöglicht es, den Inhalt anzupassen,
sodass Sie hoffentlich noch mehr Besucher
verzeichnen. Manche Plug-ins verlinken clever
andere Beiträge, während andere Ihnen eine E-Mail
schreiben, wenn sie einen Trend erkennen, von
dem sie denken, dass er es wert ist, hervorgehoben
zu werden. Diese Plug-ins erledigen viel Arbeit,
sodass Sie sich auf Inhalte konzentrieren können.
SEO Rank
Reporter
wordpress.org/plugins
Wenn Sie wissen möchten, wie effektiv Ihre Website beim
Anziehen neuer Leser ist, kann es hilfreich sein, Schlüsselwörter
auf Ihrem Blog tracken zu können. Der SEO Rank
Reporter generiert alle drei Tage einen vollen grafischen
Bericht, über den Sie sofort erkennen, wie effektiv die Schlüsselwörter
Verkehr auf Ihre Seite umlenken. Es kontrolliert, wie
wichtig die Suchmaschinen bestimmte Schlüsselwörter einstuft,
und meldet sich bei Ihnen, falls eines der Schlüsselwörter
seine Einstufung plötzlich in einer unverhältnismäßig starken
Weise verändert.
Das Aufsetzen des Plug-ins geht blitzschnell, Sie müssen nur die
URL und die Schlüsselwärter angeben. Danach lehnen Sie sich
zurück, überwachen alles und verbessern die Schlüsselwärter so
lange, bis Sie eine erfolgreiche Balance finden. Es ist auch möglich,
Ihre Seite mit Mitbewerbern zu vergleichen, womit Sie einen
vollständigen Blick auf das Abschneiden Ihrer Seite erhalten. Die
Daten lassen sich als CSV-Datei herunterladen.
Plug-ins lassen Sie wissen,
wie effektiv die Schlüsselwörter
Traffic auf Ihre Seite
umlenken
SEO Ultimate
wordpress.org/plugins
SEO Ultimate platziert die Titel Ihrer Beiträge
im -Tag, um die SEO mittels Schlüsselwörter
zu verbessern. Es ändert auch das
-Schlüsselwort und die Beschreibung.
All das und noch mehr machen aus
SEO Ultimate eine sehr effektive Sammlung
von Werkzeugen. Auch wenn etwas Knowhow
braucht, kann es in Sachen Traffic
einen großen Unterschied machen.
The WordPress
SEO plugin
wordpress.org/plugins
Das Plug-in wurde von Grund auf vom Team
bei Yoast geschrieben, um alle SEO-Aspekte
einer Seite zu verbessern. Das Plug-in macht
den zusätzlichen Schritt, alle technischen
Optimierungen zu berücksichtigen, inklusive
eines besseren Inhalts. WordPress SEO
zwingt den Nutzer, sich für ein Haupt-
Schlüsselwort zu entscheiden, und stellt
sicher, dass das Wort auch verwendet wird.
SEO Smart
Links
wordpress.org/plugins
Indem es automatisch die Schlüsselwörter
vorheriger Beiträge und Seiten miteinbezieht,
behandelt SEO Smart Links Ihre Website
in ihrer Gesamtheit. Sie kann sich so mit
anderen Websites verbinden und mit Affiliate-Links
arbeiten. Beim Einstellen dieser
Dinge über das Admin-Panel wird es keine
Probleme geben. Hier handelt es sich um ein
schlaues Plug-in.
Google XML
Sitemaps
wordpress.org/plugins
Beim SEO geht es darum, dafür zu sorgen,
dass die Suchmaschine Ihren Blog gut indexieren
kann. Dieses Plug-in funktioniert mit
Google, Bing, Yahoo! und anderen und vereinfacht
es, Ihr Blog zu „crawlen“ und seine
Struktur zu verstehen. Auf diese Weise wird
die Seite höher eingestuft. Zudem werden
Suchmaschinen über neue Inhalte informiert.
Das große WordPress-Handbuch 105

Plug-ins
Soziales
BLEIBEN SIE NICHT ALLEINE. INDEM SIE EINE
COMMUNITY AUFBAUEN, KÖNNEN SIE WACHSEN.
WEBSITES ARBEITEN nicht isoliert. Soziale Netzwerke sind aktuell
sehr beliebt und werden ohne Zweifel die Zukunft mitbestimmen. Im
Internet geht es darum, Inhalte zu teilen und als Ganzes zusammenzuarbeiten,
um so erfolgreich zu sein und die Menschen über Ihre Website
sprechen zu lassen. Es ist wirklich wichtig, miteinbezogen zu werden.
Es gibt eine Menge von sozialen WordPress-Plug-ins, welche sich in
Facebook, Twitter und andere populäre Seiten einhängen. Es finden
sich aber auch Plug-ins, die es erlauben, andere Leute von Social Networks
auf Ihre Seite zu ziehen.
Es gibt eine Menge von
sozialen WordPress-Plug-ins,
welche sich in Facebook,
Twitter und andere populäre
Seiten einhängen.
Sociable
wordpress.org/plugins
Obwohl es schon seit einigen Jahren angeboten wird, ist Sociable immer
noch ein großer Mitspieler und die erste Wahl für jeden Blogger, der sich die
Integration in ein soziales Netzwerk wünscht. Sie können aus Dutzenden
Media-Seiten auswählen, alles was Sie tun müssen, ist ein Haken neben den
gewünschten zu setzen.
Alle der großen Seiten sind vorhanden. Sie können Twitter, Facebook und LinkedIn
auf Ihrem Blog einblenden. Die Icons lassen sich von 16 x 16 auf bis zu 64
x 64 Pixel skalieren. Deren Stil ist anpassbar. Sie können festlegen, wo sie
erscheinen sollen, auch auf der Homepage. Sie können auch Ihre eigenen Icons
nutzen, wenn Sie möchten.
Sie können Sicherstellen, dass die Menschen Ihre Seite als Platz sehen, wo sie
miteinander kommunizieren können, indem Sie ein universelleres Kommentarsystem
wie etwa Disqus integrieren. So bleibt es dem Nutzer erspart, sich bei
zig Websites anzumelden und es wird wahrscheinlicher, dass er einen Kommentar
hinterlässt.
Digg Digg
wordpress.org/plugins
Digg Digg ermöglicht es Ihnen,
eine Vielzahl an Social-Media-Buttons
auf Ihrer Seite zu platzieren.
Es bedient alle großen Namen
sowie einige kleine. Es gibt Twitter
und Facebook wie auch LinkedIn,
Google und Digg. Es bringt der
Einfachheit halber ein eigenes kleines
Admin-Panel mit.
Social
Media
Widget
wordpress.org/
plugins
Dieses Plug-in erstellt ein Widget,
das Sie in Ihre Sidebar ziehen
können. Indem Sie die
URLs Ihrer Profile eingeben,
können Sie die Social-Media-Seiten
einbinden, auf denen Sie
aktiv sind. Dazu zählen Twitter,
MySpace und Flickr. Es braucht
keinen Doktortitel, um die knappen
Optionen zu verstehen.
Facebook
wordpress.org/
plugins
Das Facebook-Plug-in fügt der
WordPress-Seite Facebook-Funktionen
hinzu. Damit lässt sich
eine Seite in einen Facebook-Account
integrieren, sodass neue
Beiträge auf der Seite automatisch
über den Account des
Autors auf der Facebook-Timeline
oder einer eigenen Seite
geteilt werden. Das Plug-in wurde
von Facebook entwickelt und
bietet auch Unterstützung für
andere Plug-ins.
Disqus
Comment
System
wordpress.org/
plugins
Das Disqus Comment System ist ein
Austauschsystem für die in Word-
Press vorhandene Kommentarfunktion.
Wenn Sie öfter mal auf anderen
Seiten Artikel kommentieren, werden
Sie dieses oft eingesetzte Plug-in
bereits kennen. Es zu nutzen ermutigt
mehr Nutzer, einen Kommentar
zu hinterlassen, und hilft so, ein soziales
Umfeld auf der Seite zu schaffen..
106 Das große WordPress-Handbuch

WordPress
Plug-ins
Bildergalerien
BILDER SAGEN MEHR ALS
TAUSEND WORTE. SETZEN SIE SIE
ALSO GUT IN SZENE
BILDER SIND SEHR wichtig für ein Blog. Sie
bringen Leute zum Sprechen und sind ein einfacher
Weg, ansprechenden Content hinzuzufügen,
entweder als eigenständige Bilder oder um
einen Standpunkt zu illustrieren. Plug-ins kommen
grob gesagt in zwei Geschmacksrichtungen:
Es gibt solche, welche die Art verbessern,
mit welcher Ihre Bilder angezeigt werden, und
solche, welche den Upload und die Verwaltung
einfacher machen.
Das Zeigen von Bildern auf Ihrer Seite kann
sofort einen professionellen Eindruck erzeugen,
der Ihr Blog von amateurhaften Angeboten herausstechen
lässt. Warum nicht mal vergrößerte
Bilder ausprobieren, welche aus der Seite herausspringen
und alles andere Verdunkeln, wenn
man sie anklickt?.
Natürlich können Bilder Ihre Seite verlangsamen,
besonders, wenn Sie viele davon haben. Wir
werfen aber nur einen Blick auf jene Plug-ins, die
diesem Problem ausweichen und Bilder nur
anzeigen, wenn sie feststellen, dass ein Besucher
eines davon sieht. Damit wird die Benutzererfahrung
des Besuchers verbessert.
WP Photo
Album Plus
wordpress.org/plugins
Es macht Ihnen die Arbeit einfacher: WP Photo Album verbessert
den Foto-Upload, bietet eine komfortable Bildverwaltung
und zeigt Bilder innerhalb von WordPress an. Es erstellt einen
Unterabschnitt im Admin-Bereich und lässt Sie schnell ein neues
Album erstellen und die dazugehörigen Bilder hochladen. Bilder
können zwischen Alben verschoben und falls nötig auch gelöscht
werden. Sie können die Größe der Vor- und Vollansichten anpassen
und die Maximalgrößen von beiden Werten verändern.
Obwohl das alles nicht die eigentliche Erscheinung des Blogs
betrifft, stellt es sicher, dass die harte Arbeit, die hinter den
Kulissen abläuft, weniger aufwendig ist. Das bedeutet, dass
Sie sich mehr auf die Beschaffung der Inhalte konzentrieren
können, anstatt sich mit der zeitaufwendigen Bilderverwaltung
herumzuschlagen.
Image Gallery
Reloaded
wordpress.org/plugins
Image Gallery reloaded ist ein jQery-basiertes
Plug-in, das die standardmäßig integrierte
Galerie durch eine hoch anpassbaren
Galerie ersetzt. Es bietet eine Reihe von
Features, inklusive der Möglichkeit, die Bilder
in der Galerie, die Größe der Voransicht
und die Übergangseffekte zu bestimmen.
Sie können das Design der Galerie an das
aktuelle Theme anpassen und eigene Farben
über den Color-Picker auswählen.
NextGEN
Gallery WP Lightbox 2
wordpress.org/plugins
Dieses wundervolle Galerie-Plug-in fügt
seine eigenen Abschnitt in das Wordpress-Admin-Panel
ein, über welches Sie
Galerien und Alben verwalten einfach
können. Es ist sehr beliebt, sodass Sie
ohne Zweifel mit seinen Effekten vertraut
sein dürften. Flexibel und umfassend,
zusätzlich mit einer Wasserzeichen-Funktion,
gehört das Plug-in definitiv zu den
besseren.
wordpress.org/plugins
Wenn Sie Ihre Besucher beeindrucken
möchten, sollten Sie dieses Plug-in verwenden.
Sie können Bilder als Overlay
anzeigen, während der Rest der Seite verdunkelt
wird. Zusammengehörige Bilder
können miteinander verbunden werden.
Die wenigen Optionen sorgen dafür, dass
Sie es unglaublich schnell in den Griff
bekommen. Die Besucher Ihrer Seite werden
beeindruckt sein.
Bilder auf Ihrer Seite erzeugen
sofort einen professionellen Eindruck,
der Ihr Blog von amateurhaften Angeboten
herausstechen lässt
WordPress
Content Slide
wordpress.org/plugins
Indem Sie eine jQuery-Slideshow mit diesem
Plug-in erstellen, heben Sie das Niveau
Ihrer Seite. Es gibt eine Vielzahl von Funktionen,
die von der Größe der Bilder bis hin zu
den Möglichkeiten reichen, mit den der
Besucher der Seite mit Ihren Bildern interagieren
kann. Wenn Sie viele Bilder anzeigen
müssen, gibt es nur wenige Alternativen.
Das große WordPress-Handbuch 107

Plug-ins
RSS
SCHNAPPEN SIE SICH SOFORTIGE,
AUTOMATISCH AKTUALISIERTE INHALTE
FÜR IHRE WEBSITE
VIELE WEBSITES HABEN heutzutage RSS-
Feeds. Sie werden das bekannte orangenfarbene
Logo auf vielen News-Seiten finden, über das Sie
einen Feed beziehen und so einzelne Seiten einfacher
überwachen können. Mit dem RSS-Feed
müssen Sie eine Seite nicht mehr besuchen. Sie
werfen einfach einen Blick auf die Schlagzeile und
entscheiden, ob Sie die Nachricht lesen wollen.
RSS-Feeds können aber auch in die andere Richtung
verwendet werden. Mit einem RSS-Plug-in
bringen Sie relevante RSS-Feeds in Ihre Website
und zeigen sie dort an. Wenn jemand einen neuen
Beitrag erstellt, erscheint er auf Ihrer Seite. Es
ist ein sofort eingefügter Inhalt, der sich Ihrem
Angebot anfügt und für weitere Gründe sorgt,
Leute auf Ihre Website einzuladen. Es eignet sich
auch, um auf die Arbeit anderer Leute hinzuweisen.
Manche RSS-Plug-ins sind einfacher als andere
zu verwenden. Die besten sehen so aus, als
wären sie ein nahtloser Teil Ihrer Seite. Sie sind
dabei nicht auf Wörter beschränkt: Video-RSS-
Feeds sehen sehr gut aus.
RSS Just Better
WordPress Plugin Directory
Dieses Plug-in zeigt eine Liste von Feed-Elementen einer
angegebenen Feed-URL-an. Es ermöglicht dem Nutzer, eine
Frequenz anzugeben, nach der der Zwischenspeicher neu
angelegt wird. Zudem lässt sich die Anzahl der anzuzeigenden
News festlegen, ob (und in welchem Format) das Veröffentlichungsdatum,
ein Auszug aus dem Text und ein Verweis
auf die Plug-in-Seite angezeigt werden soll.
Der Benutzer kann auch festlegen, ob er eine geordnete
(nummerierte) oder eine unsortierte Liste haben möchte, ob
die Beiträge in einem neuen oder im gleichen Fenster geöffnet
werden sollte, wenn die Links angeklickt werden. Es kann
auch ein Titel im Feed angezeigt werden. Es lässt sich genau
festlegen, wie lange eine Schlagzeile sein darf. Diese Option
wird auch auf einen möglichen Auszug angewandt, wo eine
bestimmte Anzahl an Zeichen festgelegt werden kann. Elemente
können auch nach Datum oder Zeit geordnet werden.
WP Social
Blogroll
wordpress.org/
plugins
Wenn Sie RSS-Feeds von anderen
Seiten haben, welche Sie
integrieren möchten, ermöglicht
WP Social Blogroll das
Anzeigen. Es läuft in der Sidebar
und fügt Ihrer Seite etwas
dynamischen Content hinzu.
Es ist etwas haarig einzurichten
– Sie brauchen einen Google-API-Key
– aber es ist es wert.
WP RSS
Multi
Importer
wordpress.org/
plugins
Eine Alles-in-einem-Lösung
zum Importieren, Zusammenführen
und Anzeigen fon RSSund
Atom-Feeds. Damit können
Nutzer Blog-Beiträge aus
Feed-Elementen und eigene
Vorlagen erstellen.
Super RSS
Reader
wordpress.org/plugins
Super RSS Reader ist ein
RSS-Reader-Widget, das Feeds
mit Stil anzeigt. Das Plug-in
nutzt den jQuery Easy Ticker,
der einen neuen Ticker-Effekt
hinzufügt. Es gibt die Option,
mehrere Feeds in einem einzelnen
Widget anzuzeigen
und den Stil durch eingebaute
solche zu verändern.
WP RSS
Poster
wordpress.org/plugins
Ein einfacher Weg, um einen
Beitrag aus multiplen RSS-
Quellen zu erstellen, ist ein
geschätztes Feature. WP RSS
Poster erlaubt es Benutzern,
ihre beliebtesten Artikel hinzuzufügen.
Es gibt die Option
zum Festlegen von Beitragskategorien,
dem Hinzufügen
des Namens vom Autor und
dem Veröffentlichungsdatum.
108 WordPress Das große WordPress-Handbuch
Genius Guide

WordPress
Plug-ins
Themes
GENIESSEN SIE EINEN NEUEN LOOK OHNE
DEN STRESS DES WECHSELNS
SIE KÖNNEN EWIGKEITEN dafür aufgewendet haben, ein Theme zu finden
und zu bearbeiten. Aber es kommt definitiv die Zeit, wo eine Auffrischung
nötig wird und ein anderes Design hermuss. Das Problem an der
Sache ist, dass das Wechseln des Themes Probleme für Ihre Besucher mit
sich bringen kann. Ihre Seite könnte in einem neuen Gewand anders dargestellt
werden, als es mit dem alten Design der Fall war, das Ergebnis könnte
ein Durcheinander sein. Mit einem Plug-in testen Sie das neue Aussehen
und können es auf Fehler überprüfen, bevor es live geht. So können Sie daran
herumbasteln und gleichzeitig sicher sein, Ihre Experimente nicht von
der ganzen Welt gesehen werden. Es ist auch eine gute Lösung für Web-
Entwickler, Kunden ein neues Design vorzuführen, ohne gleich den Betrieb
der existierenden Seite zu unterbrechen.
Ist der Wartungsaufwand so groß, dass Sie Besucher Ihrer Seite zeitweise
umleiten müssen, gibt es auch dafür Plug-ins. Alles, was Sie tun müssen, ist
es, dem Plug-in mitzuteilen, wo Sie die Leute hinleiten möchten. Besucher
Ihrer Website landen am besagten Ort, während Sie auf Ihrer Seite freie
Bahn für die Umbauten haben.
Theme Test Drive
wordpress.org/plugins
Wenn Sie das Theme Ihres Blogs ändern, artet das oft in
Versuch und Scheitern aus, was wiederum in der Sorge
resultiert, dass Änderungen während der Zeit der
Umstellung Ihr Blog ins Chaos stürzen könnten. Es wäre
sehr viel einfacher, wenn man ein Theme auf etwaige Fehler
testen könnte. So würde man sich auch die Peinlichkeit
ersparen, den Nutzern einen ständigen Wechsel von Themes
zu zeigen, bis man sich für eines entschieden hat.
Theme Test Drive ist die Lösung. Indem Sie dieses Plug-in
für die Installation eines Themes verwenden, können Sie
neue Themes ausprobieren, ohne dass Ihre Besucher
etwas davon mitbekommen. Diese sehen weiterhin die alte
Version der Seite, während Sie im Admin-Panel Themes
ausprobieren und an den Optionen rumspielen können.
Die Änderungen können Sie über die die Sofort-Vorschau
begutachtet werden oder indem Sie an die URL den Parameter
?theme=xxx anhängen.
Device
Theme
Switcher
wordpress.org/
plugins
Ein reaktionsschnelles Design ist
eine Schlüsselkomponente moderner
Websites, und Device Theme
Switcher hilft dabei. Das Plug-in
erstellt eine neue Seite, die spezielle
Themes für Handy- und Tabelt-Besucher
ausgibt. Damit ist Device Theme
Switcher ideal für Design-Entwickler,
die eigene Mobile-Themes
erstellen möchten.
JetPack
wordpress.org/
plugins
JetPack wird als WordPress-Plug-in
beschrieben, welches Ihre selbstgehostete
WordPress-Site mit der
großartigen Cloud-Kraft von Word-
Press.com lausstattet. Es bietet eine
Vielzahl von Plug-ins, welche dazu
verwendet werden können, um
Kommentare zu überwachen, Gravatare
hinzuzufügen, zu steuern,
welche Widgets auf welchen Seiten
erscheinen sollen, eigenen CSS-
Code oder unendliches Scrollen zu
ermöglichen.
CGC
Maintenance
Mode
Codecanyon.net
Wenn Sie größere administrative
Änderungen an Ihrem Blog durchführen,
wünschen Sie sich, dass
das resultierende Durcheinander
nicht für jeden sichtbar ist. Benutzen
Sie CGC Maintenance Mode,
um unautorisierte Nutzer auf eine
andere URL oder WordPress-Seite
umzuleiten. Sie können einzelnen
Nutzern Zugang gewähren, indem
Sie Ihre IP-Adresse zulassen.
User
Switching
lud.icro.us
Sie können dieses Plug-in verwenden,
um zwischen Benutzer-Accounts
umzuschalten. Ein Word-
Press-Account wird ausgeloggt, ein
anderer eingeloggt. Falls Sie also
beispielsweise ein Konto zum Testen
haben, können Sie durch einen
Knopfdruck sehr schnell vom
einen zum anderen springen.
Das große WordPress-Handbuch Genius Guide 109

Plug-ins
Seitenleiste
LASSEN SIE IHRE SEITE MIT EINIGEN GROSSARTIGEN
SIDEBAR-ZUSÄTZEN HERVORSTECHEN
WIR HABEN BEREITS gesehen, wie flexibel WordPress ist und dass
wir mit den 50 Plug-ins hier nur an der Oberfläche kratzen. Die Sidebar
ist der beste Ort, um etwas von der Individualität Ihres Blogs zu
zeigen. Dabei handelt es sich um das Menü, welches sich an der linken
oder rechten Seite (und manchmal an beiden) befindet. Oft ist es bis
zum Bersten mit Informationen zu Ihrer Website vollgepackt, zusammen
mit Unmengen an Widgets, welche die Funktionen erweitern und
dafür sorgen, dass die Besucher auch wieder zurückkommen.
Sie können die Sidebar dafür benutzen, um Werbung unauffällig anzuzeigen,
sodass sie nicht zu sehr von den eigentlichen Inhalten ablenkt.
Der Schlüssel ist, eine Balance zu finden. Packen Sie sie mit zu vielen
Dingen voll, wirkt es amateurhaft, als würden Sie es zu sehr versuchen.
Versuchen Sie die richtige Mischung aus, indem Sie dort sich ergänzende
und relevante Widgets und Plug-ins einfügen, und Ihr Blog wird
besser aussehen.
Add Link to Facebook
wordpress.org/plugins
Erstellen Sie eine Facebook-App, besorgen Sie sich eine App-ID und das App-Secret, und Sie
Sind auf dem Weg, um dieses Plug-in zu benutzen. Es fügt Links von Ihrer Facebook-Pinnwand,
-Seite oder -Gruppe an Beiträge oder Seiten. Es ist voll konfigurierbar, sodass Sie sich den Inhalt
maßschneidern können, auch das Verschleiern womöglich heikler Links ist möglich.
Category
and Page
Icons
wordpress.org/
plugins
Quick Adsense
wordpress.org/plugins
Dieses Plug-in bietet eine Anzeigenverwaltung, indem es
dem Nutzer eine schnellere und flexiblere Möglichkeit gib,
Adsense oder anderen Werbe-Code in einen Blog-Eintrag zu
integrieren. Es kann überall innerhalb eines Beitrags zufällig
Werbung platzieren und besitzt eine einfache Einstellungsseite,
die es einfach anzuwenden macht. Das Plug-in ist die ideale
Weise, mit verschiedenen Arten von Werbungs-Formaten und
Platzierungen zu experimentieren.
Es bietet zudem die Option, die Werbung an eine bestimmte
Position zu setzen, beispielsweise an den Anfang eines Beitrags,
ans Ende oder nach einer bestimmten Anzahl von Absätzen. Es
besteht auch die Option, maximal 10 Anzeigen pro Seite anzuzeigen,
wobei das Sidebar-Widget ebenfalls 10 Anzeigen erlaubt.
Das Plug-in lässt Sie kleine Bilder in
Ihre Sidebar einfügen. Laden Sie ein
Icon hoch und assoziieren Sie es mit
einer Kategorie. Das erzeugt einen
hübschen Effekt, der auch jenen
Besuchern weiterhilft, die Englisch
als Zweitsprache sprechen.
Content
Aware
sidebars
wordpress.org/plugins
Übernehmen Sie mit diesem Plugin
die Kontrolle darüber, wie Inhalte
in der Sidebar angezeigt werden.
Wählen Sie die Inhalte selbst, um
den Besuchern eine persönliche
Benutzererfahrung zu bieten. Der
Manager erlaubt die Anzeige einzelner
Beiträge oder kompletter Seiten.
Alternativ können eigens entworfene
Postings, Suchergebnisse
oder 404-Seiten verwendet werden.
Video Sidebar
Widgets
wordpress.org/plugins
Das Einbetten von Videos in Webseiten
fügt eine neue Dimension hinzu, und
dieses Plug-in kombiniert eine Anzahl
von Elementen, um diese Aufgabe zu
erledigen. Es platziert ein Widget in der
Sidebar, der Benutzer muss nur noch
Titel, Quelle (aus einem Klappmenü),
Video-ID und Breite wie Höhe des
Videos angeben. Shortcodes ermöglichen
das schnelle Einfügen von Videos
in Beiträge und Seiten.
110 Das große WordPress-Handbuch

WordPress
Plug-ins
Backup
ERSTELLEN SIE REGELMÄSSIG
SICHERHEITSKOPIEN IHRER WEBSITE UND
VERMEIDEN SIE SO DATENVERLUST
STELLEN SIE SICH vor, Sie würden Wordpress
auf eine neue Version zu aktualisieren oder
einige kleine Änderungen vornehmen und
plötzlich klappt Ihre Seite zusammen und zeigt
nur noch einen weißen Bildschirm an. Sie kommen
auch nicht mehr ins Admin-Panel hinein –
Ihre gesamte harte Arbeit ist verloren.
Stellen Sie sicher, dass das nicht Ihnen passiert,
indem Sie ein Backup-Plug-in einsetzen. Davon
gibt es einige großartige im Angebot und viele
sind großzügig mit dem erlaubten Speicherverbrauch.
Sie können sogar Dateien an Dropbox
senden. Manche Plug-ins haben intelligente
Backup-Optionen, sodass nur Änderungen gesichert
werden (nach einem Vollbackup zu Beginn
natürlich). Das beschleunigt den Prozess enorm.
Welches Backup-Plug-in Sie benutzen sollten,
hängt von Ihren Anforderungen ab. Bei oft aktualisierten
Seiten möchten Sie wahrscheinlich jede
Stunde ein Backup erstellen. Für Seiten, welche nur
unregelmäßig Updates erhalten, könnten Sie zu
einem Plug-in greifen, das seltener Backups erstellt,
dafür aber mehr Funktionen bietet. Eines ist aber
sicher: Sie sollten Backups zur Priorität machen.
Google
Drive for
WordPress
wordpress.org/plugins
Cloud-Anbieter sind beliebter den je und Google Drive ist
ein weiterer Zusatz zum sprießenden Google-Rennstall.
Der Dienst bietet aktuell 5 GB kostenlosen Speicherplatz an,
was mehr als genug für die übliche WordPress-Seite ist. Wenn
mehr gebraucht wird, können Sie gegen eine kleine monatliche
Gebühr den Speicher auf 25 GB aufrüsten. Das Plug-in
erlaubt es dem Nutzer, einen Google-Drive-Account einzustellen,
das Backup-Verzeichnis festzulegen und zu bestimmen,
welche Tabellen vom Backup ausgeschlossen werden. Für ein
detaillierteres Backup können Dateien ausgeschlossen werden.
Mit den richtigen Einstellungen ist das Backup nur noch
ein Knopfdruck.
Online Backup
for WordPress
wordpress.org/plugins
Der Registrierungsprozess ist nicht
unbedingt selbsterklärend,, aber sobald
Sie sich angemeldet haben, können Sie
100 MB sicheren Backup-Speicher in
Anspruch nehmen, was für viele kleineren
Seiten ausreichend ist. Backups
können jede Stunde oder auch jede
Woche angelegt werden. Sie können
auch ein Voll-Backup anlegen und es
an Sie mailen lassen.
WordPress
Backup to
Dropbox
github.com
Dropbox ist einer der besten Dienste im
Netz. Sie bekommen 2 GByte Gratisspeicher
und nutzen dieses Plug-in, um Ihre
Daten zu sichern. Sie können Tag und
Zeit festlegen, an dem das Backup ausgeführt,
bestimmen, in welche Ordner
das Backup gespeichert werden soll und
was vom Backup ausgeklammert wird.
myRepono
WordPress
Backup Plugin
http://myrepono.com
Dieses Plug-in verwendet einen Online-
Back up-Dienst, der wichtige Dateien zuverlässig
und sicher speichert. Das beinhaltet
auch Dateien einer WordPress-Seite und
mySQL-Datenbanken. Das System erlaubt
es dem Nutzer, automatisierte Fernbackups
durchzuführen und dabei auf
256-Bit-Verschlüsselung und Datenkompression
zuzugreifen.
WP DB
Manager
wordpress.org/plugins
Wenn Sie mehr daran interessiert sind,
ein Backup des WordPress-Verzeichnisses
zu bewahren, dann ist dieses das
Plug-in der Wahl. Sie können Ihre
Datenbank reparieren, löschen oder
sichern. Dabei wird alles andere – die
Dateien und Themes – in Ruhe gelassen.
Machen Sie sich das bewusst,
bevor Sie das Plug-in einsetzen.
Das große WordPress-Handbuch 111

Plug-ins
WordPress-
Plug-ins
bearbeiten
WIE SIE PLUG-INS SO ANPASSEN, DASS SIE EXAKT WIE
GEWÜNSCHT AUSSEHEN UND FUNKTIONIEREN.
LERNZIEL
Plug-ins mithilfe des
WordPress-Plug-in-Editors
bearbeiten
DAUER
45 Minuten
ANSPRUCH
NACH DEM INSTALLIEREN eines Plug-ins
erscheint in den Einstellungen üblicherweise
ein neues Menü mit verschiedenen
Optionen zur Regelung des Plug-ins. Auch
außerhalb der administrativen Einstellungen können
Änderungen mithilfe des Plug-in-Editors vorgenommen
werden, welcher im Back-End von WordPress zu finden
ist. Änderungen am Quelltext der Plug-ins vorzunehmen,
ist nur dann ratsam, wenn man genau weiß, was
man tut. Detaillierte Kenntnisse der Prozesse und Funktionen
von CSS, JavaScript und PHP sind sehr wahrscheinlich
notwendig, wenngleich dies natürlich davon
abhängt, welche Art Dateien verändert werden sollen.
Programmierfehler und -konflikte führen zu unbrauchbaren
Plug-ins, welche sich dann deaktivieren.
Bevor Sie Änderungen an den Plug-ins vornehmen,
empfiehlt es sich, diese zunächst zu deaktivieren. Es
ist auch von Vorteil, die funktionierende Version des
Plug-ins irgendwo abzuspeichern, sodass man darauf
leicht zurückgreifen kann, falls der neue Code Probleme
verursachen sollte.
112 Das große WordPress-Handbuch

WordPress
Plug-ins
01 Plug-ins-Menü
Als Erstes müssen wir das Plug-ins-Menü im
WordPress-Admin-Panel auf der linken Seite auswählen.
Es erscheint eine Seite mit allen installierten Plug-ins, ob
aktiviert oder nicht. Es werden außerdem verfügbare
Updates für einzelne Plug-ins aufgelistet.
02
Plug-in-Editor öffnen
Suchen Sie das Plug-in, das bearbeitet werden
soll, in der Liste und klicken Sie auf den Link „Bearbeiten“
unter dem Namen. Dadurch gelangen Sie zum Programmiermenü
für dieses Plug-in. Einige Plug-ins haben keine
solche Bearbeitungsfunktion, sondern müssen außerhalb
von WordPress über einen FTP-Client angepasst werden.
03 Plug-in-Dateien
Im Bearbeitungsmenü sehen Sie das Programmierfenster.
Alle Dateien aus dem Ordner des
jeweiligen Plug-ins werden rechts davon aufgelistet.
Enthalten sind alle PHP-, CSS-, JavaScript- und sogar
Readme-Dateien. Jede Datei kann mit einem Klick geöffnet
werden und erscheint dann im Programmierfenster.
Ein Element inspizieren
04 Funktionssuchfeld
Unterhalb des Programmierfensters befindet
sich das Funktionssuchfeld. Es erscheint nur beim
Bearbeiten von PHP-Dateien. Die Dokumentation für
alle Funktionen, die von dem Plug-in verwendet werden,
kann durch einen Klick auf die Drop-Down-Liste abgerufen
werden. Als Schnellreferenz ist das ganz nützlich.
05 FTP-Berechtigungen
Falls unter dem Programmierfenster eine
„Aktualisieren“-Option fehlt, müssen die Schreibberechtigungen
in Ihrem FTP-Client angepasst werden. Dies variiert je
nach verwendetem FTP-Client. Sind die Ordner-Berechtigungen
nicht korrekt eingestellt, können bestimmte Dateien
nicht innerhalb von WordPress aktualisiert werden.
01 Element auffinden
Suchen Sie das zu inspizierende
Element auf der Seite. Rechtsklicken
Sie darauf und wählen Sie „Element
inspizieren“ aus dem Menü.
06
Weitere Plug-ins einsehen
Wenn mehr als ein Plug-in bearbeitet werden
soll, können Sie ein weiteres aus der Drop-Down-Liste
über der Plug-in-Dateiliste auf der rechten Seite auswählen.
Speichern Sie alle Änderungen am Code vorher ab,
da sie sonst beim Öffnen eines neuen Plug-ins verloren
gehen. Es erscheint keine Bestätigungsmeldung.
07
Das Plug-in
wieder aktivieren
Elemente
inspizieren
Das Anpassen von Code
fällt anfänglich leichter mit
der Browserfunktion
„Elemente inspizieren“.
Eventuell muss diese
Funktion aktiviert werden.
Bei Firefox benötigen Sie
die Erweiterung
„Firebug“.
Nachdem die Änderungen am Plug-in vorgenommen sind,
kann dieses im Plug-ins-Menü reaktiviert werden. Dann können
Sie es im Front-End der Website testen, ob es funktioniert. Bei
Problemen können Sie in das Programmierfenster zurückkehren,
um diese zu suchen, oder die zuvor gespeicherte Version
wiederherstellen.
02 Sich vertraut machen
Konsolen unterscheiden sich ein bisschen,
aber im Allgemeinen wird das HTML und
CSS für das ausgewählte Element in
eigenständigen Kästen angezeigt.
03 Ändern
Dieses Werkzeug erlaubt zerstörungsfreie
Änderungen, sodass man mit den
verschiedenen Elementen experimentieren
kann, um zu erkennen, welche
Rolle sie auf der Seite spielen.
Das große WordPress-Handbuch 113

Plug-ins
Bessere
Performance
durch
Optimierung
STEIGERN SIE DIE LEISTUNG IHRER WORDPRESS-
INSTALLATION MITHILFE EINIGER PLUG-INS
UND EINSTELLUNGEN
LERNZIEL
Die Leistung Ihrer Website
mittels Plug-ins erhöhen
DAUER
30 Minuten
ANSPRUCH
Quelldateien
www.webdesignermag.
co.uk/tutorial-files/
(Code, Plug-ins)
DAS INTERNET entwickelt sich ständig weiter.
Umso wichtiger ist es, dass Ihre Word-
Press-Präsenz schnell und effizient ist. So
bekommen User und Besucher die
gewünschten Inhalte angezeigt, ohne allzu lange auf
den Aufbau der Seite warten zu müssen.
Seitenoptimierung ist wichtiger als je zuvor, da Benutzer
heutzutage mit einer großen Anzahl verschiedener
Geräte und Bandbreiten auf Inhalte zugreifen.
In diesem Tutorial schauen wir uns einige Plug-ins für
Ihre WordPress-Installation an, mit denen Sie die Server-Belastung
reduzieren, Code und Templates optimieren
und so die Leistung und die Geschwindigkeit Ihrer
Seite verbessern können. Wir werfen einen Blick auf
Caching-Plug-ins, die statische HTML-Versionen Ihres
dynamischen Contents generieren, sowie andere Bereiche,
in denen wir die Leistung verbessern können.
01 Caching
Es gibt mehrere Plug-ins, die beim Erstellen
des Caching helfen können, wir konzentrieren uns hier
jedoch auf WP Super Cache. Gehen Sie im Administrationsbereich
auf das Menü, wählen Sie Plugins > Add
New und suchen Sie mittels des Eingabefeldes nach
dem Plug-in.
02
Plug-in installieren
Bei den Ergebnissen der Suche sollte WP Super
Cache als erster Treffer erscheinen. Klicken Sie zum automatischen
Download den Link „Install Now“. Sie können
das Plug-in auch separat herunterladen und mittels eines
FTP-Clients in das Plug-in-Verzeichnis Ihrer WordPress-Installation
kopieren. Nun aktivieren Sie das Plug-in.
Wir schauen uns die zum Download und der
Implementierung verfügbaren Plug-ins an.
114 Das große WordPress-Handbuch

WordPress
Plug-ins
03 Zugriffsrechte
Abhängig von den Zugriffsrechten Ihrer Word-
Press-Installation kann eine Fehlermeldung bezüglich
der Datei advanced-cache.php auftreten. In diesem Falle
müssen Sie lediglich via FTP-Client die Rechte des Verzeichnisses
wp-content auf 777 ändern, um den Zugriff
zu erlauben. Nach erfolgter Änderung setzen Sie den
Wert wieder auf 755.
04
Caching einstellen
Wenn Sie die vorhergehenden
Schritte erfolgreich ausgeführt haben,
sollte die WordPress-Installation einen
Zusatz in die Datei wp-config.php
geschrieben haben, die das Cachen
ermöglicht. Wenn Sie Fehlermeldungen
in Bezug auf die Konfigurationsdatei
erhalten, passen Sie die Zugriffsrechte an
und aktivieren Sie das Plug-ins erneut,
um die Änderungen wirksam zu machen.
001 /** The name of the
database for WordPress */
002 define(‘WP_CACHE’, true);
//Added by WP-Cache Manager
05
Einfaches Cachen
Das Plug-in sollte Ihnen nun eine Anzahl von Menü-Optionen
innerhalb der Admin-Steuerung aufzeigen. Beim Reiter „Easy“ stellen
Sie die Auswahl auf „Caching On“, um die damit verbundenen Dienste
und die Erzeugung statischer Dateien zu aktivieren. Für die meisten
einfachen Blogs genügt das bereits, aber wir werfen noch einen Blick
auf die fortgeschrittenen Optionen.
Datenbanken optimieren
06
Weitere Einstellungen
Es gibt eine Anzahl an Optionen, die wir hier
implementieren können. Erfolg und Verfügbarkeit von einigen
sind abhängig von Ihrem Hosting-Paket und den Einstellungen
Ihres Servers – probieren Sie es einfach aus. Beginnen
Sie mit der Übernahme der empfohlenen Einstellungen,
insbesondere mod_rewrite für gecachte Dateien.
Sie können das Caching auf häufige Besucher begrenzen.
09
08
07 mod_rewrite
Damit mod_rewrite statische HTML-generierte
Dateien bedienen kann, sind recht umfangreiche Regeln
nötig. Aber das Plug-in warnt Sie, wenn die Datei .htaccess
ein Update benötigt, und stellt Ihnen die entsprechende
Funktion für ein automatisches oder manuelles
Update zur Verfügung.
Caching testen
Kehren Sie zum Reiter „Easy“ zurück und testen Sie
den Cache mittels zweier statisch generierter
Dateien für einen Zeitstempel-Vergleich.
Jedes an dieser Stelle auftretende
Problem kann als Indikator für
noch zu ändernde Server-Einstellungen
dienen. Falls nötig,
löschen Sie den Cache und
beginnen Sie von vorn.
Quellcode sichten
Betrachten Sie denn Quellcode Ihrer Webseiten in verschiedenen Browsern,
um das Caching-Prozedere zu testen. WP Super Cache fügt Cache-Informationen
automatisch an das Ende einer Seite an, um Ihnen mitzuteilen, dass es schneller arbeitet.
Nützliche
Bugs
Um das Überprüfen der
Ladezeiten und der
Anzahl der Ressourcen-Anfragen
zu erleichtern,
empfehlen wir eine
Browser-Erweiterung wie
Firebug
01 Datenbankmanager
Schnappen Sie sich das fantastische
Plug-in WP DB Manager (http://bit.ly/
wpdbmanager), ein unentbehrliches
Tool für Datenoptimierung und Leistung
aufseiten der Datenbank.
02 Optimieren
Ihre Datenbank kann durch das Hinzufügen
der Informationen von Plug-ins,
Themes und Custom-Fields schwerfällig
werden. Optimieren Sie sie, um Hilfe
beim Aufräumen zu gewährleisten.
03 Backups planen
Die Datenbank ist das Rückgrat Ihrer
Seite. Schützen Sie sie um jeden Preis,
führen Sie regelmäßig Backups durch.
Diese können Sie sich bequem und
direkt per E-Mail schicken lassen.
Das große WordPress-Handbuch 115

Plug-ins
10
CDN erwägen
Falls Ihre Seite viel statische Komponenten wie Bilder, CSS oder
JavaScript enthält, ziehen Sie die Verwendung eines CDN (Content Delivery
Network) in Betracht, um die Serverlast zu verteilen. Dienste wie Amazon
S3 oder Rackspace Cloud Files helfen hier. Das Cache-Plug-in kann so konfiguriert
werden, dass es mit diesen Diensten zusammenarbeitet.
11
Plug-ins optimieren
Deaktivieren Sie Plug-ins, die Sie
nicht länger oder gar nicht benötigen,
denn diese können großen Einfluss auf
Ladezeiten und Serverlast haben. OPtimieren
Sie aktive Plug-ins. Wenn Sie
irgendwo Code sehen, den Sie verbessern
können, tun Sie dies. Selbst die
kleinste Optimierung kann Ladezeiten
und Funktionalität verbessern.
Abfrageprobleme
Bei WordPress ist es sehr einfach, spezifische
Abfragen durchzuführen, um
Daten zu erhalten, die von den verfügbaren
Standardfunktionen nicht ohne
weiteres bereitgestellt werden. Allerdings
sollten diese Interaktionen mit
der Datenbank so gestaltet werden,
dass Zeitverzögerungen möglichst vermieden
werden. Etwaige Engpässe und
Probleme sollten so schnell wie möglich
entdeckt und behoben werden,
allerdings ist das Aufspüren oft gar
nicht so einfach.
Um solche Abfrageprobleme zu finden,
können Sie das Plug-in Debug Queries
installieren (http://bit.ly/oLnht3). Das
Plug-in zeigt im unteren Bereich des
Fensters alle Abfragen an, die auf einer
Seite durchgeführt werden, dazu die
Zeitdauer der Ergebnisfilterung sowie
das vollständige SQL-Query. Diese
Daten werden nur angezeigt, wenn Sie
sich als Administrator eingeloggt
haben, normalen Besuchern Ihres
Blogs bleiben sie verborgen.
13
14
JS im Footer laden
Wenn Sie Ihr WordPress-Theme erstellen
oder verbessern, versuchen Sie, JS-Dateien im Footer
des Templates zu platzieren. Das hilft sicherzustellen,
dass alle DOM-Elemente auf der Seite erzeugt wurden,
bevor irgendeine Bearbeitung erfolgt oder ein
JavaScript ausgeführt wird. WP Minify kann Sie dabei
automatisch oder manuell unterstützen.
12
Bildgrößen reduzieren
Bilder können, abhängig von der Dateigröße und Kompression,
unnötige Serverlast darstellen. Wenn Sie Bilder hochladen, ziehen
Sie nach Möglichkeit die Reduktion der Dateigröße in Betracht. Sie können
das Plug-in WP Smush.it (http://bit.ly/wp_smush) verwenden, welches
jedes Bild in Ihrer Medienbibliothek über Yahoos smush.it-Dienst
verlustfrei komprimiert.
CSS und JS verbinden
Ein einfacher Weg, die Leistung einer Webseite
zu verbessern, ist, die Anzahl an HTTP-Anfragen zum
Einholen von Ressourcen und Assets zu reduzieren.
Fassen Sie CSS- und JS- Dateien in eine einzelne Datei
zusammen, wo es nur möglich ist. Das Plug-in WP
Minify (http://bit.ly/wpminify) hilft Ihnen beim Auffinden
und Minimieren der Inhalte dieser Dateien.
CSS Sprites
Versuchen Sie die Anzahl der
Requests für Bildelemente zu
reduzieren, indem Sie CSS Sprites
erstellen und den visuellen
Output und das Positionieren
per CSS bestimmen
15 Browser-Caching
Das Benutzen des Browser-Caches
erhöht nicht notwendigerweise
die Ladezeiten Ihrer WordPress-Installation,
kann aber die Serverlast reduzieren,
in dem häufig verwendete Objekte
gecacht werden. Dazu fügen Sie eine
Zeile Code in der Datei .htaccess hinzu,
um die Serverlast bei der Anfrage statischer
Dateien und Bilder zu reduzieren.
001 FileETag MTime Size
002
003
004 ExpiresActive on
005 ExpiresDefault “access plus
1 year”
006
007
116 Das große WordPress-Handbuch

WordPress
Plug-ins
Alternative Plug-ins
ZUSÄTZLICHE PLUG-INS,
DIE DIE PERFORMANCE
IHRER SEITE VERBESSERN
WORDPRESS IST ZWEIFELLOS eine der
besten heute verfügbaren Bloggingplattformen.
Der Grund dafür ist die Verfügbarkeit
einer schier unendlichen Menge von
Plug-ins, die verschiedene Aufgaben wie
etwa die Einbindung von Buttons für soziale
Netzwerke, Suchmaschinenoptimierung
und vieles andere erfüllen. Aber wenn die
Besucherzahlen ansteigen, leidet auch die
Seitenladezeit aufgrund der zu ladenden
Skripte und Plug-ins. Auf dieser Seite schauen
wir uns drei Plug-ins an, die zur Performance
beitragen und die Seitenladezeit
verringern können und somit die Wahrnehmung
durch Benutzer verbessern.
Wenn die Besucherzahlen ansteigen,
leidet auch die Seitenladezeit aufgrund
der zu ladenden Skripte und Plug-ins.
01
W3 Total Cache
W3 Total Cache verbessert die Leistung der
Website, indem es die Serverperformance erhöht,
was es dadurch bewerkstelligt, dass es jeden Aspekt
der Website zwischenspeichert, die Downloadzeiten
reduziert und eine transparente Integration des CDN
(Content Delivery Network) bereitstellt. Es erzielt
außerdem 80-prozentige Bandbreitenersparnis mithilfe
von Minify und HTTP-Kompression von HTML,
CSS, JavaScript und RSS-Feeds. Hochranginge Blogs
wie tutsplus.com, yoast.com, noupe.com und
smashingmagazine.com verwenden dieses Plug-in,
und W3 Total Cache ist eines der schnellsten Word-
Press-Plug-ins für Performanceoptimierung.
02
jQuery Image Lazy Load
jQuery Image Lazy Load verzögert die
Übertragung von Bildern auf (langen) Seiten. Bilder
unterhalb des Bildschirmrands (weiter unten auf der
Seite) werden erst geladen, wenn der Benutzer nach
unten scrollt. Das ist das Gegenteil von „Preloading“. Es
wird „Lazy Loading“ eingesetzt, wodurch Seiten, die voller
Bilderinhalte sind, flotter wirken. Der Browser ist nach
dem Laden der sichtbaren Bilder wieder bereit und der
Benutzer muss nicht auf das Laden einer unbekannten
Menge von Bildern warten. Außerdem sieht es ziemlich
cool aus, wenn die Bilder ins Blickfeld blenden, während
man die Seite scrollt, wodurch die Wahrnehmung durch
den Benutzer weiter verbessert wird.
03
WP Widget Cache
WP Widget Cache kann WordPress-Widgets
zwischenspeichern, wodurch das Blog noch schneller
läuft als bei einfacher Seitenzwischenspeicherung.
Das ist wichtig für Blogger, die überdurchschnittlich
viele Widgets verwenden. Da auf den meisten Seiten
Widgets vorkommen, kann das Plug-in jede Seite
beschleunigen, wodurch Benutzer und Suchmaschinen
einen besseren Eindruck vom Blog erhalten. WP Widget
Cache ersetzt nicht das WP-Cache oder WP Super
Cache; es ist vielmehr ein Zusatz, der die Dauer der
Zwischenspeicherung neuer Seiten verringert. Der
Zeitraum für die Speicherung kann für jedes Widget einzeln
festgelegt werden, von Sekunden bis hin zu Jahren.
Das große WordPress-Handbuch 117

Plug-ins
Bauen Sie
eine Infobox
mit Infos
über den
Verfasser als
Plug-in
VON A BIS Z: SO ERSTELLEN SIE EIN WORDPRESS-PLUG-IN.
LERNZIEL
Am Beispiel einer Infobox
in Grundzügen lernen, wie
ein WordPress-Plug-in
erstellt werden kann
DAUER
30 Minuten
ANSPRUCH
PLUG-INS BIETEN TOLLE Möglichkeiten,
die Funktionalität des eigenen
WordPress-Blogs zu erweitern.
Sie vereinfachen komplizierte Abläufe
für den Benutzer und ermöglichen es ihm,
zusätzliche Features mithilfe von Shortcodes oder
Widgets einzubauen. Die Installation eines Plugins
ist bei WordPress nicht schwierig, aber das
Hinzufügen des Erweiterungsmoduls kann sich im
Hintergrund auf die Funktionsweise der gesamten
WordPress-Software auswirken.
In diesem Tutorial schauen wir uns an, wie die
Plug-in-Daten korrekt gespeichert und vor allem
nach der Deinstallation des Moduls auch wieder
vollständig gelöscht werden. Zwar ist das Löschen
der Daten bei einem Plug-in, das der Community
zur Verfügung gestellt werden soll, nicht
zwingend erforderlich, doch es ist eine sinnvolle
Sache, um so zu vermeiden, dass die WordPress-
Datenbank zugemüllt wird.
Wir nehmen für dieses Tutorial an, dass Sie
eine Hosting-Umgebung mit aktuellen Versionen
von PHP und MySQL eingerichtet haben und
die neueste WordPress-Installation benutzen.
Gegebenenfalls sollten Sie die Software zuerst
aktualisieren.
01
Vorbemerkung
Bevor Sie beginnen, ein WordPress-Plug-in
zu erstellen, sollten Sie sich Gedanken über die Dateibenennung
machen. Die Dateien müssen einzigartige
Bezeichnungen bekommen, damit es nicht zu Konflikten
mit anderen Plug-ins kommt, die bereits auf dem
Server installiert sein könnten. Gehen Sie für dieses
Tutorial am besten von einer jungfräulichen WordPress-
Installation aus.
02
Dokument erstellen
Öffnen Sie Dreamweaver oder einen Texteditor
Ihrer Wahl und erzeugen Sie ein neues PHP-File.
Fügen Sie die folgenden Start- und End-Tags in das
Dokument ein, und speichern Sie es unter dem Namen
„authorinfo.php“ im Ordner wp-content/plugins/ Ihrer
WordPress-Installation ab.
001
03
Plug-in-Infos hinzufügen
Der folgende Block Programmcode wird
der neu erstellten PHP-Datei hinzugefügt. Der gesamte
Block ist zwar auskommentiert, das bedeutet jedoch
nicht, dass die Zeilen keine Funktion hätten – denn
WordPress entnimmt ihnen einige wichtige Angaben
über das Plug-in.
001
04
GPL-Lizenz
Unter den Kommentarblock fügen Sie am
besten noch das nachfolgende Statement ein. Es ist
gute Sitte, Plug-ins, die man der WordPress-Community
zur Verfügung stellen möchte, unter die GPL-Lizenz zu
stellen: Das bedeutet, dass es sich um Freie Software handelt,
die genutzt, weiterverbreitet und verändert werden
darf. Etwas anderes ist es natürlich, wenn Sie ein Plug-in
für kommerzielle Zwecke entwickeln möchten.
001 /* Copyright (C) 2012 [Your Name]
002
003 This program is free software: you can
redistribute it and/or modify
004 it under the terms of the GNU General
Public License as published by
118 Das große WordPress-Handbuch

WordPress
Plug-ins
• Hier sieht man, wie das Plug-in im Admin-Bereich
gelistet wird.
• Sobald das Plug-in aktiviert ist, fügt es dem
Einstellungsmenü einen neuen Eintrag hinzu.
• Nur ein Platzhaltertext, aber immerhin gibt es schon
einen Output.
• Mithilfe der Funktion add_option können Sie Zeilen zur
Tabelle wp_options Ihrer WordPress-Installa tion
hinzufügen.
005 the Free Software Foundation, either
version 3 of the License, or
006 (at your option) any later version.
007
008 This program is distributed in the hope
that it will be useful,
009 but WITHOUT ANY WARRANTY; without even
the implied warranty of
010 MERCHANTABILITY or FITNESS FOR A
PARTICULAR PURPOSE. See the
011 GNU General Public License for more
details.
012
013 You should have received a copy of the
GNU General Public License
014 along with this program. If not, see
.
015 */
016
05
Plug-in verifizieren
An dieser Stelle ist es sinnvoll, schnell in
WordPress zu kontrollieren, ob Ihr Plug-in bisher
korrekt geladen wird. Nachdem Sie die PHP-Datei im
Ordner .../plugins/ aktualisiert haben, gehen Sie zum
Plug-in-Menü des WordPress-Admin-Panels. Wenn
alles funktioniert hat, sollte Ihr Modul dort bereits
aufgeführt sein.
06
Settings hinzufügen
Bevor wir darangehen, dem Code tatsächliche
Funktionalität zu verleihen, sollten Sie sich Ihre
Arbeitsumgebung einrichten: Fügen Sie unter dem
Lizenz-Statement den folgenden Code ein. Er sorgt dafür,
dass ein Menü für Ihr Plug-in bei den Einstellungen im
Admin-Bereich erzeugt wird. Das author-box-settings
bezeichnet den Namen des Strings, der in der Adresszeile
erscheint.
001 add_action( 'admin_menu', 'authorbox_menu'
);
002
003 function authorbox_menu() {
004 add_options_page( 'AuthorBox Options',
'Author Box', 'manage_options', ‘author-boxsettings’,
'authorbox_options' );
005 }
07
Einstellungen Ausgabe
Fügen Sie darunter die folgende Funktion ein.
Damit wird ein bisschen einfaches HTML in unserer Einstellungsseite
dargestellt. Im nächsten Schritt programmieren
wir ein Formular, in das Informationen über den Verfasser
eines Beitrags eingetragen werden können. Der vorhergehende
Schritt referenziert diese Funktion, wenn das Menü
hinzufügt wird. Daher ist es wichtig, dass Sie keine Tippfehler
in den Code einbauen.
001 function authorbox_options() {
002 if ( !current_user_can( 'manage_options' )
) {
003 wp_die( __( 'You do not have sufficient
permissions to access this page.' ) );
004 }
005 echo '';
006 echo 'We\'ll build a form here,
promise!';
007 echo '';
008 }
08
Einstellungen Seitentitel
Ersetzen Sie nun den Platzhalter im echo-
Statement des letzten Schrittes durch die folgenden
Codezeilen. Sie sehen, dass das -Tag ein wenig
anders aussieht als ein Standard-Tag. Der Grund dafür
ist, dass die Titel sich auf mehrere Einstellungs-Tabs
beziehen können. Dies ist hilfreich, wenn man das Programmieren
lernt.
001 echo ‘’;
002 echo “” . __( ‘Author Box Plugin
Settings’, ‘author-menu’ ) . “”;
003 ?>
09
Formular hinzufügen
Jetzt fügen wir das Formular hinzu, in
Das große WordPress-Handbuch 119

Plug-ins
• Hier haben wir einen Output für das
Widget in der Seitenleiste.
• Beim erneuten Aktivieren des Plug-ins
werden Sie nun direkt zur Einstellungsseite
geleitet, die alten Einträge sind
verschwunden.
• Der Shortcode-Befehl „[authorbox]“ kann
an beliebiger Stelle im Text eines
Blogbeitrags oder einer Seite integriert
werden.
• Als Ergebnis des Shortcodes wird die Info
über den Verfasser angezeigt.
das wir Infos über den Verfasser eintragen können.
Sie werden bemerken, dass das PHP-Tag im letzten
Schritt geschlossen wurde. Mit den nachfolgenden
Programmzeilen beginnen wir ein Standard-HTML-
Formular.
001
002

WordPress
Plug-ins
003 $opt_val_image = get_option('author_box_
image');
13
Bilder-Upload
Bisher richtet das Bilder-Upload-Element noch
nicht allzu viel aus, es wird lediglich der Dateiname zur
Datenbank hinzugefügt. Platzieren Sie den folgenden
Code innerhalb des if-Statements. Er sorgt dafür, dass
ein Benutzer tatsächlich nur ein Bild hochlädt und nichts
anderes. Er setzt außerdem eine Größenbegrenzung; sie
können die zugehörigen Werte anpassen.
001 $allowedExts = array(“jpg”, “jpeg”, “gif”,
“png”);
002 $extension = end(explode(“.”, $_
FILES[$data_field_image][“name”]));
003 if ((($_FILES[$data_field_image][“type”]
== “image/gif”)
004 || ($_FILES[$data_field_image][“type”]
== “image/jpeg”)
005 || ($_FILES[$data_field_image][“type”]
== “image/pjpeg”))
006 && ($_FILES[$data_field_image][“size”] <
200000)
007 && in_array($extension, $allowedExts))
008 {
009 if ($_FILES[“file”][“error”] > 0)
010 {
011 echo “Error: “ . $_FILES[$data_
field_image][“error”] . “”;
012 }
013 else
014 {
015 $upload_dir = wp_upload_dir();
016 move_uploaded_file($_FILES[$data_
field_image][“tmp_name”], $upload_
dir[‘basedir’] . “\\” . $_FILES[$data_field_
image][“name”]);
017 }
018 }
019 else
020 {
021 echo “Invalid file”;
022 }
14
Fehlerbehebung
Da wir die Art und Weise, wie der Programmcode
Dateien behandelt, verändert haben, müssen wir das
Formular und die Werte für update_option aktualisieren.
Am besten geben Sie die folgende Zeile ein; dies erlaubt es
Ihnen, die tatsächlichen Bilddaten in einem beliebigem Bildformat
hochzuladen, statt nur den Dateinamen aus dem
Formular zu nehmen. Sie können außerdem die Variable
$opt_val_image innerhalb des if-Statements löschen.
001
15
Bild in der Datenbank
Wenn Sie nun das Formular zusammen mit
einem Bild abschicken, erscheint das Bild im Ordner
wp-content/uploads. Sollten Sie es dort nicht sehen, den
Ordner jedoch erstellt haben, setzen Sie die Berechtigungen
auf 777. Weiterhin brauchen Sie noch richtige
update_option-Kommando: Wenn Sie die folgende Zeile
eingeben, wird der Datenbank der komplette Pfad der
Bilddatei hinzugefügt.
001 update_option( $opt_image, $upload_
dir['baseurl'] . "/" . $_FILES[$data_
field_image]["name"] );
16
Bild anzeigen
Es wäre doch eine gute Idee, das Bild auf der
Einstellungsseite anzuzeigen, um Feedback zu bekommen,
wenn das Formular abgeschickt wurde. Dazu
müssen Sie mit folgendem Code das Bilder-Upload-Feld
in Ihrem Formular aktualisieren. Das if-Statement holt die
URL aus der Datenbank, sofern dort eine steht.
001
002
003

Plug-ins
005 }
006 function plugin_redirect() {
007 if (get_option(‘activation_redirect’,
false)) {
008 delete_option(‘activation_
redirect’);
009 $adminUrl = admin_url();
010 wp_redirect($adminUrl.’/optionsgeneral.php?page=author-box-settings’);
011 }
012 }
21
Umleitung aktivieren
Nun ist es an der Zeit, unsere
Umleitungsfunktion aufzurufen
und sie in Aktion zu sehen.
Fügen Sie die folgende Zeile
unterhalb des Befehls
register_activation_hook
ein. Wenn Sie jetzt
zur Plug-in-Sektion
des Admin-Bereichs
gehen und das Plug-in
deaktivieren und gleich
wieder aktivieren, werden
Sie automatisch zur
Einstellungsseite geleitet. Dort
sind auch die alten Daten noch
vorhanden.
001 add_action('admin_init', 'plugin_
redirect');
22
Der Name
des Plug-ins
Es ist wichtig, dem Plug-in einen
Namen zu geben, der
noch nicht existiert. Andernfalls könnte
Ihr Plug-in bei einem WordPress-
Update mit Daten eines gleichnamigen
Moduls überschrieben
werden.
Aufräumen
Die Tatsache, dass die alten Daten noch vorhanden
sind, ist jedoch nicht wünschenswert, denn sie
bedeutet, dass die WordPress-Datenbank zugemüllt
wird. Mithilfe des folgenden Codes legen Sie fest, dass
die Daten des Plug-ins gelöscht werden, wenn dieses
deaktiviert wird. Fügen Sie ihn am besten unterhalb
der register_activation_hook-Zeile ein.
001 function author_deactivate() {
002 delete_option( ‘author_box_name’, ‘’,
‘’, ‘yes’ );
003 delete_option( ‘author_box_bio’, ‘’, ‘’,
‘yes’ );
004 delete_option( ‘author_box_image’, ‘’,
‘’, ‘yes’ );
005 }
006
007 register_deactivation_hook( __FILE__,
‘author_deactivate’ );
Code-Bibliothek
Die Funktion
authorbox_options im Detail
Da die Funktion authorbox_options recht umfangreich ist, erklären wir
hier noch einmal die Funktionen der einzelnen Abschnitte.
Zunächst überprüft die
Funktion die
Berechtigungen des
Nutzers. Bei unzu -
reichenden Benutzerrechten
wird der Code
abge brochen.
Unsere Variablen
sind nun gesetzt. Sie
werden im Code
durchweg verwendet
und müssen daher nur
einmal festgelegt
werden.
Das versteckte Feld
dient dazu festzustellen,
ob Daten an das
Formular geschickt
worden sind. Danach
können die Optionen
aktualisiert werden.
Das nächste Stück Code
kümmert sich um den
Bilder-Upload. Um die
Einschleusung von
Schadcode zu
verhindern, werden
die zugelassenen
Dateiformate begrenzt.
001 function authorbox_options() {
002 if ( !current_user_can( 'manage_options' ) ) {
003 wp_die( __( 'You do not have sufficient permissions to
access this page.' ) );
004 }
005
006 $opt_name = 'author_box_name';
007 $opt_bio = 'author_box_bio';
008 $opt_image = 'author_box_image';
009 $hidden_field_name = 'mt_submit_hidden';
010 $data_field_name = 'author_box_name';
011 $data_field_bio = 'author_box_bio';
012 $data_field_image = 'author_box_image';
013
014 $opt_val_name = get_option('author_box_name');
015 $opt_val_bio = get_option('author_box_bio');
016 $opt_val_image = get_option('author_box_image');
017
018 if( isset($_POST[ $hidden_field_name ]) && $_POST[ $hidden_
field_name ] == 'Y' ) {
019 $opt_val_name = $_POST[ $data_field_name ];
020 $opt_val_bio = $_POST[ $data_field_bio ];
021
022 $allowedExts = array("jpg", "jpeg", "gif", "png");
023 $extension = end(explode(".", $_FILES[$data_field_image]
["name"]));
024 if ((($_FILES[$data_field_image]["type"] == "image/gif")
025 || ($_FILES[$data_field_image]["type"] == "image/jpeg")
026 || ($_FILES[$data_field_image]["type"] == "image/pjpeg"))
027 && ($_FILES[$data_field_image]["size"] < 200000)
028 && in_array($extension, $allowedExts))
029 {
030 if ($_FILES["file"]["error"] > 0)
031 {
032 echo "Error: " . $_FILES[$data_field_image]["error"] .
"";
033 }
034 else
035 {
036 $upload_dir = wp_upload_dir();
037 move_uploaded_file($_FILES[$data_field_image]["tmp_
name"], $upload_dir['basedir'] . "\\" . $_FILES[$data_field_image]
["name"]);
038 }
039 }
040 else
041 {
042 echo "Invalid file";
043 }
122 Das große WordPress-Handbuch

WordPress
Plug-ins
Author Boxes –
eine Auswahl
EINE INFOBOX ÜBER DEN VERFASSER EINES POSTINGS KANN EIN GUTES
HILFSMITTEL SEIN, UM BESUCHER DER WEBSITE ZU BINDEN.
WIR HABEN HIER EINIGE ANGEBOTE FÜR SIE GESAMMELT.
01
Better Author Bio
Dieses Plug-in besitzt eine Einstellungsseite
und erlaubt die automatische Positionierung der Box
am oberen oder unteren Ende eines Beitrags oder die
manuelle Positionierung mithilfe eines Shortcodes. Der
Gravatar (Benutzerbild) des Verfassers lässt sich in die
Box einbinden, ebenso eine Kurzbiografie und die Anzahl
der geschriebenen Artikel. Sie können einen Teil des Textes,
der vor dem Autorennamen oder bei der Artikelzahl
erscheint, individuell anpassen. Ferner gibt es einen Link,
um die Postings eines Verfassers komplett anzuzeigen,
und Textlinks zu den sozialen Netzwerken.
DAS THEME, DAS Sie verwenden, ist womöglich
bereits mit einer Verfasser-Infobox ausgestattet,
doch könnte es ja sein, dass Ihnen
die Funktionalität oder die Optik nicht gefällt.
Dann haben Sie eine Reihe Alternativen zur Auswahl,
die Ihnen vielleicht mehr zusagen. Solche
„Author Boxes“ sind insbesondere bei Sites mit
mehreren Schreibern sehr angebracht, aber
auch wenn Sie Ihr Blog ganz auf eigene Faust
betreiben, sind die Infokästen keine schlechte
Idee, erhöhen Sie doch die Interaktion mit den
Lesern.
Verfasser-Infos stehen im Regelfall unter
einem Beitrag. Häufig enthalten Sie Links zu
sozialen Medien wie Twitter oder Facebook, um
mehrere mögliche Kommunikationskanäle zu
eröffnen. Es ist auch nicht unüblich, in die Box
Verweise auf andere Artikel desselben Verfassers
einzufügen.
Die vier Infobox-Programme, die wir Ihnen
auf dieser Seite vorstellen, sind allesamt einfach
zu benutzen. Sie unterscheiden sich jedoch hinsichtlich
ihrer Features und ihres Designs.
WP Biographia
eignet sich insbesondere
für Sites
mit mehreren
Schreibern. Viel
Plug-in für kein
Geld.
WP About Author
02 Auch hier ist eine Einstellungsseite enthal-
03
ten. Die Infobox kann auf die Startseite gestellt oder
in Archive, Suchergebnisse, Postings, Seiten und RSS-
Feeds eingebunden werden. Die Links zu den sozialen
Netzwerken stehen hier als Icons zur Verfügung. Das
Design der Box an sich kann in puncto Hintergrundfarbe
und Umrandung angepasst werden.
WP Biographia
Dieses Plug-in basiert auf WP About Author,
wurde jedoch stark erweitert. Es gibt hier ganze fünf
Einstellungsseiten sowie eine Reset-Option für den Fall,
dass Sie die Übersicht über die von Ihnen vorgenommenen
Anpassungen verloren haben sollten. WP Biographia
eignet sich insbesondere für Sites mit mehreren
Schreibern. Viel Plug-in für kein Geld.
04
Fanciest Author Box
Das einzige Plug-in unserer kleinen Sammlung,
das etwas kostet, ist mit einem Preis von umgerechnet
weniger als 8 € dennoch ein Schnäppchen.
Bei Fanciest Author Box kann man den Gravatar des
Verfassers einbinden oder eine Bild-URL verlinken. Hervorzuheben
ist die Gliederung der Links zu den sozialen
Medien und früheren Beiträgen mittels Registerkarten,
denn dadurch wird die Höhe des Kastens sehr gering
gehalten. Es gibt zwei Seiten mit Einstellungen und
diverse Farboptionen.
Das große WordPress-Handbuch 123

Plug-ins
Erstellen
Sie ein Plugin
für ein
Gewinnspiel
WIR ZEIGEN IHNEN, WIE SIE EIN WORDPRESS-MODUL FÜR
PREISAUSSCHREIBEN BAUEN KÖNNEN.
LERNZIEL
Lernen Sie, ein Gewinnspiel
auf Ihrem Blog einzurichten
und durchzuführen
DAUER
60 Minuten
ANSPRUCH
WER NIMMT NICHT gerne an einem
Gewinnspiel teil? Nun, wohl schon einige,
werden Sie einwenden, zumal die Gewinnchancen
ja auch nicht immer hoch
sind – aber im Endeffekt haben doch ziemlich viele
Menschen Spaß an Quizfragen und Wettbewerben.
Diese Zielgruppe nehmen Sie ins Visier, wenn Sie auf
Ihrer Website ein Preisausschreiben veranstalten.
Gewinnspiele sind ein gutes Mittel, Ihr Blog oder
Ihre Seite publik zu machen und ganz nebenbei
noch wertvolle Erkenntnisse über Ihre Benutzerstruktur
zu gewinnen wie zum Beispiel die Verteilung
Ihrer Lesergruppen nach Geschlecht, Alter
oder Interessen – denn Sie können die Teilnahme
etwa an die Bedingung knüpfen, dass einige Angaben
dieser Art gemacht werden. Sie können auch
die Angabe einer E-Mail adresse erbitten und das
Spiel gleichzeitig mit dem Angebot koppeln, sich für
Ihren Newsletter anzumelden.
In diesem Tutorial zeigen wir Ihnen, wie Sie ein
Gewinnspiel-Modul für Ihre WordPress-Website
erstellen.
01
Los geht’s
Beginnen wir mit dem Programmieren. Bei der Erstellung von Plug-ins für
WordPress ist es generell ratsam, zunächst die Konstanten zu definieren, auf die man
sich später beziehen möchte. In unserem Fall definieren wir die Namen der Tabellen in
der Datenbank sowie den Namen des Plug-ins für die Admin-Seitenleiste.
001global $wpdb;
002define(‘COMPETITIONS_TITLE’, ‘Competitions Plugin’);
003define(‘COMPETITIONS_SLUG’, ‘competitions_plugin’);
004define(‘COMPETITIONS_TABLE’, $wpdb->prefix .
‘competitions’);
005define(‘COMPETITION_ENTRIES_TABLE’, $wpdb->prefix .
‘competition_entries’);
006define(‘COMPETITIONS_DOCROOT’, dirname(__FILE__));
007define(‘COMPETITIONS_WEBROOT’, str_replace(getcwd(), home_
008url(), dirname(__FILE__)));
02 Hooks
Jedes WordPress-Plug-in sollte mit „Hooks“ ausgestattet sein, die es installieren
und deinstallieren. Wir definieren diese ebenfalls und fügen ferner die Skripte
install, model und controller hinzu, die die Substanz des Plug-ins bilden. Mithilfe der
add_action-Methode können wir der Admin-Seitenleiste einen Link hinzufügen, der
zum Einstellungsmenü des Gewinnspiel-Plug-ins führt. Die hier nicht abgedruckten
Codezeilen finden Sie unter dem Tutorial-Link
www.webdesignermag.co.uk/wp-content/uploads/2013/02/5_WordPress_plugin.zip.
03
Datenbanktabellen erstellen
Sie benötigen zwei separate Tabellen, damit das Plug-in funktioniert. In der
einen werden die Daten des Wettbewerbs, den Sie ausrichten, abgelegt (etwa Fragen
und Antworten), und die andere enthält die Eingaben der Teilnehmer.
001function competitions_install () {
global $wpdb;
002 require_once ABSPATH . ‘wp-admin/includes/upgrade.php’;
003 dbDelta(‘
004 CREATE TABLE `’ . COMPETITIONS_TABLE . ‘` (
005 `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
006 `competition_name` longtext CHARACTER SET utf8
COLLATE utf8_bin NOT NULL,
007 `question_1` longtext CHARACTER SET utf8 COLLATE utf8_
bin NOT NULL,
008 `answer_1_option_1` longtext CHARACTER SET utf8
COLLATE utf8_bin NOT NULL,
009 `answer_1_option_2` longtext CHARACTER SET utf8
COLLATE utf8_bin NOT NULL,
010 `answer_1_option_3` longtext CHARACTER SET utf8
COLLATE utf8_bin NOT NULL,
011 `correct_answer_1` longtext CHARACTER SET utf8
COLLATE utf8_bin NOT NULL,
012 `closing_date` DATETIME DEFAULT NULL,
013 PRIMARY KEY (`id`),
014 UNIQUE KEY `id` (`id`)
015 ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
‘);
}
04
Einfache Deinstallation ermöglichen
Es ist eine gute Idee, Plug-ins so zu programmieren, dass sie sich problemlos
wieder deinstallieren lassen. Dabei sollte nicht nur der gesamte Programmcode entfernt
werden, sondern am besten auch die von dem Plug-in im Rahmen der Installation eingerichteten
Datenbanktabellen. Letzteres ist nicht schwierig zu bewerkstelligen: Verwenden
Sie einfach das SQL-Statement DROP TABLE. Die entsprechenden Befehle finden Sie unter
dem in Schritt 02 genannten Tutorial-Link.
05
Backend Formular
Wir brauchen eine Möglichkeit, die Gewinnspielinformationen einzugeben –
zunächst ein Formular mit den Dingen, die typischerweise zu einem Quiz gehören: Das
Plug-in erlaubt drei Multiple-Choice-Antworten auf eine Frage. Sie können außerdem
einen Einsendeschluss festlegen.
124 Das große WordPress-Handbuch

WordPress
Plug-ins
• Gestalten Sie die
Fragen nicht zu
schwierig, um mehr
Leute zur Teilnahme
zu bewegen.
• Ihre abgeschlossenen
Preisausschreiben
werden gespeichert
für den Fall, dass Sie
sie noch einmal
verwenden möchten.
• Mit einer Multiple-Choice-Frage setzen Sie die Hürde für die
potenziellen Teilnehmer herab.
• Lassen Sie das Gewinnspiel nicht zu schnell enden. Berücksichtigen
Sie bei der Planung die Anzahl Ihrer Besucher
pro Tag.
001 Answer 2
002
003 ”>
009 Correct Answer
010
011
012 >2
016 ”>
024

Plug-ins
• Mit Bildern peppen Sie Ihre Gewinnspiele auf.
• Das Menü für die einzelnen Gewinnspiele ist sehr übersichtlich.
010 ‘answer_1_option_2’=> stripslashes_deep($row[‘answer_1_
option_2’]),
011 ‘answer_1_option_3’=> stripslashes_
deep($row[‘answer_1_option_3’]),
012 ‘correct_answer_1’=> stripslashes_deep($row[‘correct_
013answer_1’]),
014 ‘closing_date’=> stripslashes_deep($row[‘closing_
date’])
));
}
09
Eingegebene Daten downloaden
Die nächste Funktionalität, die benötigt wird, ist die Fähigkeit, die von den
Teilnehmern gemachten Angaben herunterzuladen und zu betrachten. Dies geht mittels
einer Abfrage beider Datenbanken. Wir brauchen hier nur die persönlichen Daten
der Teilnehmer und deren jeweilige Antwort auf die Gewinnspielfrage.
10
CSV-Datei generieren
Um die Eingaben der Teilnehmer abzufragen, klicken Sie einfach auf die Schaltfläche
„Download Entries“ im „Edit/Delete Competitions“-Bereich. Dies startet die Funktion
competitions_main und sammelt die entsprechenden Daten unter Anwendung der
erwähnten SQL-Abfrage. Anschließend generieren wir eine CSV-Datei, die wir mithilfe
der eingebauten PHP-Funktion fputcsv mit Inhalt füllen. Den kompletten Code finden
Sie unter dem Tutorial-Link.
001if (!empty($compEntries))
{
002 $fileName = strtolower($compEntries[0][‘competition_name’]);
003 $fileName = str_replace(“ “, “_”, $fileName);
004 $fp = fopen(‘../competition_entries/’.$fileName.’.csv’, ‘w’);
005 $coloumTitles[‘0’][‘competition_name’] = ‘Competition Name’;
006 $coloumTitles[‘0’][‘correct_answer_1’] = ‘Correct
Answer’;
007 $coloumTitles[‘0’][‘answer’] = ‘Answer’;
008 $coloumTitles[‘0’][‘forename’] = ‘Forename’;
009 $coloumTitles[‘0’][‘surname’] = ‘Surname’;
010 $coloumTitles[‘0’][‘email’] = ‘Email’;
011 $compEntries = array_merge($coloumTitles,$compEntries);
012 foreach ($compEntries as $fields)
{
013 fputcsv($fp, $fields);
}
014 fclose($fp);
015 header(‘location:http://’.$_SERVER[‘SERVER_NAME’].’/
competition_entries/’.$fileName.’.csv’);
}
11
Anzahl der Teilnehmer anzeigen
Ein weiteres nützliches Feature des Plug-ins ist die Möglichkeit, sich die Anzahl
der Teilnehmer eines Gewinnspiels anzeigen zu lassen, ohne die CSV-Datei herunterladen
zu müssen. Diese Information findet sich oben links im Gewinnspiel-Kasten. Sie
können auch den Besuchern Ihrer Website diese Information anzeigen lassen, indem
Sie die Anzahl der Zeilen in der Tabelle der Teilnehmereingaben – competition_entries –
abfragen. Den Code finden Sie unter dem Link aus Schritt 02.
12
Aktives/Inaktives Gewinnspiel
Falls Sie mehrere Gewinnspiele auf Ihrer Website laufen lassen möchten, ist es
eine gute Idee, die Übersicht darüber zu wahren, welche noch aktiv und welche schon
beendet sind. Um die Besucher Ihrer Seite auf dem Laufenden zu halten, könnten Sie
die Farbe der beendeten Spielboxen rot und die der aktuellen Boxen grün machen.
001$time = strtotime($data[‘closing_date’]);
002//Chance css class if comp has expired
003if ($time >= time())
{
004 $compBoxClass = ‘competitionBox’;
005 $statusText = ‘Active’; }
126 Das große WordPress-Handbuch

WordPress
Plug-ins
006else
{
007 $compBoxClass = ‘inactiveBox’;
008 $statusText = ‘Expired’;
}
13 Front-End
Kommen wir nun zum Front-End. Die Funktion, die dafür zuständig ist, dass
die Gewinnspiele im Browser des Benutzers auch tatsächlich angezeigt werden, heißt
insert_competition und befindet sich im Skript controller.php. Zuerst extrahieren wir die
ID des Gewinnspiels aus dem Shortcode und entnehmen der Datenbank die zugehörigen
Informationen.
14
Array durchlaufen
Nach der SQL-Abfrage können wir die Ergebnisse in ein Array packen und
alle Elemente in einer Schleife durchlaufen lassen. Es ist ratsam nachzuprüfen, ob die
SQL-Abfrage tatsächlich irgendwelche Daten zu dem Gewinnspiel geliefert hat. Falls dies
nicht der Fall sein sollte, könnte das Spiel bereits beendet sein – eine der Bedingungen
der SQL-Abfrage war ja, dass das Beendigungsdatum in der Zukunft liegt. Betten Sie die
Schleife in ein if-Statement und führen Sie sie nur aus, wenn das Array nicht leer ist.
001if (!empty($competitionSQL))
{
002 foreach ($competitionSQL as $competitionData)
{
003 $id = $competitionData->id;
004 $competition_name = $competitionData->competition_name;
005 $question_1 = $competitionData->question_1;
006 $answer_1_option_1 = $competitionData->answer_1_option_1;
007 $answer_1_option_2 = $competitionData->answer_1_option_2;
008 $answer_1_option_3 = $competitionData->answer_1_option_3;
009 $correct_answer_1 = $competitionData->correct_answer_1;
010 $closing_date = $competitionData->closing_date;
}
}
15
Gewinnspiel anzeigen
Als Nächstes soll das Gewinnspiel dem Benutzer angezeigt werden. Dies
bewerkstelligen wir mit etwas HTML-Code, der auf die PHP-Variablen zurückgreift, die
mit den Informationen aus der Datenbank angefüllt sind. Wir benötigen ferner eine
CSS-Datei, um dem Output ein bisschen grafische Gestaltung geben zu können, sowie
etwas JavaScript, um die von den Benutzern eingegebenen Daten zu validieren. Den
Programmcode für diesen Schritt finden Sie unter dem weiter oben genannten
Tutorial-Link.
16
Benutzereingaben validieren
Die Benutzer können bei der Eingabe von Daten natürlich Fehler machen, etwa
ein notwendiges Feld auslassen oder sich bei der E-Mailadresse vertippen. Daher ist es
sinnvoll, eine Funktion zu integrieren, welche die Eingaben validiert. In unserem Beispiel
überprüfen wir mithilfe von JavaScript, ob alle Eingabefelder ausgefüllt wurden. Der
JavaScript-Code wird ausgelöst, wenn der Benutzer den „Enter Now“-Button klickt.
001if (comp_firstname == “First Name”)
{
002 $(“label#comp_firstname_comp_error”).show();
003 $(“.errorSpacer”).show();
004 $(“input#comp_firstname”).focus();
005 return false;
}
17
E-Mailadressen validieren
Festzustellen, ob ein Benutzer im Feld für die E-Mailadresse eine Eingabe
gemacht hat, ist natürlich leicht – wir brauchen nur zu checken, ob das Eingabefeld
gefüllt wurde. Ob es sich bei der Eingabe allerdings um eine gültige E-Mailadresse
handelt, muss anders überprüft werden, etwa mithilfe der JavaScript-Methode test.
18
Ajax verwenden
Ajax ist ein nützliches Tool, mit dem sich Daten an ein PHP-Skript übermitteln
lassen, ohne die Seite erneut laden zu müssen. Wir benutzen Ajax hier dazu, die Daten
des Gewinnspiel-Formulars an ein PHP-Skript zur weiteren Verarbeitung zu senden.
Nachdem dies geschehen ist, können wir dem Benutzer mitteilen, dass seine Eingaben
empfangen wurden, und die Eingabefelder verbergen, damit es nicht zu Doppeleinträgen
kommt.
001$.ajax({
002 type: “POST”,
003 url: document.location.href,
004 data: dataString,
005 success: function()
{
006 $(‘.ip_wp_competition’).html(“”)
007 .fadeIn(1500, function()
{
008 $(‘.comp_section’).html(“Good luck “+(comp_
firstname)+”!”)
009 .append(“We will announce the winner shortly.”);
});
}
});
010 return false;
});
});
19
Vergangene Gewinnspiele löschen
Um alte Preisausschreiben auf Ihrer Seite zu löschen, benutzen Sie ganz einfach
den „Delete“-Button in der jeweiligen Box. Der Button löst eine einfache SQL-Aktion
aus, durch die sämtliche Daten des Gewinnspiels und der gemachten Eingaben entfernt
werden. Den Code hierfür finden Sie unter dem Tutorial-Link.
20
Viel Erfolg bei Ihren
Gewinnspielen! Nutzen
Sie den Spieltrieb des
Menschen aus!
Das war’s
Schauen Sie sich den kompletten Code des Tutorial-Links noch einmal an
und installieren Sie das Plug-in. Viel Erfolg bei Ihren Gewinnspielen! Oft genügen schon
bescheidene, kostengünstige Preise, um das Interesse der Besucher zu wecken. Nutzen
Sie den Spieltrieb des Menschen aus!
Das große WordPress-Handbuch 127

Plug-ins
Leistungsfähige und
ansprechende Formulare
LERNZIEL
Mithilfe von cformsII Plugin-Formulare
zu Ihrer Seite
hinzufügen
DAUER
120 Minuten
ANSPRUCH
HIER ERFAHREN SIE, WIE SIE DAS BLOG-PLUG-IN CFORMSII SO EINSETZEN,
DASS SIE EFFIZIENTE FORMULARE BEINAHE IM SCHLAF ERSTELLEN KÖNNEN.
FORMULARE GEHÖREN essenziell
zur Website-Kommunikation. Sie
können komplex, aber auch sehr simpel
aufgebaut sein und sind unter
anderem hervorragende Werkzeuge zur Datenerfassung.
cformsII macht die Erstellung benutzerdefinierter
Formulare sehr einfach. Das Plug-in
startet mit einem voreingestellten Formblatt, das
über alle typischen Textfelder verfügt und das
Sie sofort einsetzen und gegebenenfalls anpassen
können. Das Benennen und Erstellen neuer
Felder geht fix. Alle benötigten Textfeldtypen
stehen Ihnen zur Verfügung. Außerdem bietet
cformsII die Möglichkeit, individuelle Mitteilungen
hinzuzufügen und Veränderungen am Design
vorzunehmen, sowie eine Trackingfunktion.
01 Installation
Laden Sie cformsII von www.deliciousdays.com/
cforms-plugin herunter und installieren Sie es im Plug-in-
Menü des WordPress-Dashboards. Klicken Sie anschließend
auf Aktivieren.
02 Standardformular
Nach der Installation erscheint links das
cformsII-Menü, das Sie per Mausklick öffnen. Es wird
ein Standardformular angezeigt. Um den voreingestellten
Namen zu ändern, geben Sie einen neuen ein und
klicken auf Update Settings im Admin-Bereich.
03 Verschieben
Das Standardformular enthält bereits Textfelder
mit der Möglichkeit, diese zu benennen. Um eine
Bezeichnung zu ändern, geben Sie einfach eine neue
ein und klicken Sie danach auf Update Settings. Um ein
Textfeld zu löschen, klicken Sie rechts auf das X.
04 Voreinstellungen
In der Voreinstellung wird neben dem Namen
auch der zugeordnete Wert einzeilig/mehrzeilig in der
Textbox angezeigt. Um dies zu ändern, können Sie einfach
einen neuen Namen eingeben.
05
Neu arrangieren
Um ein neues Feld zu erstellen, klicken Sie auf
Add. Hierdurch wird ein neues Textfeld auf Position 1
gesetzt. Um mehrere Felder gleichzeitig hinzuzufügen,
ändern Sie den Wert neben Add auf die gewünschte
Zahl. Klicken Sie auf Update Settings.
06
Typus verändern
Wird ein neues Feld erstellt, hat es standardmäßig
einzeiligen Text. Möchten Sie auf mehrzeilig
umstellen, wählen Sie die Option im Drop-down-Menü
aus. Um ein Textfeld in ein Drop-down Menü umzuwandeln,
wählen Sie Select Box aus.
128 Das große WordPress-Handbuch

WordPress
Plug-ins
07
Status festlegen
Sind alle Felder vorhanden, muss noch deren
Status festgelegt werden. Muss ein Feld ausgefüllt
werden, machen Sie einen Haken in der ersten Box
daneben. Ist eine Mailadresse obligatorisch, markieren
Sie die zweite. Mit auto-clear wird der per Voreinstellung
im Feld stehende Text bei Eingabe gelöscht.
08 Mitteilungen
cformsII ist ab Werk bereits mit diversen
Mitteilungen, Labels und Texten ausgestattet. Um diese
Ihren Wünschen anzupassen, erweitern Sie zunächst
die zugehörigen Bereiche. Ändern Sie dann den Text,
verändern/löschen Sie die Ihnen vorgeschlagenen Optionen,
und klicken Sie auf Update Settings.
09
Neues Formular
Öffnen Sie das Admin-Menü und wählen Sie
„Add new form“. Dies erzeugt ein weiteres Formular
mit voreingestellten Feldern wie in Schritt 02. Ändern
Sie dessen Namen, bearbeiten Sie es nach Wunsch,
und klicken Sie auf Update Settings. Das „Navigate to“-
Ausklappmenü zeigt nun das neue Formular an.
10 Styling
Begeben Sie sich zum cforms-Menü und
wählen Sie die Option Styling aus. In der Voreinstellung
ist die Datei cforms.css ausgewählt. Um einen alternativen
Stil auszusuchen, wählen Sie eine Option aus der
Liste aus.
11 CSS-Editor
Um den Formularstil anpassen zu können,
enthält cformsII einen CSS-Editor. Wählen Sie Basic CSS
Editor, um das aktuelle Stylesheet zu bearbeiten. Veränderungen
können nur bei aktiven Formularen betrachtet
werden. Auf Update Settings klicken.
12
Sammeln Sie Daten
Mithilfe von Formularen können Sie Informationen
sammeln. Um Eingaben verfolgen zu können,
müssen Sie die Tracking-Datenbank aktivieren. Klicken
Sie auf Global Settings und öffnen Sie Database Input
Tracking. Aktivieren Sie Enable Database Tracking.
13
Verfolgen Sie User
Es erscheint ein neuer Menüpunkt unter dem
cformsII-Titel mit dem Namen „Tracking“. Wenn Sie
auf den Link klicken, werden Ihnen, nachdem Sie die
Tracking-Datenbank aktiviert haben, alle Eingaben in
Ihr Formular angezeigt.
14 Formulardetails
Jede Eingabe enthält unter anderem folgende
Informationen: Formularname, Formular-ID, Zeitpunkt
der Übermittlung, IP-Adresse. Klicken Sie auf die IP-
Adresse, um den ungefähren Aufenthaltsort des Senders
zu ermitteln.
15
Anwendung in der Praxis
Im Erstellen-Menü für Seiten und Beiträge
befindet sich von nun an ein cforms-Button, mit dem
Sie bestehende Formulare direkt integrieren können.
Wählen Sie ein Formular aus und klicken Sie Insert. Es
gibt aber auch einen Shortcode dafür.
Das große WordPress-Handbuch 129

Plug-ins
Machen Sie Ihr WordPress-
Blog mehrsprachig
Es gibt einen
großen Teil der
Weltbevölkerung,
der nicht Englisch
spricht.
LERNZIEL
Machen Sie Ihr Blog
mehrsprachig, erweitern
Sie die Reichweite Ihrer
Inhalte für Besucher
aus der ganzen Welt
DAUER
10 Minuten (Installation)
120+ Minuten (je Sprache)
ANSPRUCH
LERNEN SIE, WIE MAN DAS QTRANSLATE-PLUG-IN FÜR
MULTILINGUALE UNTERSTÜTZUNG IN WORDPRESS EINSETZT
Wir leben in einer immer kleiner
werdenden Welt. Vor allem aufgrund
des Internets, welches uns die Möglichkeit
gibt, grenzüberschreitend mit Menschen
auf der anderen Seite des Erdballs innerhalb
von Sekunden Kontakt aufzunehmen. Eine
der letzten Hürden, um eine globale Reichweite
für Ihren Inhalt zu gewährleisten, ist die Sprache.
Auch wenn Englisch weitverbreitet sein mag, sprechen
große Teile der Weltbevölkerung diese Sprache
nicht. Zum Glück gibt es für dieses Problem
eine ziemlich einfache Lösung mit dem Namen
qTranslate, entwickelt von Qian Qin.
In diesem Tuterial zeigen wir Ihnen, wie man
qTranslate konfiguriert und auf Ihrer Word-
Press-Seite in Betrieb nimmt, um mit Besuchern in
deren Sprache zu kommunizieren.
Das Plug-in herunterladen
01 Besuchen Sie die Seite von qTranslate-Seite und
laden Sie das Plug-in herunter. Entpacken Sie die Datei und
kopieren Sie den Inhalt in den Ordner /wp-content/plugins.
Alternativ können Sie auch den Plug-in Installer von WP verwenden
und Plugins > New im Dashboard auswählen.
Aktivieren Sie WordPress
02 Wenn Sie das Plug-in in WordPress geladen
haben, muss es aktiviert werden. Wählen Sie Plugins > All
aus, um alle installierten Plug-ins zu sehen. Suchen Sie
qTranslate aus und klicken Sie auf den Aktivierungslink
direkt darunter.
03 Grundeinstellungen
Sie können Sie Einstellungen für qTranslate
überprüfen, wenn Sie das Einstellungsmenü im Dashboard
aufrufen. Wählen Sie für die allgemeinen Einstellungen Settings
> qTranslate aus. Hier konfigurieren Sie, wie Ihre URLs
umgeschrieben werden, bzw. Datum/Zeit dargestellt wird.
URLs und Datum
04 konfigurieren
Wählen Sie unter den Ihnen angebotenen URL-Einstellungen
aus. Der URL Modification Mode gibt Ihnen die
Möglichkeit, ein für Suchmaschinen optimiertes Format
für Ihre URL zu verwenden.
Eine neue Sprache hinzufügen
05 Um eine Sprache hinzuzufügen, müssen Sie
Felder in den Einstellungen im Bereich Add Language ausfüllen.
Dafür brauchen Sie den auf zwei Zeichen basierenden
ISO-Sprachcode (Hinweise: http://bit.ly/blh2i). Tragen Sie
den Code neben Namen der Sprache und Flagge ein.
Legen Sie die Formate fest
06 Holen Sie sich den Sprachcode Ihres ausgewählten
Landes im Internet. Ein guter Ort, fündig zu werden, ist
http://bit.ly/lurimM. Klicken Sie auf Add Language, um die
Installation zu vervollständigen. Viele Sprachen sind schon
vorinstalliert und können per Mausklick aktiviert werden.
130 Das große WordPress-Handbuch

WordPress
Plug-ins
Berechtigungen prüfen
07 Nachdem Sie Add Language angeklickt haben,
wird qTranslate eine Datei auf Ihrem Server erstellen, die die
Übersetzungen beinhaltet. Dafür muss Ihr Server Schreibzugriff
erlauben. Um dies einzurichten, benutzen Sie Ihren
FTP-Client und setzen Sie Zugriffsberechtigungen des wp-includes
Ordner mit CHMOD auf 777.
Sprachen verwalten
08 Der einfache Zugriff auf Features wie Aktivierung
und verschiedene Voreinstellungen bei den Sprachen
machen die Sprachverwaltung kinderleicht. Die Pfeile
bei den allgemeinen Einstellungen im qTranslate-Bereich
erlauben es Ihnen, Einfluss auf die Reihenfolge zu
nehmen, in der die Sprachen dargestellt werden sollen.
Neuen Post schreiben
09 Um zu sehen, wie qTranslate arbeitet, müssen Sie
neuen Content generieren. Erstellen Sie einen neuen Blogeintrag,
indem Sie Posts > New auswählen. Die Textfelder haben
nun Sprachbezeichnungen. Sie können Inhalte für verschiedene
Sprachen hinzufügen, indem Sie auf das Tab klicken
und den sprachspezifischen Text eingeben.
10 Sprach-Widget
Nachdem Sie qTranslate installiert haben, erhalten
Sie ein Widget für die Seitenleiste, mit dem Sie zwischen
den verschiedenen Sprachen wechseln können.
Das Aussehen dieser Leiste können Sie im Widget-Bereich
in Ihrem Dashboard verändern.
Siedeln Sie Ihre
11 Sprachauswahl um
Sie sind nicht nur auf die Seitenleiste für die Sprachwahl
festgelegt. Sie können auch die Kopf- oder Fußzeile
Ihres Design dafür verwenden, indem Sie den oberen
Code in ihre Dokumentvorlage kopieren.
12 verändern
Inhaltsüberschriften
Auch für Überschriften existiert mehrsprachige Unterstützung.
Früher mussten Sie über Shortcodes diesen Inhalt zuordnen.
In der aktuellsten Version jedoch erlaubt es Ihnen qTranslate,
die Sprachen in die dafür vorgesehenen Felder einzutragen.
13 qTranslate-Shortcodes
Sie können auch weiterhin Shortcodes überall
in qTranslate verwenden, auch wenn sie manchmal
nicht so wie geplant funktionieren. Stolpern Sie über
eine Situation, wo sie nicht das machen, was Sie wollen,
verwenden Sie die längere Version aus dem Screenshot.
Text in PHP schreiben
14 Natürlich können Sie auch verschiedene Sprachen
in Ihrer Dokumentvorlage parsen. WordPress verwendet
jedoch keinen HTML-Code. Daher müssen Sie
eine PHP-Funktion wie im oberen Bild aufrufen.
Aktuelle Version
15 Auch wenn qTranslate mit allen Versionen funktioniert,
kann es dauern, bis das Plug-in nach einem neuen
Release ein Update bekommt. Scheuen Sie sich nicht, es auszuprobieren.
Falls es Probleme gibt, benutzen Sie Advanced
Settings > Debugging, um den Developer zu kontaktieren.
Das große WordPress-Handbuch 131

Plug-ins
Schnelleres
WordPress
für SEO und
LERNZIEL
Ihre WordPress-Website
im Hinblick auf Nutzer
und Suchmaschinen
schneller machen
DAUER
60-120 Minuten
ANSPRUCH
Besucher
WIR GEBEN IHNEN LEICHT NACHZUVOLLZIEHENDE UND PRAXISBEZOGENE
TIPPS, UM DIE GESCHWINDIGKEIT IHRES BLOGS ZU ERHÖHEN.
SEIT 2010 BENUTZT Google die Geschwindigkeit
einer Website als „Signal“ in seinen
Ranking-Algorithmen. Schnellere Seiten
haben besser gelaunte Besucher zur Folge,
sich langsam aufbauende Sites sind hingegen abträglich.
Google behauptet zwar, dass dies kein maßgeblicher
Einflussfaktor bezüglich des Rankings sei, doch
wenn Sie zufriedene Besucher und bessere Suchmaschinen-Rankings
wünschen, dann lohnt es sich, auf
Geschwindigkeit Wert zu legen.
In diesem Tutorial betrachten wir einige beliebte und
kostenlose Werkzeuge, die dazu dienen, die Geschwindigkeit
Ihrer Seite zu ermitteln. Wir stellen die wichtigsten
Faktoren vor, die darauf Einfluss nehmen, und erklären,
wie Sie effektiv und leicht die Geschwindigkeit erhöhen
und somit das Nutzererlebnis und damit verbunden hoffentlich
auch Ihr Suchmaschinen-Ranking verbessern
können. Zunächst sollten Sie den Ist-Zustand ermitteln.
03
Bleiben Sie dran
Jeder Internetauftritt ist anders. Infolgedessen
sind die Empfehlungen auf Ihre speziellen Gegebenheiten
zugeschnitten. Allen Vorschlägen folgen detaillierte
Ratschläge. Sie sollten einen Screenshot der aktuellen
Leistung Ihrer Seite machen, um eine Vergleichsmöglichkeit
zu haben, wenn Sie einige Schritte dieses Artikels
nachvollzogen haben.
04
PageSpeed Insights
Dieser Google-Service analysiert 29 Faktoren,
die die Geschwindigkeit einzelner Seiten beeinflussen,
und unterscheidet sie nach hoher, mittlerer und niedriger
Priorität. Zusätzlich kann man sich Berichte hinsichtlich
Desktop-PCs und Mobilgeräten erstellen lassen.
Machen Sie auch hiervon Screenshots des Ist-Zustands,
damit Sie nach der Optimierung eine Referenz haben.
01 YSlow-Leistungsanalyse
Yahoo hat 34 Regeln zur Verbesserung der Leistungsfähigkeit
Ihres Webauftritts aufgestellt. YSlow arbeitet
mit den 23 dieser Regeln, die getestet werden können. Das
Programm ist als Plug-in für die meisten Browser (mit Ausnahme
des Internet Explorers) erhältlich. Firefox benötigt
zusätzlich Firebug, das weitere nützliche Tools mitbringt.
02
Arbeiten mit YSlow
Nach der Installation drücken Sie auf das
YSlow- (oder Firebug-) Symbol in der Werkzeugleiste
Ihres Browsers. Die Ergebnisse variieren je nach Version
von YSlow. Bleiben Sie deshalb bei einer Version und
fokussieren Sie sich auf die Bewertung, die Ihr Webauftritt
die erwähnten 23 Regeln betreffend erreicht.
132 Das große WordPress-Handbuch

WordPress
Plug-ins
05
Was kann Ihr Host?
Die Leistung Ihres Hosts hat meistens den
größten Einfluss auf die Geschwindigkeit Ihres Internetauftritts.
Es bedeutet Aufwand, ihn zu wechseln, aber
bei einem zu bleiben, der WordPress nicht optimal
unterstützt, und sich gleichzeitig zu fragen, was man
sonst tun könnte, um den Auftritt zu beschleunigen, ist
nicht sinnvoll.
06
Nutzen Sie mod_rewrite?
Es ist wichtig, dass Ihr Webhoster mod_rewrite
unterstützt. Erstens wegen einer guten Optik der
benutzten Permalinks, zweitens braucht man es für eine
leistungsfähige Form des Disk-Caching. Einen Host
ohne mod_rewrite sollten Sie meiden.
07
Profilieren Sie Ihre Plug-ins
Auch die Plug-ins, die in Ihren WordPress-Auftritt
integriert sind, beeinflussen dessen Leistung. Das
Plug-in P3 von GoDaddy (wordpress.org/plugins/p3-profiler/)
erstellt Leistungsprofile für Plug-ins, indem es
deren Effekt auf die Ladezeit misst. Installieren Sie P3,
und starten Sie den Suchlauf.
08 Relation
Achten Sie bei den Tests nicht nur auf den
relativen, sondern auch auf den absoluten Effekt auf die
Performance. Bei unseren Versuchen war JetPack zwar
für ganze 39 % der gesamten Ladezeit aller Plug-ins verantwortlich,
doch in absoluten Zahlen betrug die Ladezeit
von JetPack weniger als 0,19 Sekunden.
09
Testen Sie das Theme
Die Performance des Themes ist der nächste
10
Content Delivery
Networks (CDN)
wichtige Punkt der Bewertung der Ladegeschwindigkeit. Eine weitere Möglichkeit zur Optimierung: CDNs – das sind
Sollten Sie ein eigenes Theme erstellen, behalten Sie das Server-Netzwerke, die statische Inhalte spiegeln und Anfragen
jeweils an den lokal am günstigsten gelegenen Server
im Hinterkopf. Verwenden Sie ein vorgefertigtes Theme,
bewerten Sie dieses sorgfältig. Sie sollten sich auf der Support-Seite
des Themes informieren, das Demo ausprobiewirkt.
Früher meist als Firmennetze betrieben, sind CDNs
leiten, was sich positiv auf Uptime und Performance ausren
und es mithilfe eines Werkzeugs auf Effektivität hin heute auch für normale Website-Betreiber verfügbar.
messen lassen, um ein Urteil fällen zu können.
Performance-Gewinn durch Caching
01 WP Super Cache
Dies ist das simplere der beiden Word-
Press-Cache-Plug-ins (verglichen mit
W3 Total Cache). Super Cache ist einfacher
zu konfigurieren.
02 Leichter Start
Nach der Installation öffnen Sie den
Reiter „Easy“ und wählen Sie „Caching
On“. Nehmen Sie sich ein paar Minuten
Zeit, um sich mit den empfohlenen
Links und Plug-ins auf dieser Seite
vertraut zu machen.
03 Optimale
Einstellungen
Um größtmöglichen Nutzen aus dem
Caching zu ziehen, aktivieren Sie mod_
rewrite im Reiter „Advanced“ ebenso wie
die anderen empfohlenen Optionen.
Fragen Sie
den Codex
Auf codex.wordpress.org finden
Sie viel Information zum
Thema WordPress-Optimierung
und Leistungsfähigkeit,
daher sollten Sie unbedingt
auf diese nützliche Quelle
zurückgreifen.
Das große WordPress-Handbuch 133

Plug-ins
11
Jetpack Photon
Photon wurde als Teil von Jetpack 2.0 herausgegeben.
Jetpack wird durch Plug-ins installiert und Sie
benötigen einen WordPress.com-Account. Gebrauchen
Sie die WordPress.com-Möglichkeit, um Jetpack zu autorisieren.
Sollten Sie Jetpack bereits benutzen, so klicken
Sie auf „Aktivieren“ auf dem neuen Photon-Panel, nachdem
Sie auf die Version 2.0 aufgerüstet haben.
13
Das ganze CDN-Paket
Wenn Sie für eine Komplettlösung bereit sein
sollten, ziehen Sie Services wie S3 (aws.amazon.com/
s3), CloudFront (aws.amazon.com/cloudfront), oder
MaxCDN (www.maxcdn.com) in Betracht. Jeder Dienst
bietet günstige Pakete für kleinere Webauftritte an. W3
Total Cache bietet eine CDN-Konfiguration an.
12 CloudFlare
CloudFlare (cloudflare.com) ist ein Netz-Performance-
und Sicherheitsservice, der die Vorteile eines CDNs
mit zusätzlichen Sicherheitseigenschaften verbindet. Wählen
Sie die kostenlosen Option. Wenn Sie Ihre Website hinzugefügt
haben, bekommen Sie neue DNS-Einstellungen,
die diejenigen in Ihrem Steuerungspanel ersetzen. Online-
Analysewerkzeuge zeigen, ob alles gut funktioniert.
Zeit ist Geld
Google sagt, dass eine um
eine halbe Sekunde
verlängerte Ladezeit zu
einem Traffic-Rückgang von
20 % führt. Amazon zeigte,
dass pro Zehntelsekunde
Verzögerung beim Laden
die Verkäufe um 1 %
zurückgehen.
14 Managed-
Lösungen 1
Wenn es Ihnen ernsthaft um Leistung geht und Sie auch
das Budget dafür haben, sollten Sie sich für eine Managed-Lösung
entscheiden. Spezialisierte WordPress-Hosts
kümmern sich üblicherweise um ein Gesamtpaket von
WordPress-basierten Lösungen. Einige davon beinhalten
CDN, andere bieten dies gegen Aufpreis an.
Optimieren Sie
die Word-
Press-Datenbank,
um Ihre
Seite zu
beschleunigen
WordPress speichert jedes Mal eine Änderung ab,
wenn Sie eine neue Seite oder ein neues Posting
speichern. Das kann sehr nützlich sein für den Fall,
dass Sie einen Fehler eingebaut haben, den Sie entfernen
möchten.
Andererseits – bis eine Seite fertig bearbeitet ist,
können dadurch bereits Dutzende Versionen von ihr
vorliegen. Wenn Sie noch Spam und ungenehmigte
Kommentare dazurechnen, kann es in Ihrer Datenbank
schon recht voll werden – das verlangsamt das
Ganze. Es gibt eine Reihe Programme zur Optimierung
der Datenbank (wir benutzen das benutzerfreundliche
WP-Optimize). Installieren Sie einfach
das Plug-in, suchen Sie eine von fünf Optimierungsoptionen
aus, und klicken Sie auf „Process“.
15 Managed-Lösungen 2
Explizite WordPress-Hoster mit Managed-Lösungen
sind auf dem Vormarsch, da WordPress immer
populärer wird. Ein Beispiel ist Pressable (www.pressable.com).
Bei diesem amerikanischen Dienst gibt es Pakete
ab 25 Dollar pro Monat aufwärts.
16
Externe Aufrufe
Seiten oder Posts mit Kommentaren halten
außerhalb Ihrer Website Ausschau, nämlich zum Beispiel
nach den Gravatar-Bildern der Verfasser – selbst
wenn diese gar keinen Gravatar besitzen. Sie können
dies unterbinden, indem Sie im Dashboard unter Einstellungen
> Diskussionen „Kein Nutzerbild“ als Standardavatar
festlegen.
17
Google Libraries
Dieses Plug-in erlaubt Ihrer Seite, gewöhnliche
JavaScript-Libraries von Googles AJAX Libraries CDN zu
benutzen statt der WordPress-eigenen Version. Das
erhöht die Chance, dass ein Besucher die Dateien bereits
gespeichert hat, und nimmt Last von Ihrem Server.
134 Das große WordPress-Handbuch

WordPress
Plug-ins
18
Zuerst die Homepage!
Da bei Websites in der Regel der meiste Traffic auf
der Startseite anfällt, sollten Sie darauf achten, dass diese
besonders schnell lädt. Falls Sie ein Blog betreiben, brauchen
Sie nicht alle Informationen auf einmal direkt auf der
Startseite zu liefern – wenn Ihr Leser ernsthaft interessiert
ist, wird er gerne tiefer schürfen, aber ein Erstbesucher
schreckt vor langen Ladezeiten einer Seite zurück.
19
Bilder erneut optimieren
Es gibt im Netz unzählige Informationen über
die Optimierung von Bildern für Webseiten, und das
nicht ohne Grund: Ein einziges unzureichend bearbeitetes
Bild kann alle anderen Verbesserungen, die Sie getätigt
haben, zunichtemachen. Wenn Ihnen also die
Geschwindigkeit am Herzen liegt, seien Sie bei der Bildbearbeitung
nicht zimperlich.
20
21
Neue Auswertung
Nachdem Sie nun einige Änderungen vorgenommen
haben, möchten Sie vielleicht die Auswertungsprogramme
erneut in Anspruch nehmen. Sollten
Sie eine CDN konfiguriert haben, können Sie Ihre
CDN-Hostnamen zu der CDN-Regel in YSlow hinzufügen,
das sollte die Bewertung verbessern.
Geschwindigkeit halten
Wir haben Ihnen diverse Optimierungsmöglichkeiten
gezeigt, aber jedermanns Setup ist anders. YSlow
bringt Sie dazu, auf Expires-Header und Entity-Tag-Einstellungen
zu achten. Einige Entwickler schwören auf Minimierung
und Image-Sprites. Es gibt bei der Performance
viele Wege, die zum Ziel führen. Bestimmt sind auch für
Ihre spezielle Website einige Ansätze dabeigewesen.
Das große WordPress-Handbuch 135

Tuning
Machen Sie Ihr Blog besonders
138 Ein Blick auf frische Retro-Designs
So bleibt der Look Ihrer Seite aktuell und dynamisch
140 Taxonomien in WordPress
verwenden
Was das ist und was Sie damit tun können
144 Überschriften animieren
Tolle bunte Headlines mit bewegten Fonts
146 Fotoslider-Header erstellen und
designen
Kreieren Sie ein interaktives Bilderkarussell
152 Passen Sie Ihr Theme mit Widgets an
Platzieren Sie Widgets an beliebiger Stelle in Ihrem
WordPress-Theme
156 Individuelle Fonts verwenden und
stylen
Mit @font-face können Sie jede Schriftart einsetzen
160 Typografie de luxe mit CSS3 und
JavaScript
Texte visuell ansprechend präsentieren
SEITE
160
136 Das große WordPress-Handbuch
Top-Tipp
Mithilfe eines
Content-Sliders
können Sie inhaltliche
Highlights länger an
exponierter Position
in Ihrem Blog
präsentieren.

WordPress
Tuning
Sagen Sie
adieu zu den fünf
Schriftarten, die
jeder Webdesigner
benutzt.
Das große WordPress-Handbuch 137

Tuning
Ein frischer
Blick auf
Retro-Designs
LERNZIEL
Verpassen Sie Ihrer Website
einen Retro-Look, indem
Sie mit Photoshop das
Design individualisieren
DAUER
60 Minuten
ANSPRUCH
2
WIR ZEIGEN IHNEN, WIE IHR DESIGN AKTUELL UND DYNAMISCH BLEIBT,
EGAL OB VON ALT NACH NEU ODER UMGEKEHRT.
Quelldateien
www.webdesignermag.
co.uk/tutorial-files/
LO-FI-DESIGNS transportieren
vergangene Zeiten in die Gegenwart.
Webdesigner nutzen diese
Effekte aus vor-digitalen Zeiten, um
die heutigen, sehr synthetisch anmutenden
Designs umzukrempeln. Hier geht es aber
nicht um eine Schlacht alt gegen neu, sondern
um analoge Designs im Wettstreit mit
digitalen.
Anders als bei Mixed-Media-Designs, die
ebenfalls Grunge-Elemente verwenden, geht
es beim Lo-Fi-Ansatz um eine Umsetzung bis
ins letzte Detail. Will Tunstall, Kreativpartner
bei Tommy (www.thisistommy.com), erklärt:
„Zunächst ist der Einsatz von Farbe essenziell.
Wir haben uns lange mit den Farben auf unseren
Seiten beschäftigt, besonders mit denen
auf der Work-Seite. Wir wussten, es muss bunt
sein. Aber damit das Design einen Retro-Look
ausstrahlt, mussten die Farben genau bis zu
dem Punkt entsättigt werden, an dem sie nicht
mehr digital wirken. Ich habe dann noch zarte
Verläufe eingebaut, die an ausgeblichene Farben
erinnern.“
Texturen spielen auch eine Rolle, will man
diesen speziellen, verwitterten Look kreieren;
verknüpft mit Digitalem wie Fotos von Asphalt,
Beton, Farbe. Tunstall verwendet ein transparentes
wiederholbares PNG, das er auf Flächen
im CSS-Code anwendet, um das Datenvolumen
gering zu halten.
Die Wahl der richtigen Schriftart hält das
gesamte Design zusammen. Tunstall sagt über
die Schriften, die Tommy einsetzt: „Wir haben
uns für League Gothic und Alternate Gothic
entschieden, die mit ihrer Rigidität ein Schmunzeln
auslösen. Eine Schriftart allein wirkt schnell
fad. Aus dem Zusammenspiel zweier Schriften,
die sich ergänzen, entstehen abwechslungsreich
gestaltete Texte.“
CSS-Texturen
Die leicht abgewetzten
Texturen
werden mithilfe
eines trans parenten
wiederholbaren PNG
erstellt, das auf CSS-
Farbhintergründe
angewendet wird.
Stockfotografien
Seiten- und Hintergrund
elemente können
mit Stockbildern von
Asphalt oder Farbe
kombiniert werden, um
einen verwitterten,
rauen Look zu erzielen.
1 Technik
Alterungseffekte
durch Struktur
Ein überzeugendes Lo-Fi-Layout wäre
undenkbar ohne zarte Texturen und entsprechende
Farbtöne. Insbesondere Texturen
erzeugen den verwitterten Effekt, wohingegen
blasse Verläufe Farben reproduzieren,
die man von alten Fotos kennt. Richtig auf
Flächen und Icons angewandt, können auf-
01 Flächen
Markieren Sie eine Fläche oder
Form (Kreis oder Rechteck). Verwenden
02 Verläufe
Verlaufsüberlagerungen aus
den Ebenenstil-Optionen wählen. Winkel
03 Unebenheiten
Im Strukturebenenmodus Fülloptionen
auf Überlagerung (60 %) setzen, der
regende Ergebnisse erzielt werden. Die Wahl
Sie eine blasse Farbe, anschließend für
auf -30 setzen. Verlauf anklicken und
Struktur eine Ebenenmaske hinzufügen.
der Schriftart ist ebenso entscheidend: Alter-
Vorder- und Hintergrund einen helleren
ziehen, um Highlights links oben an der
Beide Ebenen auswählen, Strg/Rechtsklick
nate Gothic, Impact, Menlo, Arial, BlairMdITC
beziehungsweise dunkleren Ton auswäh-
Ecke Ihrer Form zu platzieren. Nun eine
und auf Smart Object klicken. Kopieren, um
TT weisen in die richtige Richtung.
len (in unserem Beispiel #c42036).
Grunge-Textur importieren.
weitere Flächen zu gestalten.
138 Das große WordPress-Handbuch

WordPress
Tuning
1
3
Farbtöne
Entsättigte Farben
dienen dazu, eine
digitale Optik zu
vermeiden. Farbverläufe
helfen dabei,
den Eindruck von
„über Jahre hinweg
ausgeblichen“ zu
erzielen.
Fette Schrift
Versalien ziehen das
Auge an! Unterschiedliche
Buchstabenstärken
und ­größen
konzentrieren den Blick
auf den Text, was durch
den schlichten
Hintergrund noch
unterstützt wird.
Typografie
Die Typografie der
Website weist
Charakter und
Struktur auf. Durch
den Mix aus sich
gegenseitig
ergänzenden
Schriftarten macht
sie einen frischen
Eindruck.
3 Technik
Aus neu mach alt
Nutzen Sie die Photoshop-Anpassungsfilter,
Fülloptionen und Pinsel, um Lo-Fi-Filter mit
mehreren Ebenen zu erstellen und „neu“ in „alt“
zu verwandeln.
01
Helligkeit und Farbe
Foto duplizieren und die Füllmethode
Farbig abwedeln auf 40-60 % setzen.
Darauf einen Sepia-Filter mit 70 % Farbdichte
anwenden. Dann eine Helligkeits-/
Kontrast-Anpassungsebene einfügen mit
einer Sättigung von 20 %.
2 Inspiration
Ein Blick zurück
Will Tunstall erklärt, woher die Inspiration
zur Website kam: „Ideen kamen von überall,
vornehmlich inspiriert durch die Gestaltung
von Print-Kampagnen der 1950er und
1960er Jahre. Allen voran die großen amerikanischen
Marken wie Pepsi und Chrysler.
Aber wir haben uns auch von den Verpackungen
des Pharmaherstellers Geigy aus
den 1970ern beeinflussen lassen. Diese
Marken stehen für fette Farben, Formen
und Schrifttypen. Aber auch Anklänge an
Spielzeug- und Lebensmittelverpackungen
um 1900 sind erkennbar.“
Gealterte
Farbtöne
Sie möchten
vergangene Zeiten
wachrufen: Photoshop
hält Farbfelder aus
dem PANTONE-System
vor, auf die über den
Farbfächer
zugegriffen wird.
02 Gradationskurven
Tonwertkorrektur mit 20 % Sättigung
anwenden. Anpassungsebene für
Gradationskurven hinzufügen und die Lo-
Fi-Gradationskurven-Voreinstellung aus den
Quelldateien laden. Durch die RGB-Kanäle
(via RGB-Menü) checken, um ein Gefühl
dafür zu bekommen.
03 Aufhellen
Für den ausgeblichenen Polaroid-
Effekt eine neue Ebene aufmachen und
große 0-%-Härte-Pinsel in Rot/Orange um
das Bild positionieren. Den Füllmodus auf
Farbig abwedeln (40 % Deckkraft) setzen.
Ebenen zusammenführen und einen niedrigen
Rauschfilter anwenden.
Das große WordPress-Handbuch 139

Tuning
Taxonomien
in WordPress
verwenden
HIER ERFAHREN SIE, WAS TAXONOMIEN SIND UND
WIE SIE SIE IN IHREM BLOG EINSETZEN KÖNNEN.
• Im Admin-Bereich von
WordPress wird hier die
individuelle Taxonomie
Genres angezeigt.
WAS IST EINE Taxonomie? Es handelt sich
dabei um einen Klassifizierungsmechanismus
für eine Gruppe von Elementen, denen
ein bestimmtes Feature oder eine bestimmte
Eigenschaft gemeinsam ist. Unterteilt man beispielsweise
einen Obstkorb nach den Farben der Früchte, so
stellt das Kriterium der Farbgruppe eine Taxonomie dar.
Auf die Blogosphäre übertragen, wäre etwa die Einteilung
von Beiträgen nach Genres (wie etwa in der Musik
oder bei Filmen) eine Taxonomie.
Bei WordPress sind bestimmte Taxonomien bereits
standardmäßig eingebaut, darunter Kategorien und
Tags. In diesem Tutorial wollen wir uns jedoch mit
individuell definierten Taxonomien beschäftigen. Die
Definition wird in der Datei functions.php eines Themes
durchgeführt. Diese Datei enthält alle Zusatzfeatures
des Themes, die nicht standardmäßig von der Word-
Press-Software abgedeckt sind.
Falls Sie sich noch nicht damit auskennen, wie ein
WordPress-Theme funktioniert, wäre es vielleicht eine
gute Idee, sich in dieser Hinsicht zunächst ein bisschen
zu informieren, denn einige Schritte dieses Tutorials
erfordern möglicherweise entsprechendes Vorwissen.
Wir arbeiten mit einem lokalen Testserver. Wie Sie
einen solchen mit der XAMPP-Software speziell für
WordPress-Testzwecke einrichten, erfahren Sie in der
ausführlichen (englischsprachigen) Schritt-für-Schritt-
Anleitung unter bit.ly/gNjZG.
In diesem Tutorial wollen wir uns mit
individuell definierten Taxonomien
beschäftigen.
LERNZIEL
Taxonomien für Ihre
WordPress-Präsenz
definieren und realisieren
DAUER
45 Minuten
ANSPRUCH
Quelldateien
www.webdesignermag.
co.uk/tutorial-files/
01 Vorbereitungen
Wenn Sie XAMPP installiert haben (siehe Einleitung)
sowie eine jungfräuliche Version der WordPress-
Software, können Sie loslegen. Rufen Sie über localhost/
WordPress Ihre WordPress-Website auf, um zu überprüfen,
dass alles korrekt funktioniert. Loggen Sie sich
anschießend über das Back-End ein und verfassen Sie
einige Testpostings.
02
functions.php öffnen
Die Datei functions.php enthält Funktionen,
die spezifisch für das zugehörige Theme sind und nicht
zum Standardumfang der WordPress-Software gehören.
Sie befindet sich im Verzeichnis des jeweiligen Themes.
Öffnen Sie die functions.php des Themes Twenty
Eleven im Ordner WordPress/wp-content/themes/
TwentyEleven.
03
Die erste Taxonomie 1
Fügen Sie den nachfolgenden Code am Ende
der functions.php ein und speichern Sie die Datei. Wenn
Sie nun das WordPress-Back-End aufrufen, werden Sie
bemerken, dass eine Taxonomie „Genres“ zum Beiträge-
Menü hinzugefügt worden ist. Die add_action-Zeile
sorgt dafür, dass die Taxonomie beim Laden der Seite
registriert wird.
001 register_taxonomy('genre', 'post', array(
002 'hierarchical' => false, 'label' =>
'Genres',
003 'query_var' => true, 'rewrite' => true));
004
005
006
007 add_action( 'init', 'add_custom_
taxonomies', 0 );
04
Die erste Taxonomie 2
Schauen wir uns den Code von eben noch
einmal genauer an. Die Eigenschaft register_taxonomy
enthält mehrere Werte, nämlich den Namen, den Typus
sowie Argumente. Der Name ist schlicht die Bezeichnung
der Taxonomie, in unserem Fall also „Genres“, während
der Typus „post“ ist, da die Taxonomie auf Postings
angewendet werden soll.
05
Die erste Taxonomie 3
Der dritte Wert sind die Argumente der Eigenschaft,
hier ein Array, das die Darstellung der Taxonomie
festlegt. Ändern Sie den Code für das Array wie folgt,
um mehr Ordnung hineinzubringen.
001 function add_custom_taxonomies() {
002
003 register_taxonomy('genre', 'post', array(
004
005 'hierarchical' => true,
006
007 'labels' => array(
008
140 Das große WordPress-Handbuch

WordPress
Tuning
• Es können nun verschiedene (zum
Beispiel musikalische) Genres
hinzu gefügt werden. Diese können
auch hierarchisch angeordnet werden.
• Beim Erstellen eines neuen
Blog-Beitrags werden die Taxonomien
in der linken Spalte angezeigt.
• Die Liste der Taxonomien wird mit
dem Beitrag dargestellt.
009 'name' => _x( 'Genres', 'taxonomy general
name' ),
010 'singular_name' => _x( 'Genre',
'taxonomy singular name' ),
011 'search_items' => __( 'Search
Genres' ),
012 'all_items' => __( 'All Genres'
),
013 'parent_item' => __( 'Parent Genre' ),
014 'parent_item_colon' => __( 'Parent
Genre:' ),
015 'edit_item' => __( 'Edit Genre' ),
016
017 'update_item' => __( 'Update Genre' ),
018 'add_new_item' => __( 'Add New
Genre' ),
019 'new_item_name' => __( 'New Genre
Name' ),
020 'menu_name' => __( 'Genres' ),
021
022 ),
023
024 'rewrite' => array(
025 'slug' => 'Genres',
026
027 'with_front' => false,
028 'hierarchical' => true
029 ),
030
031 ));
032 }
06
Kategorien erstellen
Jetzt wird die neue Taxonomie in der Beiträge-Sektion
Ihrer WordPress-Seite angezeigt, und Sie
können eine beliebige Anzahl Kategorien erstellen. Für
unser Beispiel nehmen wir musikalische Genres und
dazu jeweils noch Unterkategorien.
07
Beitrag verfassen
Erstellen Sie nun einen neuen Beitrag in Ihrem
WordPress-Blog. Sie werden sehen, dass die neuen
Kategorien rechts auf der Seite angezeigt werden. Ordnen
Sie das Posting einer Kategorie zu und publizieren
Sie es. Einige der Taxonomien werden im Front-End
noch nicht berücksichtigt.
08
Taxonomie anzeigen
Öffnen Sie die Datei content-single.php aus
dem Standardverzeichnis des Themes und fügen Sie
den folgenden Code in die Schleife ein. In unserem
Fall ist die beste Stelle dafür direkt nach dem Tag
. Speichern Sie die Datei
und sehen Sie sich Ihren Beitrag an, dort werden Sie
die Taxonomiedaten sehen. Die Listenvariable gibt die
Daten in einem -Format aus.
001
09
Widget für Wortwolke
Nun da die Daten zugänglich sind, erzeugen
Sie ein Widget für die Seitenleiste der Startseite Ihres
Blogs. Das Widget wird eine Tag-Cloud (Wortwolke)
der Genres-Taxonomie anzeigen. Erstellen Sie eine
neue Datei namens taxonomy-sidebar.php im Plug-in-
Verzeichnis und füllen Sie sie mit dem folgenden Code,
der die Basisinformationen des Plug-ins enthält.
001

Tuning
• Hier sehen Sie die Seitenleiste
mit der individuellen
Taxonomie. Die Ergebnisse
werden in der Anordnung
einer Tag-Cloud dargestellt.
• Mithilfe von CSS lässt sich die
Darstellung verändern, etwa
zu einer Reihe.
• Die Anzeige in Form einer
Menüliste wird mit unserem
zweiten Plug-in erzeugt.
007 Version: 1
008 Author URI: http://localhost/
009 */
10
Erste Funktion
Zu den Basisinformationen kommt nun der
eigentliche Programmcode. Die folgenden Zeilen legen
die Grundlage für das Seitenleisten-Plug-in. Fügen
Sie diese der Datei taxonomy-sidebar.php hinzu und
speichern Sie die Datei. Die Taxonomien werden in der
Seitenleiste geordnet nach Anzahl der zugehörigen
Postings angezeigt.
001 function displayTaxonomy()
002 {
003 wp_tag_cloud( array( 'taxonomy' =>
'genre', 'number' => 45 ) );
004 }
11
Zweite Funktion
Wir können nun aus den Taxonomien eine
Wortwolke erzeugen, allerdings müssen wir dies noch in
der Seitenleiste aktivieren. Platzieren Sie folgende Zeilen
unter die displayTaxonomy-Funktion. Sie generieren den
Seitenleisten-Code für die Anzeige der Wortwolke.
001 function widget_displayTaxonomy($args) {
002 extract($args);
003 echo $before_widget;
004 echo $before_title;?>Taxonomies

WordPress
Tuning
Die native
WordPress-
Funktion für
Tag-Clouds
DIE FUNKTION wp_tag_cloud ist bei
WordPress bereits eingebaut. Sie
ermöglicht es, schnell Wortwolken auf
Basis von Kategorien oder individuellen
Taxonomien zu erzeugen. Die
Funktion kann dank diverser Variablen
sehr flexibel angepasst werden.
Die Variablen beinhalten unter
anderem smallest und largest, womit
das Spektrum der Fontgrößen der
Tags festgelegt wird, außerdem kann
die Anzahl der Tags in der Wortwolke
bestimmt und eine Formatoption
eingestellt werden (flat oder Liste).
004 Plugin URI: http://localhost/
005 Description: Taxonomy Sidebar Menu
006 Author: Your Name
007 Version: 1
008 Author URI: http://localhost/
009 */
15
Menü erzeugen
Fügen Sie darunter noch den folgenden Programmcode
ein. Er erzeugt das zweite Plug-in und versetzt
uns in die Lage, den -Block zu programmieren,
der die Daten enthalten wird. Das h3-Tag benennt das
Seitenleisten-Menü, Sie können dort auch etwas anderes
eintragen.
001 function displayTaxonomy()
002 {
003 echo'
004 Music
Genres'
werden als Array in der Variablen $genres gespeichert.
In diesem Schritt beginnen wir außerdem mit dem
-Block.
001 $genres = get_terms('genre', 'hide_
empty=1');
002
003 echo '';
Verschiedene
Themes
Vieles, was hier beschrieben
wird, müsste beim Wechsel
auf ein anderes Theme
repliziert werden, da es nicht
übernommen wird. Jedes
Theme besitzt seine eigene
functions.php-Datei.
17 Erste
Schleife
Wir kreieren nun unsere erste
Schleife, die den Rest des
Menüs ausgeben wird. Die
Schleife nimmt das Array
aus Schritt 16 und formatiert
den Inhalt so, dass er
als Teil der Liste fungieren
kann. Platzieren Sie diese
foreach-Schleife unter den
Code des letzten Schritts.
001 foreach( $genres as $genre ) {
002
003 echo ''.$genre- >name.'
';
004 $wpq = array( 'post_type' => 'genre',
'taxonomy' => 'genre', 'term' =>
$genre->slug );
005 $genre_posts = new WP_Query ($wpq);
18
Zweite Schleife
In die erste Schleife wird ein weiteres foreach-
Statement eingefügt. Wie zuvor wird es den Inhalt des
Arrays durchgehen und den korrekten HTML-Code
ausgeben, der für das Menü verwendet wird. Den folgenden
Code unter dem bisherigen einfügen.
001 foreach( $genre_posts->posts as $post ) {
002 echo ''.$post->post_
title.'';
003 }
19
Schleifen schließen
Um die Funktion zu komplettieren, fehlt noch
ein Stück Code. Es müssen nämlich noch die beiden
Schleifen geschlossen und das finale HTML-Element
(zur Schließung der - und -Tags) hinzugefügt
werden. Folgendes wieder unten an den bestehenden
Code anfügen:
20
Sidebar formatieren
Wie beim ersten Plug-in müssen wir wieder die
Seitenleiste formatieren. Sie können den entsprechenden
Code aus dem ersten Programm kopieren und ihn unterhalb
der Funktion displayTaxonomy einfügen. Er bestimmt
den Output vor und nach dem Aufruf der Funktion.
001 function widget_displayTaxonomy($args) {
002 extract($args);
003 echo $before_widg
004 echo $before_title;?>Taxonomies

Tuning
lernziel
Animierte Überschriften
per HTMl5 generieren
dAuer
90 Minuten
AnsprucH
Überschriften
animieren
ERSTELLEN SIE TOLLE BUNTE HEADLINES MITHILFE ANIMIERTER FONTS,
UM IHR BLOG NOCH ATTRAKTIVER ZU GESTALTEN.
AUF EINER WEBSITE mit dunklen
Hintergründen springt kolorierter,
schick gestalteter Content sofort ins
Auge – egal ob es sich dabei um Fotos,
Schriften oder Illustrationen handelt. Diese Praxis
hat sich seit langem bei der Präsentation von Mappen
bewährt, die auf Papier zum Kunden getragen
werden. So überrascht es nicht, dass dieses Prinzip
auch im Online-Bereich Anwendung findet, zum
Beispiel bei Rogge & Pott, deren Website bisherige
Designprojekte auf einem dunkelgrauen
Hintergrund vorstellt. Animierte Überschriften,
die im Bild aufspringen, verleihen
diesem Präsentationsstil eine neue
Note. Das Ganze wurde mit Flash mit
Überblendmodi umgesetzt, um dort,
wo Wörter sich überlappen, Bereiche
mit Helligkeit zu erzeugen. Der Text
bewegt sich auf verschiedenen Seiten ins
und aus dem Bild, je nach Navigationsstil.
Eine
Alternative
zu Flash
Es ist möglich, den gleichen
Effekt mit HTML5 Canvas zu
realisieren. Das gesamte Projekt
muss dann programmiert und
das canvas-Element auf
globalCompositeOperation
= “lighter” gesetzt
werden.
2
1
3
Leuchtender Text
Jede Überschrift im Projektbereich
ist als Animation in das
Design eingebettet und verfügt
über eine eigene helle Farbe,
die in starkem Kontrast zum
Hintergrund aufleuchtet.
Überblendmodi
Überblendmodi steuern die
Wiedergabe sich überdeckender
Farben. Wenn der Text sich
überlappt, simuliert dieser Modus
sich überblendendes farbiges Licht,
sodass schließlich Weiß entsteht.
Sachte, sachte
Sobald die einzelnen
Wörter auf der Webseite
erscheinen, nutzt die
Animation einen Effekt, der
die Bewegung verlangsamt,
bevor sie anhält.
Bunte Kästchen
Unter den einzelnen Projekttiteln
auf der Übersichtsseite
erscheint eine Reihe bunter
Kästchen, deren Farbe den
unterschiedlichen Projektkategorien
zugeordnet ist.
Projektportfolio
Wenn der Nutzer eine
Projektkategorie anklickt,
bewegen sich die anderen
Überschriften aus dem
Bild, bis die ausgewählte
übrig bleibt.
144 Das große WordPress-Handbuch

WordPress
Tuning
1 Inspiration Kontrast gestalterisch nutzen
Kontrast als gestalterisches Mittel
gehört zum Handwerkszeug
eines Designers und sollte bei der
Arbeit an einer Benutzeroberfläche
unbedingt bedacht werden. Es ist
wichtig zu verinnerlichen, dass die
Schnittstelle einer Website nicht
allein der Navigation dient. Auch
Illustrationen, Text, Video, Ton oder
Animation spielen ihre Rolle in der
Kommunikation mit dem Nutzer.
Mit einer kontrastreichen Website
lässt sich klar und direkt kommunizieren,
sie sichert hohe Aufmerksamkeit,
weil die Botschaft deutlich
ins Auge springt. Ein Beispiel für
hohen Kontrast sind helle Schriften
auf dunklem Grund.
2
Technik Animieren Sie die Überschriften
3 Technik
Was sind
Überblendmodi?
Worum es bei Überblendmodi geht, ist
nicht ganz einfach zu erklären, obwohl die
Programme, mit denen wir Designer arbeiten,
sie meistens an Bord haben. Hier erläutern
wir ansatzweise die Grundlagen.
01
Titel wählen
In Flash per Textwerkzeug
einen Titel für die Website in Leuchtendblau
erstellen. Als Hintergrundfarbe
des Dokuments Dunkelgrau auswählen,
so sticht die Schrift hervor.
02
Clip erstellen
Text markieren und im
Anpassungsmenü „In Symbol umwandeln“
klicken. Benennen, Movie-Clip
auswählen und bei Registrierung das
Kästchen oben links anhaken.
03 Wegschieben
Den Text seitlich nach
nach links oder rechts schieben,
denn wir werden die Titel aus unterschiedlichen
Positionen/Richtungen
ins Bild fliegen lassen.
01 Additive
Farbmischung
Man spricht von additiver Farbmischung,
wenn die Farbvalenz sich überlappender
Pixel addiert wird. Wenn genügend Farben
sich überlappen, entsteht der Farbwert
Weiß (wie auch im Lichtspektrum).
04 Überblenden
Bei den Eigenschaften
das Menü der Überblendmodi
aufrufen. Einstellung von Normal
auf Hinzufügen setzen, um weitere
Farbeffekte zu erzielen.
05
Rahmen dazu
In der Zeitleiste Rahmen 90
markieren. F5 drücken, um neuen Rahmen
hinzuzufügen. Mit Strg/Rechtsklick
auf die Zeitleiste Bewegungstween einfügen.
Text linksbündig ausrichten.
06
Sachter Eintieg
Im Bewegungseditor nach
ganz unten scrollen und im Bereich
Ease den Simple (Slow)-Parameter
von 0 auf 100 setzen.
02 Subtraktive
Farbmischung
Eine subtraktive Farbmischung ensteht, wenn
man Farben oder Tinten miteinander mischt:
irgendwann entsteht Schwarz. Der subtraktive
Überblendmodus ist dafür ein Beispiel, Abdunkeln
und Multiplizieren funktionieren ähnlich.
07 X-Achse
Im Bewegungseditor zu
den Eigenschaften für X scrollen
und im Ease-Menü von No Ease
zu Simple (Slow) wechseln, um den
sachten Übergang zu aktivieren.
08 Wiederholen
Weitere Wörter hinzufügen
und in Movie-Clips konvertieren.
So animieren, dass sie aus verschiedenen
Positionen mit unterschiedlicher
Geschwindigkeit erscheinen.
09 Testen
Auf Cmd/Strg+Enter drücken,
um die Animation zu testen.
Es legt sich dabei eine SWF-Datei
im Ordner ab, in dem das Pojekt
gespeichert ist.
03 Überlagerungsmodus
Dieser Modus ist ein Mix aus den beiden
anderen. Helle Stellen werden lichter, dunkle
noch dunkler, entsprechend dem Verlauf einer
S-Kurve. Das führt zu spannenden Resultaten –
vor allem bei sich überlappenden Bildern.
Das große WordPress-Handbuch 145

Tuning
Fotoslider-
Header
erstellen und
designen
LERNZIEL
Lernen Sie, wie man einen
interaktiven Fotoslider-
Header erstellt
DAUER
90 Minuten
ANSPRUCH
FAST JEDEmoderne Website hat
einen Fotoslider auf der Startseite.
Damit zeigen Sie nicht nur Ihre
Programmierkünste, sondern fesseln
die Aufmerksamkeit des Besuchers.
Diese Plug-ins sind großartig und wir empfehlen
Ihnen, sie zu benutzen. In diesem Tutorial
designen wir unseren Slider mit Photoshop und
erstellen ihn mit HTML5 und CSS3. Auf vielen
Websites verwendet und sehr beliebt sind
jQuery-Karussell-Plug-ins. Daher sorgen wir für
den „WOW“-Faktor und benutzen den
WOW-Slider (wowslider.com) als Slider-Plug-in.
Als Nächstes starten wir unseren Lieblingstexteditor
(zum Beispiel Dreamweaver) und
erstellen einen imposanten Fotoslider.
KREIEREN SIE EIN INTERAKTIVES BILDERKARUSSELL MIT PHOTOSHOP
UND SETZEN SIE ES MIT HTML5 UND JQUERY IN BEWEGUNG
QUELLDAtEIEN
www.webdesignermag.
co.uk/tutorial-files/
Damit zeigen Sie
nicht nur Ihre
Programmierkünste,
sondern fesseln auch
den Besucher.
• Fotoslider können einer
Website Dynamik verleihen,
aber Hauptsache, der
Content ist mindestens
genauso spannend.
01
Hintergrund
erstellen
Erstellen Sie eine neue 1200 x 700 px
große Datei und füllen Sie den Hintergrund
mit der Farbe #e6f1e7. Als Nächstes
Filter > Störungsfilter > Störungsfilter hinzufügen,
die Verteilung auf Einheitlich mit
einem Anteil von 3 % stellen. Danach
erstellen Sie zwei senkrechte Leitlinien
mithilfe des Tools unter Ansicht > Neue
Linie mit 120 px bzw. 1080 px Länge. So
erhält man einen Arbeitsbereich von 960
px, dem Web-Standard.
02
Obere grüne Leiste
Benutzen Sie das Auswahlrechteck, um oben einen ca. 15
px hohen Streifen über der gesamten Breite zu markieren. Eine neue
Ebene erstellen, diese „obere Leiste“ nennen und die Auswahl mit
Grün füllen (#9dcd67). Um der neuen Ebene den gleichen Anteil an
Störungsfilter zu geben, drücken Sie Strg+F.
146 Das große WordPress-Handbuch

WordPress
Tuning
Muster geben
Das Logo hervorheben
03 04 05
Öffnen Sie die „pattern.jpg“ von der CD und
Das Logo mit dem horizontalen Textwerkzeug
wählen Sie Bearbeiten > Muster hinzufügen. Nochmals
eine ca. 15 px hohe Leiste unter der oberen Leiste mit
dem Auswahlrechteck markieren, Füllwerkzeug wählen
und oben rechts Muster auswählen. In einer neuen Ebene
kann die Auswahl nun mit dem Muster gefüllt werden
und die Transparenz auf 20 % gestellt werden.
ausschreiben (Größe 48 px, Farbe: #999999). Wir haben
die Schriftart Lobster 1.4 aus den Google Web Fonts
(www.google.com/webfonts) benutzt. Ctrl/Rechtsklicken
auf die Schriftebene und Fülloptionen auswählen. Fügen
Sie Schatten nach innen mit 2 px Abstand und Größe hinzu,
und reduzieren Sie die Transparenz auf 35 %.
Logo-Trennstrich und
Untertitel
Das Linienwerkzeug auswählen und Glätten ausstellen.
Auf einer neuen Ebene eine ca. 30 px lange Linie in der
Farbe #e0e0e0 zeichnen. Fügen Sie direkt daneben
noch eine weitere Linie in #ffffff hinzu. Das Logo wird
durch den Untertitel in 15 px und der Schriftart Century
Gothic vervollständigt.
Der perfekte Pfeil
durch den Mittelpunkt des Logos legen. Eine neue Ebene
erstellen, diese unter den „Home“-Text legen und
„Overstate“ nennen. Mit dem Auswahlrechteck eine Fläche
markieren und diese mit unserem Streifenmuster
und einer Transparenz von 20 % füllen. An dieser Stelle
wird die Farbe des „Home“-Textes in #9dcd67 geändert.
Navigationsmenü
06 Schreiben Sie den Menütext ebenfalls in 15 px Der Hintergrund
Größe und Century Gothic. Eine horizontale Leitlinie 07 des Sliders
Jetzt kann der Slider erstellt werden. Mit dem Auswahlrechteck
eine ca. 370 px hohe Fläche zwischen den beiden
Seitenhilfslinien markieren und mit der gleichen grünen
Farbe und dem gleichen Störungsfilter wie die obere
Leiste füllen. Dazu den Shortcut aus Schritt 2 benutzen.
01
Der Pfeilhintergrund
Neue Ebene erstellen und „arrow bg“ nennen.
Dann eine Auswahl mit der Auswahlellipse
treffen und mit Weiß füllen und die
Transparenz auf 20 % senken.
02
Navigationspfeil
Öffnen Sie das Schattentool und
finden Sie einen Pfeil. Auf einer neuen Ebene
einen Pfeil in den Kreis zeichnen. Dann
Bearbeiten > Transformieren > Horizontal
spiegeln, um den Pfeil umzudrehen.
08
Das Hauptbild
Wählen Sie ein eigenes Bild oder downloaden
Sie das Bild www.sxc.hu/photo/1361773 als Beispiel – es
ist nur wichtig, dass es größer als 1000 x 400 px ist. In
Photoshop öffnen und die Hintergrundebene lösen. Dann
Strg-Klicken auf die Ebene, um sie auszuwählen, und dann
Bearbeiten > Auf eine Ebene reduziert kopieren.
09
Hauptbild
platzieren
Zurück im Hauptdokument
legen Sie zwischen die
Seitenhilfslinien auf jeder Seite
je eine Hilfslinie mit einem
Abstand von 15 px. Mit dem
Auswahlrechteck eine Fläche
der Höhe 385 px markieren.
Informiert
bleiben
Bei der Arbeit mit Markiertools
ist es praktisch,
die Info-Palette
(F8) geöffnet zu
haben, um Größen
und Koordinaten
zu sehen.
03
Fertigstellen
Zum Schluss Strg/Rechtsklick auf
die Schattenebene, um den Ebenenstil
anzupassen. Einen Inneren Schatten einstellen
und die Transparenz auf etwa 50 % senken.
Das große WordPress-Handbuch 147

Tuning
Seitenschatten
Jetzt wird der Schatten seitlich hinter das Bild
gelegt. Eine neue Ebene unter dem Slider-Bild erstellen
und diese „Schatten“ nennen. Anschließend mit dem
Auswahlrechteck eine Fläche der Größe 945 x 338 px
markieren und mit Schwarz (#000000) füllen. Einen
Gaußschen Weichzeichner von ca. 7,4 px einstellen und
die Transparenz auf 70 % stellen.
Das Bild einfügen
10 11 12
Jetzt unser Bild in die Auswahl einfügen. Dazu
auf Bearbeiten > Einfügen Als > Einfügen In gehen und
mit dem Frei-Transformieren Tool das Bild entsprechend
anpassen. Als Nächstes geben Sie dem Bild im Fülloptionen-Menü
eine 1 px Kontur in #999999. Diese Ebene
„Hauptbild“ nennen.
Slider-Streifen
Jetzt wird der gestreifte Banner hinter dem
Slider erstellt. Einmal mehr mit dem Auswahlrechteck
eine Fläche über die gesamte Breite des Dokuments
markieren, eine neue Ebene erstellen, diese „Streifen“
nennen und mit dem gestreiften Muster bei einer Transparenz
von ca. 20 % füllen.
Den Buchdruck-Effekt
erzielen
Der Buchdruck-Effekt, den wir für das
Logo erzeugt haben, ist einfach zu realisieren
und heute einer der üblichsten
Effekte im Netz. Sehr viele Designer
benutzen die gleiche Farbpalette für
den Hintergrund und nur den inneren
Schatten, um den Buchdruck-Effekt zu
erzeugen. Wir können etwas mehr erreichen,
als wir in diesem Tutorial gezeigt
haben – aber nur etwas.
Im 4. Schritt haben wir unseren
Schriftzug mit einer schönen grauen Farbe
ausgeführt und nur einen leicht dunkleren
inneren Schatten hinzugefügt, um
den gewünschten Effekt zu erzielen. Man
könnte auch einen weißen Schlagschatten
mit einer Distanz von 1 px und einer
Größe von 2 px benutzen, um dem Text
unten eine subtile weiße Grenze zu
geben. Dieser kleine Trick kann einen
enormen Unterschied machen.
Durch Gruppen
organisieren
Beim Designen in
Photoshop ist es immer
hilfreich seine fertigen
Ebenen in Gruppen
anzuordnen, einfach
Strg+G drücken
13
Der Slider-Schatten
Mit dem Auswahlrechteck eine Fläche unter dem Slider markieren, welche
die gleiche Breite wie das Hauptbild hat und 45 px hoch ist. Man erstellt eine neue
Ebene namens „Slider-Schatten“ und füllt sie schwarz. Auf Bearbeiten > Transformieren
> Perspektivisch verzerren gehen, auf die obere Ecke klicken und sie nach
rechts ziehen, um die oberen Ecken, wie im Bild, nach innen zu verschieben.
Schatten krümmen
14 15
Jetzt, da der Schatten die richtige Perspektive hat,
wird er noch etwas nach oben gebogen. Auf Bearbeiten >
Transformieren > Verkrümmen gehen, unten in der Mitte
der Fläche klicken und hochziehen, um den Bogen zu
erstellen. Sie können auch weiter herumspielen, aber hier
berührt der Bogen fast die Unterseite des Bildes.
Das Design abrunden
Der Schatten passt, er braucht nur noch den richtigen
Weichzeichnungsfilter. Auf Filter > Weichzeichnungsfilter
> Gaußscher Weichzeichner gehen und die gleichen
Eigenschaften wie vorher benutzen – also 7.4 px. Schließlich
die Transparenz auf 40 % reduzieren und mit dem Verschiebe-Tool
höher schieben, leicht unter den Slider.
148 Das große WordPress-Handbuch

WordPress
Tuning
16
Hintergrund platzieren
Als Erstes das Design in Photoshop öffnen
(oder einfach die Datei von der CD nehmen). Alle Ebenen
außer denen für den Hintergrund, die obere Leiste
und die Slider-Streifen verstecken. Mit dem Auswahlrechteck
bei ca. 115 px Breite eine Fläche von oben nach
unten markieren, auf Bearbeiten > Auf eine Ebene reduziert
kopieren gehen und als „bg.jpg“ im Ordner
„images“ speichern.
17
Logo auswählen
Bei versteckter Hintergrundebene ein Auswahlrechteck
um das Logo ziehen und als PNG-Datei im
„images“-Ordner speichern. Auf diese Art und Weise hat
das Logo einen transparenten Hintergrund und kann
auf jeder beliebigen Hintergrundfarbe oder -textur
benutzt werden.
18
Slider-Hintergrund und
Overstate
Hier wird der Overstate markiert und gespeichert, wie im
letzten Schritt. Nun auf die Ebene des grünen Slider-Hintergrunds
Strg-klicken, um es komplett zu markieren,
dann auf Bearbeiten > Auf eine Ebene reduziert kopieren
gehen und es erneut im „images“-Ordner speichern.
19
Slider-Schatten
Es ist wieder ganz einfach. Den Hintergrund
ausblenden, per Auswahlrechteck den Schatten auswählen
und als PNG speichern. Das ist alles, was
gebraucht wird, um Header und Slider zu erstellen.
20
HTML5 Doctype
Dreamweaver starten (oder Ihren bevorzugten
Texteditor) und eine neue Datei erstellen; entweder
eine neue HTML5 Datei oder den HTML5 Doctype
manuell einfügen. Erstellen Sie einen Link zur style.css
Datei (welche gleich erzeugt wird) in der Kopfzeile und
speichern Sie die Datei als „index.html“.
001
002
003
004
005
006 WOW slider
007
008
009
010
011
012
013
014
015
016
017
Der Header Tag kann überall benutzt werden,
aber oben auf der Seite kommt er am besten
zur Geltung.
Packen Sie es ein
21 22
Wir kreieren einen Wrapper, um die Breite
unserer Seite zu definieren. Anstelle des alten Div Tags
wird Section und als ID „wrapper“ benutzt, denn Wrapper
sagt mehr aus, was generell die Verständlichkeit der
Seite erhöht.
001
002
003
004
005
006
007
008
009
010
Header Tag
Jetzt nutzen wir unseren zweiten HTML5-Tag,
den Header Tag. Der Header Tag kann auch mehrmals
im Dokument benutzt werden, doch er erzielt am Seitenanfang
die größte Wirkung, wenn ein Besucher das
erste Mal auf der Seite ist. Der Tag kann ein leeres Div
mit der ID „Logo“ enthalten, sodass wir das Logo per
CSS aufrufen können. Das hilft, die Seite klein und
schnell zu halten.
001
002
003
004
005
23
Die Menüführung
Im Header Tag kann der HTML5-Tag Nav mit
einer ungeordneten Liste für unsere Menü-Buttons
benutzt werden. Das Ziel hierbei ist es, zu wissen, auf welcher
Seite man gerade ist; um das zu Implementieren
wird die Klasse Current benutzt.
001
002
003
• Wir markieren unseren
Schlagschatten mit dem
Auswahlrechteck, um ihn als
PNG Datei zu speichern.
• Wir benutzen den Section
Tag, um die Seitenbreite
einzustellen.
Das große WordPress-Handbuch 149

Tuning
004
005 Home
006 About
007 Blog
008 Works
009 Contact
010
011
012
013
24
25
26
Der Sliderbereich
Unter dem Header Tag wird jetzt ein Sektionselement
namens „slider_wrap“ benutzt, um den ganzen
Slider darin unterzubringen. Erstellen Sie ein Div mit
der ID „slider_bg“, welches für den grünen Hintergrund
des Sliders gedacht ist. Nun noch ein Div mit der ID
„shadow“, für den Schatten des Sliders.
001
002
003
004
005
006
007
008
009
010
WOW-Slider-Wrapper
Bevor es gleich mit der CSS losgeht, erstellen
wir noch ein Div mit der ID „wow_slider“ im slider_bg
Tag. Es wird für die Bilder benutzt, weil sie etwas größer
sind als der grüne Hintergrund. Es wird außerdem unseren
generierten HTML-Code enthalten, wie man später
im Tutorial sehen wird.
001
002
003
004
005
006
007
CSS erstellen
Eine neue CSS Datei im Texteditor öffnen und
„style.css“ nennen. Als Nächstes werden wir unser Hintergrundbild
in die Body Regeln einfügen und den Seitenwrapper
installieren. Fügen Sie das Logo ein und
bewegen Sie es per Float-Befehl nach links, sodass ein
kleiner Rand bleibt und es gut zur Geltung kommt.
001 body {
002
003 background: #e7e7e6 url('images/bg_wrap.
jpg') repeat-x;
004 font-family: Verdana, Geneva, sans-serif;
005 font-size: 12px;
006 }
007
008 #wrapper {
009
010 width: 1000px;
011 margin: 0 auto;
012 }
013
014 #logo {
015
• Wenn der generierte Code in die index.
html-Datei geschrieben wurde, verschieben Sie
ihn in den #wow_slider div.
016 background: url('images/logo.png') norepeat;
017 height: 39px;
018 width: 311px;
019 float: left;
020 margin: 52px 0 0 18px;
021 }
27
• Wir fügen die Navigation
Styles ein und setzen den
Hover und Current State ins
Back-End.
• So sieht die Seite mit
angewandten Navigation und
Slider-Styles von vorne aus.
Aussehen der
Menüführung
Jetzt verschönern wir unsere Menüführung. Zunächst
per Float-Befehl nach rechts und etwas herunter schieben
und die Li Elemente per Float-Befehl nach links setzen
sowie deren Breite und Höhe festlegen. Man kann
sie etwas herausheben, indem man per Margin- und
Padding-Befehl einen Rand lässt. Als Nächstes wird der
Text der Ankerelemente am Zentrum ausgerichtet und
der Current und Hover Status festgelegt.
001 nav {
002
003 float: right;
004 margin-top: 50px;
005 }
006
007 nav li {
008
009 list-style: none;
010 font-size: 15px;
011 font-family: 'Century Gothic';
012 float: left;
013 width: 80px;
150 Das große WordPress-Handbuch

WordPress
Tuning
014 height: 35px;
015 margin-left: 10px;
016 padding-right: 10px;
017 }
018 nav li a {
019
020 text-decoration: none;
021 color: #333;
022 display: block;
023 width: 80px;
024 height: 30px
025 text-align: center;
026
027 }
028
029 nav li a:hover, nav li.current a{
030
031 background: url('images/overstate.png')
no-repeat;
032 display: block;
033 color: #72aa47;
034 }
28
29
Aussehen des Sliders
Hier wurde der Slider per „float“-Befehl nach
links und 50 px nach unter verschoben. Es wurde eine
Höhe von 428 px festgelegt, also etwas mehr, als unsere
Sliderfotos haben, aber dieser Wert kann nach Belieben
verändert werden. Der grüne Hintergrund kann per #slider_bg
ID und einigen Margin-Werten beliebig positioniert
werden.
001 #slider_wrap {
002
003 float: left;
004 height: 428px;
005 margin-top: 50px;
006 }
007
008 #slider_bg {
009
010 background: url('images/slider_green_
bg.jpg') no-repeat;
011 width: 960px;
012 height: 367px;
013 margin: 20px 20px 0px 20px;
014 float: left;
015 }
Sliderbild und Schatten
Warum wir die #wow_slider ID erzeugt haben,
wird jetzt gleich klar. Letztendlich wird es unsere Bilder
beinhalten, wenn wir das WOW-Slider-Plug-in installieren.
Darunter können wir unseren Schatten aus Schritt 4
legen und per negativer oberer Grenze leicht unter das
Bild ziehen, wo man einen Schatten erwarten würde.
001 #wow_slider {
002
003 width: 935px;
004 height: 388px;
005 margin: -10px 10px;
006 }
007
008 #shadow {
009
010 background: url('images/shadow.png') norepeat;
011 width: 952px;
012 height: 96px;
013 float: left;
014 margin: -10px 0 0 20px;
015 }
30
WOW herunterladen
Gehen Sie jetzt auf http://wowslider.com
und laden Sie das WOW-Slider-Plug-in herunter. Doppelklicken
Sie nach der Installation auf das Symbol auf
Ihrem Desktop, um die Galerie Optionen zu öffnen. Jetzt
auf das grüne „Plus“-Symbol neben dem „Veröffentlichen“-Symbol
klicken, um Ihre Bilder hinzuzufügen. Hier
wird mit zwei Bildern gearbeitet, Sie können auch gerne
weitere nehmen.
31
Platzieren der Bilder
Zum Einstellen der Bildergröße auf das
„Schraubenschlüssel“ Symbol neben „Veröffentlichen“
klicken und Bilder auswählen. Unter Bildgröße einstellen,
befindet sich im Parameterbereich ein Drop-down Menü:
wählen Sie benutzerdefinierte Größe und stellen Sie die
Größe auf 935 x 388 px ein. Hier kann auch aus diversen
Überblendeeffekten und Vorlagen gewählt werden, worauf
in diesem Beispiel allerdings verzichtet wurde.
32
Fertig zur
Veröffentlichung
Auf „Veröffentlichen“ klicken, um zur Seite „Veröffentlichungsmethode“
zu gelangen, und dort auf „In Webseite
einfügen“ wählen und das „Durchsuchen“-Symbol klicken,
um Ihre index.html Datei zu finden. Wenn diese
geöffnet ist, wählen Sie den letzten Div, der in der Seitenstruktur
angezeigt wird und klicken auf „davor einfügen“.
Damit sind Sie fertig.
33
Generierter HTML und
CSS3 Code
Wenn Sie „Veröffentlichen“ gedrückt haben, erstellt WOW
automatisch alle HTML-, CSS- und JavaScript-Dateien und
speichert sie in Ihrer index.html-Datei und in den Ordnern
Ihres Verzeichnisses. Trotzdem wird der WOW-Slider-HT-
ML-Hauptbody noch in die #wow_slider div verschoben.
Schließlich die erstellte style.css Datei öffnen, #wowslider_
container1 suchen und einen CSS3 Box Schatten hinzufügen,
um Ihrem Werk diesen Seitenschatten als letzten
Feinschliff zu verpassen.
001 #wowslider-container1 {
002 /* overflow: hidden; */
003 zoom: 1;
004 position: relative;
005 width:935px;
006 height:388px;
007 margin:0 auto;
008 z-index:100;
009 box-shadow: -1px 3px 10px #000;
010 }
• Fast geschafft – Anpassen der „Veröffentlichen“-Eigenschaften
im WOW-
Slider-Plug-in.
• Wir benutzen hier nur zwei Bilder,
aber nehmen Sie so viele Sie wollen
• Jetzt macht es richtig Spaß. Probieren
Sie verschiedene Größen und Überblendungseffekte
aus, um Ihren Bildern
den WOW-Faktor zu geben.
Das große WordPress-Handbuch 151

Tuning
Passen Sie
Ihr Theme mit
Widgets an
PLATZIEREN SIE WIDGETS AN BELIEBIGER STELLE
IN IHREM WORDPRESS-THEME
Ein eigenes Parent-Theme
zu erstellen oder ein vorhandenes
zu modifizieren funktioniert
im Prinzip genauso.
LERNZIEL
Lernen Sie, ein Theme
durch eine Widget-Fläche
über dem Content-Bereich
zu individualisieren.
DAUER
40 Minuten
ANSPRUCH
DIE MEISTEN WordPress-Themes
erleichtern es ihrem Benutzer durch
ein System aus Widgets, die Elemente
der Seitenleiste zu benutzen. Eine
Drag-and-Drop-Oberfläche erlaubt das Hinzufügen,
Ändern oder Löschen dieser Widgets, die
Funktionen wie zum Beispiel eine Newsletter-Registrierung
oder eine Liste der aktuellsten Posts
haben.
Widget-Flächen – der Bereich des Admin-Bildschirms,
wo Widgets angeordnet werden –
waren ursprünglich für die Seitenleiste gedacht,
können aber de facto überall im Design platziert
werden.
Dieses Tutorial zeigt, wie Sie Themes durch eine
Widget-Fläche knapp über dem Content-Bereich
individualisieren können. Das Prinzip bleibt das
gleiche, egal ob man eine oder 20 Widget-Flächen
hinzufügt und ob ein eigenes oder ein von
einem Client benutztes Theme angepasst wird.
Im offiziellen WordPress-Vokabular wird jeder
Ort, an dem ein Widget platziert werden kann,
Seitenleiste (Sidebar) genannt. Das kann Verwirrung
stiften, denn man kann sie ja überall anordnen.
Daher sprechen wir in dieser Anleitung
eher von „Widget-Fläche“ als von „Seitenleiste“.
• Die Widget-Fläche,
die wir erstellen werden,
sitzt direkt über
dem Content-Bereich
aller WordPress-Seiten;
wir benutzen das
Theme Foodiary von
simplyWP.
01
Ort wählen
Legen Sie fest, wo Sie in Ihrem Design eine
Widget-Fläche haben möchten. Es kann überall sein,
außer in dem von WordPress generierten Content-
Bereich. Dafür kann es direkt darüber oder direkt darunter
platziert werden. In dieser Anleitung werden wir eine
Widget-Fläche direkt über dem Content von Seiten, aber
nicht von Postings hinzufügen.
02
register_sidebar()
Um Ihre Widget-Fläche zu aktivieren, muss diese
in der functions.php-Datei des Themes „registriert“ werden.
Dies wird über die register_sidebar()-Funktion, (siehe Code
unten) gemacht, welche eine einzelne Widget-Fläche erzeugt.
Werden mehrere Flächen gewünscht, wird die Funktion entsprechend
oft einzeln aufgerufen.
001 register_sidebar (array(
002 'name' => 'RightSideBar',
003 'id' => 'right-sidebar',
004 'description' => 'Widgets in this area
will be shown on the right-hand side.',
005 'before_widget' => '',
006 'after_widget' => '',
007 'before_title' => '',
008 'after_title' => ''
009 ));
03
Verwechslungsgefahr
Verwechseln Sie register_sidebar() nicht mit
einer anderen WordPress-Funktion namens register_
sidebars(). Der Unterschied zwischen den beiden
besteht darin, dass register_sidebars() mehrere Widget-Flächen
auf einmal, alle mit dem gleichen Namen
und HTML-Markup, erzeugt. Da man die Parameter der
Widget-Flächen meistens einzeln einstellen möchte, sollten
Sie register_sidebars() vermeiden.
001
152 Das große WordPress-Handbuch

WordPress
Tuning
• Erleichtern Sie die Arbeit,
indem Sie ihre Widget-Flächen
so benennen, dass der Benutzer
gleich weiß, wo Sie im Design
auftauchen werden.
• Auch Widget-Flächen können
Beschreibungen haben. Nutzen
Sie diese, um den Benutzer über
Sinn und Grenzen der jeweiligen
Widget-Fläche zu informieren.
• Nach dem Hochladen der functions.php-Datei
erscheint die
Kopfzeilen-Widget-Fläche auf
der Widget-Seite.
04
Standardeinstellungen
Es gibt sieben verschiedene Argumente für
die register_sidebar()-Funktion, die eine genaue Kontrolle
des Markups der Widget-Fläche und der darin enthaltenen
Widgets erlauben, und wir werden uns jedes einzeln
vornehmen. Alle Standardargumente werden im
folgenden Codebeispiel gezeigt.
001 register_sidebar (array(
002 'name' => sprintf(__('Sidebar %d'), $i ),
003 'id' => 'sidebar-$i',
004 'description' => '',
005 'before_widget' => '',
006 'after_widget' => '',
007 'before_title' => '',
008 'after_title' => ''
009 ));
05
Widget area ID
Das ID Argument der register_sidebar()-Funktion
nutzt WordPress intern, um eine Widget-Fläche zu
identifizieren, und – wie in späteren Schritten zu sehen
– wird als Parameter in Template Tags benutzt, die mit
Widget-Flächen zu tun haben. Obwohl WordPress eine
Standard-ID vergibt, ist es eine gute Angewohnheit, seine
eigenen IDs zu vergeben.
001 'id' => 'page-content-top',
06
Name der Widget-Fläche
Das Namensargument der register_sidebar()-Funktion
wird als Titel der Widget-Fläche im Widgets
Administratorbildschirm angezeigt. Dabei ist es
wichtig, einen sinnvoll beschreibenden Titel zu wählen,
sodass der Benutzer sich leicht an die Funktion der Widget-Fläche
erinnert. Wird kein Name vergeben, benutzt
WordPress den Standardnamen Sidebar zusammen mit
einer Zahl, basierend auf der Anzahl an registrierten
Widget-Flächen.
001 'name' => __( 'Top of Pages' ),
002 // For more about this code format, see
Step 8.
Die Widget-Fläche
07 08
Das Beschreibungsargument der register_
sidebar()-Funktion erscheint unter dem Titel einer vergrößerten
Widget-Fläche. Sie kann genauere Angaben
Widgets im
Content-Bereich?
Plug-ins wie Widgets on Pages
ermöglichen es dem Benutzer,
Shortcodes in den Text einzufügen
und Widgets auch im
Content oder in Posts
anzeigen zu lassen.
zur Postion der Widget-Fläche im Theme-Design enthalten.
Es ist sinnvoll, weitere Anweisungen an den Benutzer
wie z. B. die Größenbegrenzungen der Widget-Fläche
in die Beschreibung aufzunehmen. Der Standard
für dieses Argument ist ein leerer String.
001 'description' => __( 'Add a widget above
the content area on all Pages.' ),
002 // For more about this code format, see
Step 8.
Multilinguale Option
Wenn Sie das Namens- und die Beschreibungs-Argument
Ihrer Widget-Flächen internationalisieren
– also übersetzbar – machen möchten, schreiben
Sie sie wie folgt: _(„Diese Sidebar“).
Das große WordPress-Handbuch 153

Tuning
• Hier kann man Vorher-Nachher-Bilder der page.php-Datei sehen, während der Code für das Anzeigen
der Widget-Fläche eingefügt wird
• Das Platzieren eines Widgets in einer Widget-Fläche öffnet das Widget automatisch und man kann
direkt Text eingeben
• Auf der Live-Seite wird der eingegebene Text jetzt angezeigt, muss aber noch „verschönert“ werden
09
Vor und nach Widgets
Die before_widget und after_widget Argumente
der register_sidebar()-Funktion fügen HTML Code vor
oder hinter ein beliebiges Widget. Die jeweiligen Standards
sind: und . Wenn Sie ein anderes
HTML Blockelement spezifizieren wollen, achten Sie darauf,
die ID und Class Attribute genau wie im Beispiel einzufügen,
denn Plug-ins sind darauf angewiesen.
001 'before_widget' => '',
002 'after_widget' => '',
10
Vor und nach dem Titel
Die meisten Widgets erlauben es, einen Titel,
die before_title und after_title Argumente der register_
sidebar()-Funktion, zu vergeben, um die HTML-Umgebung
des Titels zu gestalten. Die Standards hierbei sind:
bzw. . Sie wollen hier
bestimmt Ihren eigenen Code einfügen, besonders um
einen besseren Class-Namen zu vergeben.
001 'before_title' => '',
002 'after_title' => ''
11
Fertige register_sidebar()-Funktion
Jetzt, da die register_sidebar()-Funktion fertig ist, könnte
man sie einfach in die functions.php kopieren, aber es
gibt einen besseren Weg. WordPress verfügt über eine
Reihe eingebauter „Hooks“, die nach gewissen Standards
den Code einfügt. Wir registrieren unsere Widget-Fläche
jetzt über einen dieser Hooks.
001 register_sidebar( array(
002 'id' => 'page-content-top',
003 'name' => __( 'Top of Pages' ),
004 'description' => __( 'Add a widget above
the content area on all Pages.' ),
005 'before_widget' => '',
006 'after_widget' => '',
007 'before_title' => '',
008 'after_title' => ''
009 )
010 );
12
Einzelne Registrierfunktion
Wenn noch nicht geschehen, eine master_registration()-Funktion
erstellen, änlich der im Code-Beispiel. Sie
kann beliebig benannt werden. Fügen Sie alle Ihre register_sidebar()-Funktionen
(im Moment haben Sie nur
eine) in diese Master-Funktion ein.
001 function master_registration() {
002
003 // Put all your register_sidebar()
functions between these two brackets
004
005 }
13
Hooks in WordPress
Jetzt WordPress dazu bringen, diese master_
registration()-Funktion auszuführen, indem sie in eine
Hook namens widgets_init geschrieben wird. Dies wird im
unteren Code beschrieben. Stellen Sie die Hook vor die
master_registration()-Funktion, wobei darauf zu achten ist,
dass der Name des zweiten Arguments dem Namen Ihrer
master_registration()-Funktion entspricht.
001 add_action( 'widgets_init', 'master_
registration' );
14
Speichern und testen
Speichern Sie Ihre functions.php-Datei und
laden Sie sie hoch, falls Sie nicht auf einem lokalen Server
arbeiten. Jetzt kann getestet werden, ob Ihre Widget-Fläche
so funktioniert, wie sie sollte. Gehen Sie im
WordPress-Adminbereich auf Erscheinung > Widgets
und schauen Sie, ob die Widget-Fläche auf der rechten
Bildschirmseite angezeigt wird.
154 Das große WordPress-Handbuch

WordPress
Tuning
Die Widget-
Falle
Die Benutzung der Widgets auf anderen
Flächen als der Seitenleiste bietet dem
Benutzer sogar noch mehr Flexibilität.
Aber seien Sie gewarnt, manchmal
kann es Schwierigkeiten geben. Der Kunde
und Sie haben etwas Bestimmtes im
Kopf, was sechs Monate später vergessen
sein kann.
Wenn der Kunde nun einen Kalender in
einem eigentlich zu kleinen Bereich platziert,
passiert das, was im oberen Bild zu
sehen ist. Diese Schwierigkeiten mit Widgets
gab es schon immer, aber eine Seitenleiste
kann sie eher kompensieren. Widgets
können so schnell gelöscht werden,
wie sie hinzugefügt werden, aber subtilere
Probleme können schnell übersehen
werden, also seien Sie auf der Hut.
Stylesheets können helfen, potenzielle
Probleme zu minimieren, aber Sie sollten
den Kunden auf darauf hinweisen, welche
Dinge in seiner neuen Widget-Fläche funktionieren
und welche nicht.
15
Keine functions.php?
Wenn Sie mit einem Child-Theme arbeiten und
es noch keine functions.php gibt, muss diese noch
erstellt werden (wie im Beispielcode unten demonstriert
wurde). Bedenken Sie, dass anders als andere Dateien in
einem Child-Theme, die functions.php nicht automatisch
die Datei im Parent-Theme ersetzt, sondern beide Dateien
miteinander kombiniert werden. Man muss also nicht
die Contents aus der Parent-Theme-Datei kopieren.
001
Bedingung hinzufügen
Bevor dynamic_sidebar() eingefügt wird, sollte
man es an eine Bedingung knüpfen, nämlich an die
WordPress-Funktion is_active_sidebar(), die testet, ob
es Widgets in dieser Widget-Fläche gibt.
Uns interessieren keine leeren Widget-Flächen,
daher wird hier
nicht auf dem üblichem Weg
per „if(!dynamic_sidebar(‘header-right’))“
Befehl
getestet.
Rückwärtskompatibilität
Widgets gibt es jetzt schon
so lange, dass auf den Check
der Benutzerversion von
WordPress verzichtet
werden kann.
18
001
002 Insert a call to
the widget area and any
other coding here
003
Widgets auf Wanderung
Wenn nun getestet wird, ob die Widget-Fläche
aktiv ist, muss auch entschieden werden,
was passiert ist, wenn sie es nicht ist. Es gibt
zwei Möglichkeiten, die jeweils anders in die Template-Datei
programmiert werden: 1) Standard-Content
anzeigen; und 2) nichts anzeigen. Beides wird
im folgenden Code beispielhaft veranschaulicht:
001 Provide Default Content:
002
003
004
005
006
007
008
009
010
011
012
013
014
015
Oder:
001 Don’t Show Anything If Widget Area
Inactive:
002
003
004
005
006
007
008
009
010
011
19
Ab in die Template-Datei
Sobald Sie Ihre Bedingungen gestellt haben,
wird der Code an der richtigen Stelle in die entsprechende
Template-Datei geschrieben – hier die page.php
direkt hinter . Der Screenshot gegenüber
zeigt die Stelle in der page.php.
20
Widgets ausprobieren
Die Template-Datei speichern und falls nötig
hochladen, dann im Widget-Admin-Bereich die Widget-Fläche
testen, indem Sie ein Widget darin platzieren.
21
Fast fertig
Sehen Sie sich die Live-Seite mit dem hinzugefügten
Widget an. Wenn es geklappt hat, sollte man
nun die Nachricht sehen, die wir ins Text-Widget
geschrieben haben. Es sieht allerdings nicht besonders
gut aus. Wir benutzen die für das Text-Widget vergebene
ID für ein kleines Styling.
22
Der letzte Feinschliff
Mit einem kleinen Styling passt die Textbox
eher ins Design, wobei der Client den Text jederzeit
ändern kann, ohne sich Gedanken über das Aussehen
machen zu müssen. Wenn Sie mehrere Widgets in Ihrer
Widget-Fläche haben, können Sie jedes Widget individuell
mit den jeweiligen Attributen stylen.
• Schnell eine Grenze festlegen, den Padding-Befehl
nutzen, die Größe anpassen und ein Tick
Farbe und die Widget-Fläche nimmt Form an.
Das große WordPress-Handbuch 155

Tuning
Individuelle
Fonts
verwenden
und stylen
DAS CSS-WERKZEUG @FONT-FACE ERMÖGLICHT DIE
NUTZUNG JEDER BELIEBIGEN SCHRIFTART BEI DER
GESTALTUNG VON WEBSEITEN.
SEIT ANBEGINN DES WWW haben Designer
den Wunsch, Ihre Lieblingsschriftarten
auf Webseiten zu verwenden. Lange Zeit
jedoch war die Liste der Fonts, die „web-safe“,
also standardmäßig auf den meisten Rechnern installiert
waren und somit für dynamischen Webseitentext
verwendet werden konnten, sehr kurz. Um Schriftarten,
die nicht in dieser Liste vertreten waren, dennoch darstellen
zu können, musste man sich mit Grafiken oder
Flash-Animationen behelfen.
Nach und nach wurden Tools wie sIFR, Flir und
Cufón entwickelt, um die Situation zu verbessern, doch
boten auch sie noch keine zufriedenstellende Flexibilität.
Dank CSS3 und dessen wachsender Unterstützung
durch die Browserhersteller gibt es jedoch ein mächtiges
neues Werkzeug: @font-face. Damit ist es möglich,
jeden beliebigen Font als nativen, dynamischen Text
(also nicht als Grafik oder durch andere Umwege) in
eine Webseite einzubetten.
Es gibt nichtsdestoweniger einige Einschränkungen
bei @font-face, aber mit den richtigen Kniffen gelangt
man trotzdem ans Ziel.
Mit @font-face ist es möglich, jeden
beliebigen Font als nativen, dynamischen Text
in eine Webseite einzubetten.
LERNZIEL
Unterschiedliche
individuelle Schriftarten bei
der Webseitengestaltung
nutzen und dabei alle
Browser berücksichtigen
DAUER
60-120 Minuten
ANSPRUCH
QUELLDAtEIEN
www.webdesignermag.
co.uk/tutorial-files/
01
Basisseite erstellen
Erstellen Sie eine neue Datei in Ihrem Texteditor.
Fügen Sie ein HTML5-Doctype, ein leeres -
Tag im Header und ein paar Absätze im Body hinzu.
Versehen Sie die Absätze mit Überschriften von h1 bis
h6, geben Sie ein bisschen Beispieltext ein, und halten
Sie alle Elemente gut auseinander, um später unterschiedliche
Stile in ihnen vergleichen zu können.
001
002
003
004 Web Fonts Styling
005
006
007
008
009
010
011 Quick Brown Fox jumps over...
012 Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
013
014
02 Grundgestaltung
Hübschen Sie die Basisseite ein wenig auf,
indem Sie Hintergrund- und Schriftfarbe im -Tag
festlegen. Verfahren Sie ähnlich mit den diversen Überschriften
(Schriftfarbe und Margin).
001 body {
002 background: #423C4D;
003 color: #C4C1C8;
004 margin: 0 auto;
005 padding: 100px 0;
006 width: 660px;
007 }
008 h1, h2, h3, h4, h5, h6 {
009 color: #fff;
010 margin: 24px auto 12px;
011 }
03
Schriftart festlegen
Bereits jetzt treffen Sie eine der wichtigsten
Entscheidungen bei der Gestaltung einer Webseite: die
Auswahl des Hauptfonts. Definieren Sie die Zeilenhöhe
(line-height), den Schriftgrad (font-size) und die Font-
Familie. Die Helvetica Neue eignet sich gut für unsere
Experimente.
001 body {
002 background: #423C4D;
003 color: #C4C1C8;
004 font-family: ‘Helvetica Neue’, Arial,
Helvetica, sans-serif;
005 font-size: 12px;
006 line-height: 1.6;
007 margin: 0 auto;
156 Das große WordPress-Handbuch

WordPress
Tuning
• Mit der Eigenschaft font-weight bekommen Sie mehrere,
teils sehr unterschiedliche Stile aus ein und demselben Font.
• Die Lesbarkeit und die Wirkung eines Textes kann durch
text-shadow verbessert werden.
• Hier haben wir den Eindruck einer handgeschriebenen
Notiz erzeugt – ein netter Blickfang.
• Einige Fonts besitzen von Haus aus mehrere Schnitte. Hier
sehen sie die gedrängte (condensed) Variante der Helvetica
Neue.
• Ein Beispiel für einen Farbverlauf über die Schriftoberfläche.
• Mithilfe von text-transform können Sie einen Text schräg
stellen und vergrößern.
008 padding: 100px 0;
009 text-shadow: 1px 1px rgba(0,0,0,.8);
010 width: 660px;
011 }
012 h1, h2, h3, h4, h5, h6 {
013 color: #fff;
014 line-height: 1.2;
015 margin: 24px auto 12px;
016 text-shadow: none;
017 }
04
Individueller Font
Um einen beliebigen Font in eine Webseite
zu integrieren, genügt die Quelldatei. Da allerdings nicht
alle Browser dieselben Dateiformate unterstützen, ist es
ratsam, die .ttf-Datei in diverse andere Formate umzuwandeln.
Ein tolles Tool dafür finden Sie auf
www.fontsquirrel.com/tools/webfont-generator.
WICHTIG: Prüfen Sie zuvor, ob die Font-Lizenzbedingungen
das @font-face-Verfahren erlauben!
05 @font-face
Eigentlich funktioniert @font-face ganz einfach:
Sie definieren jeden Font zunächst anhand der
Eigenschaft font-family, und anschließend geben Sie mit
src seinen Speicherort an.
001 @font-face {
002 font-family: ‘CaviarDreamsRegular’;
003 src: url(‘fonts/CaviarDreams-webfont.
eot’);
004 src: url(‘fonts/CaviarDreams-webfont.
eot?#iefix’) format(‘embedded-opentype’),
005 url(‘fonts/CaviarDreams-webfont.woff’)
format(‘woff’),
006 url(‘fonts/CaviarDreams-webfont.ttf’)
format(‘truetype’),
007 url(‘fonts/CaviarDreams-webfont.
svg#CaviarDreamsRegular’) format(‘svg’);
008 }
06
Individuelle Fonts stylen
Nun da Sie die Fonts definiert haben,
können Sie sie mit der CSS-Eigenschaft font-family
verwenden. Fügen Sie dazu einfach einem Selektor
den im letzten Schritt definierten Fontnamen hinzu.
Sie können anschließend Schriftgrad, Zeilenhöhe,
Schriftfarbe und anderes so flexibel wählen wie
bei Arial!
001 h1 {
002 font-size: 42px;
003 font-family: CaviarDreamsRegular,
‘Helvetica Neue’, Arial, Helvetica,
sans-serif;
004 font-weight: 100;
005 text-align: center;
006 width: 500px;
007 }
07 Schriftgewicht
Häufig wird vergessen, dass beim Schriftgewicht
nicht nur bold (fett) und normal zur Auswahl
stehen, sondern dass font-weight auf jeden Hunderterwert
zwischen 100 und 900 gesetzt werden kann.
Dabei steht 400 für normal und 700 für bold. Wenn
Sie also das Schriftgewicht der Helvetica Neue auf 100
einstellen, erhalten Sie eine schicke Ultraleicht-Version
des Fonts.
001 h2 {font-size: 36px; font-weight:
100; letter-spacing: .1em;}
08 Textschatten
Bei CSS3 gibt es ein vielseitiges Modul
namens text-shadow. Die Syntax ist simpel: Es folgt
zuerst der horizontale, dann der vertikale Abstand
des Schattens in Pixeln, dann der Radius der Weichzeichnung
(ebenfalls in Pixeln) und zuletzt die Farbe.
Die Textschattierung ist nicht nur ein Designelement,
sondern kann auch die Lesbarkeit eines Textes verbessern.
001 h3 {
002 font-size: 38px;
003 text-shadow: 5px 5px black;
004 position: relative;
005 }
09 Handschrift
Mit @font-face ist es nun auch möglich, Fonts
im Handschriftstil dynamisch einzubinden. Nehmen Sie
beispielsweise ein Schreibblockpapier als Hintergrund
für ein Textfeld, passen Sie die Zeilenhöhe des Handschriftfonts
an die Linien an, und Sie bekommen einen
ins Auge fallenden Notizzettel auf Ihrer Seite.
001 blockquote {
002 background: #918F94 url(‘bg-notepad.
jpg’) left 10px;
003 color: #333;
004 float: right;
005 font-family: DesyrelRegular;
006 font-size: 18px;
007 line-height: 23px;
008 margin: 0 -24px 1em 1em;
009 padding: 10px 15px;
010 text-shadow: -1px -1px
rgba(0,0,0,.15);
Das große WordPress-Handbuch 157

Tuning
011 width: 300px;
012 -webkit-box-shadow: 2px 2px white;
013 -moz-box-shadow: 3px 3px 3px
rgba(0,0,0,.35);
014 }
015 blockquote p {margin: 0;}
016 blockquote p:first-of-type {textindent:
0;}
10 Text-Transformation
Das CSS-Feature text-transform lässt Sie
automatisch festlegen, ob bestimmte Texte in Kleinbuchstaben
(lowercase), Großschrift (uppercase) oder
mit einem Großbuchstaben an jedem Wortanfang
(capitalize) dargestellt werden sollen – nützlich insbesondere
bei der Texteingabe durch Dritte, etwa bei
Kommentaren.
001 h4 {
002 font-family: CaviarDreamsRegular,
‘Helvetica Neue’, Arial, Helvetica, sansserif;
003 font-size: 36px;
004 font-weight: normal;
005 text-transform: lowercase;
006 }
007 h4 strong {text-transform: uppercase;}
11 Zeichenabstand
Mit letter-spacing definieren Sie den Abstand
zwischen den einzelnen Buchstaben eines Textes.
Es können verschiedene Maßeinheiten gebraucht
werden, aber die Geviertbreite em ist besonders
empfehlenswert. Bei großen Fonts sieht ein größerer
Zeichenabstand besser aus. Probieren Sie es in der
Überschrift h4:
001 h4 {letter-spacing: .5em;}
12 Schriftlaufweite
Einige Schriftarten enthalten bereits von Haus
aus gedrängte und/oder geweitete Schnitte, die häufig
eine ganz andere Wirkung haben als die normale Laufweite.
Aber auch mit @font-face können Sie die Laufweite
eines Fonts verändern, hier im Beispiel etwa mit dem
Wert condensed (gedrängt). Das ist praktisch, wenn
Sie beispielsweise Texte platzsparend setzen möchten
(etwa bei Bildunterschriften).
001 h5 {
002 font-size: 30px;
003 font-stretch: condensed;
004 }
13
Textschatten, die Zweite
Sie können übrigens mehr als einen Textschatten
anwenden und dadurch ein atmosphärisches
Schimmern erzeugen. Trennen Sie die verschiedenen
Wertegruppen durch Kommas voneinander.
001 h6 {
002 font-size: 48px;
003 font-stretch: condensed;
004 padding: 10px;
005 text-align: center;
006 text-shadow: 3px 3px 8px #BD9E59,
007 -3px -3px 8px #BD4B3B,
008 -3px 3px 8px #7EBD56,
009 3px -3px 8px #964BBD,
010 -3px -3px rgba(255,255,255,.3);
011 }
14 Farbverlauf
Mithilfe eines Farbverlaufs auf den Oberflächen
der Buchstaben können Sie Ihrem Font ein
wenig Struktur verleihen. Geben Sie zuerst die Position
des Elements mit relative an. Kreieren Sie dann
eine Pseudoklasse vom Typ :after zu dem Element,
verwenden Sie eine leere Content-Deklaration, geben
Sie die Position des Pseudo-Elements mit absolute an,
und legen Sie dann den Verlauf fest (es kann auch ein
Bild sein).
001 h6 {position: relative;}
002 h6:after {
003 content: “”;
004 display: block;
005 height: 52px;
006 left: 0;
007 position: absolute;
008 top: 15px;
009 width: 100%;
010 background: -moz-linear-gradient(top,
rgba(66,60,77,.8) 0%, rgba(66,60,77,0)
90%);
011 background: -webkit-lineargradient(top,
rgba(66,60,77,.8)
0%,rgba(66,60,77,0) 100%);
012 background: linear-gradient(top,
rgba(66,60,77,.8) 0%,rgba(66,60,77,0)
100%);
013 }
15
Text schrägstellen
Mit der CSS-Eigenschaft rotate können Sie
Ihren Text um eine beliebige Gradzahl rotieren lassen.
Damit lässt sich zum Beispiel ein Störer neben einem
Textabsatz platzieren, der besondere Aufmerksamkeit
auf sich zieht. Mithilfe von scale können Sie außerdem
das entsprechende Textstück bis auf das Doppelte
vergrößern.
001 h6 {
002 -webkit-transform: rotate(-5deg)
scale(1.5);
003 -moz-transform: rotate(-5deg)
scale(1.5);
004 transform: rotate(-5deg) scale(1.5);
005 }
16 Outline-Effekt
Die Browser, die die WebKit-Engine verwenden,
(allerdings nur diese) sprechen außerdem auf ein weiteres
CSS-Feature an, nämlich text-stroke. Dieses erzeugt
einen Outline-Effekt (Konturbild).
001 h6 {
002 color: #fff;
003 -webkit-text-stroke: 1px #333;
004 -webkit-text-fill-color: #423C4D;
005 }
17 Hover-Effekte
Dort, wo Interaktivität mit dem Mauszeiger
ein Muss ist, können Sie mehrere der vorgestellten
Stile kombinieren und zusammen einem :hover-
Element zuweisen. im Zusammenspiel mit einem
:after-Element und einigen Animationen können Sie
so die Aufmerksamkeit des Lesers schnell und
effektiv gewinnen.
001 .fin {
002 color: #fff;
003 font-family: TangerineRegular,
‘Helvetica Neue’, Arial, Helvetica, sans-serif;
004 font-style: italic;
005 font-size: 120px;
006 margin: 0;
007 position: relative;
008 text-align: center;
009 text-shadow: 3px 3px black;
010 -webkit-transition: all 1s ease-in-out;
011 -moz-transition: all 1s ease-in-out;
012 -o-transition: all 1s ease-in-out;
013 }
014 .fin:hover {
015 -webkit-transform: rotate(-5deg)
scale(1.5);
016 -moz-transform: rotate(-5deg)
scale(1.5);
017 transform: rotate(-5deg) scale(1.5);
018 }
019 .fin:hover:after {
020 content: “Fin”;
021 display: block;
022 height: 52px;
023 left: 0;
024 position: absolute;
025 top: 0;
026 width: 100%;
18
Weniger ist mehr
Jetzt haben Sie eine Reihe Gestaltungsmöglichkeiten
für Ihre Schriftarten kennengelernt. Widerstehen
Sie jedoch der Versuchung, zu dick aufzutragen, denn
Überdesign ist kontraproduktiv für die Wirkung Ihrer
Webseiten. Die Faustregel bei der Textgestaltung lautet:
Was weder die Lesbarkeit noch die Wirkung verbessert,
sollte weggelassen werden.
158 Das große WordPress-Handbuch

WordPress
Tuning
Google Fonts integrieren
WIR ZEIGEN IHNEN AN EINEM BEISPIEL, WIE
SIE DIE VON GOOGLE ZUR VERFÜGUNG
GESTELLTEN SCHRIFTARTEN INTEGRIEREN.
GOOGLE FONTS IST einer der wertvollsten
Beiträge zur Web-Typographie seit langer Zeit.
Google stellt eine Sammlung frei benutzbarer
Open-Source-Fonts zur Verfügung und ermöglicht
es damit jedermann, mit wenig Aufwand
typographische Vielfalt in seine Webseiten zu
bringen. Suchen Sie sich einfach eine Schriftart aus
dem stetig wachsenden Angebot aus, kopieren Sie
etwas HTML- und CSS-Code, der mitgeliefert wird,
in die entsprechenden Dateien Ihres WordPress-
Themes, und schon ist die Sache geritzt. Wir
spielen das Ganze hier einmal am Beispiel der
beliebten Schriftart Lobster durch.
Typographische
Vielfalt mit wenig
Aufwand.
01
Schriftart auswählen
Gehen Sie zunächst auf die Website
von Google Fonts (www.google.com/
fonts). In das Suchfeld oben links können
Sie den Namen einer Schriftart eingeben,
hier also Lobster. Es erscheinen zwei Treffer,
von denen Sie bitte den oberen auswählen,
indem Sie auf die nebenstehende
Schaltfläche „Add to Collection“ klicken.
02
Link und CSS
Nun da sich Lobster in Ihrer Sammlung
befindet, können Sie sich eine Schriftprobe ansehen
oder den Font direkt verwenden. Für beide
Optionen gibt es jeweils ein Icon unten rechts vom
Namen des Fonts. Klicken Sie auf das linke, „Quickuse“.
Es erscheint eine Infoseite, auf der Sie unter
anderem eine HTML-Codezeile mit einem Hyperlink
sowie eine Codezeile für das Stylesheet sehen.
Lassen Sie diese Seite geöffnet.
03
Code einfügen
Gehen Sie nun zu Ihrem
WordPress-Dashboard. Rufen Sie
im Menü die Abteilung Design >
Editor auf, suchen Sie die Datei
header.php, und öffnen Sie sie im
Editor. Direkt unterhalb des Tags
fügen Sie den Link von der
Google-Seite ein und klicken dann
auf „Aktualisieren“. Öffnen Sie
anschließend im Editor die Datei
styles.css, fügen Sie die CSS-Zeile
von der Google-Seite innerhalb
der Header-Tags ein, und klicken
Sie wieder auf „Aktualisieren“.
Das große WordPress-Handbuch 159

Tuning
Typografie
de luxe mit
CSS3 und
JavaScript
SAGEN SIE ADIEU ZU DEN FÜNF SCHRIFTARTEN,
DIE JEDER WEBDESIGNER BENUTZT
LERNZIEL
WEbsEItEN mIthILfE
dER typogRafIE
vERschöNERN
daUER
60 minuten
aNspRUch
QUELLdatEIEN
www.webdesignermag.
co.uk/tutorial-files/
(htmL-, css- und
Javascript-dateien)
01
Der Start
Öffnen Sie die Datei start.html (siehe Quellcode-Link).
Darin finden Sie den anfänglichen HTML-
Code sowie einige jQuery-Zeilen. Zunächst müssen Sie
das visuelle Design bestimmen – für dieses Tutorial
haben wir uns für ein typografisches Poster entschieden.
Es wird also keine Grafiken geben, sondern alles
wird über HTML und CSS erbracht.
02
Lassen Sie sich inspirieren
Werfen Sie einen Blick auf Websites, die Sie
optisch ansprechen. Wir haben einige großartige Beispiele
gefunden, als wir die Lettering.js-Website durchforstet
haben (darauf kommen wir später zurück). Im
Endeffekt haben wir uns für ein 760 px breites Design
mit einem Graphpaper-Hintergrund entschieden. Fügen
Sie folgendes CSS in eine neue CSS-Datei ein und verlinken
Sie es vom Header Ihrer Seite.
Streifen Sie auf der Suche nach
Inspiration durch das Netz und machen
Sie sich Notizen bei Designs, die Sie
spannend oder inspirierend finden.
FÜR EIN MEDIUM, das ursprünglich zur Verbreitung
von Texten gedacht war, hat das
Internet lange unter selbst aufgelegten
Beschränkungen bei Schriftarten gelitten.
Das hat dazu geführt, dass Designer, stets bemüht, ein
fades Seitendesign zu verhindern, nach Workarounds
mit Bildern und anderen Möglichkeiten suchten. Obwohl
dies zu einigen sehr kreativen Lösungen geführt hat, war
es doch ein langer, steiniger Weg, um eine simple Aufgabe
zu erfüllen. Und es hat einige wirklich verstörende
Kombinationen aus Schriftarten zur Folge gehabt, die
niemals auf einer Webseite hätten auftauchen sollen.
Mittlerweile sind wir aber an einem Punkt angelangt, an
dem wir eine größere Palette an Schriftarten nutzen können,
um unsere Inhalte zu kommunizieren.
In diesem Tutorial betrachten wir eine Methode, Text
in einer visuell ansprechenden Form zu präsentieren. Wir
nutzen nur zwei Schriftarten (beide außerhalb der kurzen
Web-safe-Liste) und schauen dabei, wie wir den Programmieraufwand
reduzieren können und somit eine
eigene Typografie schaffen. Unser Layout erzeugen wir,
indem wir Absätze in Zeilen aufteilen und dann ein
jQuery-Plug-in benutzen, um unseren Text in -
Tags einzufassen.
Während dieses Prozesses versuchen wir, den visuellen
Eindruck zu maximieren, die Aufmerksamkeit auf
Schlüsselwörter zu lenken und ein stimmiges typografisches
Poster zu kreieren. Wir werfen zudem einen Blick
auf ein wenig jQuery und nutzen Webkit-Transitions, um
unserer Seite ohne Skripte Interaktivität zu verleihen.
Mittlerweile können wir eine größere Palette
an Schriftarten nutzen, um unsere Inhalte
zu kommunizieren.
001
002 --
003 body {
004 background: url(pagebg.gif)
repeat top left;
005 color: #333;
006 }
03
Alles verbergen
Da Sie an jedem Abschnitt einzeln arbeiten, ist
es das Beste, noch nicht gestaltete Inhalte zu verbergen.
Kommentieren Sie alles hinter dem -Tag aus. Mit
dem Rest des Inhalts verborgen sehen Sie auf einen
Blick, wie der Text zusammenpasst. Beginnen Sie,
indem Sie sich eine hübsche Schriftart als Überschrift
für Ihre Seite aussuchen. Schauen Sie sich die Google-Schriftarten
unter www.google.com/fonts an. Wir
haben uns für Lobster entschieden. Fügen Sie den von
der Google-Seite zur Verfügung gestellten Code vor
Ihrer CSS Datei am Anfang Ihrer Seite ein.
001
04
Lobster verwenden
Die Schriftart Lobster ist nun in Ihrem Stylesheet
verfügbar. Fügen Sie einen Zeilenumbruch zwischen
die Wörter „Typography“ und „Matters“ ein und erstellen
Sie eine neue Regel in der CSS-Datei, um den Text in
Lobster darzustellen. Beachten Sie, dass wir auf die
Breite auf 700 px gesetzt und durch margin:auto auf der
Seite zentriert haben.
001 h1 {
002 width: 700px;
003 margin: auto;
160 Das große WordPress-Handbuch

WordPress
Tuning
Mehrere Schriftarten
importieren
Die Benutzerschnittstelle von
Google Fonts macht das Importieren
mehrerer Schriftarten auf eine
Seite einfach. Trennen Sie dabei
einzelne Schriftfamilien durch
das Pipe-Symbol |
voneinander.
05
Gestalten
Sie jede
Zeile
Viele Aufgaben dieses
Tutorials verlangen, dass
wir einzelne Textzeilen mit
verschiedenen Charakteristiken gestalten. Das kann zu
einem regelrechten Nest von nicht-semantischem HTML
führen, da wir einen Hook für jedes Stückchen Text brauchen.
Es gibt ein jQuery-Plug-in, das uns diese Hooks zur
Verfügung stellt: Laden Sie das Plug-in von www.letteringjs.com
und jQuery von www.jquery.com herunter,
und fügen Sie beide an den Anfang Ihrer Seite ein.
001
002
06 Aufteilen
Das Lettering.js-Plug-in erlaubt es Ihnen zu
bestimmen, wie ein Block Text geteilt werden soll.
Benutzen Sie die „lines“-Methode, um jede Zeile Text in
der Überschrift in ein -Tag einzufassen. Fügen Sie
den folgenden Code in die -Tags ein.:
001
002 $(document).ready(function(){
003 // Code to create per-word/percharacter
styles in here...
004 });
005
07
Gestaltung pro Zeile
Nun haben Sie Hooks, die beim Laden der
Seite erstellt werden. Sie können den Inhalt wie
gewohnt verändern, ohne ein Set von -Tags
manuell zu unterhalten. Gestalten Sie die Kopfzeile
etwas spektakulärer: Fügen Sie eine neue Regel zur
Gestaltung der zweiten Zeile ein, sodass sie eine schöne
dunkelrote Farbe hat, und setzen Sie einen doppelten
Textschatten hinzu, um die Zeile etwas vom Hintergrund
abzuheben.
001 h1 span.line2 {
002 font-size: 238px;
003 line-height: 140px;
004 color: #c44032;
005 text-shadow: -1px 1px 0px #fff,
08
• Die Website von Rob
Edwards macht von Ornamenten
Gebrauch, um ein
typografisch orientiertes
Design zu schaffen.
• Warum sollten Sie
bewährte, aber langweilige
Schriftarten verwenden,
wenn Sie die Typografie
zu einem herausragenden
Merkmal Ihrer
Seite machen können?
• Google Fonts gewährt
Designern kostenlosen
Zugriff auf eine Bandbreite
an Schriftarten. Das verleiht
Ihrer Typografie Flügel!
• Wir beginnen mit unformatiertem
Standardtext in
der HTML-Datei und verwenden
nur CSS, um ein
ästhetisches Ergebnis zu
erhalten.
Erste Zeile anpassen
Wenn Sie Ihre Seite im Browser betrachten,
sehen Sie, dass die Inhalte bereits jetzt deutlich hübscher
aussehen als zu Beginn. Vervollständigen Sie den
Header durch Hinzufügen einer weiteren Zeile im Format
der zweiten Zeile. Setzen Sie die folgenden Regeln
in Ihre CSS-Datei ein (den vollständigen Code finden Sie
unter www.webdesignermag.co.uk/tutorial-files):
001 h1 span{
002 display: inline-block;
003 position: relative;
004 text-shadow: -1px 1px 0px #fff,
-3px 3px 0px #666;
09 Absätze
Nach der perfekt gestalteten Überschrift nutzen
wir denselben Ansatz, um die restlichen Inhalte zu
gestalten. Beginnen Sie mit einigen Zeilenumbrüchen
im ersten Absatz. Vergessen Sie nicht, die Auskommentierung
zu entfernen, um den Text sichtbar zu machen.
Das große WordPress-Handbuch 161

Tuning
• Die Gestaltung der Überschrift
sieht hier schon besser
als das Ursprungsdesign
aus – durch Splitting
nach Zeilen können wir
noch mehr herausholen.
• Im Gesamteindruck wirkt
das neue Arrangement
deutlich kraftvoller.
• Suchen Sie sich bei Google
Fonts eine Schriftart aus.
• Mithilfe der Farbgebung
werden bestimmte Wörter
betont.
Splitting nach
Buchstaben
Das jQuery-Plug-in Lettering.js
splittet auf Basis einzelner
Buchstaben, falls Sie kein Argument
einfügen. Sehr nützlich,
um die Buchstaben eines
Wortes individuell
zu gestalten.
001 ”There was once a
typeface
002 that had the reputation of being
003 more legible and functional
004 than all the others.
10
Weitere Schriftarten
Nutzen Sie das Lettering.js-Plug-in, um individuell
gestaltbare Zeilen zu schaffen. Zunächst entscheiden Sie
sich für eine passende Schriftart zum Kopieren – besuchen
Sie dazu erneut Google Fonts. Wir haben uns für Crimson
Text entschieden, eine Serifenschriftart mit klaren Linien.
Ändern Sie dementsprechend die existierende Google-Fonts-Zeile,
um die neue Schriftart zu importieren.
001
11
Plug-in anwenden
Wenn Sie möchten, dass die Hooks jede Sektion
gestalten, fügen Sie den folgenden Code Ihrem
-Tag hinzu. Wie auch bei wird das Plug-in
eine Spanne pro Zeile erschaffen, wo Sie dann ganz einfach
per CSS einen Hook anwenden.
001 $(“p.first”).lettering(“lines”);
12
Stylen Sie!
Da Ihnen die Zeilen nun zur Verfügung stehen,
können Sie denselben Designansatz wie vorher nehmen:
Passen Sie jede Zeile des Textes an die Weite des
Blocks an, indem Sie die Textgröße schrittweise erhöhen.
Passen Sie auch die Zeilenhöhe an, um ein stimmiges
Arrangement zu erhalten. Fügen Sie folgenden
Code hinzu (den kompletten Code finden Sie unter
www.webdesignermag.co.uk/tutorial-files):
001 p {
002 width: 700px;
003 text-align: left;
13
Die Zeile drei
Sie werden im vorherigen Schritt bemerkt
haben, dass die dritte Zeile eine kleine Schriftart verwendet,
und diese passt nicht richtig in das Gesamtkonzept.
Wir werden sie etwas auffälliger machen: Fügen Sie ein
zusätzliches -Tag in Ihren Code ein, direkt um die
dritte Zeile:
001 ”There was once a
typeface
002 that had the reputation of being
003 more legible and
functional
004 than all the others.
14
Ups, was ist jetzt passiert?
Wenn Sie Firebug nutzen und sich nach dem
Laden der Seite das HTML ansehen, werden Sie bemerken,
dass das -Tag, das Sie hinzugefügt haben,
nicht zu existieren scheint. Und tatsächlich, der Code ist
weg – dies ist dem Lettering.js-Plug-in geschuldet. Aber
Sie können das in den Griff bekommen: Öffnen Sie die
JavaScript-Datei letter.js, um nur für dieses ein
Pro-Wort-Splitting anstelle eines Pro-Zeile-Splittings zu
schaffen. Sie hätten dies auch via für Zeile drei
machen können, auf diese Art ist es aber übersichtlicher.
Fügen Sie den folgenden Code über dem „paragraph
split“ ein:
001 var a=t.html().split(splitter),inject=’’;
15
Nach Wörtern aufteilen
Da Sie nun beibehalten, können Sie das
Lettering.js-Plug-in verwenden, um ein Pro-Wort-Splitting
anstelle eines Pro-Zeile-Splittings durchzuführen – nur
für dieses . Das hätten Sie zwar auch erreichen
können, indem Sie für Zeile drei benutzen, Sie
behalten allerdings eine bessere Übersicht, wenn Sie Ihr
eigenes span hinzufügen und so splitten. Fügen Sie den
folgenden Code über dem „paragraph split“ ein:
001 $(“.fancy_title”).lettering(“lines”);
002 $(“.em1”).lettering(“words”);
003 $(“p.first”).lettering(“lines”); // split
the .em1 span before splitting the
paragraph
16
Einzelne Wörter gestalten
Für Ihre Zeile drei haben Sie nun einige -
Tags. Um dieser Zeile zusätzlich Farbe zu verleihen,
fügen Sie neue Regeln hinzu. Sie können das Wort „and“
auch rotieren, was Ihnen die Vergrößerung der restlichen
Wörter erlaubt und diese deutlicher hervorhebt.
Fügen Sie folgenden Code ein, um die Zeile ein wenig
aufzumotzen (den vollständigen Code finden Sie auf
www.webdesignermag.co.uk/tutorial-files)
001 p.first .line3 span {
002 display: inline-block;
003 position: relative;
004 }
005 p.first .line3 .word1 {
17
Ein kleines Extra
Wie Ihnen vielleicht aufgefallen ist, haben wir
im letzten CSS-Block ein kleines Extra hinzugefügt.
Wenn Sie die Pseudoklasse :hover verwenden, wird der
Text hevorgehoben, wenn Sie mit der Maus drüberfah-
162 Das große WordPress-Handbuch

WordPress
Tuning
• Die Gestaltung der Überschrift sieht hier schon besser als das
Ursprungsdesign aus – durch Splitting nach Zeilen können wir aber
noch mehr herausholen.
• Im Gesamteindruck wirkt das neue Arrangement
deutlich kraftvoller.
• Suchen Sie sich bei Google Fonts eine Schriftart aus.
• Mithilfe der Farbgebung werden bestimmte Wörter betont.
Holen Sie alles
aus CSS3 und
HTML5 heraus
In diesem Tutorial haben wir ein einfaches
jQuery-Plug-in benutzt, um
die benötigten Hooks für das Gestalten
individueller Abschnitte des
Inhalts zu erhalten. Aber das alleine
reicht noch nicht aus. Wir haben von
den CSS3-Eigenschaften Gebrauch
gemacht, um einen Abschnitt zu
gestalten. Sie können dasselbe sogar
auf Webseiten anwenden, die bereits
online sind. Stellen Sie sicher, dass
Sie ein Fallback für ältere Browser
zur Verfügung stellen, aber Eigenschaften
wie Textschatten haben
heutzutage eine weitverbreitete
Browser-Unterstützung. Für nicht
essenzielle Funktionalitäten haben
wir eine WebKit-spezifische Umgebung
genutzt, die in anderen Rendering-Engines
trotz W3C-konformer
Spezifikation noch nicht implementiert
ist. Nur durch den Gebrauch solcher
neuen Features können wir die
Weiterentwicklung der Webbrowser
vorantreiben.
ren. Außerdem haben wir eine -webkit-transition-Eigenschaft
hinzugefügt (für die Animation des Zustands zwischen
off und hover), und das ohne die Notwendigkeit
von JavaScript – wenn Sie einen WebKit-basierten Browser
wie Chrome oder Safari nutzen.
18
Mit zweitem Absatz
wiederholen
Kommentieren Sie den zweiten Absatz aus und wiederholen
Sie den obigen Vorgang. Wir haben erneut die
Schriftart Lobster verwendet, um das Wort „Everything“
hervorzuheben. Wir haben dazu noch eine gepunktete
Linie hinzugefügt, die dem Design Textur verleiht.
001 p.second .line1 {
002 font-size: 37px;
003 line-height: 10px;
004 }
005 p.second .line2 {
19
Hübsch und praktisch
Der letzte Happen Text dieses Absatzes hat
keine Zeilenumbrüche, also können Sie den ganzen
Block per .line4-Klasse gestalten. Schaffen Sie so einen
Block mit abgerundeten Ecken und einem Schlagschatten.
Das stört zwar zunächst den Lesefluss, sorgt aber
für ein visuell befriedigendes Ergebnis. Indem Sie die
Box rotieren, erhalten Sie einen interessanten Kontrast
zum gewöhnlichen geradlinigen HTML-Text.
001 p.second .line4 {
002 font-size: 24px;
003 line-height: 30px;
004 text-align: justify;
20
Bewegung hineinbringen
Wir haben dieselbe -webkit-transition-Eigenschaft
wie vorhin genutzt, um die Position der Wörter in Absatz
eins zu animieren. Hier schaffen Sie einen hover-Zustand für
die Box mit einer Nullrotation, was es WebKit-Browsern
erlaubt, wunderschöne Animationen zu erstellen.
001 p.second .line4:hover {
002 -webkit-transform: rotate(0deg);
003 -moz-transform: rotate(0deg);
004 transform: rotate(0deg);
005 }
21
Sorgsam zuordnen
Zuletzt kommt noch die Zuordnung des Zitats.
Sie können dieses gestalten wie einen ganz normalen
Text, das Lettering.js-Plug-in ist bei einem einzelnen
Wort in einer einzelnen Zeile nicht nötig. Für das letzte
Puzzlestück fügen Sie die folgenden Styles hinzu:
001 p.attrib {
002 text-align: right;
003 color: #5da028;
004 border-bottom: none;
005 }
22
Die Sache abrunden
Zum Schluss fügen Sie einen Rahmen um das
Ganze, indem Sie ein Style für den article-Tag erstellen.
Experimentieren Sie ein wenig, bis es Ihnen gefällt. Den
vollständigen Code finden Sie unter www.webdesignermag.co.uk/tutorial-files/.
001 article {
002 position: relative;
003 width: 760px;
004 margin: auto;
Das große WordPress-Handbuch 163

HTML5/CSS3
WordPress und neue Horizonte
166 Interaktive HTML5-Grafiken
Tools und Techniken
172 Infografik im Vektor-Stil
mit Photoshop erstellen
Statistiken stilvoll präsentieren
176 Modernste Navigationseffekte
dank CSS3
Menüs animieren ohne Plug-ins, Skripte
oder Flash
180 Persistente Überschriften
mit CSS und jQuery
Erleichtern Sie die Benutzung langer
Webseiten
184 Interaktive
Bildbeschriftungen mit CSS3
Text auf Fotos leicht gemacht und schön
gestaltet
188 Animieren Sie Ihre Inhalte
Erstellen Sie interaktiven Content
192 Tooltip-Plug-in mit jQuery
schreiben
Programmieren Sie ein praktisches Widget
196 Eingebettete Twitter-Feed-
QuickInfo mit jQuery
Themenbezogene Twitter-Updates
200 Inhalte für das HTML5-
Canvas-Tag erstellen
Von Illustrator direkt zum Canvas-Element
204 Suchmaschinenoptimierung
für Ihr Blog
Ziehen Sie in der Praxis Nutzen aus SEO
206 Webseiten-Daten mit Google
Analytics auswerten
Erfassen Sie nützliche Infos über Ihre
Besucher
SEITE
166
SEITE
180
SEITE
172
164 Das große WordPress-Handbuch

WordPress
HTML5/CSS3
Mit CSS3 hat man
etliche Optionen
bei der Seitengestaltung,
ohne zu irgendwelchen
Skripten
greifen zu müssen.
Top-Tipp
Dank ihrer Fähigkeit,
Aussagen auf den
Punkt zu bringen,
erfreuen sich Infografiken
sehr großer
Beliebtheit
im Netz.
Das große WordPress-Handbuch 165

HTML5/CSS3
INTERAKTIVE
HTML5
GRAfIKEN
Mit diesen Tools und
Techniken werden Sie
zum Meister der Infografik
DAS KONZEPT, ROHE DATEN mit schönen Grafiken
zu kombinieren, ist nicht neu. Zeitungen und andere
Print-Erzeugnisse praktizieren es schon seit langer
Zeit, denn Menschen konsumieren Kombinationen
von Bildern und Worten effektiver als puren Text. Was
hat sich nun verändert? Warum boomen Infografiken
derart im Netz?
Diesen Monat klären wir einige dieser Fragen und zeigen,
wie Sie selbst Infografiken erstellen können. Wir
beginnen mit den Grundlagen der Visualisierung von
Informationen und der Bedeutung guter Datenquellen,
um aufregende visuelle Nachrichten zu erstellen.
Wir machen weiter bei Gestaltungsfragen, durchleuchten
die Anatomie typischer Infografiken und schauen uns
bewährte Methoden im Design an. Darauf folgt ein kurzes
Vier-Schritt-Tutorial, das zeigt, wie man mit Photoshop
spezielle, bei Infografiken beliebte Elemente bastelt.
Zum Schluss werfen wir einen Blick auf interaktive Infografiken,
erörtern den Nutzen und zeigen Beispiele von
herausstechenden, großartigen Visualisierungen im
Netz. Für interaktive Elemente nutzen wir HTML5, CSS3
und JavaScript-Bibliotheken, um anderenfalls statische
Elemente zum Leben zu erwecken.
Egal ob Sie eine Marke, eine neue Produktlinie oder
einfach Informationen teilen wollen: Sie finden hier
sicher coole Tipps und Techniken.
166 Das große WordPress-Handbuch

WordPress
HTML5/CSS3
Warum Infografiken?
WEIL DER DURCHSCHNITTSNUTZER NICHT MEHR LIEST, SONDERN SCANNT!
DIE VERÄNDERUNGEN des Technologie-Zeitalters
bedeuten für das Leseverhalten, dass Infografiken
ein wesentliches Werkzeug sind, um die Aufmerksamkeit
der Nutzer zu erlangen.Mit der Unmenge an
Infografiken erfordern tolle Daten, Design-
Skills und ein gutes Storytelling.“
verfügbaren Online-Daten haben Nutzer die Qual der
Wahl, sie entscheiden in wenigen Sekunden, ob sie
sich Informationen näher anschauen wollen oder
nicht. Eine Message braucht heute nicht nur gute
Fakten, sondern auch ein passendes Design und
gutes Story-Telling.
Der Schlüssel für erfolgreiche Infografiken, die in
Social Networks geteilt werden, sind leicht aufzunehmende
Formen, Farben und Fakten.
Zee Durrani
Senior Creative
Egal ob oder Infografik-Boom noch lange anhält oder
nicht: Was bleibt, sind Online-Nutzer mit einem
unbändigen Hunger nach Infografiken. Das Schöne ist,
dass sie die besten Grafiken teilen. Was könnte man
gegen Nutzer haben, die Ihren Content verbreiten?
Die Bedeutung der Daten
DAS REZEPT FÜR ERFOLGREICHE INFOGRAFIKEN: EINE KLARE MESSAGE UND DIE RICHTIGEN DATEN.
INFOGRAFIKEN SOLLEN eine tolle Story erzählen:
Eine Auswahl relevanter Fakten und schöne Grafiken
reichen also nicht. Die Message muss durchdacht und
klar sein, die Daten müssen es unterstützen. Überlegen
Sie auch, wer Ihre Zielgruppe ist – die Leser sind am
wichtigsten. Zusätzlich: Ist die Message aufregend
genug, um ihr eine Infografik zu widmen? Gibt es hochqualitative
Fakten, um die Story zu unterstützen? Diese
Fragen müssen Sie beantworten, bevor Sie sich ans
Designen machen.
Unglücklicherweise bedeuten die Antworten auf die
Fragen, harte Recherche betreiben zu müssen. Sammeln
Sie gute Fakten, die Nutzer anschließend als teilenswert
erachten.
Glücklicherweise ist das Problem nicht der Zugang zu
den Daten, es braucht lediglich Zeit, das Internet lange
genug zu durchforsten. Hier ist nun das Wissen gefragt,
wo man gute Daten herbekommt. Der nächste
Abschnitt zeigt eine Auswahl, wo man anfangen könnte.
Wo suche ich nach Daten?
DREI FANTASTISCHE QUELLEN, UM KOSTENLOSE DATEN ZU ALLEN THEMEN ZU FINDEN.
n Freebase
www.freebase.com
Freebase ist eine Gemeinschaft, die Daten sammelt
und unter „Creative Commons“-Lizenz teilt. Es
gibt derzeit über 40 Millionen Themen, die Daten
sind 100 Prozent kostenlos: Sie brauchen sich keine
Sorgen wegen Datenmissbrauch zu machen.
Freebase ist ein gutes Werkzeug, um jegliche
Daten zu sammeln und sie zu analysieren.
n Public Data EU
publicdata.eu
Wie der Name vermuten lässt, ist dies ein europäisches
Projekt mit frei verwendbaren Datensätzen von
lokalen, regionalen und nationalen Staatsorganen
quer durch Europa. Eine Schnellsuche offenbart
Daten von überall aus Europa und Deutschland: eine
gute Quelle für offizielle Daten von Regierungen.
n Guardian Data Blog
www.theguardian.com/data
Die Zeitung The Guardian listet Datensätze von A
bis Z, auf Basis von allen bisherigen Meldungen.
Via Google-Doc wurden diese Daten öffentlich gemacht.
Schnell wurde es zum beliebten Platz, um
kostenlos Daten zu sammeln. Von Regierungsangelegenheiten
über Videospiele bis hin zu Kultur und
Bevölkerungsangelegenheiten ist alles dabei.
Das große WordPress-Handbuch 167

HTML5/CSS3
Anatomie einer Infografik
VOM FALKEN ZUM RAUMSCHIFF:
EINE VERGLEICHSGRAFIK ZUM THEMA GESCHWINDIGKEIT
Eine einfache Message
Diese Infografik hat eine Message: das Aufzeigen
menschlicher Errungenschaften beim
Thema Geschwindigkeit. Scheuen Sie sich
nicht, sich bei Ihrer Message nur auf einen
oder zwei Punkte zu beschränken. Häufig gilt:
je einfacher, desto besser.
Angemessene Grafiken
Die Infografik beschränkt sich auf das Thema
Fliegen und nutzt Säulen vorteilhaft aus, um
die Flughöhe der Luftvehikel zu illustrieren.
Waagrechte Balken würden für diese Grafik
nicht den gleichen Effekt haben.
Mehr Daten
Die Vertikale impliziert nicht nur die Höhe,
sondern liefert auch Informationen zur
Schallmauer, den Überschallbereich und
mehr. Ergänzende Beschreibungen können
Daten verständlicher machen.
Starkes Farbschema
Der Einsatz dunkler Farben vermittelt ein futuristisches
Hightech-Gefühl. Drei simple Farben
mit leichter Tonvariation lassen den Nutzer
fokussieren und lenken ihn nicht ab.
Warum
interaktiv?
HEBEN SIE IHRE INFOGRAFIK
AUF EINE ANDERE EBENE
FALLS SIE PROBLEME damit haben,
Ihre Daten auf wenig Raum zu zeigen,
oder einfach eine andere Nutzererfahrung
bieten wollen, dann ist Interaktivität
für Sie interessant. Elemente
zum Klicken, Scrollen oder Wischen
geben zusätzliche Daten frei oder
erlauben, die Geschichte dynamischer
zu präsentieren.
In vielen Fällen gibt es eine Notwendigkeit,
den Nutzer eigene Daten einfließen
zu lassen. Dann ist Interaktivität
die einzige Möglichkeit. Wenn Sie Interaktivität
bieten, dann schließen Sie den
Leser in den Story-Telling-Prozess mit
ein. Sie erlauben dem Nutzer, andere
Versionen Ihrer Geschichte zu erfahren,
wenn Sie den Leser Zugang zu
Ihren Daten geben.
Menschen nehmen Informationen besser
auf, wenn sie das Gefühl von Kontrolle
haben und einen eigenen Beitrag
leisten können.
Das Ansehen einer sich wegen individuellen
Eingaben anpassenden Zahl ist
befriedigender als das Betrachten rein
statischer Informationen.
Statische
Infografik
MIT PHOTOSHOP NEHMEN WIR EINE GEGENSTÄNDLICHE FORM
UND ERSTELLEN DARAUS EIN WAAGERECHTES BALKENDIAGRAMM
01
Form erstellen
Ein Containerschiff dient als Inspiration.
Mit dem Pinsel- und Formen-Tool
erstellen wir einen Vektor mit der Form, die
uns vorschwebt. Verbinden Sie Ihre Formen
als eine Ebene. Als Farben nutzen wir
„#5ad3e5“ und „#b31648“.
02
Vektor erstellen
Mit der Vektormaske schneiden
wir ein Rechteck aus. Wählen Sie die
Schiffsebene und klicken Sie auf Ebene
> Vektormaske > Alles anzeigen. Mit dem
Formen-Tool erstellen wir das Rechteck.
03
Balken ausfüllen
Jetzt können wir eine neue Ebene
unter dem transparenten Fenster erstellen.
Dies repräsentiert Ihren Balken. Mit
dem Formen-Tool und der Farbe #db517d“
bauen wir ein Rechteck, dessen Farbgebung
dem Prozentwert entspricht.
04
Letzter Touch
Fügen Sie Texte und Formen
hinzu, um die Werte Ihrer Infografik darzustellen.
Da wir mit Vektoren gearbeitet
haben, können wir die Grafik später für
andere Projekte verwenden und dynamisch
anpassen.
168 Das große WordPress-Handbuch

WordPress
HTML5/CSS3
Beliebte Styles
n Spaß
Die 101 Muppets der
Sesamstraße
Diese Infografik erschien zum
Jubiläum der Sesamstraße.
Sie zeigt alle 101 Muppets
statt nur einer Liste ihrer
Namen.
n Minimalistisch
Treffen Sie die richtige
Wahl, es ist Ihr Leben
Man sieht sofort, dass es hier um die
Gefahren des Rauchens geht. Das
Bild trägt die Botschaft. Wer interessiert
ist, der liest das Kleingedruckte.
BESCHREITEN SIE WEGE ABSEITS DES
KLASSISCHEN TORTENDIAGRAMMS
n Interaktiv
Google –
Small Arms &
Ammunition
Ein fantastisches Beispiel,
wie Daten interaktiv
visualisiert werden
können. Man dreht
einen Globus, ändert
Filter und lernt so die
weltweiten Rüstungsgeschäfte
der Regierungen
kennen. Hier wird
völlig auf pure Zahlenkolonnen
verzichtet.
n Entdecker
Turkish Airlines –
Kuala Lumpur
Diese Infografik fordert den Nutzer zum
Entdecken auf, um zu sehen, warum Kuala
Lumpur auf Platz 6 der am häufigsten
besuchten Städte liegt. Dieser spezielle
Stil funktioniert gut, um den Leser zu
Ihrer Message zu bringen.
Online Tools
KEIN EXPERTE FÜR DESIGN ODER
PROGRAMMIERUNG?
DIESE TOOLS HELFEN IHNEN
n Infogr.am
www.infogr.am
Preis: kostenlos
Ein extrem beliebtes Tool und derzeit gratis.
Das Programm lässt Sie Tabellen bearbeiten,
um verschiedene grafische Charts und Visualisierungen
zu basteln – sowohl statisch als
auch interaktiv.
Interaktive Optionen
n Scrollen
Scrolling ist traditionell ein Weg, um von A nach B zu
kommen. Kreativ eingesetzt, kann man so auch beeinflussen,
was auf dem Display erscheint. Ein gutes Beispiel
ist eine Webseite, die mit fortschreitendem Scrollen
eine Narration bietet, die abhängig von den Nutzereingaben
voranschreitet.
n Maus-Verfolgung
Die Maus lässt sich nicht nur in Computerspielen zur
Steuerung des Charakters verwenden. Im Web ist es
nicht anders. Wann immer Sie einen Protagonisten in
Ihrer Grafik haben, sollten Sie mit dem Gedanken spielen,
den Nutzern eine gewisse Kontrolle zu geben. Sie
werden es Ihnen danken.
BEZIEHEN SIE DEN
NUTZER MIT EIN
n Klicken
Man kann den Nutzerspaß steigern, wenn man per
Mausklick auf bestimmte Punkte weitere Infos oder
andere Arten von Reaktionen innerhalb der Infografik
anbietet. Nutzen Sie Farben, Hotspots oder einfache
Aufforderungen, um die Nutzerbeteiligung zu erhöhen.
n Tastatur
Die Tastatur wird nicht oft eingesetzt, wie beispielsweise
für Spiele. Doch das Keyboard kann eine gute
Möglichkeit sein, Hotkeys in einer scrollenden Infografik
anzubieten oder um die benutzten Daten zu filtern oder
zu ändern. Mit modernen Frameworks und APIs sind die
Möglichkeiten endlos.
n Piktochart
piktochart.com
Preis: kostenlos/29 Dollar/Monat
Wer mit einer eingeschränkten Anzahl an Themes
leben kann, zahlt für Pitochart keinen Cent.
Der Drag-and-drop-Editor kann verschiedene
Grafiken und Daten in der finalen Infografik verknüpfen.
Wer zahlt, bekommt viele Themes.
n Visua.ly
create.visual.ly
Preis: kostenlos
Dieses Online-Tool nutzt Start-Templates, die Sie
nach Belieben anpassen können. Das Programm
ist nicht so stabil wie die anderen zwei, die Website
ist allerdings eine exzellente Quelle zur Inspiration
und für Neuigkeiten zu Infografiken.
Das große WordPress-Handbuch 169

HTML5/CSS3
So machen Sie Infografiken interaktiv
WIR NUTZEN HTML5, CSS, JQUERY UND DIE GREENSOCK-PLATTFORM,
UM STATISCHE INFOGRAFIKEN INTERAKTIV ZU MACHEN.
01 Vorbereitung
Alle nötigen Dateien finden sich auf www.webdesignermag.co.uk/tutorial-files/.
In diesem Tutorial werden
wir alle nötigen Elemente für interaktive Elemente einer Infografik
genau erklären. Die wichtigen Dateien, die Sie geöffnet
lassen sollten, sind index.html, style.css und interaction.js.
02
HTML für das Schiff
Bevor es an JavaScript geht, prüfen Sie Ihren
HTML-Code. Für jegliche Interaktivität braucht es ein
Container-Element, wie etwa das Schiff. Dazu benötigen
Sie ein Füllelement, das den Balken repräsentiert, der
sich vor- und rückwärts bewegen kann.
001
002 0%
03 Scrollbalken
Dieser Abschnitt (Code auf der Heft-CD) widmet
sich dem Scrollbalken, der sich beim Runterscrollen
füllt. Im Code nutzen wir die „jQuery scrollTop“-Funktion,
um eine valide Prozentzahl für den Balken zu bestimmen,
wenn der Wert die Grenzen 0 oder 98 verlässt.
04
Balken animieren
Wurden alle Berechnungen im vergangenen
Schritt gemacht, können wir zwei Zeilen Code hinzufügen,
um den „CSS width“-Wert zwecks Scrollbalken-Vergrößerung
dynamisch zu aktualisieren. Da der Wert mit
dem Scrollbalken verknüpft ist, wird er sich dynamisch
verändern, wenn der Nutzer scrollt. Die zweite Zeile
aktualisiert die Prozentzahl, die im Balken eingebettet ist.
001 steelBarFill.css('width', steelCnt + '%');
002 $('.pct', steelBarFill).html(steelCnt + '%
Steel');
05
Animierter Balken-Chart
Jetzt schauen wir uns eine Klick-Interaktion
an, die den Balken-Chart anzeigt und verbirgt. Wie im
vorherigen Beispiel stellen Sie sicher, dass der HTML-
Code mit den relevanten Füll-Informationen versehen ist.
Beachten Sie, dass wir HTML5-Attribute verwenden, um
die Höhe der Balken festzuhalten.
001
002 5%
004 10%
005 15%
007 20%
008 50%
009
06 TweenMax-Instanzen
Wir haben nun die relevanten Elemente
unserer Seite: das „data-value“-Attribut, das wir in einem
vorherigen Schritt erwähnt haben. Jetzt können wir
unsere erste TweenMax-Instanz erstellen. Diese bewegt
den Balken hoch und runter. Es braucht nur eine Zeile
Code, um TweenMax die CSS-“height“ in 0,8 Sekunden
animieren zu lassen.
001 // Setup Bar Graph Animations
002 var barGraph = $('#bar-graph');
003 var toysBar = $('#toys-bar', barGraph);
004 var toysBarFill = $('.fill', toysBar);
005 var toysBarValue = toysBar.attr('datavalue')
* 8;
006 var toys = TweenMax.to(toysBarFill, 0.8,
{css:{height: toysBarValue}, paused: true,
reversed: true} );
07
Wiederholung für
andere Balken
Wiederholen Sie die vorherigen Schritte für die anderen
Balken, jeder bekommt seine eigene TweenMax-Instanz,
mit dem exakten Wert für die Animation. Hinweis: Wir
haben den „reversed“-Parameter auf „true“ gesetzt. Das
verrät uns den Status des jeweiligen Balkens.
001 var carsBar = $('#cars-bar', barGraph);
002 var carsBarFill = $('.fill', carsBar);
003 var carsBarValue = carsBar.attr('datavalue')
* 8;
004 var cars = TweenMax.to(carsBarFill,
0.8, {css:{height: carsBarValue}, paused:
true, reversed: true} );
005
006 var furnitureBar = $('#furniture-bar',
barGraph);
007 var furnitureBarFill = $('.fill',
furnitureBar);
008 var furnitureBarValue = furnitureBar.
attr('data-value') * 8;
009 var furniture = TweenMax.
to(furnitureBarFill, 0.8, {css:{height:
furnitureBarValue}, paused: true, reversed:
true} );
08 Klick-Verknüpfung
Das Schiff bekommt nun einen „Click-Handler“.
Wenn der Nutzer auf das Schiff klickt, dann wollen wir,
dass der folgende Code aufgerufen wird. Dann rufen wir
dir „.play()“-Funktion der TweenMax-Instanz unserer Animation
auf. Anderenfalls starten wir die „reverse()“-Funktion,
welche das Gegenteil bewirkt und die Animation
zurücksetzt. Ganz einfach.
001 $('#triple-e-ship').on('click', function()
{
002
003 if(toys.reversed()) {
004 toys.play();
005 cars.play();
006 furniture.play();
007 textiles.play();
008 other.play();
009 $('.fill .pct', barGraph).
fadeIn();
010 } else {
011 toys.reverse();
012 cars.reverse();
013 furniture.reverse();
014 textiles.reverse();
015 other.reverse();
016 $('.fill .pct', barGraph).
fadeOut();
017 }
018 });
09
Kleine Warnung
Vorsicht mit TweenMax: Eine Instanz läuft
automatisch, solange Sie nicht den Code mit „paused:true“
ergänzen. Es ist empfehlenswert, die Instanz nie innerhalb
eines „Events-Handlers“ zu nutzen. So könnte Verwirrung im
Code entstehen. Für eine vollständige API-Dokumentation
mit mehr Details gehen Sie auf www.greensock.com.
170 Das große WordPress-Handbuch

WordPress
Genius Guide
Infografiken zur Inspiration
EINE AUSWAHL TOLLER INFOGRAFIKEN IM WEB
Quellen
EINIGE GUTE QUELLEN FÜR
INFOGRAFIKEN UND DATEN-
VISUALISIERUNG
n Was tut die Menschheit?
bit.ly/18LjxrD
Eine Infografik für Gründer und Finanziere, die erstaunlich
simpel – aber punktgenau – aufzeigt, was die
Weltbevölkerung beruflich treibt. Einfach funktioniert
manchmal am besten.
n Der Baum des Lebens
bit.ly/PwuPv7
Eine Verbindung zwischen Menschheit und den anderen
Lebewesen herzustellen, ist nicht immer einfach.
Diese Infografik erklärt diese Beziehung ohne Mühe, mit
einem coolen Vergrößerungsglas für die Details.
n Cool Infographics
www.coolinfographics.com
Der Infografik-Experte Randy Krum sammelt
auf diesem Blog interessante Artikel und Tipps.
n Visua.ly
www.visua.ly
Diese Quelle bietet viel Inspiration und zeigt die
neuesten und besten Infografiken im Netz.
n Dreizehn Gründe
bit.ly/18ZJfsg
Eine One-Page-Scroller-Infografik, die Infografiken
erklärt. Dieses Beispiel nutzt HTML5, CSS3 und Java-
Script, kombiniert mit tollen Animationen, die die unterschiedlichen
Inhalte zusammenhalten.
Was dann?
n Entfernung zum Mars
www.distancetomars.com
Ein exzellenter One-Page-Scroller, der die Distanz zwischen
Erde und Mars perfekt darstellt. Es gibt keine
komplizierten Graphen oder Nummern.
Eine Pixel-Erfahrung, die die Message trägt.
EIN KLEINER AUSBLICK, WIE
ES WEITERGEHEN KÖNNTE
Wenn Sie einerseits neu im Thema Infografiken sind,
ist ein anständiges Quellen-Fundament in Sachen Design
und Daten-Visualisierung der nächste Schritt. Wenn Sie
andererseits die Basics hinter sich haben, dann sollten
Sie sich ernsthaft an die Erstellung hochqualitativer Infografiken
machen.
Da viele Menschen derzeit auf diesen Zug aufspringen,
sollte man sich darüber im Klaren sein, wofür man
welche Daten überhaupt verwenden will. Datenqualität
ist ein großes Thema. Ja, wir haben eine Menge Informationen,
doch welche sind wirklich wertvoll oder gar
akkurat? Das Lernen wahrer Daten-Recherche ist ein
Schlüsselfaktor für den Erfolg mit Infografiken.
Zum Glück gibt es viele gute Quellen und Organisationen,
die genau das machen. Betreffend Technik ist
zu sagen, dass 3D-Interaktionen weiter voranpreschen
werden. Ohne Zweifel: Diese werden mehr und mehr in
den Fokus der Ersteller von Projekten rücken, die Daten
anschaulich darstellen müssen.
n three.js
threejs.org
Dieses fantastische Framework bietet viele Infos,
wenn Sie interaktive Infografiken machen möchten.
n GSAP Animation Library
www.greensock.com
Eine Animations-Bibliothek, die beim Erstellen
schneller und responsiver Animationen
im Web hilft.
Das große WordPress-Handbuch 171

HTML5/CSS3
172 Das große WordPress-Handbuch

WordPress
HTML5/CSS3
Infografik im
Vektor-Stil
erstellen mit
Photoshop
VEKTORGRAFIKEN LIEGEN IM TREND. WIR ZEIGEN IHNEN,
WIE SIE EINE EINFACHE INFOGRAFIK MITHILFE VON
PHOTOSHOP BAUEN.
LERNZIEL
Erstellen einer Infografik
im Vektor-Stil für Ihr Blog
DAUER
60 Minuten
ANSPRUCH
Quelldateien
www.webdesignermag.
co.uk/tutorial-files/
(Infographic.psd)
VEKTORGRAFIKEN verbindet man
normalerweise mit Adobe Illustrator,
doch lassen sich ähnliche Effekte
auch mit Photoshop erzielen. Der
Vektor-Stil hat etwas Modernes, Minimalistisches,
Aufgeräumtes an sich und ist dazu geeignet,
Botschaften schnell und klar zu transportieren.
In diesem Tutorial sehen wir uns an, wie Sie
innerhalb etwa einer Stunde ein ansprechendes
Diagramm zu einem aktuellen Thema erstellen
können – allerdings sollten Sie bereits mit dem
Stift-Werkzeug vertraut sein. Herauskommen
wird eine schlichte Infografik mit Prozentdaten
zur Verteilung von Wasser, Land und Eis auf
unserem Planeten. Dabei entspricht die Verteilung
der Farbflächen nicht genau den Prozenten,
wie Sie erkennen, aber es geht hier eher um die
Vorgehensweise beim Design.
01
Einrichten der Datei
Zuerst müssen Sie die Größe der Datei, mit der Sie arbeiten
werden, festlegen. Stellen Sie Ihr Dokument auf DIN A3 bei 300 dpi
ein. So können Sie von Ihrer Datei sogar noch A2-Poster ohne Qualitätsverluste
drucken, und gleichzeitig sparen Sie ein paar Megabyte
Speicherplatz.
03
Kreis zeichnen
Zeichnen Sie nun den Kreis, in den Ihr Planet sich ungefähr einfügen soll. Benutzen Sie das
Ellipsenwerkzeug, um einen großen Kreis in der Mitte des Dokuments zu zeichnen. Stellen Sie die
Deckkraft auf 0 %, und geben Sie dem Kreis eine Strichstärke von drei. Auf diese Weise können Sie
den Hintergrund durch den Kreis sehen.
02
Hintergrund setzen
Danach legen Sie die Hintergrundfarbe fest. Wir verwenden
einen kreisförmigen Verlauf von Blassgrau nach Cremeweiß. Nehmen
Sie #c4c4c4 als Grau- und #fcfcfc als Weißton. Stellen Sie dies im Ebenenstil-Dialog
ein, der durch Doppelklick auf die entsprechene Ebene
im Ebenen-Fenster geöffnet wird. Verwenden sie Weiß als innere Farbe.
Das große WordPress-Handbuch 173

HTML5/CSS3
04 Stift-Werkzeug
Beginnen Sie auf einer neuen Ebene mit
dem Zeichnen der wichtigsten Formen. Folgen Sie mit
dem Stift-Werkzeug dem oberen Rand des Kreises,
und zeichnen Sie eine Form ähnlich der im Screenshot.
Gehen Sie dann neben dem Ebenen-Reiter auf den
Reiter Pfade.
05
Pfade zu Formen
Im Pfade-Tab finden Sie Ihren neuesten Pfad.
Rechtsklicken Sie darauf und wählen Sie Pfad Füllen und
dann Vordergrundfarbe Benutzen aus. Heben Sie dann die
Auswahl des Pfades auf und kehren Sie zum Ebenen-Tab
zurück. Verstecken Sie die Kreis-Ebene, um einen besseren
Eindruck zu bekommen. Wenden Sie einen gespiegelten
Farbverlauf von #f9f9f9 nach #ededed bei 141 Grad an.
07
Ausrollen des Rasens
Benutzen Sie Ihre Kreisform erneut zur Orientierung,
um ein grünes Element mit weichen Kurven,
ähnlich denen der Eisform von eben, auf einer neuen,
ganz oben liegenden Ebene zu zeichnen. Dann füllen
Sie es mit einem gespiegelten, um 133 Grad geneigten
Verlauf von #9ad429 nach #ddf470.
08
06 Unterliegende
Ebene
Erzeugen Sie nun eine neue Ebene, aber
platzieren Sie sie unter der letzten Ebene,
sodass Sie den 3D-Effekt mit dem Stift-Werkzeug
darunter zeichnen können. Füllen Sie
diesen genau wie vorhin, aber benutzen Sie
diesmal einen linearen Verlauf bei 90 Grad
mit den Farben #a7a6a6 und #ffffff.
Was liegt darunter?
Wie bei der Eis-Ebene erzeugen Sie nun eine
Ebene unter der grünen Form, zeichnen mit dem Stift-
Werkzeug den Schatten und geben ihm einen linearen
Farbverlauf, diesmal mit -90 Grad und den Farben
#87bc0f und #79aa08. Bedenken Sie, dass alle Farbund
Gradangaben nur Richtwerte sind – experimentieren
Sie, bis Sie mit dem Aussehen zufrieden sind.
Werkzeuge
erklärt
Hier ist ein Tipp, der die Benutzung
des Stift-Werkzeugs in dieser Anleitung
wesentlich erleichtern wird.
Klicken Sie links auf den Startpunkt,
wählen Sie den zweiten Punkt und
klicken Sie, aber halten Sie die Taste
gedrückt und bewegen Sie die Maus,
um den Pfad zu beugen. Ein verbreiteter
Fehler ist es, danach einfach
mit dem nächsten Klick weiterzumachen,
sodass eine groteske Krümmung
entsteht, die die Linienführung
zerstören kann. Drücken und halten
Sie stattdessen nach jedem Klick
Opt/Alt und klicken Sie erneut auf
den letzten Punkt, um dort neu zu
beginnen und so eine wesentlich
ruhigere Kante zu erhalten.
09
Rasen, die Zweite
Zeichnen Sie auf einer neuen Ebene, wiederum
unter der ersten grünen Ebene, den oberen Teil
der grünen Form. Idealerweise sollte es eine glatte
Oberfläche sein, so wie eine Wiese. Füllen Sie sie mit
einem linearen Farbverlauf mit 90 Grad und den Farben
#9ddb16 und #d7ff46. Dieser Teil soll heller wirken als
die anderen Elemente, da auf ihn mehr Licht fällt.
10
Achtung, Steinschlag!
Fügen Sie unter der grünen eine braune Form
ein, die Fels darstellt. Benutzen Sie einen linearen Verlauf
bei -70 Grad mit der dunkleren Farbe oben, um zu
zeigen, dass sie von der grünen Form überschattet wird.
Wir benutzen die Farben #8d6b50 und #d1bc98. Unser
Ziel war es, das Farbschema hell zu halten, um den sauberen
Vektorgrafik-Stil einzuhalten.
174 Das große WordPress-Handbuch

WordPress
HTML5/CSS3
11
Wasser, überall Wasser
Nun können Sie das Wasser-Element hinzufügen.
Zeichnen Sie entlang Ihrem Kreis eine Form
für das Wasser, aber lassen Sie ganz unten eine kleine
Lücke für ein weiteres Eis-Element (siehe Bild). Für die
Hauptform können Sie einen gespiegelten Verlauf mit
-36 Grad und den Farben #33abbb und #36e6ed verwenden.
12 Südpol
Erzeugen Sie
nun eine Form, die die
Lücke im Wasser-Element
schließt. Benutzen Sie
dieselben Farben wie bei
der ersten Eisform, aber
fügen Sie als drittes einen
Blauton hinzu. Bauen Sie
zuletzt einen Effekt, der
aussieht wie schmelzendes
Eis, an der Unterseite
der Form. Daraus werden
dann Wassertropfen.
13
Die Tropfen
Nun machen Sie einige Wassertropfen, die
unten vom Eis fallen. Zeichnen Sie diese einfach mit dem
Stift und nehmen Sie dieselben Farben wie für die Wasserform,
jeweils mit einer dunkleren Form dahinter. Das
letzte Objekt, das wir hinzufügen müssen, ist die Wüste.
14
Heiß genug für Sie?
Mit der letzten Form füllen Sie die Lücke zwischen dem grünen
und dem weißen Element oben und ergänzen die Wüste auf unserem
Planeten. Folgen Sie demselben Ablauf wie zuvor und verwenden
Sie die Farben #dbc146 und #ecf774. Nachdem die Erden-Grafik fertig
ist, können Sie sich nun dem Text zuwenden.
15
Welt der Wörter
Wir benutzen den klassischen Font Futura Lt,
da er gut zu dem schlichten und sauberen Vektor-Motiv
passt. Die schwerere Schrift ist Geometr706 Md BT,
obwohl eine fettere Futura genauso gut funktionieren
würde. Nehmen Sie zwei verschiedene Grautöne, einen
helleren und einen dunkleren, für den Effekt.
16
Fügen Sie die
Statistik hinzu
Am Ende fügen Sie noch die Prozentzahlen
hinzu. Wie Sie sehen, entsprechen die
Flächen nicht den tatsächlichen Verteilungsverhältnissen,
doch es geht hier nicht
unbedingt um eine detailgetreue Darstellung.
Ergänzen Sie schließlich eine Legende
neben jeder Kategorie (Land, Wasser, Eis),
um die verschiedenen Elemente des Bildes
zu beschreiben. Das war’s! Eine schlagkräftige
Kombination aus Vektorgrafik und Statistik,
komplett in Photoshop erstellt.
Das große WordPress-Handbuch 175

HTML5/CSS3
Modernste
Navigationseffekte
dank CSS3
ANIMIEREN SIE MENÜS GANZ OHNE PLUG-INS,
SKRIPTE ODER FLASH – NUR MIT STYLESHEETS
• In diesem Tutorial setzen wir
auf jede Menge CSS3-Funktionalität,
zum Beispiel Transformationen,
Übergänge und
Schatten. Das Verbessern des
Nutzererlebnisses Ihrer Seite
war nie einfacher.
CSS3 WIRD ERWACHSEN man kann es
inzwischen ohne Bedenken benutzen, um
die grundlegenden visuellen Gestaltungselemente
einer Website aufzupeppen. Zwar
gibt es immer noch viele, die keinen ästhetischen Zugewinn
in CSS3 erkennen, doch das Netz ist nichtsdestoweniger
bereits voller Beispiele dieser progressiven Verbesserung.
Seien Sie also mit von der Partie!
In diesem Tutorial werden wir einer normalen ungeordneten
Liste, die als Menü genutzt wird, eine kleine Aufhübschung
per CSS3 angedeihen lassen. Am Ende wird
das Menü spürbar griffiger und dank des nativen Browser-Renderings
weich und flüssig animiert sein. Die nach
und nach hinzugefügten Effekte werden das Nutzererlebnis
kontinuierlich verbessern. Aber auch auf älteren
Browsern wird das Menü weiterhin funktionieren.
Wenn wir gerade dabei sind, schauen wir auch auf integrierte
Fonts, CSS-gerenderte Hintergrundgrafiken und
vordefinierte CSS3-Animationen. Wenn Sie das Schritt
für Schritt machen, sind Sie perfekt auf eine progressive
Verbesserung Ihrer eigenen Designs vorbereitet.
Am Ende wird das Menü spürbar
griffiger, weich und vor allem flüssig
animiert sein.
LERNZIEL
Einer ungeordneten Liste
per CSS3-Behandlung
Leben einhauchen
DAUER
60 Minuten
ANSPRUCH
QUELLDAtEIEN
www.webdesignermag.co.
uk/tutorial-files/
(HtML- und CSS-Dateien,
textur-Dateien)
01
Das grundlegende HTML
Wir müssen das Projekt zunächst auf solide
Füße stellen. Wir haben uns für eine sehr einfache
HTML-Seite entschieden, die ein mit einer ungeordneten
Liste an Navigations-Links und zwei weitere
s enthält: eins für den Inhalt und das andere für
die Überschrift. Der ganze Code kann entweder aus
der „start.html“-Datei kopiert oder im „Step Code“-Ordner
auf www.webdesignermag.co.uk/tutorial-files/
gefunden werden.
001
002
003
004
005 Advanced Navigation menus with
CSS3
006
007
008
009
010
02
Ein Stylesheet anwenden
Wie Sie vermutlich gemerkt haben, wurde
ein externes Stylesheet namens „styles“ aus einem
Unterordner aufgerufen. Dieses muss nun noch erstellt
werden, also ein neues Dokument öffnen, es als
„screen.css“ in einem Unterordner „Styles“ speichern,
damit es übereinstimmt. Jetzt nur noch den Code einfügen,
um die Hauptregeln festzulegen:
001 /* Advanced navigation effects with CSS3
*/t
002 body {
003 background: #dedede;
004 font-size: 62.5%;
005 font-family:verdana, helvetica,
arial, sans-serif;
006 }
007 #container {
008 width: 960px;
009 position: relative;
03
Das einfache Rollover
Unverzichtbarer Teil eines User-Experience-Designs
ist es, dem Benutzer Feedback zu geben, wenn er mit
Elementen Ihrer Seite interagiert. Ein gutes Beispiel dafür ist
das einfache Rollover, es ist eine der Kernfunktionalitäten,
auf die wir alle Effekte hier aufbauen werden. Starten Sie mit
dem unten angegebenen CSS-Code, der ein sehr einfaches
Rollover definiert, welches die Hintergrundfarbe ändert:
001 ul#nav li:hover {
002 background: #dcebeb ;
003 z-index: 1000;
004 }
176 Das große WordPress-Handbuch

Ihre Grafik in
CSS konvertieren
Um eine Grafik automatisch
in ein – ins Stylesheet implementierbares
– Format zu bringen,
nutzen Sie das Tool http://
tinyurl.com/uriconvertor.
WordPress
HTML5/CSS3
• Wenn das grundlegende Menü
fertig ist, kann der Rest der
Container seite mit dem für den
Content-Bereich nötigen CSS3
ergänzt werden.
• Dieser finale Screenshot zeigt
das fertige Navigationselement.
Man kann es natürlich auch als
Grundlage für weitere Effekte
und optische Verfeinerungen
benutzen.
• Nach dem Aufrufen des externen
Stylesheets namens „styles“
erstellen wir die .css-Datei aus
dem Code.
04
Etwas CSS3 dazu
Das Beste am vorgeschlagenen CSS3 ist die Möglichkeit,
die Elemente in Größe, Position und Rotation zu
transformieren. Wir fügen unserem Rollover eine Vergrößerung
hinzu, sodass, wenn wir mit der Maus darüberfahren,
das Objekt ein wenig größer wird und einen
Schatten wirft. Das Ergebnis sollte ein offensichtliches
„Lifting“ der Seite sein. Wir haben nur das Webkit-Browser-Präfix
benutzt, aber es funktioniert auch mit -msoder
-moz- für IE beziehungsweise Firefox.
001 ul#nav li:hover {
002 background: #dcebeb ;
003 -webkit-transform: translateY(-3px)
scale(1.05);
004 -webkit-box-shadow: 0px 2px 7px
#999;
005 box-shadow: 0px 2px 7px #999;
006 z-index: 1000;
007 }
05
Flüssige Animationen
Neben schicken Transformationseffekten
lässt CSS3 es auch zu, Animationen zwischen zwei verschiedenen
Stadien eines Elements zu erstellen. Das
wird in den Übergangseigenschaften eingestellt, indem
die zu animierenden Elemente, der Zeitraum und die
Animationsgeschwindigkeit festgelegt werden. Fügen
Sie den Code (siehe unten) zum ul#nav li-Selector hinzu,
um eine Autoanimation zu erstellen:
001 -webkit-transition: all 0.15s linear;
Einige weitere
06 Einstellungen
Nachdem das Navigationsmenü jetzt gut funktioniert, 07
kommen wir zum Rest der Seite, bevor wir mit den fortgeschrittenen
CSS3-Einstellungen und -Animationen
weitermachen. Den CSS-Code (siehe unten) für das
Styling des Contentbereichs hinzufügen und den Rest
der Seite diesem Styling anpassen:
001 div#panel {
002 margin: 0 1px;
003 width: 560px;
004 height: 477px;
005 float: left;
006 border: 2px solid #cfcfcf;
007 background: #fefefe;
008 -webkit-box-shadow: 0px 0px 4px
#ccc;
009 box-shadow: 0px 0px 4px #ccc;
010 }
011 div#smallpanel {
012 margin: 0 1px;
013 width: 60px;
014 height: 477px;
Den Dreh raus haben
Die Panels sehen schon gut aus, aber der
Titel in der kleinen Box passt irgendwie nicht richtig hinein.
Der Text wird um 90 Grad gedreht, sodass er vertikal
zu lesen ist. Zum Glück können wir das wieder mit
CSS3 machen. Die Transform-Eigenschaft gibt uns die
Möglichkeit, den Titel richtig zu platzieren. Ändern Sie
Ihr CSS, sodass es wie folgt aussieht:
001 #smallpanel h3 {
002 width: 477px;
Das große WordPress-Handbuch 177

HTML5/CSS3
• Hier haben wird CSS3 benutzt, um jedes Icon des Menüs
beim Rollover zu vergrößern und zu verschieben,
sodass sich das Menü sofort interaktiver und
durchdachter anfühlt.
• Einheitlich bleiben, indem Sie den Slide-in-Effekt auch
für den Button-Text anwenden; CSS3 kann alle Ihre
Animationen auf einmal abwickeln.
• Seien Sie bei den Icons kreativ, sodass diese auch in
kleinerem Maßstab aussagekräftig sind und man sofort
erkennt, wofür sie stehen.
003 margin: 0;
004 padding: 0;
005 font-size: 5em;
006 display: block;
007 text-transform:capitalize;
008 color: #8faabd;
009 color: rgba(255,255,255,0.5);
010 font-weight:normal;
011 -webkit-transform-origin: 0 0;
012 -webkit-transform: rotate(90deg)
translateY(-60px) translateX(20px);
013 -webkit-transition: all 0.3s linear;
014 cursor: pointer;
015 }
08
Ein paar Vektorgrafiken
Wir dachten, ein paar Icons für die unterschiedlichen
Bereiche würden unser Menü aufpeppen,
aber wenn man Standard-JPEGs, -PNGs oder -GIFs rendert,
werden sie unscharf, wenn man sie beim Überqueren
mit der Maus vergrößern lässt. Daher wird ein Web-
Font benutzt, um Icons zu rendern, die sich wie Vektoren
verhalten und zu beliebiger Größe hochskalieren
lassen, ohne unscharf zu werden. Schauen Sie auf
www.justbenice.ru/studio/websymbols nach einem
passenden Font.
09
Herunterladen und
installieren
Laden Sie den WebSymbols Font (oder etwas Ähnliches)
herunter und integrieren Sie diesen in Ihre Seite, indem
Sie den Stepcode an den Anfang Ihres Stylesheets setzen.
Dadurch wird der Font in die Seite importiert und
kann wie jeder andere Font benutzt werden.
001 @font-face{
002 font-family: ‘WebSymbolsRegular’;
003 src: url(‘fonts/websymbols-regularwebfont.eot’);
004 src: url(‘fonts/websymbolsregular-webfont.eot?#iefix’)
format(‘embedded-opentype’),
005 url(‘fonts/websymbols-regularwebfont.woff’)
format(‘woff’),
006 url(‘fonts/websymbols-regularwebfont.ttf’)
format(‘truetype’),
007 url(‘fonts/websymbols-regularwebfont.svg#WebSymbolsRegular’format(‘svg’);
008 }
10
Icons auswählen
Jetzt da der Font installiert wurde, kann zu
jedem Listenelement ein Icon hinzugefügt werden. Ein
mit der Klasse Icon vor jedes -Tag in der Navigationsliste
setzen und den folgenden Code dazuschreiben,
um den WebSymbols-Font der Icon-Klasse zuzuweisen:
001
002
003 RFavourite View your
favourites
004 SSettings Edit your
settings
005 UPersonal Change your
details
11
Ausprobieren
Sie werden bemerken,
dass wir im Beispielcode
einige Buchstaben
als Content für unsere
Icon-s definiert haben. Jeder Buchstabe zeigt im
gerenderten WebSymbols-Font ein anderes Icon an – es
lohnt sich, ein bisschen herumzuprobieren, welches
Icon am besten zu Ihrem Menüeintrag passt.
12
Icon-Font
Wir haben einen speziellen
Font benutzt, um die Icons
auf unseren Buttons zu rendern.
Sie können diesen
kostenlos auf www.justbenice.ru/studio/websymbols
downloaden.
Das Icon animieren
Wenn über den Menüeintrag mit dem Cursor
gefahren wird, benutzen wir CSS3, um ihn zu vergrößern,
und die Übergangseigenschaften, um es automatisch zu
animieren. Das Gleiche wird jetzt mit dem Icon gemacht,
indem sowohl dem Icon als auch dem Menüeintrag eine
Animation gegeben wird, sodass dem Icon zwei Animationen
zugeordnet werden: eine als Child des Menüeintrags
und eine als Icon. Zusammen ergibt das eine komplexere
Bewegung, die nicht so mechanisch aussieht.
Das folgende CSS einfügen:
001 ul#nav li:hover .icon {
002 -webkit-transform: scale(1.5);
003 color: #b7480c;
004 }
13
CSS3 ausnutzen
Haben Sie bemerkt, dass wir die Farbe und die
Größe des Icons animiert haben, sodass es viel größer
wird als der Rest des Buttons? CSS3 animiert ohne weiteres
jede CSS-Eigenschaft, sodass es einen schönen flüssigen
Übergang auch ohne komplexes Skript gibt.
178 Das große WordPress-Handbuch

WordPress
HTML5/CSS3
14
Voreingestellte
Animationen
Manchmal kann es ziemlich nützlich sein, eine Start- und
Endposition für eine Animation definieren zu können,
anstatt nur einen Start- und einen Endzustand vorzugeben.
Das erlaubt es, eine Animation mit einigen Einstellungen
zu starten und nicht nur den Standard zu benutzen.
Einfach den folgenden Code ins Stylesheet einfügen,
um eine voreingestellte Animation zu erstellen:
001 @-webkit-keyframes slideFromTop {
002 from {
003 opacity: 0;
004 -webkit-transform:
translateY(-200%);
005 }
006 to {
007 opacity: 1;
008 -webkit-transform: translateY(0%);
009 }
010 }
15
Was macht die Animation?
Der soeben hinzugefügte Code macht von
alleine erst mal nichts. Wenn man die Animation dem
Hover-State eines Elements hinzufügt, wechselt es bei
einer Mausbewegung über das Element zwischen
Transparenz und 200 % Größe sowie normaler Größe
und Opazität. Um das in Aktion zu sehen, einfach noch
mal den folgenden Code hinzufügen. Der komplette
Code findet sich auf www.webdesignermag.co.uk/
tutorial-files/.
001 ul#nav li a h4 {
002 margin: 0;
003 padding: 0;
004 font-size: 3em;
005 display: block;
006 text-transform:capitalize;
007 font-weight:normal;
008 }
16
Testen und Wiederholen
Wir haben gerade eine Animation eingerichtet,
die auf das -Element in jedem Listenobjekt angewendet
wird. Wenn Sie mit der Maus darüberfahren, verschwindet
die Überschrift und gleitet zurück ins Bild. Wir
können diesen Trick für die anderen Elemente in unseren
Buttons wiederholen. Einfach den folgenden Code hinzufügen,
um die voreingestellte Animation einzurichten:
001 @-webkit-keyframes slideFromRight {
002 from {
003 opacity: 0;
004 -webkit-transform:
translateX(200%);
005 }
006 to {
007 opacity: 1;
008 -webkit-transform: translateX(0%);
009 }
010 }
17
Browserfreundlichkeit
Jetzt haben wir zwei komplette Animationen
voreingestellt. Bevor wir jetzt die zweite Voreinstellung
auf den Text im Button anwenden, sorgen wir dafür,
dass auch andere Browser mitkommen, indem wir
deren eigene Herstellerpräfixe ergänzen. Fügen Sie folgenden
Code ein, um die voreingestellten Animationen
für andere Nicht-WebKit-Browser zu duplizieren:
001 @-webkit-keyframes slideFromTop {
002 from {
003 opacity: 0;
004 -webkit-transform:
translateY(-200%);
005 }
006 to {
18
Konsistent bleiben
Da das erledigt ist, können wir nun den Effekt
auf den Text anwenden. Das funktioniert genauso wie mit
den Elementen, die wir eben gesehen haben. Einfach
den Call in die Voreinstellung schreiben und wenn
nun der Benutzer mit dem Cursor über das -Element
fährt, werden vier Animationen gleichzeitig aufgerufen.
001 ul#nav li a h4 {
002 margin: 0;
003 padding: 0;
004 font-size: 3em;
005 display: block;
006 text-transform:capitalize;
007 font-weight:normal;
008 }
19
Textur bitte
Die letzten Schnörkel, die wir unserer Seite
für einen perfekten Look mitgeben, sind ziemlich einfach,
aber ein genauerer Blick lohnt sich trotzdem. Die
Seite fühlt sich etwas zu steril und leer an, es wäre
schön, eine Textur im Hintergrund zu haben, aber nicht
zulasten der Downloadgeschwindigkeit. Beginnen Sie
mit dem Erstellen einer sich wiederholenden Hintergrundtextur
in einem Bildbearbeitungsprogramm.
20
Umwandeln und
einsetzen
Anstatt das Bild als externe Referenz einzubinden, was
man normalerweise machen würde, kann es direkt in
CSS geschrieben werden, sodass ein Server-Call gespart
und schneller gerendert wird. Auf www.tiny url.com/
uriconvertor Ihr Bild hochladen, um es in base64-Code
zu konvertieren, diesen dann kopieren.
21
Einfügen und los
Jetzt haben Sie Ihren base64-Code und können
ihn als Hintergrund an einer geeigneten Stelle einsetzen.
Wir haben uns für den Seitenhintergrund entschieden.
Schreiben Sie folgenden Code in Ihre Body{}
CSS Rules, um die Textur anzuwenden. Dabei kann Ihr
base64-Code abhängig von Ihrer Textur etwas anders
aussehen als unserer.
001 body {
002 background: #dedede
url(data:image/jpeg;base64,/9j/…)
003 repeat top left;
004 font-size: 62.5%;
005 font-family:verdana, helvetica, arial,
sans-serif;
006 }
22
Feinschliff und Test
Der letzte Feinschliff wird über eine andere
Textur im kleinen Panel, ein Icon und eine Animation
für die Position und einen Textschatten innerhalb der
-Elemente erzielt. Sie sollten dies alleine hinbekommen.
Wenn Sie damit fertig sind, testen Sie das
Menü in Ihrem Browser und erfreuen Sie sich am
großartigen CSS3.
Warum Bilder
in Ihre CSS-Stylesheets
einbinden?
Damals in den 1990ern, als das WWW
gerade erst anfing zu wachsen, war die
Bandbreite sehr wichtig. Man verband
sich in der Regel per Modem mit dem Netz,
sodass jedes kleine Detail einer Webseite
darauf getrimmt sein musste, die
Downloadzeit zu minimieren.
Obwohl wir von diesem Extrem weg sind,
ist es immer noch wichtig, seinen Code
zu optimieren und die Anzahl an Serverzugriffen
zu minimieren, besonders jetzt,
wo das mobile Internet boomt.
Ein Weg, das zu erreichen, ist es, das
externe Rendern der Hintergrundgrafik
zu vermeiden. Jede zusätzliche Datei
führt zu Mehraufwand für Browser und
Server, man kann also Server-Calls sparen
und die gesamte Performance der Seite
verbessern, indem man das kleine Bild,
das sich zu einem Hintergrundbild oder
einer Textur zusammensetzt, in den
CSS3-Code integriert.
Das große WordPress-Handbuch 179

HTML5/CSS3
Persistente
Überschriften
mit CSS und
jQuery
LERNZIEL
WordPress-Plug-ins
mit dem Plug-in-Editor
bearbeiten
DAUER
45 Minuten
ANSPRUCH
ERTAPPEN SIE SICH manchmal dabei, dass
Sie eine Seite lesen und überhaupt keine
Ahnung haben, was Sie da gerade gelesen
haben? Die Besucher Ihrer Seite werden
Ihnen dankbar sein für eine kleine Erinnerung daran,
was sie gerade betrachten. Scrollen ist die beste
Lösung, die wir haben, um Inhalte darzustellen, die
größer als der Bildschirm des Benutzers sind. Anders als
bei einer Magazinseite jedoch, bei der der Leser mit
einer kurzen Augenbewegung überprüfen kann, welchen
Abschnitt er gerade liest, muss die Leserin am
Bildschirm erst hochscrollen, um nachzusehen, wo sie
gerade ist, und dann wieder nach unten und die Stelle
wiederfinden, die sie zuletzt gelesen hat. Dieser Bruch
im Lesefluss ist nicht nur lästig, sondern kann auch der
Auslöser für Ihren Besucher sein, Ihre Website zu verlassen.
Die Benutzung persistenter Header ist eine Möglichkeit,
auf längeren Seiten einen visuellen Kontext zu
bieten und dazu beizutragen, dass der Lesefluss nicht
unnötig gestört wird.
ERLEICHTERN SIE DIE BENUTZUNG LÄNGERER WEBSEITEN
DURCH EINEN VISUELLEN HINWEIS AUF DEN GERADE
BETRACHTETEN ABSCHNITT.
01
Erste Schritte
Der Persistente-Überschriften-Teil dieser Anleitung
setzt lediglich jQuery und ein kleines Stylesheet
voraus. Beide werden mit den ersten paar Zeilen HTML
(siehe unten) eingebunden. Dieses Tutorial verwendet
das Galerie-Plug-in FancyBox, das reich ausgestattet
ist und sein eigenes Stylesheet mitbringt, welches hier
ebenfalls geladen wird.
001
002
003
004
02
Das Skript ausführen
Die Funktion UpdateHeaders sucht nach allen
Abschnitten, die als ‚.portfolio-category‘ ausgezeichnet
sind, und merkt sich jeweils die Koordinate der Oberkante,
die Position der vertikalen Scrollleiste und das
CSS der floating-header-Klasse.
001 function UpdateHeaders() {
002 $(“.portfolio-category”).each(function() {
003 var el = $(this),
004 offset = el.offset(),
005 scrollTop = $(window).
scrollTop(),
006 floatingHeader = $(“.
floatingHeader”, this)
03
Sichtbarkeit prüfen
Dann wird die Position jeder Kategorie des
Portfolios überprüft und mit der aktuellen Scrollposition
der Seite verglichen. Durch die zusätzliche Information
über die Höhe des Elements können wir bestimmen,
ob sich ein Teil einer Portfoliokategorie am oberen Bildschirmrand
befindet. Treffen die Kriterien auf eine Kategorie
zu, so wird das visibility-Attribut ihrer Überschrift
auf „visible“ gestellt, andernfalls auf „hidden“.
001 if ((scrollTop > offset.top) &&
(scrollTop < offset.top + el.height)) {
002 floatingHeader.css("visibility",
"visible");
003 } else {
004 floatingHeader.css("visibility",
"hidden");
005 }
006 });
007 }
04
Klon zum Mitnehmen
Die Überschriften der Portfolios werden
geklont. Scrollt der Benutzer dann in einen Abschnitt,
der eine persistente Überschrift haben soll, dessen
Überschrift aber außerhalb des sichtbaren Bereichs
liegt, wird die geklonte Überschrift in einer festen
Position angezeigt.
001 $(function() {
002 var clonedHeaderRow;
003 $(".portfolio-category").each
(function () {
004 clonedHeaderRow = $(".portfolioheader",
this);
005 clonedHeaderRow
006 .before(clonedHeaderRow.
clone())
007 .css("width",
clonedHeaderRow.width())
008 .addClass("floatingHeader");
009 });
010 });
05
Abfrage beim Scrollen
Immer beim Scrollen wird die UpdateHeaders-
Funktion wieder ausgeführt, um festzustellen, welche
(falls nötig) persistente Überschrift nun angezeigt werden
muss.
001 $(window)
002 .scroll(UpdateHeaders)
003 .trigger(“scroll”);
06
Jetzt wird’s schick
Da wir in diesem Tutorial zeigen möchten, wie
persistente Überschriften in einem einseitigen Portfolio
eingesetzt werden können, wurde zusätzliche Funktionalität
aufgenommen, um die Bilder etwas schicker zu
inszenieren. Nur ein winziger Codeschnipsel ist nötig,
um die Standard-FancyBox einzusetzen.
001 $(document).ready(function() {
002 $(‘.fancybox’).fancybox();
003 });
180 Das große WordPress-Handbuch

WordPress
HTML5/CSS3
• Die Elemente einer
gewöhnlichen,
einfachen Portfolio-
Seite sind alle am
selben Ort.
• Die erste Überschrift
ist kurz vor dem
Verschwinden, da die
Bilder ihrer Kategorie
bereits weg sind und
die nächste Kategorie
beginnt.
• Scrollt der Benutzer
weiter nach unten,
wiederholt sich der
Prozess mit der
nächsten Kategorie.
07
Header fertig
Nun sind wir fertig mit jQuery und auch am
Ende des Head-Abschnitts unseres HTML-Dokuments.
Nun muss der Inhalt korrekt ausgezeichnet werden,
damit die persistenten Überschriften und die FancyBox
funktionieren.
08
Nichts Besonderes
Um den Seiteninhalt einzuschließen, nehmen
wir einen gewöhnlichen und setzen die Abstände
links, rechts und unten auf auto, um ihn horizontal zu
zentrieren. Selbstverständlich können Sie all diese Elemente
dem Design Ihrer Seite entsprechend anpassen.
001
002 PERSISTENT HEADERS
09
Beharrlichkeit zahlt
sich aus
Nun müssen nur noch die Elemente bestimmt werden,
die die Persistenz-Behandlung brauchen. Die .portfoliocategory
ist der gesamte Bereich, der seinen eigenen
persistenten .portfolio-header braucht.
001
002 History
10
Gruppierung im Portfolio
Der Überschrift kann jede Art von Inhalt folgen.
In dieser Anleitung benutzen wir FancyBox-Klassen, um
Portfolio-Gruppen zu erzeugen. Jede Gruppe wird als datafancybox-group
mit einem eigenen Namen – hier „History“,
„Tragedy“ und „Comedy“ – ausgezeichnet. Die Angabe von
Gruppen lässt FancyBox wissen, welche Bilder noch angezeigt
werden sollen, wenn zwischen den Bildern vor- und
zurückgescrollt wird.
001
11
Unbegrenzte Persistenz
Sie können Ihrem Bild einen Titel geben, und Sie
sollten eine Beschreibung im alt-Attribut hinzufügen (wenn
Sie möchten, dass Ihr HTML validiert). Jeder Abschnitt
muss mit einem -Tag geschlossen werden. Sie
können beliebig viele Abschnitte auf Ihrer Seite haben,
jeden mit seiner eigenen persistenten Überschrift.
12
Das CSS
Das CSS beginnt mit einem Universal-Selektor,
mit dem für eine konsistente Darstellung in allen
Browsern sämtliche Innen- und Außenabstände auf Null
gesetzt werden. Zum Thema Resetting wurde schon
viel geschrieben; es gibt sogar CSS-Reset-Vergleichs-
Websites. Kundige Entwickler wissen vermutlich, dass
sie das Reset per Universal-Selektor vermeiden sollten,
aber wir machen mal eine Ausnahme.
001 * {
002 margin: 0;
003 padding: 0;
004 }
13
Die persistente Überschrift
stylen
Die meiste Aufmerksamkeit sollten Sie dem h2-Tag widmen,
denn es ist der Star dieser Show. Wenn die Gestaltung von
Inhalten per CSS neu für Sie ist, können Sie im Netz jede
Menge Referenzen und komplett gestylte Beispiele finden.
001 h2 {
002 background: black;
003 color: white;
004 padding: 10px;
005 font: 28px Georgia, Serif;
006 margin: 0 0 20px 0;
007 }
Das große WordPress-Handbuch 181

HTML5/CSS3
• FancyBox arbeitet gut mit anderen jQuery-Skripten
zusammen, ist gut dokumentiert, und alle
Standardfunktionen laufen Out-of-the-Box.
Eine kleine Hilfe
lässt den Benutzer zum
Anfang der Seite
springen und in den
Genuss Ihrer
persistenten Header
kommen.
14 Portfolio-Kategorie
Es ist wichtig, genau zu verstehen, wie die
Einstellung des Außenabstands das Aussehen der persistenten
Überschriften beeinflusst. Wenn ein Abschnitt,
der als Portfolio-Kategorie markiert ist, den oberen
Rand des Fensters erreicht, wird seine persistente
Überschrift sichtbar. Daher müssen Sie, wenn die Höhe
Ihrer Überschrift von der in diesem Tutorial abweicht,
den Obenabstand anpassen.
001 .portfolio-category {
002 margin: 50px 0 0 0;
003 }
15
Keine
billigen Tricks
Chris Coyier ist der Kopf hinter
css-tricks.com, und diese Anleitung
basiert auf seinem Persistent-Headers-
Artikel. Sich mehr von seinen Arbeiten
im Netz anzusehen, ist gut investierte
Zeit. Auf der Seite gibt es jede Menge
Tutorials, Videos, Tipps und Code –
eine großartige Fundgrube für jeden
Webdesigner.
Floating Header
Dies ist die standardmäßig versteckte Klasse,
die den Kopien der Überschriften hinzugefügt wird,
damit man sie gezielt sichtbar machen kann.
001 .floatingHeader {
002 position: fixed;
003 top: 0;
004 visibility: hidden;
005 }
16 Alternativen
In diesem Tutorial benutzen wir Chris Coyiers
elegante, schlanke Lösung für persistente Überschriften. Es
gibt aber noch viele andere Möglichkeiten, die Sie interessieren
könnten. Zum Beispiel Craig McQueens htmlFloating-
TableHeader, der ordentlich mit dem Ende der Kategorie
wegscrollt, zu der er gehört (zu finden auf bitbucket.org/
cmcqueen1975/htmlfloatingtableheader).
17
Scrollst du öfter hierher?
All das Auf- und Abscrollen kann schnell ermüdend
werden. Warum nicht eine kleine Hilfe einbauen,
die den Benutzer zum Anfang der Seite springen und
immer wieder in den Genuss Ihrer persistenten Überschriften
kommen lässt? jQuery bietet eine Lösung
dafür – Sie müssen nur einen neuen irgendwo
innerhalb Ihres page-wrap-s platzieren.
001
18
Stylen der
Rücksprungmarke
Durch Setzen des linken Außenabstands auf 515 px
erscheint der Button auf der rechten Seite des Inhalts.
Die Deckkraft des Buttons steht im inaktiven Zustand
auf 50 %. Browserspezifische Präfixe, die für die Kompatibilität
notwendig sind, können Sie den Dateien zum
Tutorial unter www.webdesignermag.co.uk/tutorial-files/
entnehmen.
001 #scrolltotop {
002 cursor : pointer;
003 display : none;
004 margin : 0px 0px 0px 515px;
005 position : fixed;
006 bottom : 10px;
007 padding : 10px;
008 width : 20px;
009 text-align : center;
010 background-color : #000;
011 opacity : 0.5;
012 color : #CCC;
013 font-size : 18px;
014 z-index : 9999;
015 }
19
Beim Überfahren des
Buttons
Um ein visuelles Feedback zu bieten, wird die Deckkraft
des Buttons beim Überfahren mit der Maus auf 80%
erhöht.
001 $(function() {
002 $(window).scroll(function() {
003 if($(this).scrollTop() != 0) {
004 $("#backtotop").fadeIn();
005 } else {
006 $("#backtotop").fadeOut();
007 }
008 });
009 });
182 Das große WordPress-Handbuch

WordPress
HTML5/CSS3
20
Hochscrollen mit jQuery
Dieses Skript liest die Position der vertikalen
Scrollleiste aus. Ist die Seite um mehr als 400 Pixel heruntergescrollt,
wird der Button mittels Standard-jQuery-
Funktionen eingeblendet – sind es 400 oder weniger,
verschwindet er wieder. Sie können den Pixelwert entsprechend
Ihren eigenen Inhalten und Vorlieben ändern und
die Dauer von fadeIn und fadeOut einstellen, indem Sie
einen Wert in Millisekunden in die Klammern schreiben.
001 $(function() {
002 $(window).scroll(function() {
003 if($(this).scrollTop() != 0) {
004 $(‘#backtotop’).fadeIn();
005 } else {
006 $(‘#backtotop’).fadeOut();
007 }
008 });
21
Klick und los!
.click() dient zum Abfangen eines Mausklicks
innerhalb des backtotop-s. Wenn das Ereignis eintritt,
wird in einer Animation ganz nach oben gescrollt.
Denken Sie daran, dass Sie die Dauer von 1000 ms
Ihren Anforderungen entsprechend ändern können.
001 $("#backtotop").click(function() {
002 $("html").animate({ scrollTop: 0 }, 1000);
003 });
Haben Sie Ihr jQuery schon aufgeräumt?
Ohne jetzt wie Ihre Mutter klingen zu wollen: Ihr jQuery wird sich nicht selbst aufräumen. Es hat einige
Vorteile, seinen Code sauber zu halten, und es ist durchaus sinnvoll, gleich während des Schreibens ein
bisschen aufzuräumen – und noch einmal, wenn Sie fertig sind. Es gibt einige Werkzeuge im Internet (unter
anderem jspretty.com, jsbeautifier.org), die Ihnen dabei helfen können. Manche können auch komprimierten
Code wieder lesbar machen. Aber wussten Sie, dass Sie das auch direkt in Chrome tun können? In den letzten
Jahren sind Browser zu einer hervorragenden Quelle für kostenlose Entwicklerwerkzeuge geworden – und sie
befinden sich direkt vor Ihrer Nase, wo Sie versuchen herauszufinden, warum Ihre Seite nicht richtig angezeigt
wird! Wenn Sie das volle Potential Ihres Browsers noch nicht ausgeschöpft haben, nehmen Sie sich doch etwas
Zeit, um herauszufinden, welche nützlichen Werkzeuge er bietet.
Der Teufel
steckt im Detail
Wenn Sie Ihre Fertigkeiten als
Webworker in einem Portfolio
präsentieren, können kleinste Details
darüber entscheiden, ob Sie den
nächsten Job bekommen oder nicht.
Zeigen Sie, dass Sie sich besondere
Mühe geben!
Es hat Vorteile, den Code
sauber zu halten, und es ist
durchaus sinnvoll, gleich während
des Schreibens ein bisschen
aufzuräumen – und noch
einmal, wenn Sie fertig sind.
• Buttons oder Thumbnails können ganz leicht hinzugefügt werden.
Letztere eignen sich hervorragend für ein Design-Portfolio.
Das große WordPress-Handbuch 183

HTML5/CSS3
Interaktive
Bildbeschriftungen
mit CSS3
INZWISCHEN IST CSS ZU EINEM VOLL FUNKTIONSFÄHIGEN
INTERAKTIVEN WERKZEUGKASTEN GEWORDEN. SIE KÖNNEN
DAMIT VIELE EFFEKTE ERZIELEN, DIE FRÜHER NUR MITHILFE
VON JAVASCRIPT REALISIERBAR WAREN.
lernziel
eine ungeordnete liste
mittels CSS3 animieren
dauer
60 Minuten
anSpruCh
ES IST NOCH nicht lange her, da hatte man
als Webdesigner, wenn man interaktive
Elemente in seine Webseiten einbauen
wollte, kaum mehr Werkzeuge zur Auswahl
als Skripte oder Plug-ins wie Flash.
Mit CSS3 hat sich dies geändert, denn nun hat man
bei der Seitengestaltung etliche Optionen, ohne zu
irgendwelchen Skripten greifen zu müssen. Eines von
vielen Beispielen ist die Bildbeschriftung: Bildbeschriftungen
können nützliche Informationen zum Motiv
liefern, sind jedoch nicht in jedem Fall notwendig. Möglicherweise
haben Sie eine Fotogalerie, in der Sie etwas
Text zu jedem Bild zur Verfügung stellen möchten, falls
ein Besucher der Seite ihn lesen will – aber ohne die
Wirkung des Fotos permanent einzuschränken. Dann
hätten Sie die Option, Bildunterschriften zu kreieren,
die nur eingeblendet werden, wenn man mit der Maus
drüberfährt. Mit CSS3 ist dies möglich, und wir können
sogar noch ein paar nette grafische Effekte einbauen.
01 HTML-Dokument
Wir verwenden ein schlichtes HTML5-
Dokument mit einer einfachen ungeordneten Liste als
Methode zur Anzeige unserer Fotogalerie. Wir werden
immer nur ein Foto auf einmal anzeigen lassen und per
Animation einen Übergang von einem Bild zum nächsten
schaffen. Den vollständigen Code finden Sie unter
www.webdesignermag.co.uk/tutorial-files/.
02 CSS-Datei
Wir fassen das HTML-Dokument nach diesem
Schritt nicht mehr an, sondern führen sämtliche Änderungen
nur in den Stylesheets durch. Erstellen Sie zu
diesem Zweck ein neues leeres Textdokument
screen.css und speichern Sie es im Styles-Ordner.
Verlinken Sie die CSS-Datei von dem HTML-Dokument
aus mit folgenden Code:
001
03 Grundeigenschaften
Zunächst lassen wir unserem Artikel ein
wenig Styling angedeihen, um ihm den Look einer Fotogalerie
zu geben. Fügen Sie der screen.css die nachfolgenden
CSS-Regeln hinzu und schauen Sie
sich das Ganze im Browser an.
001 body {
002 margin: 0;
003 padding: 0;
004 background: #333;
005 font-family: helvetica, arial, sansserif;
006 color: #fff;
007 font-size: 62.5%;
008 }
001 #container {
002 position: relative;
003 width: 800px;
004 margin: auto;
005 overflow: hidden;
006 }
001 #container h1 {
002 font-weight: normal;
003 font-size: 4em;
004 text-align: center;
005 text-transform: uppercase;
006 text-shadow: 2px 2px 0px #000;
007 }
001 #container ul#photogallery {
002 margin: 0;
003 padding: 0;
004 height: 530px;
005 width: 30000px;
006 overflow: hidden;
007 }
001 #container ul#photogallery li {
002 margin: 0;
003 padding: 0;
004 list-style: none;
005 position: relative;
006 width: 760px;
007 }
04
Rahmen und Schatten
Um das Galeriedesign noch etwas abzurunden,
fügen wir einen Rahmen um die Bilder herum
sowie einen Schlagschatten hinzu. Dies ist aber nur eine
Idee, Sie können es auch anders machen.
001 body {
002 margin: 0;
003 padding: 0;
004 background: #333;
005 font-family: helvetica, arial, sans-serif;
006 color: #fff;
007 font-size: 62.5%;
008 }
001 #container {
002 position: relative;
003 width: 800px;
004 margin: auto;
005 overflow: hidden;
006 }
001 #container h1 {
002 font-weight: normal;
003 font-size: 4em;
004 text-align: center;
005 text-transform: uppercase;
006 text-shadow: 2px 2px 0px #000;
007 }
001 #container ul#photogallery
002 {
003 margin: 0;
004 padding: 0;
184 Das große WordPress-Handbuch

WordPress
HTML5/CSS3
006 width: 30000px;
007 overflow: hidden;
008 }
• Die grundlegende HTML-Datei besteht hauptsächlich aus einer -Liste mit Elementen,
die jeweils ein Bild und eine Bildbeschriftung umfassen.
• Wir haben ein rudimentäres Styling mit einem Rahmen und einem Schlagschatten eingebracht,
die Bilder sind horizontal angeordnet.
• Nach 10 Sekunden wird das aktuelle Bild durch das nächste ersetzt.
• Standardmäßig wird die Beschriftung in der oberen linken Ecke des Bildes positioniert,
aber sie wird verborgen, bis der Mauszeiger drüberfährt.
005 height: 530px;
006 width: 30000px;
007 overflow: hidden;
008 }
001 #container ul#photogallery li {
002 margin: 0;
003 padding: 0;
004 list-style: none;
005 position: relative;
006 width: 760px;
007 border: 10px solid #fff;
008 box-shadow: 0px 0px 10px #000;
009 }
05 Bildwechsel
Wir verwenden einen overflow:hidden-
Container, um alle Bilder bis auf das erste des Stapels
zu verbergen. Mithilfe eines kleinen Skripts animieren
wir den Stapel, sodass die Fotos in einem bestimmten
Rhythmus wechseln. Die Bilder sollen von rechts
nach links gleiten, daher müssen wir sie horizontal
anordnen.
001 body {
002 margin: 0;
003 padding: 0;
004 background: #333;
005 font-family: helvetica, arial, sansserif;
006 color: #fff;
007 font-size: 62.5%;
008 }
001 #container {
002 position: relative;
003 width: 800px;
004 margin: auto;
005 overflow: hidden;
006 }
001 #container h1 {
002 font-weight: normal;
003 font-size: 4em;
004 text-align: center;
005 text-transform: uppercase;
006 text-shadow: 2px 2px 0px #000;
007 }
001 #container ul#photogallery
002 {
003 margin: 0;
004 padding: 0;
005 height: 530px;
001 #container ul#photogallery li {
002 float: left;
003 margin: 0;
004 padding: 0;
005 list-style: none;
006 position: relative;
007 width: 760px;
008 margin-right: 40px;
009 border: 10px solid #fff;
010 box-shadow: 0px 0px 10px #000;
011 margin-bottom: 20px;
012 }
06
jQuery hinzufügen
Obwohl wir kein Skript benutzen, um die Bildbeschriftungen
zu animieren, müssen wir dennoch auf
eines zurückgreifen, um den Bildwechsel zu erzeugen.
Wir bedienen uns hierfür aus der jQuery-Bibliothek
(jquery.com). Fügen Sie die entsprechende Bibliothek
Ihrer Seite hinzu.
001
002
07 Slide-Skript
Anschließend fügen Sie Ihrer Seite ein weiteres
Skript hinzu und verwenden den untenstehenden
Code, um den Slide-Effekt zu erzielen. Das Ganze funktioniert
so, dass nach einer Pause von 10 Sekunden das
komplette -Element so weit nach links verschoben
wird, dass das nächste Bild angezeigt werden kann. Das
erste Bild wird gleichzeitig wieder ans Ende geschoben
und die Margins zurückgesetzt.
001 $(document).ready(function(){
002 slidewidth = $(“ul#photogallery
li:first”).width();
003 s = setInterval(function(){
004 $(“ul#photogallery”).stop().
animate({marginLeft:0-slidewidth-
40},1000,function(){
005 $(“ul#photogallery li:last”).
after($(“ul#photogallery li:first”));
006 $(this).css({marginLeft:0});
007 })
008
009 },10000);
010 });
08
Im Browser testen
Wir können jetzt unsere Seite im Browser
testen. Sie sollten ein einzelnes Foto samt Beschriftung
sehen, das nach 10 Sekunden nach links weggleitet und
vom nächsten Bild ersetzt wird.
Das große WordPress-Handbuch 185

HTML5/CSS3
• Unser erster transition-Effekt ist ein simples
Einfaden – schlicht, aber wirkungsvoll.
• Beim nächsten Effekt gleitet der Text ins Bild,
und wir haben wirklich nur mit dem Stylesheet
gearbeitet.
Ältere
Browser
CSS3, insbesondere die
hier beschriebenen
3D-Effekte, werden von
älteren Browsern nicht alle
unterstützt. Setzen Sie
CSS3 also möglichst nicht
für essenzielle Funktionen
Ihrer Website ein.
001 #container ul#photogallery li span.fade-in
{
002 display: block;
003 opacity: 0;
004 }
001 #container ul#photogallery li span.
caption
002 {
003 position: absolute;
004 top: 0;
005 left: 0;
006 height: auto;
007 display: block;
008 width: 740px;
009 padding: 10px;
010 background: rgba(0,0,0,0.7);
011 }
09
• Komplexere transition-Effekte sind ebenfalls
möglich. Hier sehen Sie den Skalierungseffekt,
den wir mithilfe der Eigenschaft transform:
scale() erzeugt haben.
Beschriftung verbergen
Nun müssen die Beschriftungen verborgen
werden, bis die Maus drüberfährt. Wir nehmen Standard-
Styles für die Bildbeschriftungen und wenden dann eine
zweite Klasse an, die den Animationstyp für den Text
bestimmt. Fügen Sie den nachfolgenden Code ein, um die
grundlegenden Regeln für die Beschriftung festzulegen:
001 #container ul#photogallery li span.
caption {
002 position: absolute;
003 top: 0;
004 left: 0;
005 height: auto;
• Die unterschiedlichen Effekte können den
einzelnen Bildern individuell zugewiesen
werden, wobei nichts weiter nötig ist als ein
Klassenname.
006 display: block;
007 width: 740px;
008 padding: 10px;
009 background: rgba(0,0,0,0.7);
010 }
10
Eigenschaft transition
Damit die Beschriftung nicht einfach so
auftaucht, sondern geschmeidig eingeblendet wird,
müssen wir die CSS-Eigenschaft transition verwenden.
Damit der Effekt möglichst bei allen Browsern funktioniert,
fügen wir noch Herstellerpräfixe hinzu.
001 -webkit-transition: all 300ms easeout;
002 -moz-transition: all 300ms ease-out;
003 -o-t ransition: all 300ms ease-out;
004 -ms-transition: all 300ms ease-out;
005 transition: all 300ms ease-out;
11
Effekt: Einfaden
Die simpelste Einblendungsvariante ist ein
Einfaden. Um dies zu erzeugen, müssen wir dem Stylesheet
zwei neue Regeln hinzufügen. Die erste legt
Anfangsgröße, Position und Deckkraft der Beschriftung
fest, die zweite den Endzustand – diese verwendet die
:hover-Pseudoklasse.
001 #container ul#photogallery li:hover span.
fade- in {
002 opacity: 1;
003 }
12
Nächster Browsertest
Jetzt können Sie im Browser nachsehen, ob
mit dem ersten transition-Stil alles geklappt hat. Die
Bildbeschriftung sollte einfaden, wenn Sie mit der Maus
drüberfahren. Es funktioniert natürlich nur bei dem Foto
mit der fade-in-Klasse.
13
Effekt: Hineingleiten
Die zweite Einblendungsvariante, die wir ausprobieren
wollen, ist ein Hineingleiten der Beschriftung.
Es handelt sich dabei um einen sehr vielseitig einsetzbaren
Effekt. In unserem Design lassen wir den Text einfach
vom oberen Bildrand in das Foto hineingleiten. Sie
können aber auch andere Startpositionen ausprobieren.
Fügen Sie Folgendes ein:
001 #container ul#photogallery li:hover span.
slide- up {
002 -moz-transform: translateY(0px);
003 -o-transform: translateY(0px);
004 -webkit-transform: translateY(0px);
005 transform: translateY(0px);
006 }
14
Startposition festlegen
Wie beim Einfaden benötigen wir wieder eine
Startposition, von der aus die Animation beginnen soll.
Mit dem untenstehenden Code legen Sie diese Position
fest. Testen Sie danach die Seite im Browser und passen
Sie die Start- und Endpositionen an.
001 #container ul#photogallery li span.slide-up
{
186 Das große WordPress-Handbuch

WordPress
HTML5/CSS3
002 display: block;
003 -moz-transform: translateY(-200px);
004 -o-transform: translateY(-200px);
005 -webkit-transform: translateY(-200px);
006 transform: translateY(-200px);
007 }
15
Effekt: Einfachvariante
Wir haben nun also zwei nette transition-
Effekte, die gut funktionieren, aber wir können noch
einiges mehr tun! Lassen Sie uns eine noch einfachere
Einblendungsvariante kreieren. Fügen Sie dazu den
nachfolgenden Code ein. Er bestimmt die Endposition
und die Eigenschaften unseres einfachen Effekts.
001 #container ul#photogallery li:hover span.
simple
002 {
003 width: 740px;
004 height: auto;
005 overflow: auto;
006 }
16 Starteigenschaften
Inzwischen haben Sie vielleicht schon verinnerlicht,
dass wir Starteigenschaften festlegen müssen,
die den Endeigenschaften entgegenstehen. Fügen
Sie den Code unten ein und testen Sie die Seite erneut
im Browser.
001 #container ul#photogallery li span.simple
002 {
003 display: block;
004 width: 100px;
005 height: 20px;
006 overflow: hidden;
007 }
17
Text in voller Bildgröße
Diesen simplen zweistufigen Ablauf müssen
wir für jeden neuen transition-Effekt wiederholen. Erzeugen
wir nun eine Bildbeschriftung in Vollgröße, also
über das gesamte Foto. Wir schlagen vor, die Einblendung
mittels des oben erstellten schlichten Slide-Effekts
vorzunehmen. Geben Sie diesen Code ein:
001 #container ul#photogallery li span.full {
002 display: block;
003 width: 740px;
004 height: 480px;
005 opacity: 0;
006 -moz-transform: translateY(-500px);
007 -o-transform: translateY(-500px);
008
009 -webkit-transform: translateY(-500px);
010 transform: translateY(-500px);
011 }
001 #container ul#photogallery li:hover span.
full {
002 -moz-transform: translateY(0px);
003 -o-transform: translateY(0px);
004 -webkit-transform: translateY(0px);
005 transform: translateY(0px);
006 opacity: 1;
007 }
18
Effekt: Zoom
Außer Einblendungseffekten können wir
mithilfe der CSS3-Eigenschaft transform auch Größe
und Neigung von Elementen auf der Seite steuern. Wir
können damit zum Beispiel einen Zoom-Übergang für
unsere Bildbeschriftungen kreieren. Legen wir zunächst
den Startzustand des Textes fest:
001 #container ul#photogallery li span.scale {
002 display: block;
003 width: 760px;
004 height: 500px;
005 opacity: 0;
006 -moz-transform: scale(0.1);
007 -o-transform: scale(0.1);
008 -webkit-transform: scale(0.1);
009 transform: scale(0.1);
010 }
19
Noch ein Browsertest
Als Nächstes bestimmen wir den Endzustand.
Wir haben die Eigenschaft transform: scale()
zuerst benutzt, um den Anfangszustand auf einen
geringen Wert einzustellen, und generieren jetzt
die Version in Vollgröße damit – Ergebnis ist der
Zoom-Effekt. Testen Sie auch diesen Effekt in Ihrem
Browser. Falls es nicht funktioniert, bedenken Sie,
dass die CSS-Eigenschaft transform nicht so gut von
verschiedenen Browsern unterstützt wird wie andere
Eigenschaften.
001 #container ul#photogallery li:hover span.
scale {
002 -moz-transform: scale(1);
003 -o-transform: scale(1);
004 -webkit-transform: scale(1);
005 transform: scale(1);
006 opacity: 1;
007 }
20
Effekt: 3D-Rotation
Sofern Ihre Besucher einen modernen Browser
wie Safari oder Chrome benutzen, können Sie mit
der transform-Eigenschaft die Bildtexte auch räumlich
rotieren lassen! Dieser Effekt basiert auf denselben
Grundlagen wie die, die wir uns bereits angesehen
haben. Wir setzen die Bildbeschriftungen so an, dass sie
sich hinter dem zugehörigen Foto befinden. Wenn dann
das Bild (um seine Y-Achse) rotiert, wird der Text auf der
Rückseite sichtbar. Es dreht sich also das gesamte Element,
und während die Fotovorderseite verschwindet,
erscheint die Textrückseite. Den Code für den Rotationseffekt
finden Sie unter der in Schritt 01 angegebenen
Adresse.
3D-Transformationen
mit CSS
Im Laufe der Zeit wurden in die CSS3-Spezifikation
ein paar elegante 3D-Optionen für die Transformation
integriert. Einen Großteil davon hat Apple
für seine iOS-Plattform übernommen, was eine
breite Nutzerbasis und viele kompatible Geräte und
Browser nach sich gezogen hat.
Das Grundprinzip ist, dass Elemente in einer
Pseudo-3D-Umgebung existieren und mithilfe der
CSS-Eigenschaft transition gedreht oder im dreidimensionalen
Raum platziert werden können. Nicht
alle Browser unterstützen jedoch bereits die Eigenschaft,
darum sollten Sie es vermeiden, 3D-Effekte
bei essenziellen Kommunikationsfunktionen Ihrer
Website mit den Benutzern einzusetzen.
Unten haben wir Ihnen eine kleine Sammlung
von Links zusammengestellt. Sie finden dort einige
exzellente Technikdemos.
Einführung und Beispiele
von David DeSandro:
24ways.org/2010/intro-to-css-3d-transforms
Ego-Shooter
von Keith Clark:
www.keithclark.co.uk/labs/3dcss/demo
Safari-Demos
von Apple:
developer.apple.com/safaridemos/vr.php
developer.apple.com/safaridemos/
showcase/transitions
Das große WordPress-Handbuch 187

HTML5/CSS3
Animieren
Sie Ihre
Inhalte
DANK MODERNER BROWSER UND CSS3 SIND SIE NICHT LÄNGER
AUF JAVASCRIPT ANGEWIESEN, WENN SIE FLÜSSIG ANIMIERTEN,
INTERAKTIVEN CONTENT BIETEN MÖCHTEN.
Heute kann die gleiche
Interaktion auch mit ein
bisschen CSS-Magie erreicht
werden.
lernziel
eine Webseite mit
animierten Panels bauen
dauer
60 Minuten
anSPruCH
Quelldateien
www.webdesignermag.
co.uk/tutorial-files/
(HTMl- und CSS-dateien)
INZWISCHEN KÖNNEN immer mehr
Effekte direkt vom Browser gerendert
werden, ohne dass eine Flash-Animation
oder JavaScript notwendig wäre.
Nehmen Sie beispielsweise eine einzelne Webseite,
bei der der Inhalt aus vielen Einzelelementen besteht.
Um zwischen diesen Elementen eine Animation zu
erzeugen, war früher ein JavaScript-Framework wie
jQuery notwendig. Heute hingegen kann die gleiche
Interaktion auch mit ein bisschen CSS-Magie erreicht
werden.
In diesem Tutorial werden wir eine Webseite
bauen, die es dem Besucher erlaubt, durch sechs
verschiedene Panels zu navigieren, wobei wir uns der
neuen CSS-Eigenschaft transition sowie der transform-Funktionalität
bedienen. Die Panels werden
um eine Bühne herum angeordnet, und die Position
der Bühne wird animiert, damit beim Aufruf durch
den Benutzer das richtige Panel angezeigt wird. Der
Effekt sollte von WebKit-Browsern sowie Firefox und
dem Internet Explorer 10 korrekt gerendert werden.
Der IE 9 stellt keine transition-Effekte dar, aber die
Webseite an sich wird dennoch funktionieren.
01 HTML-Dokument
Wir beginnen mit einer einfachen HTML-Seite,
die sechs -Tags enthält, die in ein weiteres
eingebettet sind. Statt jedes Panel einzeln zu animieren,
ordnen wir die Panels innerhalb des umgebenden
an und animieren dieses. Erstellen Sie ein leeres
Stylesheet und verlinken Sie es mit dem Header des
HTML-Dokuments.
02 Basis-CSS
Wir müssen die grundlegenden CSS-Stile
erstellen, um die Charakteristika der Seite zu erschaffen.
Zunächst definieren wir das „Fenster“, durch das man
später den Inhalt innerhalb des umgebenden
betrachten kann. Legen Sie die Größe der Panels fest
und zentrieren Sie die Inhalte auf der Webseite.
001 body {
002
003 }
004
005 #container {
006
007 }
008
009 #viewer {
010 position: relative;
011 width: 700px;
012 height: 350px;
013 overflow: hidden;
014 margin: auto;
015 border: 10px solid black;
016 }
017
018 #holdall {
019 width: 0px;
020 height: 0px;
021 position: absolute;
022 background: white;
023 }
024
025 .panel {
026 position: absolute;
027 width: 680px;
028 height: 330px;
029 padding: 10px;
• So sieht unser jungfräuliches Fischgrätenmuster
aus. Jedes Panel hat eine andere
Hintergrundfarbe bekommen.
030 overflow: hidden;
031 }
03
Panels positionieren
Als Nächstes können wir das Panel-Layout
kreieren. Um die Sache zu vereinfachen, ordnen wir
jedem Panel eine bestimmte Hintergrundfarbe zu.
Experimentieren Sie mit der Position der Panels, bedenken
Sie jedoch, dass willkürliche Drehungen es später
schwierig machen werden, das umgebende auszurichten.
Wir haben uns für ein simples Fischgrätenmuster
entschieden.
04
Zielfenster hinzufügen
Um ein bestimmtes Panel animieren zu
können, müssen wir es identifizieren können, wenn
es angesprochen wird. Das Problem ist, dass wir die
Positionierung anhand des äußeren vornehmen,
welches die Panels in sich hält. Darum fügen wir weitere
-Tags hinzu, um uns auf die Panels beziehen zu
können. Ändern Sie Ihren HTML-Code wie folgt:
001
002
003
004
005 CSS3 Target Selectors
006
007
008
009
188 Das große WordPress-Handbuch

WordPress
HTML5/CSS3
• Alle Panels sind in ein umgebendes integriert.
• Hier sehen Sie unsere fertig gerenderte Beispiel-Webseite. Das Styling
der einzelnen Elemente ist aufeinander abgestimmt.
010
011
012
013
014
015
016
017
018 ;
019
020 Panel1
021 Panel2
022 Panel3
023 Panel4
024 Panel5
025 Panel6
026
027
028
029
030
031
032
033
034 }
035
036
037
038
05
Zielfenster testen
Wir verwenden die Syntax #loadpanelX:target
#holdall {}, um die Positionierung festzulegen, sodass
jedes Panel im Anzeigebereich sichtbar gemacht werden
kann. Fügen Sie den folgenden CSS-Code ein, um
das zweite Panel anzusprechen, rufen Sie die Seite im
Browser auf und fügen Sie der URL im Adressfenster
ein #loadpanel2 hinzu.
001 #loadpanel2:target #holdall {
002 -webkit-transform: translateY(-350px);
003 -moz-transform: translateY(-350px);
004 -ms-transform: translateY(-350px);
005 }
06
Weitere Positionierung
Nach demselben Prinzip positionieren wir nun
das umgebende für die restlichen Panels, wobei
wir stets die :target-Syntax verwenden. Wenn also die
Webseite das mit #loadpanel4 aufruft, wird das
äußere so angeordnet, dass Panel 4 zu sehen ist,
und so weiter.
001 #loadpanel1:target #holdall {
002 -webkit-transform: translateY(0px);
003 -moz-transform: translateY(0px);
004 -ms-transform: translateY(0px);
005 }
Ältere Browser
Alle aktuellen Browser rendern
den hier verwendeten Code
ohne Probleme, und der
Internet Explorer 9 zeigt
immerhin noch alles bis auf die
transition-Effekte an. Für ältere
Browser könnten Sie den
Einsatz zusätzlicher
Stylesheets erwägen.
006 #loadpanel2:target #holdall {
007 -webkit-transform: translateY(-
350px);
008 -moz-transform: translateY(-350px);
009 -ms-transform: translateY(-350px);
010 }
011 #loadpanel3:target #holdall {
012 -webkit-transform: translateY(1050px)
translateX(0px) rotate(-90deg);
013 -moz-transform: translateY(1050px)
translateX(0px) rotate(- 90deg);
014 -ms-transform: translateY(1050px)
translateX(0px) rotate(-90deg);
015 }
016 #loadpanel4:target #holdall {
017 -webkit-transform: translateY(-
700px);
018 -moz-transform: translateY(-700px);
019 -ms-transform: translateY(-700px);
020 }
021 #loadpanel5:target #holdall {
022 -webkit-transform: translateY(1050px)
translateX(-700px) rotate(-90deg);
023 -moz-transform: translateY(1050px)
translateX(-700px) rotate(-90deg);
Das große WordPress-Handbuch 189

HTML5/CSS3
• Die grafischen Elemente werden separiert, um das
Seitenlayout flexibel zu machen und ein schnelles
Rendering im Browser zu gewährleisten.
024 -ms-transform: translateY(1050px)
translateX(-700px) rotate(-90deg);
025 }
026 #loadpanel6:target #holdall {
027 -webkit-transform: translateY(-
1050px);
028 -moz-transform: translateY(-1050px);
029 -ms-transform: translateY(-1050px);
030 }
07 Achtung
Sie werden bemerkt haben, dass wir beim
#holdall- Breite und Höhe auf null gesetzt haben.
Das ist kein Problem, da HTML-Elemente sich ausdehnen,
um die Inhalte sichtbar zu machen, sogar wenn
das Parent-Element nicht groß genug ist. Würden wir
an dieser Stelle die Abmessungen des #holdall-
ändern, dann würden unsere transform-Eigenschaften
nicht mehr funktionieren, da der Punkt der Transformation
ein anderer wäre – belassen Sie also Breite und
Höhe bei null.
08
Test-Links einsetzen
Um zu testen, ob unsere Positionierungen
richtig funktionieren, können wir ein paar Links ans
Ende der Webseite setzen. Jeder Link verweist auf
ein #loadpanelX- und somit auf das korrekte
Zielfenster.
001
002
003 1
004 1
005 1
006 1
007 1
008 1
009
010
09 Animation
Wenn Sie jetzt die Links anklicken, sollte sich
das äußere so verhalten, dass jeweils das verlinkte
Panel im „Fenster“ sichtbar wird. Um den Effekt jedoch
wirklich sehen zu können, müssen wir noch eine transition
zu der #holdall- hinzufügen, damit das Panel
nicht einfach in den Sichtbereich springt, sondern weich
hineingleitet. Geben Sie den folgendes CSS-Code ein:
001 #holdall {
002 width: 0px;
003 height: 0px;
004 position: absolute;
005 background: white;
006 -webkit-transition: all 3s ease-out;
007 -moz-transition: all 3s ease-out;
008 -ms-transition: all 3s ease-out;
009 }
10
Webseite testen
Bevor wir weitermachen, sollten Sie die Webseite
in jedem Browser testen, der Ihnen zur Verfügung
steht. Funktionieren die Positionierungen und transition-
Effekte? Beim Internet Explorer 10 sollte alles klappen,
Version 9 ignoriert den transition-Effekt. Sie könnten ein
zusätzliches Stylesheet für die älteren Browser erstellen.
11
Webseite designen
Nun da das Animationssystem erstellt ist,
können Sie damit beginnen, die Webseite zu gestalten.
Erstellen Sie am besten zuerst mit einem Grafikprogramm
das Konzept, das Sie sich vorstellen. Integrieren
Sie das zentrale Sichtfenster, eine Navigation für den
Wechsel zwischen den Panels und vielleicht ein paar
dekorative Elemente außen herum.
12
Elemente anordnen
Unser Beispieldesign basiert auf Leonardo
da Vinci. Wir haben verschiedene Hintergrundbilder
kreiert, die sich harmonisch überlagern. Stellen Sie
sicher, dass etwaige Transparenzen tatsächlich dargestellt
werden, indem Sie die Bilddateien als trans -
parente PNGs speichern.
001 body {
002 position: relative;
003 margin: 0;
004 padding: 0;
005 background: white url(pagebg.jpg) repeat
top left;
006 font-size: 62.5%;
007 font-family: "Futura Std", Helvetica,
Arial, sans-serif;
008 }
009
010 #container {
011 position: relative;
012 padding-top: 20px;
013 width: 100%;
014 height: 100%;
015 min-height: 900px;
016 background: transparent url(containerbg.
png) no-repeat center top;
017 }
13
HTML komplettieren
Vervollständigen Sie nun Ihre HTML-Datei
und integrieren Sie die Texte und Gestaltungselemente,
die Sie noch haben möchten, beispielsweise
eine Überschrift und zusätzliche Bilder innerhalb der
Panels.
14
Hintergrundfarben durch
Bilder ersetzen
Anschließend nehmen wir uns die einzelnen Panels vor
und ersetzen die Hintergrundfarben durch eine Illustration.
In unserem Beispieldesign sind wir beim Leonardo-
Thema geblieben.
15 Extra-Stil
Wir brauchen jedoch noch zusätzliche Styles,
damit der Inhalt der Panels ansprechend wiedergegeben
wird. Jedem Panel haben wir ein -Tag
190 Das große WordPress-Handbuch

WordPress
HTML5/CSS3
gegeben, in welchem die Inhalte untergebracht sind.
Der Hintergrund ist fast schwarz, der Text weiß – ein
guter Kontrast zu der papierartigen Struktur der Bilder.
001 .info {
002 position: absolute;
003 top: 80px;
004 left: 30px;
005 width: 200px;
006 padding: 10px;
007 background: #1c0000;
008 color: white;
009 box-shadow: 0px 0px 10px #333;
010 }
011
012 .info h2 {
013 text-transform:uppercase;
014 font-size: 1.4em;
So funktioniert
das :target-
Workaround
Die :target-Klasse wird jedem Element
zugeordnet, das eine ID besitzt und
mithilfe eines internen Ankers (à la
#panel2) aufgerufen wird. Um das
Parent-, das die einzelnen Panels
enthält, korrekt animieren zu können,
brauchen wir eine Rückmeldung
darüber, wann ein Benutzer einen
internen Link anklickt und welchen.
Zu diesem Zweck haben wir sechs
-Tags hinzugefügt, die jeweils
eine eindeutige ID enthalten und
einem bestimmten Panel zugeordnet
sind. Mit den internen Links verweisen
wir nun nicht auf die Panels selbst,
sondern auf das jeweils relevante der
sechs -Tags. Dies erlaubt es uns,
eine CSS-Regel festzulegen, die nach
dem Parent- innerhalb eines
angesprochenen Ausschau hält,
und somit den gesamten Container in
die richtige Position zu befördern.
015 font-weight:normal;
016 }
017
018 .info p {
019 font-size: 1.1em;
020 line-height:1.5em;
021 }
022
023 .info p a {
024 color: #f7eed7;
025 }
16
Navigation verschönern
Um die Navigation wie geplant zu realisieren,
benötigen wir noch ein weiteres Designelement.
Um perfekte Kreisformen zu erzeugen, setzen wir
Breite und Höhe auf einen identischen Wert und
wenden dann einen Border-Radius von der Hälfte
dieses Wertes an.
001 #nav {
002 position: relative;
003 padding: 10px;
004 width: 700px;
005 margin: auto;
006 text-align: center;
007 }
008
009 #nav ul li {
010 width: 30px;
011 height: 30px;
012 margin: 5px;
013 display: inline-block;
014 line-height:30px;
015 box-shadow: inset 2px 2px 5px #000;
016 background: rgba(0,0,0,0.7);
017 border-radius:15px;
018 border: 1px solid #000;
019 }
020
021 #nav ul li a {
022 font-size: 1.3em;
023 text-decoration:none;
024 font-weight: bold;
025 color: white;
026 display: block;
027 }
Weitere
Animationen
Einzelne Elemente der
Panels können individuell
animiert werden. Gezielt
angesprochen werden sie
mit der :target-Methode,
die wir bereits verwendet
haben.
17 Erneut
testen
Es ist wieder Zeit für
einen Test! Da wir das
Design schrittweise verbessert
haben, müssen
wir überprüfen, ob die
geänderte Gestaltung
korrekt realisiert wird.
Also wieder die Browser
anwerfen...
18
Gezielt zuordnen
Ein toller Aspekt von CSS3 ist, dass man allen
Elementen im HTML-Code gezielt bestimmte Stile
zuordnen kann. Das bedeutet, wir können unseren
Gestaltungselementen unterschiedliche Animationsarten
angedeihen lassen.
19
Bild animieren
In Panel 2 haben wir ein Bild der Mona Lisa
platziert, das ein wenig zu groß ist. Standardmäßig
befindet es sich hinter dem Text des Info-, aber es
wäre doch nett, wenn das Bild als Erstes in den Blick
käme, wenn man Panel 2 aufruft. Weisen Sie der Grafik
daher zunächst eine Klasse zu:
001
20
:target verwenden
Anschließend teilen wir dem Stylesheet mit,
dass die Animation nur dann starten soll, wenn Panel 2
gezielt angesprochen wird. Fügen Sie hierfür den untenstehenden
Code ein. Er sorgt für eine schnelle und
leichte Animation.
001 .slidefromright {
002 position: absolute;
003 top: 0;
004 right: 0;
005 margin-right:-700px;
006 -webkit-transition: all 4s ease-out;
007 -moz-transition: all 4s ease-out;
008 -ms-transition: all 4s ease-out;
009 }
010
011 #loadpanel2:target .slidefromright {
012 margin-right: 20px;
013 margin-top: -20px;
014 -webkit-transform: scale(0.8) rotate(-
10deg);
015 -moz-transform: scale(0.8) rotate(-
10deg);
016 -ms-transform: scale(0.8) rotate(-
10deg);
017 }
21
Testen und probieren
Testen Sie die Animation erneut, und
experimentieren Sie mit den Vorher- und Nachher-
Positionierungen herum, bis das Ergebnis Ihnen
zusagt.
22
Was als Nächstes?
Sie haben nun eine eigene, nur auf CSS
basierende Animation erschaffen! Doch das ist erst
der Anfang. Mit denselben Mitteln könnten Sie ein
Design mit Registerkarten oder einen Foto-Slider
animieren. Mit der :target-Klasse lässt sich vieles
machen!
Das große WordPress-Handbuch 191

HTML5/CSS3
Tooltip-
Plug-in
mit jQuery
schreiben
PROGRAMMIEREN SIE EIN TOOLTIP-WIDGET
MITHILFE VON JQUERY UND ETWAS CSS3
• Der obige Screenshot zeigt das
Projekt einmal mit CSS3 und mit
einer Grafik. Die Resultate sind
fast identisch.
WENN SIE IN jQuery erste Schritte hinter sich
LERNZIEL
Lernen Sie mehr und
schreiben Sie Ihre eigenen
Plug-ins mit jQuery
DAUER
120 Minuten
ANSPRUCH
QUELLDAtEIEN
www.webdesignermag.
co.uk/tutorial-files/
(index.html, CSS, Bilder,
JavaScript-Ordner)
haben und denken, es ist Zeit für etwas Neues
wie beispielsweise, selbst Plug-ins programmieren,
dann finden Sie in diesem Tutorial
die zugehörigen Infos. Manchmal ist es schwierig:
Viele Tutorials setzen Wissen voraus, das Sie womöglich
noch nicht haben. Wenn Sie ein Kapitel durchgearbeitet
haben, dann fühlen Sie sich verwirrter als zu Beginn.
Haben Sie keine Angst. Hier lernen Sie das Programmieren
eines Tooltip-Plug-ins und wie Sie später weitere
Plug-ins mit anderen coolen Funktionen von Grund auf
spielend leicht schreiben. Der Gedanke, ein eigenes Plugin
zu schreiben, kann sich nach schwerer Kost anhören,
dabei ist es in Wirklichkeit gar nicht schwer. Nachdem Sie
ein oder zwei Plug-ins programmiert haben, werden Sie
sie in Nullkommanichts produzieren.
Für eine steile Lernkurve empfehlen wir, im Anschluss
an das Tutorial alles zu löschen und mit so wenig Hilfe wie
möglich noch einmal von vorne anzufangen. Danach:
noch mal! Sie werden überrascht sein, an wie viel Sie sich
erinnern und wie wenig Hilfe Sie brauchen. Bleiben Sie
hartnäckig dabei, davon haben Sie am meisten. Seien Sie
angstfrei, standhaft und genießen Sie die Ergebnisse.
Hier lernen Sie das Programmieren eines Tooltip-Plug-ins
und wie Sie weitere Plug-ins mit anderen
coolen Funktionen von Grund auf schreiben.
01 Vorbereitung
Öffnen Sie einen Text-Editor und erstellen Sie
eine neue „index.html“ wie folgt. Fügen Sie einen Link zu
einem Stylesheet ein, das wir später schreiben und nutzen,
um das Plug-in zu gestalten. Verknüpfen Sie jQuery,
entweder per Link zum CDN (content delivery network)
oder via externer Datei. Linken Sie zur Plug-in-Datei, die
wir „jquery.tooltips.js“ nennen (im „js“-Ordner). Anschließend
fügen Sie die „document.ready“-Funktion ein.
001
002
003
004 Your first jQuery plugin
005
006
007
008
009
010 $(document).ready(function() {
011 });
012
013
02
Plug-in aufrufen
Manchmal ist es einfacher, das Plug-in aufzurufen,
bevor wir es schreiben. So bestimmen wir den
Namen und das Seitenelement, das das Plug-in aktiviert.
Zudem spezifieren wir einige Optionen, damit der Nutzer
Anpassungen machen kann, ohne den Code oder
das Plug-in-Skript umzuschreiben. Weiteres folgt in den
Schritten 05 und 06.
001
002 $(document).ready(function() {
003 $(‘.trigger’).tooltips({
004 // your options go here
005 });
006 });
007
03 Plug-in-Hülle
Zuerst erstellen wie eine „self-executing anonymous
function“. So verwenden wir das „$“-Symbol, ohne
Konflikte mit anderen verwendeten Bibliotheken zu
erzeugen. Manchmal nennen Programmierer dies auch
„closure“. Damit wird das Dollarzeichen zum „jQuery prototype
object“ und kann normal verwendet werden.
001 (function($){
002 })(jQuery);
04
Plug-in deklarieren
In unserer Hülle müssen wir nun das Plug-in
deklarieren. Wir tippen dazu „$.fn.tooltips“ ein. Das „$.fn“
ist kurz für Prototyp. Danach benennen wir unser neues
192 Das große WordPress-Handbuch

WordPress
HTML5/CSS3
• So sehen Optionen in unserem JavaScript-Code aus. Mit Text-Edi
toren wie Dreamweaver oder NetBeans lassen sich Fehler anzei
gen.
• Unter Firefox können Sie Firebug nutzen, um zu sehen, ob das
Plug-in HTML-Code generiert.
• Ein weiterer Blick in unseren JavaScript-Code. Hier sehen Sie, wie
viele Kommentare verwendet wurden
• Die „Hover“-Funktionen, wie sie in Ihrem Code aussehen würden.
Halten Sie sie dicht beisammen.
Plug-in und geben ihm Funktionscharakter. Wir vergeben
einen „options“-Parameter, den wir in den späteren Schritten
erklären.
001 $.fn.tooltips = function(options) { // pass
in the settings object
002 }
05 Standardoptionen
Wir und der Nutzer sollten Anpassungen vornehmen
können. Diese werden im „options“-Paramter festgehalten.
Da wir nicht davon ausgehen können, dass dies
immer Verwendung findet, müssen wir Standardwerte
vergeben. Wir erstellen ein Objekt namens „defaults“ und
im Anschluss Funktionen dafür, in Kommentaren sollten
wir jedoch den Sinn und Zweck festhalten.
001 var defaults = {
002 speed: 200, // speed of tooltip
animation rounded: false, // CSS3
rounded corners set to false by default
003 hoverDelay: 200, // For hover intent
purposes
004 mouseFollow: true // follow the
mouse pointer
005 }; // don’t forget the semicolon!
06 Zusammenlegen
Damit der Nutzer eigene Anpassungen
machen kann, müssen wir „options“ und „defaults“
zusammenlegen. Wir erstellen die neue Variable „settings“
und geben jQuery die entsprechende Anweisung.
Das Ergebnis legen wir in ein neues Objekt. Dieses
geben wir weiter an unseren Funktionsaufruf in Schritt
04. Die nutzereigenen „options“-Werte haben dabei Vorrang
vor den „default“-Angaben.
001 //call in the defaults as options
002 var settings = $.extend({}, defaults,
options);
07
Tooltip anzeigen
Nun erstellen wir eine Funktion, die HTML-
Code für unser Tooltip-Plug-in erstellt. Dieser Code wandert
in eine Variable und wird für spätere Zwecke wieder
ausgegeben. Da wir nicht wissen, wo der Tooltip angezeigt
wird, stellen
wir die Auszeichnung
vor das
„body“-Tag, so
kann der Tooltip
überall innerhalb des
Dokuments erscheinen.
Dokumentation
Kommentieren Sie
Ihren Code. Sie selbst
und andere Entwickler
werden es später
zu schätzen
wissen.
001 getTip = function() {
002 var tTip =
003 “” +
004 “” +
005 “” +
006 “”;
007 return tTip;
008 }
009 $(“body”).prepend(getTip());
08 Schleife
Da unsere Nutzerseite definitiv mehrere Elemente
enthalten wird, brauchen wir eine Schleife, die jedes Ele
ment nacheinander durchläuft. Wir nutzen dafür die
„each()“-Methode von jQuery. Diese durchläuft jedes
Das große WordPress-Handbuch 193

HTML5/CSS3
• Mit dem Shape-Tool
erstellen Sie Ihre
eigene Tooltip-Grafik.
• Ziehen Sie eine Form,
die wie eineTooltip-
Blase aussieht.
• Öffnen Sie die
„Blender“-Optionen
und fügen Sie einen
inneren Schatten ein.
• Fügen Sie einen
1-Pixel-Rahmen ein.
• Sie können auch
Filter verwenden
und Rauschen
hinzufügen.
Seitenelement, das mit dem aufgerufenen Plug-in verknüpft
ist: in diesem Fall jedes Element mit dem Klassennamen
„trigger“.
001 $(this).each(function() {
09 Content-Schleife
Innerhalb der Schleife können wir das
„jQuery“-Objekt in der neuen Variable „obj“ speichern. Das
macht die Sache transparenter und spart Code-Zeilen.
Die Tooltip-IDs aus Schritt 07 speichern wir anschließend
in eigenen Variablen und holen uns die Attribute dieses
Elements (jeglicher Text zwischen den „Title“-Tags), fügen
diese dem Objekt zu und ändern somit das Standard-Browserverhalten
des „Title“-Tags.
001 var obj = $(this);
002 var tip = $(‘#tooltip’);
003 var tipInner = $(‘#tooltip #tipMid’);
004 obj.attr(‘tooltiptext’,this.title);
005 // removes the default browser tool tip
006 this.title = ‘’;
10
Option für abgerundete
Ecken
Wir haben eine Option in unseren Standardwerten hinzugefügt,
die runde Ecken deaktiviert (rounded: false).
Das ist die „If“-Schleife, die prüft, ob die Option (defaults.
rounded) auf „true“ steht. Falls ja, fügt sie eine „rounded“-Klasse
zum Tooltip hinzu. In unserem Stylesheet
erstellen wir eine CSS3-Regel, die unserem Tooltip runde
Ecken verpasst.
001 if(defaults.rounded) {
002 $(‘#tooltip’).addClass(‘rounded’);
003 }
11 Hover-Funktion
Jetzt kommt die Funktion, die den Tooltip auf
jedem erdenklichen Element aufrufen kann. In diesem
Schritt verankern wir den „Hover“-Event an das jeweilige
Objekt und rufen den enthaltenen HTML-Code (im „Title“-Tag)
und zwei weitere Funktionen auf. Die „set-
Tip()“-Funktion platziert und die „setTimer()“-Funktion
verzögert den Effekt. Dann kommt eine Funktion, die
unseren Tooltip wieder versteckt und den Timer nullt,
sobald der „Hover“-Event abgeschlossen ist.
001 // Mouse over function
002 obj.hover(function(){
003 tipInner.html($(this).
attr(‘tooltiptext’));
004 setTip($(this));
005 setTimer()
006 },
007 function() { // callback function
008 stopTimer();
009 tip.hide();
010 }
011 );
12 „mouseFollow“-Option
Mit der „mouseFollow“-Funktion können wir
den Tooltip mit dem Mauszeiger verknüpfen. An dieser
Stelle prüfen wir, ob die „mouseFollow“-Option auf „true“
steht. Falls ja, legen wir die Position des Tooltips an die
Stelle des Mauszeiger, mithilfe von CSS-Positionierung
und den eingebauten X- und Y-Koordinaten. Um den
Tooltip langsam vom Mauszeiger wegzubewegen,
fügen wir -30 Pixel nach unten und +30 Pixel nach
rechts ein. Passen Sie diese entsprechend an.
001 // finds the mouse location for tooltip to
follow
002 if(defaults.mouseFollow){
003 obj.mousemove(function(e) {
004 $(‘#tooltip’).css({
005 top: e.pageY + -30,
006 left: e.pageX + 30
007 });
008 });
009 }
13 „Hover“-
Absicht
Wir wollen den Tooltip nur dann
jQuery- Objekt
Das jQuery-Objekt ist wie
jedes andere Objekt in
JavaScript. Es kann ebenso
an Funktionen gegeben
werden.
anzeigen lassen, wenn der Nutzer es so möchte,
und nicht. wenn er mit dem Mauszeiger nur aus Versehen
auf ein Element kommt. Wir erstellen eine
Timer-Funktion, die den Tooltip verzögert. Dies lässt sich
in unseren Standardoptionen einstellen.
001 // delay the fade-in animation of the
tooltip
002 setTimer = function(){
003 obj.showTipTimer = setInterval(showTip,
defaults.hoverDelay);
004 }
005 stopTimer = function() {
006 clearInterval(obj.showTipTimer);
007 }
14
„Set tip function“
Nun erstellen wir die Funktion, die die Höhe
und Breite des angezeigten Elements registriert, um
unseren Tooltip zu positionieren. Das wird das Standardverhalten
sein, das nur dann genutzt wird, wenn keine
anderen Optionen spezifiziert sind. Ihnen ist womöglich
aufgefallen, dass wir bislang das Keyword „var“ vor Variablennamen
nicht verwendet haben. Ein Komma
anstelle eines Semikolons nach dem Variablenwert lässt
uns weiterhin Variablen erstellen, ohne „var“ zu nutzen.
001 setTip = function(obj) {
002 // grabs the position of the hovered
element and its height and width
003 var offset = obj.offset(),
004 tLeft = offset.left,
194 Das große WordPress-Handbuch

WordPress
HTML5/CSS3
005 tTop = offset.top,
006 tWidth = obj.width(),
007 tHeight = obj.height(),
008 topOffset = tip.height(),
15
Tooltip positionieren
Hier machen wir mit der „setTip“-Funktion
weiter und erstellen zwei weitere Variablen, die unseren
Tooltip positionieren. Die „xTip“-Variable hält Informationen
zur linken und die „yTip“-Variable solche zur
oberen Position bereit. Nun können wir Werte zu den
„tLeft“- und „tTop“-Variablen addieren oder subtrahieren
und unseren Tooltip mithilfe der „css()“-Methode
platzieren.
001 // Position the tooltip
002 xTip = (tLeft-20)+”px”,
003 yTip = (tTop-topOffset-10)+”px”;
004 tip.css({‘top’ : yTip, ‘left’ : xTip});
005 } // END setTip
16
Tooltip anzeigen
Nach dieser Programmierarbeit können wir
nun unseren Tooltip anzeigen lassen. Hier erstellen
wir eine Funktion „showTip“, die zuerst „stopTimer()“
aufruft und dem Tooltip eine Animation hinzufügt. Mit
„-=10px“ schiebt sich der Tooltip nach oben heraus.
Dann nutzen wir „toogle“, um die Deckkraft anzupassen.
Damit wird der Tooltip bei einem „Mouse-Over“
ein- und anschließend wieder ausgeblendet. Danach
drehen wir mit „speed“ an der Geschwindigkeit.
001 // Function that stops the timer, creates
the animation and reveals the tip
002 showTip = function() {
003 stopTimer();
004 tip.animate({“top”: “-=10px”, “opacity” :
“toggle”}, defaults.speed)
005 }
006 });
17 Verkettung
Um unser Plug-in abzuschließen, müssen wir
das ganze Objekt zurückgeben, um die „chaining“-Verkettung
von jQuery zu verwenden. „Chaining“ erlaubt
das Ausführen mehrere Funktionen auf einem Element.
In den nächsten Schritten schreiben wir Styles,
um entweder ein Bild oder CSS3 für das Design des
Tooltips zu verwenden.
001 return this; // returns the jQuery object
to allow for chainability.
002 } // end main function
003 })(jQuery);
18
Einfache Tooltip-Regel
Hier verlassen wir uns auf CSS, um unseren
Tooltip zu erstellen, und CSS3, um ihn zu tunen. Wir
brauchen kein HTML für unser CSS, da wir bereits das
„div“-Element nützlicherweise in unserem Plug-in definiert
haben. Die wichtigsten Auszeichnungen an dieser
Stelle sind „position: absolute“ und „z-index: 200“.
001 #tooltip {
002 background-color: #ddd;
003 position: absolute;
004 color: #231f20;
005 padding: 6px;
006 opacity: 0.9;
007 z-index: 200;
008 }
19 CSS3
Mit dem Internet Explorer 9 ist CSS3 für
abgerundete Ecken immer mehr akzeptiert. Hier
erstellen wir eine Regel, die abgerundete Ecken nur
dann verwendet, wenn die entsprechende Option
auf „true“ steht. Wie in Schritt 10 gesehen, fügen wir
eine „rounded“-Klasse zu jeglichen Elementen, die
mit dem Plug-in verbunden sind.
001 .rounded {
002 -moz-border-radius: 5px;
003 -webkit-border-radius: 5px;
004 border-radius: 5px;
005 border: 1px solid #ccc;
006 }
20
Grafik verwenden
Manchmal ist es schöner, in Photoshop seine
eigene Tooltip-Grafik zu basteln. Hier verändern wir die
Tooltip-Regel und fügen eine Grafik hinzu. Wir stellen
sicher, dass sich diese nicht wiederholt und keine Rahmen
hat. Die Textfarbe ist weiß. Alles andere belassen
wir, wie es war.
001 #tooltip {
002 background: url(‘../images/tooltip.
png’) no-repeat;
003 position: absolute;
004 height: 75px;
005 width: 156px;
006 border: none;
007 color: #fff;
008 padding: 6px;
009 opacity: 0.9;
010 z-index: 200;
011 }
21 Trigger
Auf unserer HTML-Seite wollen wir nur einen
CSS-Tooltip aufpoppen sehen, wenn wir mit dem
Mauszeiger über ein Bild fahren. Mit dem „Title“-Tag
fügen wir unseren Text in den Tooltip ein.
001
002
003
Plug-in
benennen
und nutzen
Es gibt Regeln zur Benennung
von veröffentlichten Plug-ins. Wir
schreiben zuerst „jquery“, gefolgt
vom Namen des Plug-ins. Sie können
sich denken, dass sehr viele
Nutzer bereits Tooltip-Plug-ins
geschrieben haben und ähnlich
benannt haben. Sie sollten „tooltip“
mit einem individuellen String
kombinieren, beispielsweise Ihren
Initialen. Letztlich ist es aber
gleich und hat wenige Folgen: Sie
können Ihr Plug-in benennen, wie
Sie es möchten.
Tappen Sie nicht in die Falle, das
Plug-in wiederholt für mehr als ein
Element in der „document-ready“-Funktion
aufzurufen. Sie sollten
dem ersten Funktionsaufruf
eine Anzahl an Elementen zuweisen
und die gleichen Optionen
verwenden. Und ja, Sie werden es
wieder aufrufen müssen, wenn
sich die Optionen ändern.
22 Aufräumen
Jetzt, wo das Plug-in fertig ist, sollten wir den
Code aufräumen. In Schritt 09 oberhalb der „obj“-Variablen
erstellen wir eine neue Variable „o“ (für Optionen)
und speichern unsere Standardeinstellungen darin.
Anstatt „default.options“ aufzurufen, können wir nun
„o.options“ verwenden (zum Beispiel: „o.mouseFollow“).
001 var o = options;
002 var obj = $(this);
003 var tip = $(‘#tooltip’);
004 var tipInner = $(‘#tooltip #tipMid’);
005 obj.attr(‘tooltiptext’,this.title);
006 // removes the default browser tool tip
007 this.title = ‘’;
Das große WordPress-Handbuch 195

HTML5/CSS3
Eingebettete
Twitter-Feed-
QuickInfo
mit jQuery
EINE NETTE, EINFACHE JQUERY-TECHNIK, UM MIT EINEM
KLICK THEMENBEZOGENE TWITTER-NACHRICHTEN
IM BROWSER ZU ERHALTEN
• Das jQuery-Twitter-Suche-Plugin
bietet den gesamten
Backend-Code zur Anzeige von
Tweets.
LERNZIEL
Mit dieser verblüffenden
jQuery-Technik nur
relevante Tweets anzeigen
DAUER
30 Minuten
ANSPRUCH
QUELLDATEIEN
www.webdesignermag.
co.uk/tutorial-files/
TWITTER WIRD WELTWEIT von Millionen Menschen
verwendet und bietet eine großartige
Plattform für die neuesten Meinungen und
Nachrichten zu beinahe jedem Thema. Allerdings
ist Twitter aufgrund seiner Beschaffenheit auch mit
Rauschen besetzt; unerwünschte und irrelevante Nachrichten
herauszufiltern ist also unabdingbar. Mit dieser raffinierten
jQuery-Technik können mithilfe eines Suchbegriffs
Tweets zu einem Schlüsselwort angezeigt werden.
In dieser Übung sehen wir, wie Benutzer einen Text irgendwo
auf der Seite anklicken und ein Aufklappfenster mit
Tweets zu dem gewählten Begriff erhalten können. Sucht
man zum Beispiel „CSS3“ aus, erscheinen alle neuesten
Tweets betreffend CSS3 ordentlich gestapelt in einer QuickInfo.
Da die Technik einen Suchbegriff einsetzt, um die
anzuzeigenden Tweets auszuwählen, kann die Technik auf
beliebig viele Begriffe aus dem Text der Seite angewendet
werden.
Diese Übung setzt eine Auswahl von jQuery-Plug-ins von
den offiziellen Seiten von jQuery (http://jquery.com) und
jQuery UI (http://jqueryui.com) voraus. Der zugehörige
Code kann bei http://bit.ly/dCvYIq gefunden werden; dort
finden Sie die Elemente, die Sie für den Anfang für die Twitter-QuickInfo
brauchen. Wir zeigen Ihnen jetzt, wie man den
jQuery-Code und die Aufmachung bearbeitet, um raffinierte,
einfallsreiche und individualisierte Optionen zur Anzeige von
themenbezogenen Tweets zu erstellen.
Twitter-News sind oft reichlich verrauscht –
unerwünschte und irrelevante Nachrichten
herauszufiltern ist also unabdingbar.
01
jQuery einbinden
Erstellen Sie zunächst einen Ordner, in den all
die Dateien für diese Übung kommen. Fügen Sie die
„Index“-Datei von der Website oder eine HTML-Seite hinzu,
um die QuickInfo zu erstellen. Wir haben zum einfacheren
Nachschlagen das HTML und CSS in dieselbe
Seite gepackt. Öffnen Sie jetzt die „Index“-Datei und
fügen Sie die jQuery-Verweise in den Seitenkopf ein.
001
002
02
Dateien hinzufügen
Fügen Sie nun die Dateien „Twitterpopup.js“
und „Twitter.search.js“, die Sie von der Tympanus-Seite aus
dem Intro erhalten, dem Ordner hinzu, in dem die
Index-Datei liegt. Bauen Sie dann Verweise auf diese
Dateien direkt unter den jQuery-Verweisen aus dem vorherigen
Schritt hinzu und speichern Sie die Seite. Wenn
Sie die Dateien in einen anderen Ordner sichern möchten,
vergessen Sie nicht, dessen Pfad mit einzuschließen,
etwa „scripts/jquery.Twitterpopup.js“.
001
002
03
JavaScript einbinden
Fügen Sie den JavaScript-Code hinzu, der die
QuickInfo ermöglicht. Der Code kommt unter die anderen
Scriptverweisen. Der Code sucht nach einem
benannten div-Element, führt eine Suche durch und zeigt
dann das Aufklappfenster mit den Ergebnissen zum ausgewählten
Begriff an. Im Beispielcode heißt das div-Element
„wrapper“; ändern Sie nach Bedarf diesen Namen,
sodass er auf das div-Element in der HTML-Seite verweist.
001
002 $(function() {
003 $('#wrapper').find('.Twitter_search').
Twitterpopup();
004 });
005
04
Klasse erstellen
Die QuickInfo benötigt einen Aktivierungspunkt,
um in Aktion zu treten. Es handelt sich dabei um
einen Link mit der CSS-Klasse „Twitter_search“. Die Klasse
kann direkt ohne Formatierungsregeln zum CSS hinzugefügt
werden (siehe unten) und dann in DreamWeaver im
Eigenschaften-Fenster über die Drop-down-Liste „Klasse“
angewendet werden – oder ohne DreamWeaver manuell.
001 .Twitter_search{
002 }
196 Das große WordPress-Handbuch

WordPress
HTML5/CSS3
Nächstes. Die jQuery-UI-Dateien ist im Tympanus-Download
enthalten. Fügen Sie diese zum gleichen Ordner wie
die Index-Datei hinzu oder kopieren Sie sie in einen anderen
Ordner (und passen Sie den Pfad entsprechend an).
• Die jQuery-Bibliothek kann auf http://jquery.com gefunden werden. Laden
Sie die neueste Version herunter, um zeitgemäßen Code zu produzieren.
001
002
003
10
Größen veränderbar
machen
Mit der jQuery-UI-Einbindung kann die Twitter-QuickInfo
jetzt vergrößert und verkleinert werden; probieren Sie es
aus! Um das dem Benutzer zu signalisieren, sollte ein Symbol
eingefügt werden. Erstellen Sie eines in Photoshop
oder einem Bildbearbeitungsprogramm Ihrer Wahl.
Machen Sie es etwa 11 × 11 Pixel groß und fügen es wie folgt
als Hintergrund zur „TwitterSearchContainer“-Klasse hinzu.
05
Klasse formatieren
Um hervorzuheben, dass ein Link zu einer
Twitter-QuickInfo gehört, fügen wir einen visuellen Hinweis
hinzu, um ihn zu identifizieren – idealerweise wäre
das das „t“ von Twitter. Gehen Sie auf twitter.com/about/
resources/logos, holen Sie sich ein offizielles Logo und
verkleinern Sie es auf etwa 15 × 15 Pixel (oder je nach
Schriftgröße etwas größer oder kleiner).
06
Link formatieren
Das soeben erstellte Twitter-Symbol soll als
nicht wiederholender Hintergrund rechtsbündig
angeordnet sein. Um ihn linksbündig anzuordnen,
ändern Sie in der „background“-Regel das Wort
„right“ in „left“ um. Das „padding“ sollte etwa 20 Pixel
betragen. Zuletzt setzen wir noch eine „cursor“-Regel,
um den Mauszeiger zu ändern.
001 .Twitter_search{
002 padding-right:20px;
003 background: url(images/Twitterbird15.png)
no-repeat right center;
004 cursor:pointer;}
07
Link anwenden
Die „Twitter_search“-Klasse kann jetzt auf
jeden Text innerhalb der aktuellen HTML-Seite angewendet
werden. Wählen Sie den gewünschten Text aus und
wenden Sie „Twitter_search“ in DreamWeaver im Eigenschaften-Fenster
über die Drop-down-Liste „Klasse“ an.
Ohne DreamWeaver codieren wir die Klasse von Hand
und machen es fett zur Akzentuierung:
001 CSS3
Um den Text fett zu drucken, verwenden Sie den folgenden
Code:
001 CSS3
08
QuickInfo testen
Mit dem Aufbau sind wir fast fertig. Speichern
Sie die Seite und betrachten Sie sie in einem Browser
Ihrer Wahl. Ihnen wird auffallen, dass die QuickInfo nicht
richtig formatiert ist und sich über die ganze Seite ausbreitet.
Um die QuickInfo zu formatieren, müssen wir
den folgenden Code zum CSS hinzufügen. Ändern Sie
die Breite („width“) nach Bedarf.
001 .search_results {
002 width: 300px;
003 position:absolute;
004 display:none;}
09
jQuery UI code
Bisher hat die Twitter-QuickInfo keine Schaltfläche
zum Schließen und kann nicht in der Größe verändert
werden. Das Einbinden von jQuery UI kommt als
• Die jQuery-UI-Bibliothek beinhaltet eine ganze
Menge Effekte für das Benutzerinterface.
001 .TwitterSearchContainer{
002 background:#aaa url(images/resize.png) norepeat
right bottom;
003 }
11
Schließen-Schaltfläche
Zum Schluss fügen wir noch eine Schaltfläche
zum Schließen hinzu. Dazu bearbeiten wir die „TwitterSearchClose“-Klasse.
Erstellen Sie eine Schließen-Grafik in
Photoshop und bauen Sie den folgenden Code zum CSS
der aktuellen Seiten hinzu. Die Grafik erscheint wie erwartet
in der oberen rechten Ecke der QuickInfo. Je nach
Wunsch kann die Hintergrundfarbe und/oder die Position
angepasst werden.
001 .TwitterSearchClose{
002 position:absolute;
003 right:0px;xx
004 top:0px;
005 background:#CCC url(close.png) no-repeat
center right;
006 width:13px;
007 height:13px;
008 cursor:pointer;
009 }
12
QuickInfo-CSS aufsuchen
Die QuickInfo operiert jetzt in ihrem „Lieferzustand“.
Die Breite haben wir in Schritt 08 festgelegt. Es gibt
noch weitere Aspekte, die umdesignt werden können. Öffnen
Sie Twitter.search.js und navigieren Sie zur Zeile 176,
wo die Standard-CSS-Regeln für die QuickInfo stehen.
Kopieren Sie diese in den Editor, um Fehlern vorzubeugen.
001 a: { textDecoration: 'none', color:
'#1485A5' },
002 bird: { width: '50px', height: '20px',
position: 'absolute', left: '-30px', top:
'-20px', border: 'none' }
Das große WordPress-Handbuch 197

HTML5/CSS3
• Das Entfernen von „border-radius“-Regeln
bewirkt saubere, scharfe
Ecken.
• Durch das Erhöhen der Schriftgröße
erhalten einzelne Tweets mehr
Gewicht und allgemein bessere
Zugänglichkeit.
• Das Twitter-Profilbild kann, falls
Tweets mit reinem Text erwünscht
sind, entfernt werden.
13
Container
Der „Container“ ist der Bereich, in den die Twitter-Nachrichten
eingefügt werden. Der Code weist ihm
eine Hintergrundfarbe, eine feste Höhe und einen Umriss
zu. Belassen Sie „overflow“ bei „hidden“ und verändern
Sie die restlichen Angaben nach Belieben – man könnte
etwa die Höhe ändern, aber der Frame (siehe nächster
Schritt) muss entsprechend mit angepasst werden.
001 container: {
002 overflow: 'hidden', backgroundColor:
'#eee', height: '253px', border : '1px solid
#ccc'}
14
QuickInfo-Frame
Die Tweets werden in einem „Frame“ (Rahmenelement)
angezeigt, bei dem einige Aspekte vordefiniert
sind. Die Höhe kann nach Belieben angepasst werden,
aber der Container (siehe vorheriger Schritt) muss
entsprechend mit beachtet werden, damit keine Lücke
entsteht. Verstellen Sie die Randbreite; Sie werden feststellen,
dass der Titelbereich den Titeltext fließend unterbringt.
Verstellen Sie den Randradius oder entfernen Sie
ihn ganz, um scharfe Ecken zu erhalten.
001 X frame: { height: '280px', border: '10px
solid #C2CFF1', borderRadius: '10px', '-mozborder-radius':
'10px', '-webkit-borderradius':
'10px', '-moz-box-shadow': '1px 1px
5px #000', '-webkit-box-shadow': '1px 1px 5px
#000' },
15
Twitter-Text
Die Text-Regeln bestimmen das Aussehen
des Textes innerhalb eines Tweets. Die Schriftgröße
kann geändert werden, beispielsweise auf 25 Pixel, um
einzelne Tweets in großer Schrift darzustellen. Das „bor-
derBottom“ erzeugt die Trennlinie zwischen den Tweets
– passen Sie hier die Farbe und/oder Größe an –, während
das „paddingBottom“ mit einem annehmbaren
Abstand am unteren Rand jedes Tweets für ein sauberes
Aussehen sorgt.
001 text: { fontSize: '11px',
borderBottom:'1px solid #ddd',
paddingBottom:'6px' },
16
QuickInfo-Titel
Der Titel zeigt das Schlüsselwort an, das im
Seitentext ausgewählt wurde – also das, wonach die
Twitter-Welt durchsucht wurde. Hier werden hauptsächlich
die Textgröße und die Ausrichtung geändert. Bei
einer höheren Schriftgröße rutscht der Container nach
unten, wodurch der Frame entsprechend angepasst
werden muss.
• Für einen größeren Effekt kann das Twitter-Profilbild
im Zusammenspiel mit dem Text in
der Größe verdoppelt werden.
001 title: { cursor: 'move', backgroundColor:
'#C2CFF1', margin: 0, padding: '0 0 5px 0',
textAlign: 'center', fontWeight: 'bold',
fontSize: '16px', textShadow: '1px 1px 1px
#fff',position: 'relative' }
17
Twitter-Profilbilder
Standardmäßig wird mit jedem Tweet ein Profilbild
angezeigt. Dieses hat eine Standardgröße von 48
× 48 Pixel, die auf Twitter verwendete Profilbildgröße.
Mit den Eigenschaften „width“ und „height“ kann die
Breite bzw. Höhe angepasst werden. Um das Bild nach
rechts zu verschieben, ändern Sie das „left“ in „right“ um.
001 img: { 'float': 'left', margin: '5px
10px 5px 0px', width: '96px', height: '96px','-
moz-box-shadow': '1px 1px 5px #000', '-webkitbox-shadow':
'1px 1px 5px #000'}
18
Sucheinstellungen
Direkt über den Designeinstellungen sind die
Twitter-Sucheinstellungen. Mit wenigen Änderungen
können ein paar Aspekte geändert werden. Um das Profilbild
zu entfernen und Tweets nur als reinen Text darzustellen,
setzen Sie „avatar“ auf „false“. Die Zeitverzögerung
zwischen dem Erscheinen neuer Tweets wird mit
„timeout“ geregelt; eine höhere Zahl bewirkt eine längere
Verzögerung, eine kleinere eine kürzere.
001 avatar: true,
002 bird: true,
003 birdLink: false,
004 birdSrc: 'http://cloud.github.com/
downloads/malsup/Twitter/tweet.gif',
005 timeout: 4000,
198 Das große WordPress-Handbuch

WordPress
HTML5/CSS3
Eigenes Twitter-
Widget bauen
MIT DEM WIDGET CONFIGURATOR VON TWITTER KÖNNEN SIE
JEDEN ÖFFENTLICH ZUGÄNGLICHEN TWITTER-FEED AUF IHRER
WORDPRESS-WEBSITE ANZEIGEN
DIE ERFAHRUNG MIT WordPress zeigt: Für fast
jede gewünschte Aufgabe gibt es ein Plug-in.
Bestimmt wissen Sie auch, dass zu viele Plug-ins
die Webseite verlangsamen, unerwartete Konflikte
verursachen und zusätzlichen Code erfordern
können, wodurch die Webseite ein unangenehmes,
aufgeblähtes Gefühl vermittelt.
Es ist also immer wissenswert, wenn die gewünschte
Funktionalität auch ohne ein weiteres Plugin
erzielt werden kann. Das hier ist ein gutes Beispiel.
Es gibt über 300 Twitter-Feed-Plug-ins, die
man für WordPress herunterladen kann.
Twitter bietet aber einen umfassenden und leicht
zu verwendenden Konfigurator, der die Funktionalität
eines Großteils dieser Plug-ins bereitstellt.
In dieser Übung zeigen wir Ihnen die einfachen
Schritte, mit denen Sie Ihr eigenes Twitter-Widget
über Twitter konfigurieren können.
Das Widget erfüllt so gut wie alle Anforderungen,
die nicht gerade hochspezialisiert sind. Sie ersparen
Ihrer Webseite damit ein weiteres Plug-in,
und zurück bleibt das Gefühl, das Pensum des
Tages erfüllt zu haben.
Es gibt über 300
Twitter-Feed-Plug-ins,
die man für WordPress
herunterladen kann
twitter.com/settings/widgets. Um den Konfigurator zu
verwenden, benötigen Sie einen Twitter-Account, und
Sie müssen eingeloggt sein. An dieser Stelle können
Sie das Beste aus den von Twitter bereitgestellten
Optionen machen und die Anzeige von Tweets für
Ihre Besucher verwalten. Wählen Sie nicht einfach
die Standard-Benutzertimeline. Es ist wahrscheinlich
besser, einen Feed von Favoriten anzeigen zu lassen,
sodass Sie steuern können, welche Tweets angezeigt
werden, oder Sie konfigurieren Listen- oder Such-Optionen,
um den Feed möglichst relevant zu halten.
Die Optionen betrachten Das Widget konfigurieren
01 02 Den Konfigurator finden Sie hier: https://
Fast alle Widgeteinstellungen sind optio-
03
nal, aber damit das Widget funktioniert, muss der
Domainname (ohne das „http://www.“, sonst erscheint
beim Abspeichern ein Fehler) zum Domains-Feld
hinzugefügt werden. Bei Verwendung des Widgets
auf mehreren Webseiten müssen die Domainnamen
durch Kommas getrennt aufgelistet werden. Sie können
jederzeit zurückkehren und das Widget wieder
bearbeiten. Beachten Sie auch die Opt-out-Option;
klicken Sie das Fragezeichen an, um eine bewusste
Entscheidung zu treffen. Wenn die Konfiguration
abgeschlossen ist, klicken Sie auf „Widget erstellen“.
Zur Webseite hinzufügen
Sobald das Widget erstellt ist, kopieren Sie den
generierten Code in die Zwischenablage und begeben Sie
sich zum Dashboard Ihrer Webseite. Sie können den Code
in eine Seite oder einen Beitrag einfügen (verwenden
Sie dazu die HTML-Ansicht) oder ihn in eine Seitenleiste
einfügen. Wählen Sie dazu Design | Widgets und ziehen
Sie ein Text-Widget in die Seitenleiste an die Stelle, wo der
Feed erscheinen soll. Klicken Sie nun auf den nach unten
gerichteten Pfeil und fügen Sie den Code aus der Zwischenablage
ein. Fügen Sie nach Wunsch noch einen Titel
hinzu und klicken Sie auf Speichern. Zuletzt noch prüfen,
ob der Feed wie gewollt funktioniert. Job erledigt!
Das große WordPress-Handbuch 199

HTML5/CSS3
Inhalte für
das HTML5-
Canvas-Tag
erstellen
BRINGEN SIE IHRE GRAFIKEN DIREKT AUS ILLUSTRATOR
IN DAS CANVAS-ELEMENT VON HTML5
LERNZIEL
Inhalte für das Canvas-Tag
mit HTML und Illustrator
erstellen
DAUER
60-120 Minuten
ANSPRUCH
QUELLDATEIEN
www.webdesignermag.
co.uk/tutorial-files/
(Startordner, fertiger
Ordner)
LANGE SCHON WOLLTEN WIR Adobe Edge
Prototype, eine Flash-ähnliche Umgebung zur
Erzeugung interaktiver Canvas-Inhalte, in die
Finger bekommen. Aber bis zu seiner Veröffentlichung
sind wir zum Programmieren von Hand verdammt ...
Nun ja, nicht ganz. Illustrator bietet einige Adobe-eigene und
auch Drittanbieter-Plug-ins, die ein paar tolle Funktionen
haben, die es erlauben, interaktive Animationen für den Canvas-Tag
zu erzeugen. In diesem Tutorial werden wir ein solches
Plug-in installieren, das es ermöglicht, Animationen und
Interaktivität im Canvas einzurichten. Eines der Probleme
beim Exportieren nach Canvas besteht darin, dass jede
Information in den Zeichenanweisungen gespeichert wird.
Dadurch wird das Bewegen von Inhalten träge, da der Prozessor
immer wieder alles von vorne zeichnen muss, Bild für
Bild. Daher exportieren wir komplexere Gebilde als PNG-Bilder,
um die Animation flüssiger zu machen. Apropos Animationen:
Während diese in WebKit-Browsern wie Chrome und
Safari sauber laufen, sind sie in Firefox immer noch ruckelig,
weshalb diese Technik Flash noch nicht sofort ablösen wird.
Namen
Wir vergeben seltsame
Ebenennamen. Das liegt
daran, dass die Ebenennamen
dazu dienen, Funktionalität in
Ihre Canvas-Illustration zu exportieren.
Wenn Sie zwischen die
Klammern schauen, können
Sie leicht erkennen, welche
Anweisungen Sie
Canvas geben.
Illustrator bietet einige Plug-ins,
die interaktive Animationen für das
Canvas-Tag ermöglichen.
• Diese Anleitung erzeugt mithilfe von Illustrator,
in dem alle Inhalte erstellt und für das
HTML5-Canvas-Tag exportiert werden, eine
animierte Kopfleiste für eine Website. Die Animationspfade
werden in Illustrator gezeichnet
und die Ebenen so geschaltet, dass sie der Animation
durch von dem Plug-in exportiertes
JavaScript folgen.
200 Das große WordPress-Handbuch

WordPress
HTML5/CSS3
01
Ai->Canvas herunterladen
Öffnen Sie http://visitmix.com/labs/ai2canvas/ in
Ihrem Browser und laden Sie das Plug-in Ai->Canvas für Ihr
Betriebssystem herunter. Wenn die ZIP-Datei gespeichert
und entpackt ist, haben Sie eine Illustrator-Plug-in-Datei. Öffnen
Sie das Illustrator-Anwendungsverzeichnis und verschieben
Sie das Plug-in ins Plug-in-Verzeichnis.
02
Illustrator starten
Öffnen Sie Illustrator und erstellen
Sie ein neues Dokument, wobei Sie „Web“
als Profil auswählen und die Auflösung auf
1024 x 768 Pixel einstellen. Klicken Sie OK.
Öffnen Sie die Datei „logo.ai“ aus dem „start“-
Verzeichnis. Wählen Sie alles aus und kopieren
Sie das Bild. Schließen Sie das Logo und
fügen Sie es in Ihr neues Dokument ein.
03
Nach Canvas exportieren
Fügen Sie, wie im Bild oben, den Text hinzu, um das Logo fertigzustellen.
Gehen Sie auf Datei > Speichern und speichern die Datei als „canvas.ai“.
Wählen Sie nun Datei > exportieren und exportieren Sie sie als „.
(html)“ in denselben Ordner, in dem Sie Ihre Datei abgelegt haben. Die exportierte
Datei wird sich im Browser öffnen – sehen Sie sich den Quelltext an.
06
Hintergrund hinzufügen
Öffnen Sie die Datei „background.ai“ (siehe Quelldateien).
Klicken Sie auf den großen grünen Kasten und vergewissern
Sie sich, dass Farbverlauf und Farben-Dialog geöffnet
sind. Ziehen Sie die grüne Farbe aus dem Farben-Dialog
in den schwarzen Teil des Farbverlauf-Dialogs. Klicken Sie auf
die weiße Seite des Verlaufs und ändern Sie die Farbe im Farben-Dialog
in RGB und ein helles Gelb wie abgebildet.
04 Animationspfad
Zwei Dinge sollten Ihnen aufgefallen sein: Die
Schriftart wurde nicht übernommen und der Quelltext war
lang. Wir möchten dieses Logo animieren, daher werden
wir es in eine PNG-Datei konvertieren, damit der Prozessor
nicht jedes Bild komplett neu zeichnen muss. Legen Sie
eine neue Ebene an und fügen Sie eine ovale Form hinzu.
Doppelklicken Sie auf die Ebene und nennen Sie sie „logo-
Path(type: animation; direction: forward; duration: 25);“.
07
Verlaufsrichtung ändern
Wählen Sie das Verlaufswerkzeug aus der Werkzeugleiste,
klicken und ziehen Sie von der Unterkante des
Rechtecks bis ganz nach oben. Schnappen Sie sich dann den
Sonnenschein aus dem unteren Teil des Dokuments und
platzieren Sie ihn genau über dem Rechteck, auf dem Sie
den Verlauf geändert haben. Drücken Sie Strg/Cmd+A und
dann Strg/Cmd+C, um alles auszuwählen und zu kopieren.
05
Logonamen ändern
Doppelklicken Sie auf die Logo-Ebene und
ändern Sie den Namen in „logo(rasterize: logo; origin:
center; animation: logoPath);“. Dadurch wird das Bild zu
einem PNG und die logoPath-Ebene zum Bewegungspfad
für diese Ebene. Exportieren Sie die Datei noch mal
und sehen Sie sich die Animation im Browser an. Sie werden
feststellen, dass das Logo leicht angeschnitten ist.
08
Hintergrund einfügen
Wechseln Sie das Dokument und sperren Sie die
beiden angelegten Ebenen. Fügen Sie eine neue Ebene hinzu
und positionieren Sie sie in der Ebenenliste unter den
anderen. Drücken Sie Strg/Cmd+V, um den Hintergrund einzufügen.
Doppelklicken Sie auf die Ebene und nennen Sie sie
„bg(rasterize:bg; crop:yes);“. Exportieren Sie erneut und sehen
Sie sich die funktionierende Animation im Canvas-Tag an.
09
Wolke hinzufügen
Öffnen Sie die Datei „cloud.ai“ (siehe Quelldateien).
Drücken Sie Strg/Cmd+A und Strg/Cmd+C, um alles
auszuwählen und zu kopieren. Schließen Sie das Dokument
und sperren Sie die Hintergrund-Ebene in Ihrem
Hauptdokument. Fügen Sie eine neue Ebene hinzu, die Sie
über der Hintergrund-Ebene positionieren. Fügen Sie die
Wolke ein und platzieren Sie sie wie im Screenshot gezeigt.
Das große WordPress-Handbuch 201

HTML5/CSS3
10
Animationspfad der Wolke
Doppelklicken Sie auf die Wolken-Ebene und nennen Sie sie „cloud
(rasterize:cloud; origin:center; animation:cloudPath);“. Sperren Sie die Ebene
und legen Sie darunter eine neue an. Benutzen Sie das Stift-Werkzeug, um
wie abgebildet einen welligen Pfad zu zeichnen. Beachten Sie, dass der Pfad
außerhalb der Ränder des Dokuments beginnt und endet – das ist wichtig.
13
11
Testen der Animation
Doppelklicken Sie auf die Pfad-Ebene und benennen
Sie sie: „cloudPath(type:animation; direction:forward;
duration:40);“. Speichern und exportieren Sie Ihre Datei und
sehen Sie, wie die Wolke sich bewegt. Sie bemerken, dass sie
nicht sichtbar ist, wenn sie sich nicht über dem Hintergrund
befindet. Überzeugen Sie sich, dass alle Ebenen gesperrt
sind, und fügen Sie eine neue über dem Rest ein.
Den Namen ändern
Doppelklicken Sie auf die Ebene und benennen Sie
sie in „blastClick();“ um. Diese Ebene wird der interaktive, klickbare
Bereich werden. Den Code können Sie später beim endgültigen
Export hinzufügen. Erstellen Sie eine neue Ebene
hinter der Mann-Ebene, auf der die Explosion stattfinden soll,
die beim Klicken auf die vorige Ebene ausgelöst wird.
12
Die Nachrichten laden
Öffnen Sie die Datei „man.ai“ (siehe Quelldateien)
und drücken Sie Strg/Cmd+A und Strg/Cmd+C zum Kopieren.
Schließen Sie die Datei und fügen Sie sie auf Ihrer neuen Ebene
ein. Positionieren Sie sie wie gezeigt und nennen Sie diese
Ebene „man();“. Sperren Sie diese Ebene, fügen Sie darüber
eine neue ein und zeichnen Sie eine ovale Form über dem
Mann, der Sie keine Füllung und keine Strichfarbe zuweisen.
HTML5 und
Illustrator
Illustrator besitzt schon lange die
Fähigkeit, mit den Web-Standards
der nächsten Generation zu arbeiten.
Mit der auf HTML5 folgenden
Aufregung wird nun auch Standards
wie SVG (Scalable Vector Graphics)
verstärkt Aufmerksamkeit gewidmet.
Illustrator konnte schon seit
Version 10, die im November 2001
veröffentlicht wurde, direkt in dieses
Format exportieren und unterstützt
es auch weiterhin als einen gangbaren
Weg, Webgrafiken in großem
Umfang bei sehr kleinen Download-Datenmengen
zu ermöglichen.
SVG wird aufgrund seiner auf XML
basierenden Struktur im Allgemeinen
für zugänglicher gehalten als
Canvas. Adobe hat das HTML5-Pack
für Illustrator veröffentlicht (http://
tinyurl.com/2fjs9hk). Diese Plug-in-
Serie ist komplizierter zu installieren.
Das Paket erlaubt es dem
Benutzer, Eigenschaften wie
CSS3-Farbverläufe zu exportieren,
die einfach in Illustrator zu „zeichnen“
sind, aber in CSS3 verwirrend
sein können.
14
Letzte Ebene
Benutzen Sie das Oval-Werkzeug, um wie abgebildet
einen gelb-orangefarbenen Kreis hinter dem Mann zu
zeichnen. Wählen Sie den Kreis aus und gehen Sie auf Effekte
> Unschärfe > Gaußsche Unschärfe. Geben Sie dem Kreis
4 px Unschärfe und klicken Sie OK. Nennen Sie die Ebene
„blast(rasterize:blast; origin:center; scale-direction:grow; scale-duration:6;
scale-iterations:1; scale-multiplier:12; scale-offset:1;
scale-timing-function:expoEaseOut; alphadirection:fade-out;
alpha-duration:6; alpha-iterations:1);“.
Ovale
Zielscheibe
Vielleicht wundern Sie sich,
warum wir keinen Button aus
dem Mann gemacht haben. Der
Grund ist, dass er quasi unmöglich
anzuklicken ist. Die beste Lösung
ist es, ein Oval außen herum
anzulegen, um dem
Benutzer das Treffen
zu erleichtern.
15 Endgültiges
Exportieren
Exportieren Sie die Datei zum letzten Mal; Sie sind mit
der Gestaltung fertig. Sie bemerken, dass die Explosion
automatisch abläuft. Sie können das ändern,
sodass sie nur stattfindet, wenn die ovale Form über
dem Mann angeklickt wird. Öffnen Sie die HTML-Datei
mit Dreamweaver, um den Code zu bearbeiten.
202 Das große WordPress-Handbuch

WordPress
HTML5/CSS3
16
Code auskommentieren
Öffnen Sie den Quelltext und sehen Sie sich die
Zeilen 99 und 100 an und unterbinden Sie den automatischen
Start der Detonation, indem Sie die Zeilen durch
Hinzufügen je zweier Schrägstriche am Zeilenanfang
auskommentieren. Fügen Sie nach dem setInterval (in
Zeile 103) einen Click-Event-Listener zum Canvas hinzu.
Das macht das Canvas-Element interaktiv. Vor dem
Event-Listener steht ein Punkt – das bedeutet, dass der
Event-Listener dem Canvas hinzugefügt wird.
001 //blast.scaleClock.start();
002 //blast.alphaClock.start();
003 // Set animation timer
004 setInterval(drawFrame, (1000 / fps));
005 canvas.addEventListener(“click”, myClick,
false);
Und wie
geht’s
weiter?
Da das Canvas-Element in JavaScript programmiert
wird, wird es allen, die bereits
Erfahrung damit oder mit ActionScript
haben, wenig Mühe bereiten
Für alle Neulinge besteht eine gute
Möglichkeit des Lernens darin, sich erste
Schritte des Zeichnens auf Canvas
mit JavaScript anzusehen. Einige gute
Anleitungen gibt es im Mozilla
Developer Network (https://developer.
mozilla.org/en/canvas_tutorial). Sie
bringen Ihnen Grundlagen des Zugriffs
auf Elemente im Canvas-Raum näher.
Wenn Sie etwas anderes möchten,
versuchen Sie ProcessingJS (http://
processingjs.org/). Processing wurde
ursprünglich in Java als Open-Source-Sprache
für Grafikkünstler geschaffen.
Es wurde vor Kurzem in das Web
portiert, um die Vorteile von Canvas
nutzen zu können. Wenn Sie abenteuerlustig
sind, könnten Sie sich an dem
detaillierten Spiele-Tutorial versuchen,
das Sie auf Matthew Caspersons Hubfolio
finden können (http://matthewcasperson.blogspot.de/).
Aber Achtung,
es ist nichts für Zartbesaitete!
17
Abschließender Code
Fügen Sie den Code wie dargestellt in Zeile 106
– nach der schließenden Klammer der init()-Funktion – ein.
Dies ist die Funktion, die ausgeführt wird, wenn der Mann
angeklickt wird. Sie ermöglicht das Stattfinden der Explosion
und setzt sie zurück, wenn sie abgelaufen ist, sodass
sie neu gestartet werden kann. Wenn Sie fertig sind, speichern
Sie die Datei und öffnen Sie sie in Ihrem Browser,
um sie auszuprobieren. Im Browser wird Ihre Animation
von selbst abgespielt. Wenn alles stimmt, sollte sich auf
der linken Seite des Canvas das Logo drehen, während die
Wolke langsam im Hintergrund vorbeischwebt. Erreicht
die Wolke die andere Seite des Dokuments, wird sie
zurückgesetzt und startet von Neuem. Ein Klick auf den
Mann wird die eben hinzugefügte Funktion aufrufen und
damit zur Demonstration von Interaktivität mit dem Canvas-Element
eine Detonation auslösen.
Code-Bibliothek
Interaktivität einbauen
Die Einbindung eines externen RSS-Feeds ist eine großartige Möglichkeit,
Ihre Seite aktuell zu halten. Hier wird der RSS per AJAX abgerufen und angezeigt.
Der exportierte Code befindet
sich in einer externen
JavaScript-Datei, die zur
Laufzeit importiert wird.
Dieses JavaScript enthält
den gesamten Code zur
Animationskontrolle.
Beachten Sie, dass die
Bildrate editierbar
und der gesamte Code
aussagekräftig kommentiert
ist, was es später
einfacher macht,
Benötigtes hinzuzufügen.
Der automatische Start
der Animation wird durch
das Auskommentieren
dieser beiden Codezeilen
ausgeschaltet. Die Animation
wird später durch
Klicken angestoßen.
Dem Canvas wurde ein
Listener verpasst, der auf
Klicks wartet und die
Funktion myClick aufruft,
wenn er ausgelöst wird.
Diese startet dann
die Animation.
001 function myClick(e) {
002 var x, y;
003 blastClick(ctx);
004 x = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft -
canvas.offsetLeft;
005 y = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop -
canvas.offsetTop;
006 if (ctx.isPointInPath(x, y)) {
007 blast.scaleClock.restart();
008 blast.alphaClock.restart();
009 }
010 }
011
012
013
014 // Main canvas and context references
015 var canvas;
016 var ctx;
017
018 // Frames per second
019 var fps = 60.0;
020
021 // Animations
022 var animations = [ new cloudPath(), new logoPath() ];
096 // Start animation clocks
097 animations[0].pathClock.start();
098 animations[1].pathClock.start();
099 //blast.scaleClock.start();
100 //blast.alphaClock.start();
101
102 // Set animation timer
103 setInterval(drawFrame, (1000 / fps));
104 canvas.addEventListener(“click”, myClick,false);
105 }
106 function myClick(e) {
107 var x, y;
108 blastClick(ctx);
109 x = e.clientX + document.body.scrollLeft +
document.documentElement.scrollLeft - canvas.
offsetLeft;
110 y = e.clientY + document.body.scrollTop +
document.documentElement.scrollTop - canvas.
offsetTop;
111 if (ctx.isPointInPath(x, y)) {
112 blast.scaleClock.restart();
113
114 }
115 }
Das große WordPress-Handbuch 203

HTML5/CSS3
Suchmaschinenoptimierung
für Ihr Blog
LERNZIEL
Erhöhen Sie Ihren Traffic
durch Suchmaschinenoptimierung
DAUER
45 MINUTEN
ANSPRUCH
SIE HABEN VIELLEICHT SCHON VON SEO GEHÖRT. ABER WISSEN SIE AUCH, WIE SIE IN DER
PRAXIS NUTZEN DARAUS ZIEHEN?
Suchmaschinenoptimierung oder SEO (Search Engine
Optimization) ist ein Schlüsselfaktor, wenn es darum
geht, Besucher auf Ihre Website zu lotsen. Erfolgreiches
SEO ergibt sich aus dem Zusammenspiel dreier
Elemente: 1. Eine Website, die für einen Suchmaschinen-
Crawler dank ihres modernen, sauberen Codes gut zugänglich
ist. 2. Eine Liste von Keywords, auf deren Basis die Suchmaschine
die Inhalte Website kategorisiert und priorisiert. 3. Eine Reihe von
Navigationshelfern wie etwa internen Links, kategorisierten Beiträgen
und Sitemaps.
Sie müssen jedoch keine teure SEO-Analysefirma beauftragen.
Wir zeigen Ihnen, wie Sie SEO für Ihre WordPress-Seite mithilfe eines
kostenlos verfügbaren Plug-Ins realisieren können. Neben dem hier
vorgestellten Tool All in One SEO Pack gibt es aber auch noch Alternativen
wie etwa Platinum SEO Pack oder HeadSpace2 SEO. Die
folgenden Tipps gelten für all diese Tools gleichermaßen.
Erste Schritte
01 Wir suchen ein Plug-in, um SEO auf einem Blog zu
optimieren. Gehen Sie auf der WordPress-Oberfläche zum
Plug-in-Menü und starten Sie die Suche nach neuen Plugins.
Ins Suchfeld tippen Sie „All in One SEO Pack“. Wählen Sie
All in One SEO Pack aus der Ergebnisliste, und klicken Sie
auf installieren.
All in One SEO Pack
02 Das All in One SEO Pack wurde über fünf Millionen
Mal heruntergeladen. Es hilft Ihnen, SEO-Maßnahmen
auf Ihrem Blog einzurichten. Beachten Sie den Warnhinweis
auf der Info-Seite und machen Sie ein Backup Ihrer
Datenbank. Kehren Sie anschließend zur Infoseite zurück
und starten Sie die Installation.
03 Aktivierung
All in One SEO Pack müssen Sie wie jedes
andere Plug-in aktivieren. Wenn das erfolgt, dann sehen
Sie eine rote Leiste im Plug-in-Fenster, wie im oberen
Bild. Das bedeutet, dass Sie das Plug-in erst einrichten
mssen. Drücken Sie auf den Hyperlink, um die Einrichtung
zu starten.
204 Das große WordPress-Handbuch

WordPress
HTML5/CSS3
04 Einrichtung
Sie sehen einen Bildschirm voller Optionen
und Felder, von denen einige bereits mit Standardwerten
ausgefüllt sind. Wir können der Software an dieser Stelle
vertrauen und die Felder so belassen. Starten Sie das
Plug-in. Denken Sie an eine Spende, falls Ihnen das Programm
gefällt.
SEO Description
05 Fügen Sie eine Homepage-Beschreibung
(Meta-Description) in dieses Feld ein. Schreiben Sie
Keywords in den Text, die wichtigsten sollten zweimal
vorkommen. Bleiben Sie jedoch unter 200 Zeichen. Da
dieser Text oft in den Suchergebnissen (SERP) für Ihre
Website, überlegen Sie sich etwas Griffiges.
06 Keywords
Unter Home-Keywords tragen Sie Meta-
Keywords ein, getrennt durch Kommata. Unter diesen
Keywords wird die Suchmaschine Ihre Website einordnen.
Die optimale Anzahl für ein maschinenfreundliches
Keyword-Tag ist 20. Was Sie hier hineinschreiben, sollte
Ihren Content gut beschreiben.
Canonical URLs
07 Sie haben vielleicht irrtümlich mehrere Links
auf denselben Content Ihres Blogs kreiert (Duplicate
Links). Suchmaschinen bewerten Inhalte so doppelt,
und Sie riskieren, gegen sich selbst in den Wettbewerb
im Suchranking zu treten. Mit Canonical URLs legen Sie
eine feste URL für jede Seite Ihres Blogs fest.
Titles umschreiben
08 Diese Option im Plug-in aktiviert Makro-
Programme, die den „Title“ Ihrer Website umschreiben.
Das ist der Text, der in der Browser-Titelleiste sichtbar
ist. Die Optionen geben Ihnen die Möglichkeit, für alle
Seiten, Beiträge, Kategorien und anderes suchmaschinenfreundlichere
„Titles“ zu vergeben.
09 blog_title
Die zuvor genannten „Titles“ sollten unter
SEO-Gesichtspunkten immer vor den Blog-Titeln stehen.
Wenn Sie im Feld „Home Title“ einen Text vergeben
haben, dann wird daraus der blog_title-String in jedem
der Titelfelder. Bleiben Sie bei der Bezeichnung unter 66
Zeichen, mehr zeigt Google in den SERPs nicht an.
Eigene Description
10 Das Description-Feld steuert, welcher Text einer
Blogseite in den Suchmaschinenergebnissen angezeigt
wird. Standardmäßig verwendet das Plug-in Auszüge Ihrer
Beiträge. Hier können Sie dies manuell steuern. Gibt es keine
Auszüge, benutzen Sie die Autogenerate-Funk tion – dann
wird die Meta-Description verwendet.
Dynamische Keywords
11 WordPress bietet eine Funktion, um Keywords
dynamisch zu generieren. Unter SEO-Gesichtspunkten
ist die Option sinnvoll, Kategorien und Tags für
jeden Post als Meta-Keywords zu verwenden. Das
ergänzt bestehende Keywords, die Sie bereits selbst
vergeben haben.
Hier gibt’s nichts zu sehen
12 Wenn Sie wollen, dass Suchmaschinen
bestimmte Bereiche beim Crawlen auslassen sollen,
dann nutzen Sie die noindex-Funktion. So vermeiden
Sie etwa SEO-schädliche Elemente wie doppelte Inhalte.
Vermeiden Sie jedoch, dass für die Leser attraktive
Inhalte der Funktion zum Opfer fallen.
Das große WordPress-Handbuch 205

HTML5/CSS3
Webseiten-Daten mit
Google Analytics auswerten
LERNZIEL
Performance mit Google-
Analytics beobachten und
optimieren
DAUER
45 Minuten
ANSPRUCH
ANALYTICS LIEFERT WEBSITE-BETREIBERN NÜTZLICHE INFORMATIONEN ÜBER DEREN BESUCHER.
DATEN ÜBER DIE die Besucher einer Website zu zu bringen.
erheben, kann sich in vielerlei Hinsicht auszahlen. Google Analytics ist die beliebteste Webseiten-Statistik-Software
Man sieht, welche Beiträge besonders beliebt sind, ob der Welt, und sie ist kostenlos verfügbar. Auf ein Analytics-Benutzerkonto
können Sie von überall aus zugreifen, Sie können es mit
Leser auf die Website zurückkehren, wie regelmäßig
sie diese besuchen und welche Keywords Sie bei Google eingeben,
um auf die Seite zu gelangen. Das gibt Ihnen als Betreiber gleichen. In diesem Beitrag zeigen wir Ihnen, wie Sie einen Google-
mehreren Websites verknüpfen und deren Erfolg miteinander verdie
Möglichkeit zur besseren Planung Ihrer Seite, um mit neuen Analytics-Account einrichten, die Software auf Ihrer Website einbinden
und anschließend auf die Analysedaten Features oder optimierten Inhalten mehr Leser auf Ihre Website
zugreifen.
Google Analytics öffnen
01 Gehen Sie auf www.google.com/analytics. Dort
erscheint als Erstes die Hauptseite mit der Anmeldung.
Zudem finden Sie dort viele Tipps, aktuelle News und
Entwicklungen zu dem Dienst. Klicken Sie auf den
Knopf zur Anmeldung.
02 Anmeldung
Wie bei vielen Google-Diensten genügt für
Google Analytics Ihr gewöhnlicher Google-Account. Wenn
Sie eine Gmail-Adresse, ein YouTube- oder ein Google-
Drive-Konto haben, dann können Sie einen davon für
Analytics nutzen. Andernfalls registrieren Sie sich neu.
Details eintragen
03 Bei der Registrierung eines neuen Accounts
müssen Sie einige Details wie etwa Mailadresse, Land des
Wohnsitzes und ein Passwort für das neue Konto eingeben,
außerdem gibt es eine CAPTCHA-Abfrage. Anschließend
lesen und akzeptieren Sie die Nutzungsbedingungen.
206 Das große WordPress-Handbuch

WordPress
HTML5/CSS3
Website eintragen
04 Nach der Anmeldung müssen Sie Ihre Website,
die Sie beobachten und analysieren möchten,
einrichten. Tragen Sie die URL in das dafür vorgesehene
Feld ein und vergeben Sie einen Namen. Zum Schluss
geben Sie die Zeitzone für Ihren Wohnort an.
So geht’s zum Code
05 Nach Eingabe Ihres Namens und der Zustimmung
zu weiteren Bedingungen erklärt Ihnen Google
Analytics, wie Sie den Analytics-Tracking-Code verwenden.
Kopieren Sie ihn in die Zwischenablage. Sie können sich
den Code auch per E-Mail zuschicken lassen.
WordPress öffnen
06 Navigieren Sie zu Ihrer WordPress-Login-
Webseite und melden Sie sich mit Ihren Daten an. Klicken
Sie sich auf der linken Seite durch bis zum Editor. Öffnen
Sie den Code-Editor. Sollte Sie dies abschrecken: Keine
Sorge, es dauert nicht lange.
Footer-Datei öffnen
07 Rechts sehen Sie eine Liste der wichtigsten
Dateien, aus denen Ihre WordPress-Seiten bestehen.
Klicken Sie hier auf footer.php und scrollen Sie zum Ende
der Datei zu den Tags und . Direkt
oberhalb von fügen Sie Ihren Analytics-Code aus
der Zwischenablage ein.
08 Abwarten
Speichern Sie, um die Änderungen zu übernehmen.
Der Code ist nun integriert, es kann aber
24 Stunden dauern, bis Google die Daten analysiert hat.
In Ihrem Analytics-Account sehen Sie ein kleines
Warndreieck beim Punkt „Status“. Dies wird zu einem
grünen Häkchen, wenn es soweit ist.
Website analysieren
09 Auf dem Haupt-Analyse-Schirm sehen Sie eine
Übersicht Ihrer Websites und von deren Performance.
Der Standardzeitraum der Analyse beträgt 30 Tage, oben
rechts können Sie ihn verändern. Sie können den
Zeitraum per Klick auf „Tag“, „Woche“ oder „Jahr“ schnell
anpassen.
Berichte ansehen
10 Über die Funktion zur Anzeige von Berichten
bekommen Sie mehr Details zu einer Website. Es gibt
Graphen und Diagramme. Das Hauptbild zeigt die Besucheranzahl
auf Ihrer Website. Per Standard sind 30 Tage
festgelegt, ein Klick aufs Datum lässt Sie den Zeitraum
genauer eingrenzen.
11 Traffic-Quellen
Über die Navigation auf der linken Seite können Sie
die Traffic-Quellen abrufen. Diese verraten, wie Nutzer auf
Ihre Website gekommen sind. Die „Keyword“-Option zeigt,
welche Begriffe Nutzer bei Google eingegeben haben, um
auf die Seite zu kommen. So können Sie weitere SEO-Maßnahmen
treffen.
12 Content-Menü
Das Content-Menü zeigt, welche Beiträge am
häufigsten abgerufen wurden und wie lange Nutzer auf
den verschiedenen Seiten Ihrer Website geblieben sind.
Google Analytics bietet eine Fülle an Informationen, und
bislang haben wir erst an der Oberfläche gekratzt.
Das große WordPress-Handbuch 207

Das DaS TesT-Magazin
TeST-MagaziN
für Für digitale Digitale UnterhaltUng
unterhaltung
Das beste aus allen technik-Welten:
Flat-TVs | Smartphones | Tablets | Notebooks | Digitalkameras | Video | HiFi
plus: Die coolsten sPiele und alle Film-blockbuster
Auch als
Magazin-Variante
ohne DVD für € 3,50
QR-Code scannen
und hinsurfen!
WWW.sPieleFilmetechnik.De
Neue Ausgabe jetzt am Kiosk erhältlich
oder einfach online bestellen unter:
shop.spielefilmetechnik.de
Auch erhältlich als ePaper bei:

PC Games Hardware – Das IT-Magazin für
Gamer. Immer aktuell mit Kaufberatung,
Hintergrundartikeln und Praxistipps.
LEIDENSCHAFT FÜR GAMES

www.pcgameshardware.de • www.pcghx.de
DAS HARDWARE-MAGAZIN FÜR PC-SPIELER
HARDCORE
FÜR
SCHRAUBER
QR-Code scannen
und hinsurfen!
Neue Ausgabe jetzt am Kiosk erhältlich
oder einfach online bestellen unter:
www.pcgh.de/shop
Auch erhältlich als ePaper bei:

Das große Handbuch für
WORDPRESS
Einsteiger- und Expertenwissen für bessere Blogs
Grundlagen
4 Passenden Webhoster finden
4 Sicherheit für Ihr Blog
4 Performance überwachen
Themes
4 Das richtige Design
4 Anpassen für Mobilgeräte
4 Mit Photoshop selber machen
Plug-ins
4 Die besten Plug-ins
4 Module bearbeiten
4 Ihr Blog optimieren
Tuning
4 Individuelle Blog-Stile
4 Typographie von A bis Z
4 Retro-Design
HTML5/CSS3
4 Infografiken erstellen
4 CSS-Header
4 Suchmaschinenoptimierung