Tatami Dokumentation

Demo / Theme kaufen

Video Tutorial

1. Theme-Installation

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

Installation über den WordPress Adminbereich

Um das Tatami-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 Tatami Theme-Ordner muss für das Hochladen direkt über den WordPress-Adminbereich immer noch im .zip-Format sein. Wähle also die Datei tatami.zip aus und klicke auf den Button Jetzt installieren. Nach der erfolgreichen Installation klickst du auf die Option Aktivieren. Dein Tatami-Theme ist jetzt das aktuell aktive Theme deiner Webseite.

Installation via FTP-Programm

Alternativ zur Installation des Themes direkt im Adminbereich kannst du den entzipten Tatami 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 Tatami 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 Tatami-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. #69A6CC) oder per Klick in das Farbfeld über den Farbwähler deine eigene Linkfarbe, eine Link-MausHoverfarbe und eine Footer-Hintergrundfarbe auswählen.

2.2. Artikelbild-Optionen

Im Tatami-Theme kannst du deine Artikel sehr schön mit Artikelbildern (Thumbnails) featuren. In den Theme-Optionen kannst du bestimmen, ob du die Artikelbilder in voller Breite über der Überschrift, große Artikelbilder unterhalb der Überschrift oder kleine Artikelbilder unterhalb der Überschrift anzeigen möchtest.

2.3. Eigenes Logo, Artikel-Exzerpte, Header-und Footertext

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, sollte aber die Höhe von 75 Pixel und die Breite von 500 Pixel nicht überschreiten. So funktioniert das Logobild in der mobilen Ansicht und in der Ansicht auf dem Desktop-Bildschirm funktionieren.

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 zeigen automatische Exzerpte keine Artikel-Vorschaubilder an, die unterhalb der Überschrift platziert sind (siehe 2. und 3. Option der Artikelbild-Option).

Direkt in den Theme-Optionen kannst du auch einen Header- und Footertext für deine Webseite anpassen. Standard HTML (z.B. Links) sind dabei möglich. Außerdem kannst du hier einen Text mit Links zu deinen sozialen Profilen (wie Twitter oder Facebook) unter deinem Namen in der Autorenbox auf Einzelartikeln eintragen. Z.B.:

<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.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 Tatami-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. des iPads) 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.5. Teilen Buttons (Twitter, Google+, Facebook, Pinterest)

Über die Theme-Optionseite kannst du auch die offiziellen Teilen-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.6. 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 Custom CSS Code auch direkt in die Jetpack-Custom CSS Funktion eintragen (so ist der CSS Code auch bei einem Theme-Wechsel gesichert).

3. Individuelle Menüs

Es gibt zwei Menü-Optionen im Tatami-Theme. Die Haupt-Navigation oben in der linken Sidebar (auf mobilen Geräten über das Menü-Icon erreichbar) und eine optionale Footer-Navigation. 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-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. In der Footer-Navigation werden keine Unter-Menüpunkte angezeigt.

4. Widgets

Das Tatami-Theme bietet unter Design / Widgets vielseitige Widgetbereiche an. Die Haupt-Widgetbereiche „Sidebar Links“ und „Sidebar Rechts“ (für die Integration von Widgets in der rechten oder linken Sidebar) und den Footer-Widgetbereich mit einer einspaltigen Widget-Option (Footer einspaltig) und einer zweispaltigen Widget-Option (Footer Zweispaltig Links und Footer Zweispaltig Rechts).

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

4.1. Tatami 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.

4.2. Tatami Flickr

Im Tatami 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.

4.3. Tatami 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.

4.4. Tatami About

Im Tatami 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. 200x200px) gibst du dann ebenfalls im Widgetbereich an (nur die Zahl ohne die Maßeinheit px).

5. Artikel-Formatvorlagen (Post Formats)

Tatami unterstützt neben Standard-Artikeln die WordPress Artikelformate: strong>Bild, Galerie, Video, Audio, Link, Zitat, Kurzmitteilung, Status und Chat

Das Artikel-Format wählst du im Feld „Formatvorlage“ aus. Auf diese Weise kannst du deinen Blog lebendiger gestalten und z.B. auch ein einzelnes Zitat, ein Bild oder ein Video veröffentlichen.

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

5.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 (760px) anzeigt, so können sie für kleinere Bildschirmformate automatisch kleiner skaliert werden.

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

5.4. Bildergalerie

Für das Galerie-Artikelformat kannst du ganz einfach mehrere Bilder über die Hochladen/Einfügen-Option (oberhalb des Editor-Feldes) in einen Artikel hochladen. Dann wählst du im Bild-Menü die Option Bildergalerie und die Option 7 Spalten aus. Der Gallery-Shortcode wird so automatisch in einen Artikel eingefügt.

[gallery columns="7"]

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

5.5. Bild

In das Bild-Artikelformat kannst du einfach wie gewohnt über den Datei Upload-Button ein Bild (mit oder ohne Bildbeschreibung) in einen Artikel einbinden.

5.6. Audio

Für die Integration eines Audio-Streams eignet sich z.B. das Soundcloud-iframe Widget von
soundcloud.com. Mit Hilfe des Soundcloud Shortcode WordPress-Plugins funktioniert die Einbindung des Audio-Streams besonders leicht.

5.7. Chat

Um das Chat-Artikelformat zu stylen, musst du eine ul-Liste mit der CSS-Klasse „chat“ erstellen und den li-Listenelementen jeweils abwechselnd die CSS-Klassen „odd“ und „even“ zuweisen.

<ul class="chat">
<li class="odd">Text 1...</li>
<li class="even">Text 2...</li>
<li class="odd">Text 3...</li>
<li class="even">Text 4...</li>
</ul>

6. Seiten-Templates

Beim Anlegen oder Bearbeiten einer Seite kannst du über Attribute / Template die Tatami Seiten-Templates „Archive Page Template“ und „Left Sidebar Only“ (Archiv-Seite und nur linke Sidebar) auswählen. Das Seiten-Template „nur linke Sidebar“ eignet sich dabei besonders für die Nutzung der mehrspaltigen Shortcodes.

Mit Hilfe des Archivseiten-Templates „Archive Page Template“ kannst du ganz leicht eine eigene Archivseite anlegen, die wichtigste Schlagwörter, die 30 neuesten Artikel und ein monatliches Archiv deines Blogs anzeigt.

7. Autorenfeld in 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.

8. Shortcodes

Im Tatami-Theme kannst du Shortcodes für mehrspaltige Texte (oder andere Elemente), Infoboxen und Buttons nutzen. Beispiele und den Code zum Kopieren findest du auf der Shortcode-Beispielseite der Tatami Live-Demo.

9. Theme-Übersetzung

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

10. Child Theme

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