Kerikeri WordPress Theme Dokumentation

Transkript

1 Kerikeri WordPress Theme Dokumentation 1. Die Theme-Installation Nach dem erfolgreichen Themekauf erhältst du eine mit deinem individuellen Kerikeri-Theme Download-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 -Nachricht an 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 installieren. 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 verschiedene, praktische Möglichkeiten zur Anpassung und Individualisierung 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.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 Farbe der Top-Leiste In der nächsten Theme-Option kannst du die Farbe deiner Top-Leiste (Navigation und Such-Formular) wählen. Z.B. kannst du statt des dunklen Graus auch eine Farbe wählen.

3 2.4. Widget Hintergrundfarbe Neben der Hintergrund-Farbe der Top-Leiste kannst du auch die Hintergrund-Farbe deiner Widgets anpassen. Da die Textfarbe in den Widgets weiß ist, solltest du hier keine allzu helle Farbe wählen. So bleibt der Widgettext immer angenehm lesbar 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-Optionen 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 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. <a href="linkurl">linktext</a> ist ebenfalls möglich Teilen-Buttons (Twitter, Google+, Facebook) Über die Theme-Optionseite kannst du auch die offiziellen Teilen-Buttons von Twitter, Google+ und Facebook 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 (Untermenü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 deine 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 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-Widgetbereich" 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 <a href=" 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 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 deines 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 lebendiger 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: <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=" 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 ( Mit Hilfe des Plugins kannst du dann einen iframe-shortcode im Format [iframe src=" width="100%" height="480"] für die Einbindung von Videos nutzen.

6 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: <a class="link" href=" ist der Linktext</a> Der Pfeil hinter deinem Link-Text wird im Kerikeri-Theme automatisch mit einfügen Bildergalerie Für das Galerie-Artikelformat kannst du ganz einfach mehrere Bilder über die Hochladen/Einfügen-Option (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 bevorzugtes 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: 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, hellgrauen 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. 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 ( Das Soundcloud-Widget ist auch für responsive Themes geeignet und funktioniert auch auf allen ios-geräten (iphone, ipad) 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: <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 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: <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 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 Format <a href="linkurl">link Text</a>). Das Gravatar des Autors wird automatisch integriert. 9. Verschachtelte Kommentare Kerikeri ist für die Darstellung von verschachtelten Kommentaren (threaded comments) vorbereitet. Eventuell 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 ( 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 ( Nach der Aktivierung des Plugins musst du nur noch den Shortcode [smart_archives] auf einer neu angelegten Archiv-Seite eintragen. 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 optimal angezeigt ( 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: 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]

8 [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 Textzeile 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]

9 [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 ( 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 ( 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 ( oder auch direkt per Nachricht über unser Kontaktformular ( stellen. Bitte habe Verständnis, dass wir leider aus zeitlichen Gründen keine Fragen zu individuellen Theme-Anpassungen beantworten können.