Renkon Dokumentation

Video Tutorial

Renkon Bild-Maße:
– Miniaturbilder: mind. 800 Pixel Breite oder größer
(siehe Einstellungen / Mediathek, für ältere Artikel hilfreich: Regenerate Thumbnails)
– Artikel-Breite Standard: 720 Pixel
– Artikel-Breite Bild: frei wählbar (je nach Größe des Bildes)
– Headerbild: 1440 x 900 Pixel (festes Format)

1. Theme Installation

Nach dem erfolgreichen Themekauf erhältst du eine Email mit deinem individuellen Download-Link. Über diesen Link kannst du dir den Renkon Theme-Ordner (.zip Datei) herunterladen.

1.1. Installation über den WordPress Adminbereich

Um das Renkon-Theme direkt über den WordPress-Adminbereich zu installieren, klickst du im WordPress-Admin-Menü auf Design / Themes. Hier findest du neben dem Tab Themes verwalten den Tab Themes installieren. Ganz oben in der Leiste wählst du jetzt den Menü-Punkt Hochladen.

Der Renkon Theme-Ordner muss für das Hochladen direkt über den WordPress-Adminbereich immer noch im .zip-Format sein. Wähle also die Datei renkon.zip aus und klicke auf den Button Jetzt installieren. Nach der erfolgreichen Installation klickst du auf die Option Aktivieren. Dein Renkon-Theme ist jetzt das aktuell aktive Theme deiner Webseite.

1.2. Installation via FTP-Programm

Alternativ zur Installation des Themes direkt im Adminbereich kannst du den entzipten Renkon Theme-Ordner auch mit Hilfe eines FTP-Programms (z.B. dem kostenlosen Programm Filezilla) auf deinen Serverplatz hochladen. Dafür musst du den kompletten Theme-Ordner in den WordPress Installations-Ordner …/wp-content/themes/ hochladen.

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

2. Großes Headerbild

Um ein großes Headerbild auf deiner Blog-Startseite zu zeigen, kannst du bei Design / Kopfzeile entweder eines der Standard-Headerbilder auswählen oder dein eigenes Headerbild im Format 1440 x 900 Pixel (jpg oder png) hochladen. Du solltest darauf achten, dass die Dateigröße deines Bildes nicht zu groß ist.

Den Slogan-Text für das Headerbild kannst du dann über die Theme-Optionenseite (siehe Design / Theme-Optionen) hinzufügen.
Nach Oben ↑

3. Theme-Optionen

Nach der Installation kannst du loslegen, das Renkon-Theme für deinen Blog einzurichten. Über den Menüpunkt Theme-Optionen (siehe Design / Theme Optionen) findest du verschiedene, praktische Möglichkeiten zur Anpassung und Individualisierung des Themes (Screenshot der Theme-Optionenseite).

3.1. Eigene Farben

Ganz oben auf der Theme-Optionseite kannst du entweder über einen Hex-Farbwert (z.B. #333333) oder per Klick in das Farbfeld über den Farbwähler deine eigene Linkfarbe und eine eigene Haupt-Hintergrundfarbe wählen. Bei der Hintergrundfarbe solltest du darauf achten, dass diese nicht zu dunkel ist, da sonst Texte nicht mehr gut lesbar sind.

3.2. Headerbild-Slogan

Ein besonders Highlight von Renkon ist das große Headerbild-Feature. Du kannst dein Headerbild (Format 1440x900px) über Design / Kopfzeile hochladen oder eines der Standard-Headerbilder nutzen. Den großen Text-Slogan kannst du dann über „Header Slogan Text“ eintragen (du kannst Standard-HTML z.B. für Links nutzen). Deinen Untertitel kannst du bei „Header-Slogan Untertitel“ eintragen (auch hier sind wieder Links möglich). Wenn du ein sehr helles Bild gewählt hast, kannst du die Schriftfarbe außerdem noch auf „Schwarz“ setzen.

3.3. Große Vorschaubilder, Logo, Artikel-Exzerpte & eigene Texte

Um Bilder im standardmäßig 4-spaltigen Grid über die doppelte Bildbreite anzuzeigen, kannst du entweder eine Kategorie „featured“ anlegen oder du trägst deine gewünschte Kategorie unter „Artikel mit großen Vorschaubildern“ ein. Alle Artikel dieser Kategorie werden dann in doppelter Größe auf deiner Blogstartseite angezeigt.

Weiter kannst du auf der Theme-Optionenseite ein eigens Logobild hochladen (Datei-Format: transparentes PNG). Da Renkon in der Desktop-Ansicht eine feststehende Headerleiste hat, sollte dein Logobild eine Höhe von max. 35px haben. Die Breite ist flexibel wählbar.

Möchtest du nicht den more-link in einem Artikel setzen, um diese auf der Blog-Startseite zu kürzen, kannst du als nächstes die automatische Exzerpt-Option wählen. Bei dieser Ansicht werden alle Artikel automatisch gekürzt und ein Weiterlesen-Link wird angezeigt. Allerdings werden bei der automatischen Exzerpt-Option keine Artikel-Vorschaubilder (Thumbnails) angezeigt.

Direkt in den Theme-Optionen kannst du auch einen eigenen Footercredit-Text angeben. Standard HTML (z.B. Links) ist dabei möglich. Außerdem kannst du einen Text mit Links zu deinen sozialen Profilen (z.B. Twitter, Facebook oder Google+) für deine Autorenbox auf Einzelartikeln eintragen. Du kannst z.B. eintragen:

<a href="https://twitter.com/deintwittername">Twitter</a>, <a href="http://www.facebook.com/deinfacebookname">Facebook</a> und <a href="http://pinterest.com/deinpinterestname/">Pinterest</a>
3.4. Favicon und Apple Touch Icon

Als weitere Theme-Option kannst du ein eigenes Favicon für deine Webseite hochladen. Erstelle einfach ein 16×16 Pixel großes jpg-Bild und wandle es mit Hilfe eines Online Favicon-Generators (z.B. www.faviconr.com) in das benötigte .ico Dateiformat um. Die favicon.ico Datei lädst du dann über ein FTP-Programm (z.B. Filezilla) in deinen Renkon-Theme Ordner hoch und fügst die entsprechende Datei-URL in das Textfeld Eigenes Favicon ein.

Zusätzlich kannst du ein Apple Touch Icon (Icon zum Speichern von Webseiten auf dem Home Screen z.B. eines iPads oder iPhones) einfügen, indem du ein 128×128 Pixel großes PNG-Bild erstellst, dieses über die Mediathek hoch lädst und die Bild-URL in das Textfeld „Apple Touch Icon“ einfügst. Abgerundete Ecken oder ein Glossy-Effekt werden auf Apple Geräten automatisch für dein Icon erstellt.

3.5. Teilen Buttons (Twitter, Google+, Facebook, und Pinterest)

Über die Theme-Optionseite kannst du den Teilen-Button mit den offiziellen Buttons von Twitter, Google+, Pinterest und Facebook für deinen Blog aktivieren. Optional kannst du die Buttons entweder auf den Artikel-Einzelseiten oder auf WordPress-Seiten einsetzen.
Nach Oben ↑

4. Extra Typografie-Styles
Das Renkon-Theme bietet einige extra Styling-Optionen, um Artikel-Texte besonders ansprechend zu gestalten.

4.1. DropCaps

Um den ersten Buchstaben eines Text-Absatzes groß zu schreiben, setzt du den Buchstaben in einen span-Tag mit der CSS-Klasse „dropcaps“:

<span class="dropcaps">D</span>ropcaps sind sehr elegant.
4.2. Highlighted Text

Text in Großbuchstaben kann genutzt werden, um einen bestimmten Abschnitte eines Satzes zu betonen. Du musst dazu deinen Text in einen span-Tag mit der CSS-Klasse „highlight“ setzen:

<span class="highlight">Das ist farbiger, betonter Text</span> und hier geht der Text im normalen Fließtext weiter.
4.2. Highlighted Text

Text in Großbuchstaben kann genutzt werden, um einen bestimmten Abschnitte eines Satzes zu betonen. Du musst dazu deinen Text in einen span-Tag mit der CSS-Klasse „highlight“ setzen:

<span class="highlight">Das ist farbiger, betonter Text</span> und hier geht der Text im normalen Fließtext weiter.
4.3. Rand-Notizen

Zusätzliche Rand-Notizen zu einem Text-Absatz können mit Hilfe eines p-Tags mit den CSS-Klassen „sidenote-left“ oder „sidenote-right“ rechts- oder links-bündig eines Text-Absatzes angezeigt werden. Setze deine Rand-Notiz einfach vor den Haupt-Textabsatz:

<p class="sidenote-left"><span>Notiz-Überschrift</span>Dann folgt der Notiz-Text...</p>

Anschließend folgt der weitere Haupt Text-Absatz...
4.4. Fußnoten

Um Fußnoten zu setzen, kannst du unter deinem Artikel-Inhalt eine ul- oder ol-Liste mit (ul ist nicht nummeriert, ol ist nummeriert) mit der CSS-Klasse „notes“ anlegen und deine Fußnoten dort eintragen.

<ul class="notes">
<li>erste Notiz...</li>
<li>zweite Notiz...</li>
<li>dritte Notiz...</li>
</ul>

Nach Oben ↑

5. Individuelle Menüs

Es gibt zwei Menü-Optionen im Renkon-Theme. Die Haupt-Navigation ganz oben in der rechten Off-Canvas Sidebar und eine optionale, rechtsbündige Footer-Navigation. Nach der Theme-Installation werden in der Haupt-Navigation standardmäßig alle Seiten deiner WordPress-Seite angezeigt. Über die Option Design / Menüs im WordPress-Adminbereich kannst du ein individuelles Menü für deine Haupt-Navigation aus individuellen Links, Kategorien, Schlagwörtern, Artikelformaten oder Seiten anlegen. Über das Feld Anordnung im Theme (oben rechts bei Menüs) musst du dein individuell angelegtes Menü jetzt nur noch als Haupt-Navigation auswählen und speichern.

Als zweites, optionales Menü kannst du eine Footer-Navigation anlegen. Auch dieses Menü musst du erst wieder unter Anordnung um Theme als Footer-Navigation auswählen und speichern. In der Footer-Navigation können keine Unter-Menüpunkte angezeigt werden.
Nach Oben ↑

6. Widgets

Renkon bietet unter Design / Widgets praktische Widget-Optionen für den rechten Off-Canvas Sidebarbereich an. Neben des Standard-Widgets von WordPress und den Jetpack-Plugin Widgets (Twitter, Facebook oder „Blog via Email-Abo“) kannst du die folgenden, individuellen Renkon-Widgets nutzen:

6.1. Renkon Social Links

Mit dem Social Links-Widget kannst du mit schönen Icons auf deine sozialen Profile (wie Facebook, Twitter, Flickr,
YouTube und viele mehr) verlinken. Um das Social Links-Widget zu nutzen, trägst du einfach die entsprechenden URLs deiner Profile für die Dienste ein, die du nutzen möchtest. Alle anderen Felder lässt du einfach leer.

6.2. Renkon Flickr

Im Flickr-Widget kannst du wählen, wie viele Bilder du in einer Vorschau anzeigen möchtest, ob die Bilder von einer Person oder von einer Flickr-Gruppe sein sollen und ob du die neusten Bilder oder eine zufällige Auswahl an Bildern anzeigen möchtest. Wichtig ist, dass du mit Hilfe der Webseite idgettr.com deine Flickr-ID herausfindest. Diese trägst du dann im entsprechenden Widget-Textfeld ein. Bei Flickr Profil-Link und Flickr Profil-URL kannst du unterhalb der Vorschaubilder noch einmal auf deine Flickr-Profilseite verlinken.

6.3. Renkon About

Im Renkon Über mich-Widget kannst du über die Bild-URL ein Profilbild von dir hochladen (lade dieses wieder zuerst über Mediathek / Datei hinzufügen hoch). Die Breite und Höhe deines Bildes (z.B. 180×180 Pixel, wie in der Renkon Live-Demo) gibst du dann ebenfalls im Widgetbereich an (nur die Zahlenwerte ohne die Maßeinheit px). Du kannst außerdem einen Intro-Text für dein About-Widget eintragen (dieser wird unter deinem About-Bild dargestellt) und einen weiteren, etwas längeren „Über dich“ About-Text. HTML-Elemente, z.B. Links sind möglich.
Nach Oben ↑

7. Artikel-Formatvorlagen und Beitragsbilder

Renkon unterstützt neben Standard-Artikeln die WordPress Artikelformate: Bild und Galerie. Das Artikel-Format kannst du im Feld „Formatvorlage“ beim Verfassen oder Ändern eines Beitrags auswählen. Bei Bild- und Galerie-Artikeln werden automatisch Beitragsbilder für deine Blog-Startseitenansicht erstellt. Du musst diese also nicht mehr extra angeben.

Für Artikel im Standard-Format kannst du ein extra Beitragsbild über das Feld „Beitragsbild“ im Beitrags-Adminbereich auswählen oder hochladen. Das Beitragsbild sollte mindestens 800 Pixel breit sein. Die Höhe ist flexibel.

7.1. Bild

In das Bild-Artikelformat kannst du einfach wie gewohnt über den Datei Upload-Button ein oder mehrere Bilder (mit oder ohne Bildbeschreibung) in einen Artikel einbinden. Das Format deiner Bilder kannst du frei wählen. Außerdem kannst du natürlich eine Bildbeschreibung für Bildunterschriften anzeigen.

7.2. Bildergalerie

Für das Galerie-Artikelformat kannst du ganz einfach mehrere Bilder über den Medien-Uploader Button (oberhalb des Text-Editor Feldes) in einen Artikel hochladen. Der Gallery-Shortcode wird so automatisch in einen Artikel eingefügt.

[gallery]

Als Vorschaubild deines Galerie-Artikels auf der Blog-Startseite wird automatisch das erste Bild deiner Galerie verwendet.
Nach Oben ↑

8. Seiten-Templates

Beim Anlegen oder Bearbeiten einer Seite kannst du über Attribute / Template die Renkon Seiten-Templates „Archive Page Template“ und „Fullwidth Page Template“ auswählen. Das Seiten-Template „Fullwidth Page Template“ eignet sich dabei besonders für die Nutzung der mehrspaltigen Renkon-Shortcodes.

Mit Hilfe des Archivseiten-Templates „Archive Page Template“ kannst du so ganz leicht eine eigene Archivseite für deinen Blog anlegen, auf der die wichtigsten Schlagwörter, die 50 neuesten Artikel und ein monatliches Archiv deines Blogs angezeigt wird (siehe Beispiel Archiv-Seite in der Renkon Live-Demo).
Nach Oben ↑

9. Autorenfeld unter Standard-Einzelartikeln

Um auf der Einzelseite von Standard-Format Artikeln ein Autorenfeld unter dem Artikel-Inhalt anzuzeigen, kannst du einfach die „Biografischen Angaben“ in deinem WordPress Benutzer-Profil ausfüllen. Das Gravatar-Bild des Autors wird automatisch integriert. Auf der Renkon Theme-Optionenseite hast du außerdem die Möglichkeit, auf deine sozialen Profile wie Twitter oder Facebook hinzuweisen.
Nach Oben ↑

10. Shortcodes

Im Renkon-Theme kannst du Shortcodes für mehrspaltige Texte (2- bis 6-spaltig), Infoboxen und Buttons nutzen. Beispiele und den Code zum Kopieren findest du auf der Shortcode-Beispielseite der Renkon Live-Demo.
Nach Oben ↑

11. Externe Plugins

Renkon ist für die folgenden WordPress-Plugins vorbereitet:

11.1. WP-PageNavi

Der Code für WP PageNavi ist bereits im Renkon-Theme vorbereitet. Es muss also nicht mehr, wie in der Plugin-Anleitung beschrieben, der Code in die Template-Dateien eingefügt werden.

11.2. Better WP Recent Comments

Um die Kommentare wie in der Renkon Live-Demo im Recent Comments-Widget anzuzeigen, kannst du in den Plugin-Einstellungen von BWP RC bei Template Options / Template for Comments den folgenden Code angeben:

<li class="sidebar-comment">%avatar%<div class="comment-content"><p><span class="sidebar-comment-autor"><a href="%link%" title="%post_title_attr%">%author%</a></span><br />%excerpt%</p></div></li>

Nach Oben ↑

12. Theme-Übersetzung

Renkon ist für die Übersetzung in weitere Sprachen vorbereitet. Am einfachsten ist es, das WordPress-Plugin Loco Translate, um Renkon in eine weitere Sprache zu übersetzen oder die Übersetzung anzupassen. (Wenn du deine Übersetzung auch für andere Renkon Theme-Nutzer zur Verfügung stellen möchtest, würden wir uns darüber sehr freuen.)
Nach Oben ↑

13. Child Theme

Falls du das Renkon-Theme über die Theme-Optionen hinaus individuell anpassen möchtest, solltest du am besten ein eigenes Child-Theme für deine Anpassungen anlegen. Auf diese Weise können deine Anpassungen bei einem Update des Renkon Eltern-Themes nicht verloren gehen. Du kannst dir den vorbereiteten Renkon Child-Theme Ordner herunterladen. So kannst du schnell mit deinen Anpassungen loslegen.
Nach Oben ↑

14. Dokumentation drucken oder als PDF speichern

Um die Renkon Theme-Dokumentation als PDF zu speichern oder auszudrucken, kannst du einfach den Print Friendly-Button klicken und die von dir gewünschten Optionen (z.B. Drucken mit oder ohne Bilder oder nur Ausschnitte der Dokumentation drucken) auswählen.

Print Friendly and PDFAusdrucken oder PDF speichern
Nach Oben ↑