Oita Dokumentation

Demo / Theme kaufen

Video Tutorial

Oita Maße:
– Artikel-Breite: 720 Pixel (für Bilder in voller Breite)
– Bilder in Bild-Artikeln: max. 1100 Pixel Breite
– Miniaturbilder der Bildergalerien: mind. 350 Pixel Breite (Einstellungen / Mediathek)
– linke Off Canvas Sidebar: 340 Pixel Breite

1. Theme-Installation

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

1.1. Installation über den WordPress Adminbereich

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

2. Theme-Optionen

Nach der Installation kannst du loslegen, das Oita-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).

2.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, eine zusätzliche Schriftfarbe, eine eigene Sidebar-Hintergrundfarbe und eine Haupt-Hintergrundfarbe wählen.

2.2. Eigenes Logo, Artikel-Exzerpte und eigene Texte

Weiter kannst du auf der Theme-Optionenseite ein eigens Logobild hochladen (ein transparentes PNG ist als Datei-Format am besten geeignet). Das Format des Logo-Bildes ist flexibel, auf kleinen Bildschirmen wird das Logo automatisch kleiner skaliert.

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>
2.3. 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 Oita-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.

2.4. 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 für Artikel auf der Blog-Startseite und auf Einzelseiten oder nur auf den Artikel-Einzelseiten sowie auf WordPress-Seiten verwenden.

2.5. Eigenes CSS

In der letzten Theme-Option kannst du eigenen CSS-Code eintragen, um z.B. Styles für ein externes WordPress-Plugin dort einzutragen oder Styles des Themes zu überschreiben. Wenn du das Jetpack WordPress-Plugin installiert hast, kannst du diesen eigenen CSS-Code auch direkt in die Jetpack-Custom CSS Funktion eintragen (so ist der CSS Code auch bei einem Theme-Wechsel gesichert).

3. Extra Typografie-Styles

Etwas ganz besonders sind die optionalen Typografie-Styles des Oita-Themes. So kannst du deine Texte individueller gestalten und typografischen Highlights setzen. Die Extra-Styles kannst du im HTML-Editor von Artikeln oder Seiten setzen.

3.1. DropCaps

Um den ersten Buchstaben eines Text-Absatzes größer und farbig (mit der in den Theme-Optionen bestimmten extra Schriftfarbe) zu schreiben, setzt du den Buchstaben in einen span-Tag mit der CSS-Klasse „dropcaps“:

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

Farbiger, serifenloser 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.
3.3. Inhalte in der vollen Artikelbreite (Fullwidth)

Möchtest du bestimmte Textabschnitte (z.B. einen mehrspaltigen Text-Absatz) oder auch Bilder in deinem Artikel in der vollen Artikelbreite anzeigen, kannst du einfach um diesen Inhalt einen zusätzlichen Div-Container mit der CSS-Klasse „wide-content“ setzen.

<div class="wide-content">
Der gesamte Inhalt innerhalb des Divs wird in einer extrabreiten Fullwidth-Ansicht angezeigt...
</div>
3.4. 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...
3.5. 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>

4. Individuelle Menüs

Es gibt zwei Menü-Optionen im Oita-Theme. Die Haupt-Navigation im linken Off-Canvas Sidebarbereich und eine optionale Footer-Navigation ganz unten im rechten Off-Canvas Sidebarbereich. Nach der Theme-Installation werden in der linken Haupt-Navigation standardmäßig alle Seiten deines Blogs angezeigt. Über die Option Design / Menüs im WordPress-Adminpanel 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.

5. Widgets

Das Oita-Theme bietet unter Design / Widgets praktische Widget-Optionen für die beiden links- und rechtsbündigen Off-Canvas Sidebars an. Die Haupt-Widgetbereiche sind „Sidebar rechts, einspaltig“, „Sidebar rechts, zweispaltig links“ und „Sidebar rechts, zweispaltig rechts“. So kannst du im rechten Sidebarbereich einen großen einspaltigen Widgetbereich oder/und darunter einen zweispaltigen Widgetbereich nutzen. Widgets in der linken Sidebar werden unterhalb des Hauptmenüs angezeigt.

Neben des Standard-Widgets von WordPress und den Jetpack-Plugin Widgets (Twitter, Bild, Facebook oder Blog via Email-Abo) kannst du die folgenden, individuellen Widgets des Oita-Themes nutzen:

5.1. Oita 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.

5.2. Oita 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.

5.3. Oita Featured Video

Im Featured Video-Widget kannst du einfach den Einbetten-Code z.B. eines YouTube- oder Vimeo-Videos einfügen, um ein Video in einem der Widgetbereiche anzuzeigen.

5.4. Oita About

Im Oita About-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. 300×340 Pixel, wie in der Oita 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 in einer etwas größeren Schrift dargestellt) und einen weiteren „Über dich“-Text. HTML-Elemente, z.B. Links sind im Text möglich.

6. Artikel-Formatvorlagen (Post Formats)

Oita unterstützt neben Standard-Artikeln die WordPress Artikelformate: Bild, Galerie, Video, Link, Zitat, Kurzmitteilung und Status. Das Artikel-Format kannst du im Feld „Formatvorlage“ beim Verfassen oder Ändern eines Artikels auswählen. Auf diese Weise kannst du deinen Blog lebendiger gestalten und z.B. auch nur ein einzelnes Zitat, ein Bild oder ein Video auf deinem Blog veröffentlichen. Und so legst du die Artikel-Formate an:

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 so aussehen:


<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="#">Zitat-Autor</a></cite></blockquote>

6.2. 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 Iframe WordPress-Plugin nutzen. Mit Hilfe des Plugins kannst du dann einen iframe-Shortcode für die Einbindung von Videos nutzen. Videos werden in allen Artikeln automatisch in der vollen Artikelbreite (720 Pixel) anzeigt, so können sie für kleinere Bildschirmformate automatisch kleiner skaliert werden.

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="http://linkurl.de/">Das ist der Linktext</a>

Der Pfeil hinter deinem Link-Text wird mit Hilfe von CSS automatisch im Link-Artikelformat eingefügt.

6.4. Bildergalerie

Für das Galerie-Artikelformat kannst du ganz einfach mehrere Bilder über den Medien-Uploader (oberhalb des Text-Editor Feldes) in einen Artikel hochladen. Dann wählst du im Bild-Menü die Option Bildergalerie. Der Gallery-Shortcode wird so automatisch in einen Artikel eingefügt.

[gallery]

Wichtig! 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 und die Option „Beschneide das Miniaturbild auf die exakte Größe“ auswählen.

Weitere Optionen zur Verwendung der WordPress-Bildergalerie und des Gallery-Shortcodes findest du auch im Elmastudio-Artikel: „Die Standard-Bildergalerie von WordPress nutzen“.

6.5. 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 maximal mögliche Bildformat ist 1100 Pixel. Wenn Du das Bild kleiner einfügst, bietet sich eine zentrierte Positionierung an.

7. Seiten-Templates

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

Mit Hilfe des Archivseiten-Templates „Archive Page Template“ kannst du 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 der Oita Live-Demo).

8. Autorenfeld unter Standard-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 Link Text). Das Gravatar des Autors wird automatisch integriert. Auf der Oita Theme-Optionenseite hast du außerdem die Möglichkeit, auf deine sozialen Profile wie Twitter oder Facebook hinzuweisen.

9. Shortcodes

Im Oita-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 Oita Live-Demo.

10. Theme-Übersetzung

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

11. Child Theme

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