KERIKERI WORDPRESS THEME DOKUMENTATION - DIE THEME-INSTALLATION

Kerikeri WordPress Theme Dokumentation
1. Die Theme-Installation
Nach dem erfolgreichen Themekauf erhältst du eine Email mit deinem individuellen Kerikeri-Theme Down-
load-Link. Über diesen Link kannst du dir den Kerikeri Theme-Ordner (.zip Datei) herunterladen.
(Standardmäßig sind 9 Downloads des Themes möglich. Benötigst du weitere Downloads, sag bitte einfach
in einer kurzen Email-Nachricht an kontakt @elmastudio.de Bescheid.)

In dem kerikeri.zip Haupt-Ordner befinden sich die beiden Ordner mit der standard Kerikeri-Version und der
Kerikeri Dark-Version. Du kannst beide Themes installieren und ausprobieren oder dich gleich für eine der
Theme-Versionen entscheiden.

Installation über den WordPress Adminbereich
Um das Kerikeri-Theme direkt im WordPress-Adminbereich zu installieren, musst du den Theme-Ordner
"kerikeri" oder "kerikeri-dark" erst in einen ZIP-Ordner packen. Dann kannst du im WordPress-Adminmenü
auf Design/Themes klicken. Hier findest du neben dem Tab „Themes verwalten“ den Tab „Themes ins-
tallieren“. Ganz oben in der Leiste wählst du jetzt den Punkt „Hochladen“.

Wähle die Datei kerikeri.zip (oder kerikeri-dark.zip) aus und klicke auf den Button „Jetzt installieren“.
Nach der erfolgreichen Installation kannst du direkt die Option „Aktivieren“ wählen. Dein Kerikeri-Theme
ist dann das aktuell aktive Theme deines Blogs.

Installation via FTP-Programm
Alternativ kannst du den entzipten Kerikeri Theme-Ordner auch mit Hilfe eines FTP-Programms (z.B. dem
kostenlosen Programm Filezilla) auf deinen Serverplatz hochladen. Dafür musst du den kerikeri-Ordner
(oder kerikeri-dark Ordner) in den WordPress Installations-Ordner .../wp-content/themes/ hochladen.

Nach dem Upload des Theme-Ordners findest du Kerikeri in der Vorschau-Ansicht unter Design / Themes
bei den verfügbaren Themes in deinem WordPress-Adminbereich. Dort kannst du das Theme aktivieren.

2. Die Theme-Optionen Seite
Auf der Theme-Optionen Seite im WordPress im Adminbereich (Design/Theme Optionen) hast du ver-
schiedene, praktische Möglichkeiten zur Anpassung und Individualisierung.

2.1. Individuelle Link- und Link-Hoverfarbe
Ganz oben in den Theme-Option kannst du entweder über einen Hex-Farbwert (#......) oder per Klick in das
Farbfeld über den Farbwähler deine eigene Haupt-Linkfarbe auswählen. In der nächsten Option kannst du
dann die Link-Hoverfarbe (Farbe bei Rollover mit der Maus) auswählen.

2.2. Eigenes Logobild
Über die Theme-Optionenseite kannst du auch dein eigenes Logobild hochladen (jpg oder transparentes
png). Das Format deines Logos kannst du frei wählen.

Lade dein vorbereitetes Logobild dann über den Link "WordPress-Mediathek" in die WordPress-Mediathek
hoch und kopiere dort die Datei-URL deines Logos. Diese URL kannst du jetzt in den Theme-Optionen
einfügen. Vergiss dabei nicht, in den Theme-Optionen auf „Änderungen übernehmen“ zu klicken.

2.3. Farbe der Top-Leiste
In der nächsten Theme-Option kannst du die Farbe deiner Top-Leiste (Navigation und Such-Formular) wäh-
len. Z.B. kannst du statt des dunklen Graus auch eine Farbe wählen.

2.4. Widget Hintergrundfarbe
Neben der Hintergrund-Farbe der Top-Leiste kannst du auch die Hintergrund-Farbe deiner Widgets anpas-
sen. Da die Textfarbe in den Widgets weiß ist, solltest du hier keine allzu helle Farbe wählen. So bleibt der
Widgettext immer angenehm lesbar.

2.5. Favicon und Apple Touch Icon
Um ein Favicon für deine Webseite zu nutzen, musst du ein 16x16 Pixel großes Icon-Bild erstellen und mit
Hilfe eines Favicon Online-Generators (z.B. faviconr.com) eine .ico Favicon-Datei erstellen. Diese musst
du dann via FTP in deinen Theme-Ordner hochladen und die Favicon Datei-URL in deinen Theme-Optio-
nen eintragen.

Im Kerikeri-Theme kannst du außerdem ganz leicht ein Apple Touch Icon nutzen. So kann dein Blog mit
einem schönen Icon auf dem Home-Screen eines iPhones oder iPads abgespeichert werden.

Für das Apple Touch Icon benötigst du ein 128x128 Pixel großes png-Bild. Dieses kannst du über die
WordPress-Mediathek hochladen. Deine Datei-URL kopierst du dann und fügst sie in den Theme-Optionen
bei "Eigenes Apple Touch Icon" hoch. Du musst übrigens keine abgerundeten Ecken oder Glanzeffekte
erstellen. Diese werden von Apple automatisch hinzugefügt.

2.6. Footer Credittext anpassen
Auf der Theme-Optionenseite kannst du außerdem den Footer-Credittext für deinen Blog anpassen
und einen individuellen Footer-Text in das Feld „Individueller Footer Credit-Text“ eintragen. HTML z.B. Linktext ist ebenfalls möglich.

2.7. Teilen-Buttons (Twitter, Google+, Facebook)
Über die Theme-Optionseite kannst du auch die offiziellen Teilen-Buttons von Twitter, Google+ und Face-
book für deinen Blog aktivieren. Optional kannst du die Buttons entweder für Artikel auf der Blog-Startseite
und auf Einzelseiten oder nur auf den Artikel-Einzelseiten sowie auf WordPress-Seiten verwenden.

3. Individuelles Menü anlegen
Unter Design / Menüs kannst du das Haupt-Menü (Footerbereich des Themes) anpassen. Da Kerikeri ein
mobile-first Blog-Theme ist, bietet das Theme nur eine reduzierte Seiten-Navigation im Footer an (Unter-
menüpunkte sind nicht möglich). Diese Seiten-Navigation ist z.B. sehr gut für eine Kontakt- und Archiv-
Seite oder ein Impressum geeignet.

Nachdem du dein individuelles Menü angelegt hast (den Namen für dein Menü kannst du frei wählen, z.B.
Main Menu), musst du es noch unter "Anordnung im Theme" als Haupt-Navigation auswählen und dei-
ne Einstellung speichern.

Die Kerikeri Topleiste
Statt der traditionellen Seiten-Navigation bietet Kerikeri die Navigationspunkte zum About-Widget und dem
Tagcloud-Widget (Tags oder Kategorien) sowie ein Suchformular zum weiteren Erkunden der Blog-Inhalte
in der Topleiste an. Sobald du die entsprechenden Widgets unter Design / Widgets integriert hast, werden
die Menü-Punkte "Über" und "Schlagwörter" in der Top-Leiste integriert.

4. Individueller Hintergrund
Der Hintergrund des Kerikeri-Themes kann anpasst werde, indem du unter Design / Hintergrund eine
neue Hintergrundfarbe wählst oder ein Hintergrundbild oder Musterbild hochlädst.

Wenn du dich für ein Hintergrundbild entscheidest solltest du darauf achten, dass die Dateigröße deines
Bildes nicht zu groß ist, da deine Webseite sonst unnötig lange für das Laden im Browser benötigt. Das
ist ganz besonders auf mobilen Geräten mit oft langsamen Verbindungen nicht optimal. Besser ist es, ein
kleineres Muster-Bild (ca. 100x100 Pixel) zu erstellen und dieses über die Kacheln-Option vertikal und
horizontal zu wiederholen.

Sehr schöne, bereits vorbereitete kostenlose Musterbilder kannst du z.B. auf der Webseite subltepatterns.
com herunterladen.

5. Widgets
Im Kerikeri-Theme kannst du die Haupt-Widgetbereiche "About-Widgetbereich" und "Schlagwörter-Widget-
bereich" nutzen, um direkt unterhalb des Artikelbereiches ein About-Widget und ein Schlagwort-Wolken-
Widget zu integrieren. Sobald das Widget integriert ist, wird in der Kerikeri-Topleiste ein Navigations-Punkt
mit Icon zu dem jeweiligen Widget integriert. Auf diese Weise können deine Leser schnell mehr über dich
und deine Blog-Inhalte erfahren.

(Die Haupt-Widgets "Über" und "Schlagwörter" im Kerikeri-Theme)

5.1. Das About-Widget
Im About-Widget kannst du ein Bild von dir einfügen. Dazu lädst du einfach ein Bild über die WordPress
Mediathek hoch und fügst die Bild-URL in das About-Widget ein. Außerdem kannst du einen About-Text
(links im Format Das ist der Linktext sind möglich)
einfügen und zu deinen sozialen Profilen (z.B. Facebook, Twitter, Google+, Pinterest usw.) linken. Füge
einfach die URLs zu deiner sozialen Profile ein, die du nutzen möchtest und lasse die übrigen Felder leer.

5.2. Schlagwörter-Widget
Als zweites Haupt-Widget kannst du in den Schlagwörter-Widgetbereich das "Schlagwörter-Wolke" Widget
einfügen. Hier kannst du auswählen, ob du du du Tags (die Schlagwörter) oder lieber alle Kategorien dei-
nes Blogs anzeigen möchtest. Den Titel des Widgets kannst du auch frei wählen.

(Sobald du das Widget integriert hast, wird in der Top-Leiste der Navigationspunkt "Schlagwörter" integriert.)

5.3. Zusätzliche Widget
Im "Zusätzlichen Widgetbereich" kannst du alle weiteren WordPress-Standard-Widgets einfügen. Diese
werden unter den Haupt-Widgets "About" und "Schlagwörter" angezeigt. Im zusätzlichen Widget-Bereich
hast du auch die Option, die Widgets "Flickr" und "Featured Video" zu nutzen, um ein YouTube- oder
Vimeo-Video oder eine Vorschau deiner Flickr-Fotos zu zeigen.

6. Artikel-Formatvorlagen (Post Formats)
Im Kerikeri-Theme kannst du neben Standard-Artikeln die folgenden WordPress Artikel-Formatvorlagen
nutzen:

Bild, Galerie, Video, Audio, Link, Zitat, Kurzmitteilung, Status, Chatprotokoll

Das Artikel-Format wählst du im Feld "Formatvorlage" aus. Auf diese Weise kannst du deinen Blog lebendi-
ger gestalten und z.B. auch ein nur einzelnes Zitat, ein Bild oder ein Video veröffentlichen.

Die Nutzung der Artikel-Formate:

6.1. Zitat
Für die Formatierung von Zitaten kannst du im WordPress Text-Editor das Symbol „Zitat“ bzw. im HTML-
Editor den b-quote Button auswählen, nachdem du deinen Zitat-Text markiert hast. Der Code im HTML-
Editor sollte dann folgendes Format haben:

Der Zitat-Text hier...

Möchtest du außerdem den Autor des Zitats angeben, kannst du im HTML-Editor den cite-tag hinzufügen:
Der Zitat-Text hier...
Zitat-Autor

6.2. Video
Für Videos kannst du einfach den entsprechenden YouTube- oder Vimeo-Einbetten-Code (iframe) in den
Artikel einfügen. Falls du Probleme mit der direkten Einbindung des iframe-Codes hast (dieser wird in
manchen Fällen automatisch nach dem Speichern wieder gelöscht), kannst du das WordPress-Plugin
"Iframe" nutzen (http://wordpress.org/extend/plugins/iframe/). Mit Hilfe des Plugins kannst du dann ei-
nen iframe-Shortcode im Format [iframe src="http://player.vimeo.com/video/3261363" width="100%"
height="480"] für die Einbindung von Videos nutzen.

6.3. Link
Für die Anzeige von Links im Link Artikel-Format kannst du folgendes Format und die CSS-Klasse "link"
im HTML-Editor verwenden:

Das ist der Linktext

Der Pfeil hinter deinem Link-Text wird im Kerikeri-Theme automatisch mit einfügen.

6.4. Bildergalerie
Für das Galerie-Artikelformat kannst du ganz einfach mehrere Bilder über die Hochladen/Einfügen-Op-
tion (oberhalb des Editor-Feldes) in einen Artikel hochladen. Dann wählst du im Image-Menü die Option
„Bildergalerie“ aus. Der Shortcode [gallery] wird so automatisch in einen Artikel eingefügt.

Möchtest du alle Galerie Vorschau-Bilder in einem einheitlichen Format einbinden, solltest du in deinen
WordPress Admin-Einstellungen unter Einstellungen / Mediathek / Größe der Miniaturbilder dein be-
vorzugtes Miniaturbild-Format (z.B. 200x200px) und die Option "Beschneide das Miniaturbild auf die exakte
Größe" auswählen.

Weitere Optionen zur Verwendung der WordPress-Bildergalerie findest du auch im Elmastudio-Artikel:
http://www.elmastudio.de/wordpress/die-standard-bildergalerie-von-wordpress-nutzen/

6.5. Bild
In das Bild-Artikelformat kannst du einfach wie gewohnt über den "Hochladen"Einfügen" Media Upload-
Button ein Bild (mit oder ohne Bildbeschreibung) in einen Artikel einbinden.

Standardmäßig werden Bilder ohne Umrahmung angezeigt. Möchtest du Bilder mit einem leichten, hell-
grauen Rahmen anzeigen, kannst du die CSS Klasse class="img-border" im HTML-Editor zu deinem img
hinzufügen.

6.6. Audio
Für die Integration eines Audio-Streams eignet sich z.B. das Soundcloud-iframe Widget von
soundcloud.com. Mit Hilfe des Soundcloud Shortcode WordPress-Plugins funktioniert die Einbindung des
Audio-Streams besonders leicht (http://wordpress.org/extend/plugins/soundcloud-shortcode/).
Das Soundcloud-Widget ist auch für responsive Themes geeignet und funktioniert auch auf allen
iOS-Geräten (iPhone, iPad).

6.7. Chat-Protokoll
Um ein Chatprotokoll zu erstellen, musst du eine ul (unordered) Liste mit der Klasse "chat" erstellen und
den Listen-Elementen jeweils abwechselnd die Klasse "odd" und "even" geben. Siehe folgendes Beispiel:

     Person 1 spricht
     Person 2 spricht
     Person 1 spricht
     Person 2 spricht
     Person 1 spricht
     Person 2 spricht

7. Text-Styles
Um deine Texte optisch interessanter zu gestalten, kannst du neben Zitaten (b-quote) oder Listen auch
noch weitere Text-Styles im Kerikeri-Theme nutzen:

Um ein Textelement als Blocksatz umzusetzen, kannst du die CSS-Klasse class="justify" einfügen:
Dein Text hier...

Für einen etwas größer angezeigten Introtext zu Beginn eines Artikels kannst du die CSS-Klasse
class="intro" einfügen:
Dein Artikel Intro-Text hier...

8. Autorenfeld unter Einzelartikeln
Um auf der Einzelseite von Standard-Format Artikeln ein Autorenfeld anzuzeigen, kannst du einfach die
"Biografischen Angaben" unter Benutzer/Dein Profil ausfüllen. Du kannst dort auch Links einfügen (im For-
mat Link Text). Das Gravatar des Autors wird automatisch integriert.

9. Verschachtelte Kommentare
Kerikeri ist für die Darstellung von verschachtelten Kommentaren (threaded comments) vorbereitet. Eventu-
ell musst du unter Einstellungen/Diskussion noch die Option für verschachtelte Kommentare aktiveren und
die Anzahl der möglichen Ebenen festlegen.

10. Vorbereitete externe WordPress-Plugins
Für die Verwendung von Formularen (z.B. einem Kontaktformular) haben wir die CSS-Styles für das
Contact Form 7 Plugin bereits vorbereitet (http://wordpress.org/extend/plugins/contact-form-7/).

Wenn du eine eigene Archiv-Seite für die Übersicht aller Artikel deines Blogs verwenden möchtest, kannst
du das Plugin „Smart Archives Reloaded“ installieren. Die Styles sind ebenfalls schon für das Kerikeri-
Layout angepasst (http://wordpress.org/extend/plugins/smart-archives-reloaded/). Nach der Aktivierung des
Plugins musst du nur noch den Shortcode [smart_archives] auf einer neu angelegten Archiv-Seite eintra-
gen.

Falls du längere Code-Schnipsel in deinen Artikeln anzeigen möchtest, solltest du das Syntax Highlight
Evolved Plugin verwenden. Auf diese Weise werden deine Code-Schnipsel auch auf mobilen Geräten opti-
mal angezeigt (http://wordpress.org/extend/plugins/syntaxhighlighter/).

11. Shortcodes (für Mehrspaltigkeit Info-Boxen und Buttons)
Alle Shortcodes-Codes kannst du dir auch direkt in der Kerikeri der Live Demo-Seite kopieren:
http://themes.elmastudio.de/kerikeri/shortcodes/

Um Text zweispaltig anzulegen kannst du folgende Shortcodes in deinen Artikeln oder Seiten nutzen:

[two_columns_one]

Text der linken Textspalte hier...

[/two_columns_one]

[two_columns_one_last]

Text der rechten Textspalte hier...

[/two_columns_one_last]

[divider]

Um Text in drei Spalten anzulegen, kannst du folgende Shortcodes verwenden:

[three_columns_one]

Text der linken Textspalte hier...

[/three_columns_one]

[three_columns_one]

Text der mittleren Textspalte hier...

[/three_columns_one]

[three_columns_one_last]

Text der rechten Textspalte hier...

[/three_columns_one_last]

[divider]

Um Text in vier Spalten anzulegen verwendest du folgende Shortcodes:

[four_columns_one]

Text der ersten Textspalte hier...

[/four_columns_one]

[four_columns_one]

Text der zweiten Textspalte hier...

[/four_columns_one]

[four_columns_one]

Text der dritten Textspalte hier...

[/four_columns_one]

[four_columns_one_last]

Text der vierten Textspalte hier...

[/four_columns_one_last]

[divider]

Den [divider] Shortcode kannst du nutzen um die Mehrspaltigkeit zu beenden, ohne dass die nächste Text-
zeile in den oberen Text hinein fließt.

Für die Info-Boxen in verschiedenen Farben kannst du folgende Shortcodes einsetzen:

[yellow_box]dein Infotext hier...[/yellow_box]
[red_box]dein Infotext hier...[/red_box]
[green_box]dein Infotext hier...[/green_box]
[white_box]dein Infotext hier...[/white_box]
[blue_box]dein Infotext hier...[/blue_box]
[lightgrey_box]dein Infotext hier...[/lightgrey_box]

[grey_box]dein Infotext hier...[/grey_box]
[dark_box]dein Infotext hier...[/dark_box]
[grey_box]dein Infotext hier...[/grey_box]

Für Buttons in verschiedenen Farben und Größen kannst du folgende Shortcodes verwenden:

[button link="URL" color="red"]Roter Button[/button]

[button link="URL" color="green" target="blank" size="large"]Großer Button[/button]

[button link="URL" color="yellow" size="small"]Kleiner Button[/button]

Als Button-Farbe beim Wert color kannst du red, green, blue, yellow, grey oder black eintragen.

12. Theme-Übersetzung
Das Kerikeri-Theme ist für die Übersetzung in weitere Sprachen vorbereitet. Am besten verwendest du das
WordPress-Plugin „Codestyling Localisation“ (http://wordpress.org/extend/plugins/codestyling-localizati-
on/), wenn du das Theme in eine weitere Sprache übersetzen oder eine Übersetzung anpassen möchtest.

13. Child Theme für individuelle Theme-Anpassungen
Falls du Kerikeri über die Theme-Optionen hinaus individuell anpassen möchtest (du z.B. die Styles in
der style.css Datei ändern willst), solltest du am besten ein eigenes Child-Theme für deine Anpassungen
anlegen. Auf diese Weise gehen deine eigenen Anpassungen bei einem späteren Update von Kerikeri
nicht verloren bzw. werden überschrieben.

Auf der Kerikeri-Themeseite (http://www.elmastudio.de/wordpress-themes/kerikeri/) unter Theme Features
(ganz unten) kannst du dir einen vorbereiteten Child-Theme Ordner herunterladen. So kannst du schnell
mit deinen Anpassungen loslegen.

Fragen zum Kerikeri-Theme
Wenn du eine Frage zu den Funktionen des Themes hast, kannst du diese am besten in einem Kommentar
auf der Kerikeri Theme-Seite (http://www.elmastudio.de/wordpress-themes/kerikeri/) oder auch direkt per
Nachricht über unser Kontaktformular (http://www.elmastudio.de/kontakt/) stellen. Bitte habe Verständnis,
dass wir leider aus zeitlichen Gründen keine Fragen zu individuellen Theme-Anpassungen beantworten
können.