Zuki Dokumentation

Video Tutorial

Zuki Maße in Pixel:
• Standard Artikelbreite: 640
• Standard-Beitragsbild: 840 + flexible Höhe
• Beitragsbilder für Recent Posts Widgets Big 1 + Big 2: 1200 + flexible Höhe
• Beitragsbilder für Featured Artikel-Slider: 1200 + 800
• Breite Standard-Sidebar: 240

Wichtig: Um Artikelbilder von bereits veröffentlichten Artikeln anzupassen, bitte das Regenerate Thumbnails Plugin installieren und einmal laufen lassen. Alle fürs Zuki benötigten Artikelbilder werden dann automatisch erstellt.

1. Theme-Installation

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

1.1. Installation über den WordPress Adminbereich

Um das Zuki-Theme direkt über den WordPress-Adminbereich zu installieren, klickst du im WordPress-Admin-Menü auf Design → Themes. Hier findest du neben dem Button Installieren und dann ganz oben auf der Seite den Button Theme Hochladen.

Der Zuki Theme-Ordner muss für das Hochladen direkt über den WordPress-Adminbereich immer noch im .zip-Format sein. Wähle also die Datei zuki.zip aus und klicke auf den Button Jetzt installieren. Nach der erfolgreichen Installation klickst du auf die Option Aktivieren. Dein Zuki-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 Zuki 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 Zuki 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. Die Startseite erstellen

Zuki bietet eine Standard-Blogansicht mit einem Inhaltsbereich und einer rechtsbündigen Sidebar an. Wenn du allerdings die Zuki-Startseite mit den verschiedenen Artikel-Bereichen nutzen möchtest, musst du dir als erstes eine neue, individuelle Startseite einrichten.

Dazu erstellst du einfach eine neue, leere Seite (z.B. mit dem Titel „Start“ oder „Startseite“) und wählst für diese Seite bei „Attribute“ das Seiten-Template Front Page aus. Jetzt kannst du unter Design → Anpassen → Statische Startseite deine neue Startseite als „statische Startseite“ auswählen.

Möchtest du auch eine Standard-Blogansicht nutzen, kannst du eine weitere neue, leere Seite anlegen (z.B. mit dem Namen News oder Blog) und diese als „Beitragsseite“ auswählen.
Nach Oben ↑

3. Startseite: Featured Artikel Slider

Um einen Featured Artikel-Slider ganz oben auf deiner Startseite anzuzeigen, musst du als erstes das Jetpack WordPress-Plugin installieren, da der Slider nur mit dem „Featured Content“ Feature von Jetpack funktioniert.

Sobald du das Plugin installiert und aktiviert hast, findest du unter Design → Anpassen → Hervorgehobener Inhalt die Option, ein Schlagwort auszuwählen. Alle Artikel (bis zu 10Stück) mit diesem Schlagwort werden dann automatisch im Featured Slider angezeigt. Du kannst in der Option auch bestimmen, das Schlagwort selbst in den Artikeln nicht mehr sichtbar zu machen.

Die Artikel-Bilder für Artikel im Featured Slider müssen im Format 1200×800 Pixel sein.
Nach Oben ↑

4. Widgetbereiche und Widgets

Zuki bietet eine ganz Anzahl von Widgetbereichen und Theme-eigenen Widgets an. Du findest die Einstellungen für die Widgets under Design → Widgets oder unter Design → Anpassen → Widgets.

4.1. Blog – Sidebar Widgetbereich

Als erstes kommt die Standard-Sidebar Blog – Sidebar, ein rechtsbündige Sidebar mit einer Breite von 240 Pixel. Die Blog Sidebar wird im Standard-Bloglayout, auf Artikel-Einzelseiten und auf Blog-Archivseiten angezeigt.

4.2. Alle Startseiten-Widgetbereiche

Als nächstes kommen die Zuki Startseiten-Widgetbereiche. Hier siehst du eine Übersicht, wie die Widgetbereiche auf der Startseite angelegt sind.

Zuki Widget Areas

Du kannst alle „Zuki: Recent Posts“ Widgets in alle Startseiten-Widgetbereiche einfügen. Die Artikel werden je nach Widgetbereich ein unterschiedliches Layout und eine unterschiedliche Spalten-Anzahl haben.

Daher solltest du darauf achten, dass du die richtige Anzahl an Artikeln in deinem Widget wählst, je nachdem in welchem Widgetbereich du das jeweilige Zuki: Recent Posts Widget einfügst. Hier eine Übersicht:

Zuki: Recent Posts (Background)

Widgetbereiche einspaltig: 5-spaltig (daher Artikel-Anzahl 5, 10, 15…)
Widgetbereiche Artikelinhalt: 3-spaltig (Artikel-Anzahl 3, 6, 9,12…)
Widgetbereiche Sidebar: 1-spaltig (flexible Artikel-Anzahl)

(Hinweis: Du kannst dir eine eigene Hintergrund-Farbe für die Recent Posts Background unter Design → Anpassen → Farben wählen.)

Zuki: Recent Posts (Big 1)

1-spaltig mit großen Beitragsbildern in allen Widgetbereichen (Beitragbilder mit der mind. Artikelgröße von 1200x800px)

Zuki: Recent Posts (Big 2)
1-spaltig mit großen Beitragsbildern in allen Widgetbereichen (Beitragbilder mit der mind. Artikelgröße von 1200x800px)

Zuki: Recent Posts (Medium 1)

Widgetbereiche einspaltig: 2-spaltig (Artikel-Anzahl 2, 4, 6…)
Widgetbereiche Artikelinhalt: 4-spaltig (Artikel-Anzahl 4, 8, 12…)
Widgetbereiche Sidebar: 1-spaltig (flexible Artikel-Anzahl)

Zuki: Recent Posts (Medium 2)

Widgetbereiche einspaltig: 1-spaltig (flexible Artikel-Anzahl)
Widgetbereiche Artikelinhalt: 2-spaltig (Artikel-Anzahl 2, 4, 6, 8, 10…)
Widgetbereiche Sidebar: 2-spaltig (Artikel-Anzahl 2, 4, 6, 8, 10…)

Zuki: Recent Posts (Small 1)

Widgetbereiche einspaltig: 5-spaltig (Artikel-Anzahl 5, 10, 15 …)
Widgetbereiche Artikelinhalt: 3-spaltig (Artikel-Anzahl 3, 6, 9…)
Widgetbereiche Sidebar: 1-spaltig (flexible Artikel-Anzahl)

Zuki: Recent Posts (Small 2)

Widgetbereiche einspaltig: 3-spaltig (Artikel-Anzahl 3, 6, 9…)
Widgetbereiche Artikelinhalt: 3-spaltig (Artikel-Anzahl 3, 6, 9…)
Widgetbereiche Sidebar: 1-spaltig (flexible Artikel-Anzahl)

Weitere Zuki Widgets:

4.3. Zitat-Widget (Quote Zuki)

Das Zuki Zitat-Widget kannst du ebenfalls in alle Widgetbereiche integrieren. So kannst du einen deiner Lieblingssprüche oder Zitate auf deiner Webseite anzeigen. Du kannst einfach den Zitat-Text in das Feld eintragen und optional auch noch den Autor des Zitats angeben. Du kannst für einen Link zur Webseite des Zitat-Autors wieder HTML nutzen:

[code]
by <a href ="AuthorURL">Author Name</a>
[/code]

4.4. Social Links

Für die Social Links mit Icon und Text darunter musst du als erstes ein neues, individuelles Menü mit dem Namen „Social“ unter Design → Menüs anlegen. Du kannst die Links zu deinen sozialen Profilen mit Hilfe von „eigenen Links“ eintragen. Die URLs der folgenden sozialen Dienste werden mit Icons angezeigt:

Codepen, Digg, Dropbox, Facebook, Flickr, Google+, Instagram, LinkedIn, Pinterest, Path, Dribbble, PollDaddy, GetPocket, Reddit, Skype, StumpleUpOn, Tumblr, Twitter, Vimeo, YouTube, WordPress.com, WordPress.org, Feed (alle URLs mit /feed) und Email (mit mailto).

Jetzt kannst du wieder zurück zu deinen Widgets unter Design → Widgets gehen und das Individuelle Menü-Widget nutzen, um dein „Social“ Menü in einem Widgetbereich anzuzeigen.
Nach Oben ↑

5. Theme Optionen und Anpassungen

Unter Design → Anpassungen kannst du den WordPress-Customizer mit einer Live-Vorschau aufrufen. Hier findest du alle Theme-Optionen für das Zuki-Theme.

Im Tab Farben kannst du die Textfarbe deines Header-Titels, deine Standard-Hintergrundfarbe, die Linkfarbe, die Hintergrundfarbe für die Zuki: Recent Posts (Background) und für den ausklappbaren Header Archiv-Bereich anpassen.

Im Tab Theme kannst du die Header-Suche (oben rechts) aktivieren und den ausklappbaren Header-Archivbereich (mit einer Filter-Option nach Jahren, Autoren, Monaten, Kategorien und Schlagwörtern) aktivieren. Außerdem kannst du den Text für den Titel des Header-Archivs, den Titel des (optionalen) Footer Social Menüs und den Text für den Footer-Credittext individuell anpassen.

5.1. Eigenes Header-Logobild

Dein eigenes Logo- oder Headerbild kannst du unter Design → Kopfzeile einfügen und den Standard-Titel und Beschreibungstext dort deaktivieren, wenn du magst.

5.2. Hinweis zu eigenen CSS-Anpassungen:

Um das Theme mit eigenem CSS anzupassen, kannst du das Custom CSS Feature von Jetpack nutzen, falls du das Jetpack-Plugin sowieso bereits installiert hast. Alternativ kannst du das Plugin “Simple Custom CSS” installieren, um dein eigenes CSS Theme-unabhängig einzutragen. Ein hilfreicher Artikel mit Tipps zu CSS-Anpassungen im Theme ist auch: Eigenes CSS in ein WordPress-Theme integrieren – so funktioniert’s
Nach Oben ↑

6. Individuelle Menüs

Im Adminbereich unter Design → Menüs kannst du dir ein eigenes Haupt-Menü für deine Hauptnavigation im Headerbereich, sowie ein zusätzliches „Header Top Menü“ und ein „Footer Social Menü“ anlegen.

Du kannst ein Menü erstellen, indem du einen beliebigen Namen für dein Menü wählst und dann deine gewünschten Seiten, Links, Kategorien, Schlagworte oder Formatvorlagen in dein Menü addierst. Nachdem du deine Menüpunkte angelegt hast, musst du dein neues Menü noch unter Menü-Einstellungen unten im Menü als das jeweilige Menü markieren und speichern.
Nach Oben ↑

7. Typografie Optionen

Du kannst eine Reihe von extra Typografie-Styles im Zuki-Theme nutzen, um deine Texte noch ansprechender zu präsentieren. Hier findest du auch noch eine Übersicht der Text-Styles in der Live-Demo.

Dropcaps /Initial – Um einen Paragraph z.B. am Anfang eines Artikels hervorzuheben, kannst du einen großen Initial-Buchstaben zu Beginn des Absatzes nutzen. Dazu musst du diesen Code im HTML-Editor auf deinem Artikel oder auf deiner Seite nutzen:

[code]
<span class="dropcap">E</span>rster Buchstabe…
[/code]

Pull Quotes – Um einen Satz im Text noch einmal extra zu betonen, kannst du rechts- und linksbündige Pull Quotes im Text einfügen. Dazu musst du einfach ein oder zwei Sätze in einem p tag mit der CSS-Klasse „pull-left“ oder „pull-right“ einbinden.

[code]
<p class="pull-left">Das ist ein linksbündiger Pullquote-Text.</p>
[/code]

Wide-Content – Um extra Breiten Artikel-Inhalt von 935px statt der Standard-Arikelbreite von 700px (sehr schön für Bilder geeignet) in einem Artikel zu nutzen, kannst diesen Inhalt einfach in einem div-Container mit der CSS-Klasse „wide-content“ einbinden.

[code]
<div class="wide-content">
Dein Inhalt hier…
</div>
[/code]

Intro-Text – Du kannst einen Text-Abschnitt in einer größeren Schrift anzeigen, z.B. den ersten Absatz deines Artikels oder deiner Seite. Dazu kannst du diesen Absatz in einen p tag mit der CSS-Klasse „intro“ setzen:

[code]
<p class="intro">Deinen Introtext hier einfügen…</p>
[/code]
Nach Oben ↑

8. Shortcodes

Du kannst Shortcodes für mehrspaltige Elemente, Infoboxen und Buttons nutzen. Beispiele und alle Codes zum Kopieren/Einfügen der Shortcodes findest du auf der Shortcode-Seite der Zuki Live-Demo.
Nach Oben ↑

9. Unterstützte Plugins

Contact Form 7 für Formulare (z.B. das Kontaktformular)
Jetpack für Teilen-Buttons, Jetpack Widgets, Carousel Galerie-Slideshow, Tiled Gallery, Infinite Scroll und Featured Artikel-Slider
Simple Share Buttons Adder für Teilen-Buttons
Nach Oben ↑

10. Theme-Übersetzung

Zuki ist für die Übersetzung in weitere Sprachen vorbereitet. Am besten verwendest du das WordPress-Plugin Loco Translate, wenn du das Theme in eine weitere Sprache übersetzen oder eine Übersetzung anpassen möchtest. (Wenn du deine Übersetzung auch für andere Zuki-Nutzer zur Verfügung stellen möchtest, würden wir uns sehr freuen.)
Nach Oben ↑

11. Child Theme

Falls du Zuki ü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 Zuki Eltern-Themes nicht verloren gehen. Du kannst dir den vorbereiteten Zuki Child-Theme Ordner herunterladen. So kannst du schnell mit deinen Anpassungen loslegen.
Nach Oben ↑

12. Dokumentation drucken oder als PDF speichern

Um die Zuki 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 / PDF speichern
Nach Oben ↑