Uku Dokumentation

Video Tutorial zur Theme Einrichtung

Uku Maße in Pixel:
• Beitragsbilder im Slider (Fullwidth): 1440 x 530
• Beitragsbilder im Slider (Fullscreen + Boxed): 1440 x 690
• Beitragsbild Fullwidth Startseiten-Section: 1440 x 530
• Beitragsbild Einzelseite „big-thumb“: 1440 x 530
• Standard-Beitragsbild: 1024 + flexible Höhe
• Standard Artikelbreite: max. 900 (große Bildschirme)
• Breite Sidebar: 400
• Logobild: 520 x 236 (Retina Version)

Wichtig: Um Artikelbilder von bereits veröffentlichten Artikeln anzupassen, bitte das Regenerate Thumbnails Plugin installieren und einmal laufen lassen. Alle für Uku benötigten Beitragsbilder werden dann automatisch für deine Webseite angepasst.

1. Theme-Installation

Nach dem erfolgreichen Theme- oder Theme Bundlekauf erhältst du eine Email mit einem individuellen Download-Link für dein Theme oder Theme Bundle.

1.1. Installation über den WordPress Adminbereich

Um das Uku-Theme direkt über den WordPress-Adminbereich zu installieren, klickst du im WordPress-Admin-Menü auf Design → Themes. Hier findest du den Button Installieren ganz oben auf der Seite. Über den Button Theme hochladen kannst du dann die uku.zip Datei von deinem lokalen Computer auswählen und installieren (bei Einzel-Themes musst du erst die uku.zip Haupt-Datei einpacken und dann die dort enthalten uku.zip Datei hochladen). Nach der erfolgreichen Installation klickst du auf die Option Aktivieren. Dein Uku-Theme ist jetzt das aktuell aktive Theme deiner Webseite.

1.2. Installation via FTP-Programm

Alternativ zur Installation des Themes direkt über den WordPress-Adminbereich kannst du den entzipten „uku“ Theme-Ordner auch mit Hilfe eines FTP-Programms (z.B. dem kostenlosen Programm Filezilla) über Web-FTP auf deinen Serverspace 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 Uku in der Vorschau-Ansicht unter Design → Themes bei den verfügbaren Themes in deinem WordPress-Adminbereich. Dort kannst du das Theme dann aktivieren.
Nach Oben ↑

2. Einstellungen im Customizer

Als erstes kannst du dir einen kurzen Überblick über die Optionen im Customizer (unter Design → Customizer) machen. Du findest neben den allgemeinen Customizer-Optionen die drei zusätzlichen Punkte:
– Theme Optionen
– Blog Startseite
– Shop Startseite (wenn WooCommerce installiert ist)

uku-customizer-de

Die drei Punkte haben dann wieder jeweilige Unterpunkte unter denen du alle theme-spezifischen Einrichtungsoptionen findest.
Nach Oben ↑

3. Theme Optionen (allgemein)

Unter Design → Customizer → Theme Optionen findest du allgemeine Möglichkeiten zur Anpassung des Uku-Themes. Um einen der drei unterschiedlichen Designstile von Uku zu wählen, kannst du als erstes unter Design Stil zwischen standard (siehe Taupo Demo), neo (siehe Pirongia Demo) und serif (siehe Ruapuke, Apia, Nadi und Tikioki Demo) wählen. Hier gehts zur Übersicht der Uku Live Demos.

Unter Allgemein kannst du die Position und die Sichtbarkeit der Sidebar bestimmen, die Kommentare auf Einzel-Beitragseiten hinter einem Kommentar-Button verbergen und deinen Footer Credittext anpassen.

Im Tab Header findest du verschiedene Optionen für die Anpassung des Headerbereiches. Du kannst die Suche verbergen, die Headerschrift auf hell setzen (geeignet, wenn du die Fullscreen Slider oder Headerbild-Option nutzt). Auch die feststehende Headerleiste kannst du hier in der Farbe anpassen oder komplett verbergen.

Im Tab Bilder findest du Optionen, um die transparenten Überlagerungen bei Bildern mit Text auf dem Bild (z.B. Slider, große Blogbilder usw.) anzupassen. Du kannst die Stärke des dunklen Verlaufs anpassen oder diesen komplett verbergen (indem du den Wert auf 0 setzt). Alternativ kannst du eine komplette Bildüberlagerung wählen, und hier die Farbe und den Transparenzwert bestimmen. Auch die Textfarbe von Text auf Bildern kann angepasst werden.

Im Tab große Footer Anzeige (nur verfügbar im Standard- und Neo-Designstil) kannst du ein Bild, ein Text und einen „Call to Action“ Button einfügen, um in einem einspaltigen, großen Footerbereich etwas besonders zu featuren. Du kannst so ein Produkt (z.B. ein Ebook) von dir bewerben oder auf eine andere Webseite von dir verlinken. Alternativ kannst du den Bereich auch für einen About-Bereich im Footer nutzen. Lass deiner Kreativität freien lauf!

Ukus großer Footer Werbe-Bereich.
Uku’s großer Footer Werbe-Bereich.

3.1. Ein eigenes Logobild

Unter Design → Customizer → Website-Informationen findest du die Option ein eigenes Logobild einzufügen. Das Logobild sollte die Maße 520 x 170 Pixel haben. Diese Maße sind doppelt so groß, wie das Logobild später erscheinen wird. So ist dein Logo auch für Retina-Bildschirme optimiert. Das Format sollte möglichst ein transparentes PNG sein. Den Titel und Untertitel kannst du dann im gleichen Tab deaktivieren.

3.2. Farben

Im Tab Farben kannst du die Textfarbe deines Standard Seiten-Titels, der Standard-Hintergrundfarbe, deine Link- und Link-Hoverfarbe anpassen. Du kannst außerdem die Hintergrundsfarbe deines Footers und des Off Canvas-Bereiches anpassen, sowie die Off Canvas Textfarbe, die Front Section Hintergrundfarbe (der Section auf Hintergrund) und die Hintergrundfarbe des Newsletter-Widgets.

3.3. Headerbild

Anstelle eines Featured Sliders kannst du auch ein großes Headerbild nutzen. Du findest die Einstellung unter Design → Anpassen → Headerbild. Du kannst auch mehrere Headerbilder einbinden, die dann bei jedem neuen Seitenaufruf wechseln. Außerdem kannst du wie beim Slider zwischen einem Headerbild in voller Bildschirmbreite wählen, einem Headerbild mit weißem Rand rechts und links oder einem Headerbild, dass ganz oben auf deiner Webseite anfängt. Bei diesem Fullscreen Headerbild solltest du unter Theme Optionen → Header → Headerschrift die helle Schrift-Option wählen.

Hinweis zu eigenen CSS-Anpassungen:
Über Design → Customizer → Zusätzliches CSS kannst du eigenes CSS hinzufügen und so CSS Styles des Themes überschreiben. Hilfreiche Tipps zum Thema findest du auch in unserem Blogbeitrag „Eigenes CSS in ein WordPress-Theme integrieren – so funktioniert’s“.
Nach Oben ↑

4. Die Blog-Startseite

Uku bietet auf der Blog-Startseite eine Ansicht der neuesten Blogbeiträge und eine optionale Sidebar (rechts- oder links-bündig) an. Die zusätzlichen Startseiten Sections kannst du unter Design → Anpassen → Startseite Optionen einrichten.

Die Uku Startseiten-Optionen unter Anpassen.
Die Uku Startseiten-Optionen unter Anpassen.

Unter „Allgemein“ findest du Optionen, um bestimmte Bereiche und Meta-Info der Artikel (z.B. Datum oder Autorenname) zu verbergen.

4.1. Startseiten Sections

Darunter kommen die Einstellungen-Möglichkeiten aller Startseiten Sections. Du musst natürlich nicht alle Bereiche nutzen, du kannst einfach nur die Sections ausfüllen, die du auf deiner Webseite verwenden möchtest. Hier eine Übersicht über das Layout der einzelnen Sections:

uku-post-sections

Die Anordnung der Sections kann nicht angepasst werden. Die Reihenfolge der Sections entspricht der gleichen Anordnung, die in den Optionen gezeigt wird.

4.2. Beiträge in den Sections filtern

Alle Beiträge, die in den Beitrags-Sections angezeigt werden sollen, kannst du über Kategorien oder/und Schlagwörter filtern. Möchtest du also zum Beispiel einen ein einer Section „Rezepte“ zeigen, dann musst du ein Schlagwort mit dem Namen „Rezepte“ anlegen und allen Beiträgen, die in dieser Section angezeigt werden sollen das Schlagwort „Rezepte“ geben.

Vier Beiträge mit dem Schlagwort "Videos" in der 4-spaltigen Section.
Vier Beiträge mit dem Schlagwort „Videos“ in der 4-spaltigen Section.

Wenn bereits veröffentlichten Beiträgen neue Schlagwörter geben möchtest, kannst du das am einfachsten über die Beitrags Massenbearbeitungs-Option auf der Beitrags-Übersichtsseite in deinem Adminbereich machen.

Uku Beiträge Massenbearbeitung

4.3. Der About Bereich

Im About Bereich kannst du ein Bild von Dir hochladen und einen kleinen About-Text einfügen.

Die Uku About Section unter Anpassen.
Die Uku About Section unter Anpassen.

Zusätzlich kannst du rechtsbündig ein Social Links Menü anlegen. Dazu musst du einfach ein neues Menü unter Design → Anpassen → Menüs oder Design → Menüs anlegen. Links zu deinen Social-Seiten kannst du über die Option Individuelle Links einfügen, die Icons werden dann automatisch mit angezeigt. Um dein neues Menü neben dem About-Bereich auf der Startseite anzuzeigen müsst du deinem neuen Menü jetzt noch die Menuposition „Social Menü“ geben.

Das Social Menu neben dem About Startseiten-Bereich.
Das Social Menu neben dem About Startseiten-Bereich.

Nach Oben ↑

5. Die Shop-Startseite

Die Shopstartseiten-Optionen siehst du nur, wenn du das WooCommerce WordPress-Plugin installiert und aktiviert hast. Die Shop-Startseite ist derzeit nur für den Serif-Designstil von Uku vorbereitet.

Unter Shop Startseite → Allgemein kannst du wählen, ob du den Aboutbereich und den Blogbeitragsbereich von Uku auf deiner Shopstartseite zeigen möchtest.

Weiter kannst du die fünf Shop Startseiten-Sections Produkt Kategorien, Hervorgehobene Produkte, Neueste Produkte, Bestbewertete Produkte und Reduzierte Produkte einrichten. Alle Sections sind jeweils optional und die kannst die Einstellungen der Section einfach leer lassen, wenn du eine Section nicht auf deiner Shop-Startseite nutzen möchtest.

Bei allen Sections kannst du jeweils bestimmen, ob du die Section anzeigen möchtest, welche Anzahl an Produkten (bzw. Produktkategorien) du anzeigen möchtest und wie der Titel der Section heißen soll.

Um Produkte auf der Startseite zu sehen ist es also wichtig, dass du schon ein paar Produkte in deinem WooCommerce-Shop angelegt hast und dass du deinen Produkten auch schon Kategorien oder das „Angebot“ (Sale) Label gegeben hast. Produkte kannst du in deinem Adminbereich unter Produkte → Erstellen anlegen.
Nach Oben ↑

6. Individuelle Menüs

Im Adminbereich unter Design → Menüs oder Design → Customizer → Menüs kannst du alle Menüs für das Uku-Theme einrichten. Es gibt die Option ein individuellen Hauptmenü anzulegen. Das Hauptmenü erscheint unterhalb des Uku Titels und zusätzlich im Off Canvas-Bereich (aufrufbar über das Menü-Icon). Vier weitere Menüs kannst du außerdem im Footer anlegen. Diese sind dann in einem vierspaltigen Footer Menü-Bereich sichtbar. Für die Startseiten About Section kannst du in den Menü-Optionen auch noch (wie bereits oben beschrieben) ein Social Links-Menü anlegen. Um Social Icons oben im Header und unten im Footer anzuzeigen, kannst du ein weiteres Social Menü mit „Individuelle Links“ zu deinen Social-Seiten anlegen und dieses dann in der Menüposition als „Social Icons“ markieren.

Folgende Icons sind verfügbar (via Genericons Iconfont):
Codepen, Digg, Dropbox, Facebook, Flickr, Google+, Instagram, LinkedIn, Pinterest, Path, Dribbble, PollDaddy, Pocket, Reddit, Skype, StumpleUpOn, Tumblr, Twitter, Vimeo, YouTube, WordPress.com, WordPress.org, Spotify, Feed (alle URLs mit /feed) und Email (mit mailto).

Das Social Icons Menü anlegen.
Das Social Icons Menü anlegen.

Das gleiche Menü wird auch unten im Footer angezeigt.
Das gleiche Menü wird auch im Footer angezeigt.

Nach Oben ↑

7. Widgets

Es gibt drei Widgetbereiche im Uku-Theme. Die Blog Sidebar, die Seiten Sidebar und den Off Canvas Widgetbereich. Du kannst unter Design → Widgets oder unter Design → Customizer → Widgets Widgets in diese Bereiche einfügen. Das unterste Widget in der Blog Sidebar bleibt beim Scrollen auf dem Blog oder auf Einzel-Beitragsseiten immer stehen, solange der Besucher im Blog- bzw- Beitragsbereich ist. Dieses Feature kannst du nutzen, um ein dir wichtiges Widget besonders zu highlighten.

In den Uku Live Demos nutzen wir das Mailchimp for WordPress Plugin, um das Newsletter-Formular in einem Widget anzuzeigen.

uku-fix-widget

Der Code für das von uns genutzte Formular sieht so aus (du kannst ihn einfach kopieren und bei dir in den Plugin Formular-Einstellungen einfügen):

<p>Subscribe now and save up to amazing <em><strong>Forty Percent</strong></em> on our latest Ebooks.</p>
<input class="email" type="email" name="EMAIL" placeholder="Enter your email..." required />
<input class="submit" type="submit" value="Sign Up" />
7.1. Der Off Canvas Bereich

Im Off Canvas Bereich wird standardmäßig das Hauptmenü angezeigt. So ist dein Menü auch bei Herunterscrollen der Webseite über die feststehende Headerleiste und das Menü-Icon immer erreichbar. Rechts neben dem Menü kannst du eine weitere Spalte mit Widgets einrichten.

Widgets im Off Canvas Widgetbereich.
Widgets im Off Canvas Widgetbereich.

Nach Oben ↑

8. Typografie Optionen

Du kannst eine Reihe von extra Typografie-Styles im Uku-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 (Initiale) – Um einen Textparagraph hervorzuheben, kannst du einen großen Initial-Buchstaben zu Beginn des Absatzes verwenden. Dazu musst du diesen Code im Text-Editor einfügen:

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

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.

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

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:

<p class="intro">Deinen Introtext hier einfügen…</p>

Uppercase Text – Um zum Beispiel den Anfang eines Satzes oder Absatzes zu betonen, kannst du die CSS Klasse „uppercase“ in einem span tag nutzen.

<span class="uppercase">Dein Uppercase Text hier…</p>

Nach Oben ↑

9. Benutzerdefinierte Felder

Es gibt eine Reihe praktischer benutzerdefinierter Felder im Uku-Theme. So kannst du z.B. ein großes Beitragsbild über die volle Bildschirmbreite nutzen, indem du ein ein benutzerdefiniertes Feld mit dem Namen post_class und dem Wert big-thumb im Beitrag einfügst. Um kein Beitragsbild im Einzel-Beitrag anzuzeigen, kannst du post_class und den Wert no-thumb verwenden. Für einen Intro-Text unter dem Titel von Beiträgen mit einem big-thumb kannst du ein benutzerdefiniertes Feld mit dem Namen intro und deinem Text als Wert nutzen.

Benutzerdefinierte Felder für ein großes Beitragsbild.
Benutzerdefinierte Felder für ein großes Beitragsbild.

Big Featured Post Image with intro text.
Großes Beitragsbild mit Intro-Text.

Nach Oben ↑

10. 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 Uku Live-Demo.
Nach Oben ↑

11. Fürs Theme vorbereitete Plugins

Contact Form 7 für Formulare (z.B. das Kontaktformular)
Jetpack für Teilen-Buttons, Jetpack Widgets, Ähnliche Beiträge unter Einzel-Beiträgen, Carousel Galerie-Slideshow, Bildergalerien, Formulare und Endlos-Scrollen
MailChimp for WordPress für ein Mailchimp-Newsletter Formular Widget
WP Instagram Widget für großes ein Instagram Widget im Footer oder in einer der Sidebars
WooCommerce für Online Shops
Nach Oben ↑

12. Theme-Übersetzung

Uku 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 Uku-Nutzer zur Verfügung stellen möchtest, würden wir uns sehr freuen.)
Nach Oben ↑

13. Child Theme

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

14. Dokumentation drucken oder als PDF speichern

Um die Uku 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 ↑