Kerikeri WordPress Theme Dokumentation

1. Die Theme-InstallationNach 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 AdminbereichUm 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-ProgrammAlternativ 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 SeiteAuf 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-HoverfarbeGanz 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-LeisteIn 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 HintergrundfarbeNeben 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 IconUm 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 anpassenAuf 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. <a href="linkurl">Linktext</a> 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ü anlegenUnter 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 TopleisteStatt 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 HintergrundDer 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. WidgetsIm 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-WidgetIm 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 <a href="http://linkurl.de/">Das ist der Linktext</a> 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-WidgetAls 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 WidgetIm "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. ZitatFü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:

<blockquote>Der Zitat-Text hier...</blockquote>

Möchtest du außerdem den Autor des Zitats angeben, kannst du im HTML-Editor den cite-tag hinzufügen:<blockquote>Der Zitat-Text hier... <cite><a href="http://zitatautorurl.de">Zitat-Autor</a></cite></blockquote>

6.2. VideoFü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. LinkFür die Anzeige von Links im Link Artikel-Format kannst du folgendes Format und die CSS-Klasse "link" im HTML-Editor verwenden:

<a class="link" href="http://linkurl.de/">Das ist der Linktext</a>

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

6.4. BildergalerieFü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. BildIn 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.

<img src="IMAGE-URL" alt="alt-text" title="title-text" width="850" height="600" class="img-border size-full wp-image-2414" />

6.6. AudioFü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-ProtokollUm 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:

<ul class="chat"> <li class="odd">Person 1 spricht</li> <li class="even">Person 2 spricht</li> <li class="odd">Person 1 spricht</li> <li class="even">Person 2 spricht</li> <li class="odd">Person 1 spricht</li> <li class="even">Person 2 spricht</li></ul>

7. Text-StylesUm 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:<p class="justify">Dein Text hier...</p>

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

8. Autorenfeld unter EinzelartikelnUm 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 <a href="LinkURL">Link Text</a>). Das Gravatar des Autors wird automatisch integriert.

9. Verschachtelte KommentareKerikeri 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-PluginsFü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-ÜbersetzungDas 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-AnpassungenFalls 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-ThemeWenn 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.