Onigiri Dokumentation

Demo / Theme kaufen

Onigiri Maße in Pixel:
• Standard Artikelbreite: 580
• Standard-Beitragsbild: max. 1280 + Höhe flexibel
• Beitragsbild Portfolio: max. 1280 + Höhe flexibel
• Projekt-Inhalte in einem div-Container mit der CSS-Klasse „wide-content“: max. Breite 1280
• Beiträgs-Inhalte in einem div-Container mit der CSS-Klasse „wide-content“: max. Breite 1280

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 Onigiri Theme-Ordner (onigiri.zip Datei) herunterladen.

1.1. Installation über den WordPress Adminbereich

Um das Onigiri-Theme direkt über den WordPress-Adminbereich zu installieren, klickst du im WordPress-Admin-Menü auf Design → Themes. Hier findest du ganz oben neben dem Installieren-Button und dann auf der nächsten Seite den Theme hochladen-Button< (em>.

Der Onigiri Theme-Ordner muss für das Hochladen direkt über den WordPress-Adminbereich immer noch im .zip-Format sein. Wähle also die Datei onigiri.zip aus und klicke auf den Button Installieren. Nach der erfolgreichen Installation klickst du auf die Option Aktivieren. Dein Onigiri-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 Onigiri 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 Onigiri in der Vorschau-Ansicht unter Design → Themes bei den verfügbaren Themes in deinem WordPress-Adminbereich. Dort kannst du das Theme aktivieren.

2. Das Portfolio anlegen

Onigiri bietet einen einspaltigen, mittigen Standard-Blog an. Neben der Blog-Funktion kannst du dir auch ein eigenes, vom Blog unabhängiges Portfolio anlegen, so wie du es in der Onigiri Live-Demo sehen kannst. Um dieses Feature nutzen zu können, benötigst du das kostenlose Jetpack WordPress-Plugin.

2.1. Jetpack installieren

Jetpack ist ein WordPress-Plugin, dass von den WordPress-machern selbst entwickelt und betreut wird. Es bietet eine ganze Reihe von praktischen Features in einem kompakten Plugin (z.B. Social Media Teilen-Buttons oder schönere Bildergalerie-Optionen).

Du kannst Jetpack einfach installieren, indem du „Jetpack“ unter Plugins → Installieren → Plugins suchen eingibst und Jetpack unter den Ergebnissen auswählst.

Nachdem du Jetpack installiert hast, musst du es noch mit einem ebenfalls kostenlosen Account bei WordPress.com verbinden. Das ist nötig, um das Plugin nutzen zu können, da viele der Jetpack-Funktionen mit den Funktionen von WordPress.com verbunden sind. Du musst aber keinen Blog bei WordPress.com einrichten, sondern du kannst einfach nur ein Account mit Benutzernamen und Passwort erstellen (https://signup.wordpress.com/signup/de/?user=1). Diese Login-Daten musst du dann in deinem WordPress-Adminbereich bei „Connect Jetpack mit WordPress.com“ eintragen und schon kannst du alle Jetpack-Funktionen nutzen.

Für die Portfolio-Funktion benötigst du nur die Funktion „Custom Content Types“, alle anderen Funktionen kannst du, wenn du magst, unter Jetpack → Einstellungen verbergen.

2.2. Portfolio-Projekte anlegen

Sobald du „Custom Content Types“ aktiviert hast, siehst du in deinem Adminbereichs-Menü den neuen Menüpunkt „Portfolio“. Hier kannst du jetzt, genau wie bei Blog-Artikeln (bzw. Beiträgen) neue Portfolio-Projekte anlegen. Neben dem Inhalt deines Projekts kannst du Projektarten (das sind die Projekt-Kategorien), Projektschlagwörter und Beitragsbilder ein für deine Projekte bestimmen.

Beim Onigiri-Theme ist es wichtig, dass du deine Projekt-Beitragsbilder genau in der richtigen Größe hoch lädst, in der du sie später auf der Portfolio-Startseite in der offenen Grid-Ansicht angezeigt bekommen möchtest.

Die Beitragsbilder werden auf der jeweiligen Projekt-Einzelseite nicht wieder angezeigt. Du kannst einfach deine einzelnen Projekt-Bilder in das Projekt-Textfeld einfügen.

Hinweis: Standardmäßig ist die Breite der Inhalte auf den Einzel-Projektseiten 580 Pixel breit. Um Projektinhalte z.B. Bilder, Videos oder auch Texte breiter anzuzeigen (max. Breite von 1280px), kannst du diese Inhalte im HTML-Editor in einen extra Div-Container mit der CSS-Klasse „wide-content“ setzen. Hier der Beispiel-Code:

<div class="wide-content">
Deine Inhalte mit einer Breite von max. 1280px hier…
</div>
2.3. Das Portfolio als Startseite festlegen

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

2.4. Den Blog auf einer Unterseite nutzen

Möchtest du neben dem Portfolio auch den Blog nutzen, kannst du eine weitere neue, leere Seite anlegen (z.B. mit dem Namen News oder Blog) und diese unter Design → Anpassen als „Beitragsseite“ auswählen. Mit Hilfe der eigenen Menü-Funktion kannst du den Blog in dein Hauptmenü einfügen.

3. Das About-Seitentemplate

Neben dem Portfolio hat Onigiri auch noch ein eigenes About-Seitentemplate. So kannst du deiner About-Seite unter Design → Anpassen eine eigene Hintergrunds- und Textfarbe geben.

Du kannst das spezielle About-Template für deine About-Seite under Attribute / Template auswählen.

Zur Gestaltung der Inhalte mit einem speziellen Layout kannst du dann z.B. die Onigiri Shortcodes und die extra Text-Styles (siehe Beschreibung unten) nutzen. Hier ist der Beispiel-Code, den wir in der Onigiri Live-Demo für die About-Seite genutzt haben:


<p class="intro">Dein Intro-Text hier...</p>

About Bild hier einfuegen.

[two_columns_one]

<h4>Ueberschrift</h4>
Dein Text hier...

[/two_columns_one]

[two_columns_one_last]

<h4>Ueberschrift</h4>
Dein Text hier...

<h4>Ueberschrift</h4>
Dein Text hier...

[/two_columns_one_last]

4. 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 Onigiri-Theme.

Im Tab Farben kannst du die Textfarbe des Webseiten-Titels, deine Standard-Hintergrundfarbe, die Linkfarbe sowie die About-Seiten Hintergrund- und Textfarbe wählen.

Im Tab Theme kannst du bestimmen, ob dein Titel auf größeren Bildschirmen feststehend sein soll und ob du die Suche verbergen möchtest.

Wenn du ein feststehendes Logobild nutzt, solltest du in der nächsten Option die Höhe deines Logobildes angeben (nur die Zahl).

Außerdem kannst du den Header-Introtext angeben (HTML, z.B. Links ist möglich). Du kannst hier auch deine Kontaktdaten für den Headerbereich im Onigiri-Theme angeben. Wenn du deine Email-Adresse als Link angeben möchtest, musst du dieses HTML-Format nutzen:

<a href="mailto:kontakt@elmastudio.de">kontakt@elmastudio.de</a>

Als weitere Option kannst du noch den Credit-Text im Footer anpassen.

4.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.

4.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 bereits für dein Portfolio nutzt. 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

5. Individuelles Menü

Im Adminbereich unter Design → Menüs kannst du dir ein eigenes Haupt-Menü für dein Menü im Onigiri-Theme einrichten. So kannst du z.B. auch auf Projektarten (Projektkategorien) deines Portfolios verlinken.

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.

6. Typografie Optionen

Du kannst eine Reihe von extra Typografie-Styles im Onigiri-Theme nutzen, um deine Texte noch ansprechender zu präsentieren.

Wide-Content – Um einen extra-breiten Artikel- bzw. Portfolio-Inhalt zu zeigen (mit einer max. Breite von 1280 Pixeln), kannst diesen Inhalt einfach in einem div-Container mit der CSS-Klasse „wide-content“ einbinden.

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

Intro-Text – Du kannst einen Text-Abschnitt in einer größeren Schrift anzeigen, z.B. den ersten Absatz deines Artikels oder deiner Seite (dieser Style ist sehr schön für die About-Seite geeignet). Dazu kannst du diesen Absatz in einen p tag mit der CSS-Klasse „intro“ setzen:

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

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>

7. 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 Onigiri Live-Demo.

8. Vorbereitete Plugins

Jetpack für das Portfolio, Teilen-Buttons, Carousel Galerie-Slideshow, Tiled Gallery, Infinite Scroll (im Blog)
Contact Form 7 für Formulare (z.B. das Kontaktformular)
Simple Share Buttons Adder für Teilen-Buttons
Custom Favicon, um ein Favicon und Apple Touch Icon zu integrieren

9. Theme-Übersetzung

Onigiri 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. (Wenn du deine Übersetzung auch für andere Onigiri-Nutzer zur Verfügung stellen möchtest, würden wir uns sehr freuen.)

10. Child Theme

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

11. Dokumentation drucken oder als PDF speichern

Um die Onigiri 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