Dorayaki Dokumentation

Video Tutorial

Dorayaki Maße:
– Miniaturbilder: mind. 670 Pixel Breite, Höhe flexibel (450px ideal)
(siehe Einstellungen / Mediathek, für ältere Artikel hilfreich: Regenerate Thumbnails)
– Artikel-Breite Desktop: 630 Pixel
– Sidebar-Breite Desktop: 280 Pixel
– Breite zentriertes Seiten-Template: 800px
– Slider: 590 x 590 Pixel (einstellen in Slider Settings)
– Headerbild: 1180 x 590 Pixel (Höhe flexibel)

1. Theme Installation

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

1.1. Installation über den WordPress Adminbereich

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

3.1. Eigene Farben

Ganz oben auf der Theme-Optionseite kannst du entweder über einen Hex-Farbwert (z.B. #3f3f3f) oder per Klick in das Farbfeld über den Farbwähler eigene Farben für dein Theme zusammen stellen. Wenn du eine weiße Hintergrundfarbe für dein Theme in der ersten Farb-Option wählst solltest du darauf achten, die Hintergrundboxen in der zweiten Farb-Option ebenfalls anzupassen und hier z.B. ein helles Grau zu wählen, da die Felder sonst nicht mehr zu sehen sind.

3.2. Eigenes Logo, Artikel-Exzerpte und Footer-Text

Auf der Theme-Optionenseite kannst du auch ein eigens Logobild hochladen (das Datei-Format: transparentes PNG ist dabei ideal). Das Format deines Logos ist frei wählbar, in der Theme-Ansicht für große Bildschirme wird das Logo allerdings minimiert angezeigt, wenn es sehr breit ist. So dass immer noch Platz für die Suche und das Header Info-Widget bleibt. Ein ideales Logoformat ist z.B. 300px x 100px.

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.

3.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 Dorayaki-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.

3.4. Teilen Buttons (Twitter, Google+, Facebook, Pinterest)

Über die Theme-Optionseite kannst du den Teilen-Button mit den offiziellen Buttons von Twitter, Google+, Pinterest und Facebook für deine Blog-Artikel aktivieren. Optional kannst du die Buttons entweder unter jedem Blog-Artikel oder nur auf den Artikel-Einzelseiten anzeigen lassen.

3.5. Responsive Slider

Dorayaki hat eine Bilderslider-Option für deine Startseite. Um den Slider einzusetzen, musst du als erstes das Responsive Slider WordPress-Plugin installieren. Nachdem das Plugin installiert ist, kannst du auf der Theme-Optionenseite die Hintergrund-Farbe (auf der rechten Seite des Sliders sichtbar wählen) und den Slider automatisch aktivieren. Eine Anleitung zum Hochladen der Slides in deinem Slider und der Einstellungen des Plugins findest du im Elmastudio „WordPress-Plugins vorgestellt #2: Der Responsive Slider“. Da die Bilder im Slider nur auf der linken Hälfte der Gesamt-Sliderbreite von 1180px eingefügt werden, müssen deine Slider-Bilder die Breite von 590 Pixel haben. Die Höhe ist flexibel wählbar.

responsive Slider im Dorayaki-Theme
responsive Slider im Dorayaki-Theme

3. Individuelle Menüs

Es gibt zwei Menü-Optionen im Dorayaki-Theme. Die Haupt-Navigation im Header unterhalb des Logos und eine optionale, linksbündige Footer-Navigation. Nach der Theme-Installation werden in der Haupt-Navigation standardmäßig alle Seiten deiner WordPress-Seite 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 in den Menü-Einstellungen) 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.

4. Headerbild-Option

Möchtest du den responsive Slider nicht nutzen, hast du alternativ auch die Möglichkeit unter Design / Kopfzeile Headerbilder für deine Webseite einzusetzen. Du kannst entweder eines der vorbereiteten Headerbilder auswählen oder dein eigenes Headerbild mit der Breite 1180px und einer flexiblen Höhe unter „Bild wählen“ hochladen. Du kannst dein Bild als jpg oder png speichern. Du solltest aber darauf achten, dass die Dateigröße deines Bildes möglichst gering ist, da du so unnötig lange Ladezeiten deiner Webseite vermeiden kannst. Es gibt auch die Option mehrere Headerbilder bei neuen Seitenaufrufen rotieren zu lassen, indem du die Ansicht „Zufällig: Zeige auf jeder Seite ein zufälliges Bild“ auswählst.

5. Seiten-Widgets (für individuelle Seiten-Module)

Dorayaki bietet die Möglichkeit ganz individuelle Seiten mit Hilfe von Widget-Modulen anzulegen. Um die Dorayaki Seiten-Widgets (z.B. für Team-Mitglieder, Portfolio, Services, Empfehlungen oder neueste Artikel) auf deinen Seiten nutzen zu können, musst du als erstes eines beiden Plugins installieren: Widgets on Pages oder Widgetize Pages Light. „Widget on Pages“ funktioniert ganz einfach, du musst die Shortcodes für die neuen Widgetbereiche aber manuell in deine Seiten einfügen. Bei „Widgetize Pages Light“ hast du dagegen die Option die Shortcodes der angelegten Seiten-Widgetbereiche im visuellen Editor deiner Seiten über einen Auswahl-Button einzufügen.

In der Dorayaki Live Demo habe ich mich für das „Widget on Pages“ Plugin entschieden. Unter Einstellungen / Widgets on Pages habe kannst du dann deine Widgetbereiche (in den Pluin-Einstellungen Sidebars genannt) für Seiten anlegen. Wichtig ist, dass du die Option „Enable Styling“ aktivierst. Hier die Einstellungen der Dorayaki Live Demo:

widgets-on-pages-settings

Nach der Einrichtung der neuen Widgetbereiche findest du diese wie alle Standard-Widgetbereiche im Dorayaki-Thmeme unter Design / Widgets und du kannst loslegen, deine neuen Widgetbereiche mit den Dorayaki-Widgets für Seiten zu füllen.

Neu angelegte Widgetbereiche mit Widget Shortcode.
Neu angelegte Widgetbereiche mit Widget Shortcode.

Beim Widget on Pages Plugin findest du die Shortcodes zum Einfügen der neuen Widgetbereiche im geöffneten Widget. Diesen Shortcode kannst du dir kopieren und auf jeder beliebigen Seite einfügen. Im Widgetize Pages Light-Plugin hast du die Möglichkeit über einen Button im visuellen Texteditor-Menü direkt beim Bearbeiten einer Seite die benötigten Shortcodes aus einer Liste auszuwählen und direkt einzusetzen. Die Startseite der Dorayaki-Live Demo sieht dann z.B. so aus:

Startseite mit Widget Shortcodes.
Startseite mit Widget Shortcodes.

Die vorbereiteten Widgets im Dorayaki-Theme sind:
– Service Box für Seiten
– Team Mitglied für Seiten
– Team Mitglied (klein) für Seiten
– Testimonials (linksbündig) für Seiten (Empfehlungen siehe Live Demo)
– Testimonials (rechtsbündig) für Seiten
– Portfolio für Seiten
– Neueste Artikel für Seiten
– Kontakt Box für Seiten

Den Google Maps-Link für das Kontakt-Box Widget kannst du übrigens von jedem Ort oder jeder Adresse ganz einfach erhalten, indem du auf Google Maps den Link-Button in der linken Sidebar klickst. Jetzt kannst du die bereits markierte URL kopieren und in das Kontakt-Box Widget einfügen (bitte verwende nicht die Kurz URL!).

Google Maps Link kopieren.
Google Maps Link kopieren.

6. Seiten-Templates

Beim Anlegen oder Bearbeiten einer Seite kannst du über Attribute / Template die Dorayaki Seiten-Templates „Archive Page Template“, „Centered Page Template, No Sidebar“ und „Full-Width Page Template, No Sidebar“ auswählen.

Beim Seiten-Template „Centered Page Template, No Sidebar“ (zentriertes 800px breites Seiten-Layout ohne Sidebar) hast du die Möglichkeit Elemente auch in der vollen Artikelbreite auf der Seite einzufügen, indem du diesen Inhalt mit dem Shortcode fullwidth_content einrahmst. Den Shortcode-Code findest du auch auf der Dorayaki Shortcode Übersichtsteite in der Live Demo.

Mit Hilfe des Archivseiten-Templates „Archive Page Template“ kannst du so ganz leicht eine eigene Archivseite für deine Blog-Artikel anlegen, auf der die wichtigsten Schlagwörter, die 30 neuesten Artikel und ein monatliches Archiv deines Blogs angezeigt wird (siehe Beispiel Archives-Seite in der Dorayaki Live-Demo).

7. Sidebar- und Footer-Widgets

Neben den Seiten-Widget bietet Dorayaki unter Design / Widgets auch noch praktische Widget-Optionen für die Sidebar und den dreispaltigen Footer-Widgetbereich. Du kannst ein Social Links Widget, ein Flickr-Vorschaubild Widget und ein Featured Video-Widget nutzen. Außerdem kannst du die praktischen Jetpack-Plugin Widgets nutzen, wenn du z.B. deine neuesten Tweets, eine Facebook-Box, ein Bild-Widget oder ein Blog-Abo Widget verwenden möchtest.

7.1. Dorayaki Social Links

Mit dem Social Links-Widget kannst du mit Icons auf deine sozialen Profile (wie Facebook, Twitter, Flickr, Google+, YouTube und viele mehr) verweisen. 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.

7.2. Flickr Widget

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.

7.3. Featured Video

Im Featured Video-Widget musst du lediglich den iframe-Einbettencode eines Videos von YouTube oder Vimeo eintragen, um das Video in der Sidebar oder im Footer anzuzeigen. Die Größe des Videos wird automatisch an die Größe der Sidebar angepasst.

8. Artikel-Formate (Links, Zitate, Kurzmitteilung)

Dorayaki unterstützt neben Standard-Artikeln die WordPress Artikelformate: Link, Zitat, Kurzmitteilung. Das Artikel-Format kannst du im Feld „Formatvorlage“ beim Verfassen oder Ändern eines Beitrags auswählen.

8.1. Link

Um einen Link-Artikel zu erstellen fügst du einfach einen Link ganz oben in deinen Artikel ein und gibst diesem die CSS-Klasse „link“.


<a href="https://www.elmastudio.de/en/themes/dorayaki/" class="link" title="Dorayaki WordPress Theme" target="_blank">Buy the Dorayaki Premium WordPress Theme</a>

8.2. Zitat

Ein Zitat kannst du mit dem Blockquote Button oder dem Zitat-Button im visuellen Editor erstellen. Möchtest du außerdem den Autor des Zitats nennen, kannst den cite-tag nutzen. Hier ein Code-Beispiel zum kopieren:


<blockquote>Dein Zitattext hier.
<cite>von <a href="http://LinkZumZitatAutor.de/">Zitat Autor Name</a></cite>
</blockquote>

8.3. Kurzmitteilung

Mit dem Kurzmitteilung-Artikelformat kannst du kleinere Notiz- oder News-Artikel in deinem Blog veröffentlichen. Die Überschriften dieser Artikel werden dann etwas kleiner im Blog-Layout angezeigt.

9. Autorenfeld in Einzelartikeln

Um auf der Einzelseite von Standard-Format Artikeln ein Autorenfeld unter dem Artikel-Inhalt anzuzeigen, kannst du einfach die „Biografischen Angaben“ in deinem WordPress Benutzer-Profil ausfüllen. Das Gravatar-Bild des Autors wird automatisch integriert, wenn du deine Profil-Emailadresse auf Gravatar.com angegeben hast.

10. Shortcodes

Die Dokumentation aller Dorayaki-Shortcodes mit Code-Beispielen zum Kopieren / Einfügen findest du auf der Shortcode-Seite der Dorayaki Live Demo.

11. Externe Plugins

Dorayaki ist für die folgenden WordPress-Plugins vorbereitet:

Contact Form 7 für Formulare
Jetpack für Social Comments, Twitter Widget, Blog-Subscribe-Widget oder die Jetpack Carousel-Galerieansicht
Disqus Comments für Social Comments
WP-PageNavi für eine Seiten-Navigation

12. Theme-Übersetzung

Dorayaki ist für die Übersetzung in weitere Sprachen vorbereitet. Am einfachsten ist es, das WordPress-Plugin Codestyling Localisation, um Dorayaki in eine weitere Sprache zu übersetzen oder die Übersetzung anzupassen. (Wenn du deine Übersetzung auch für andere Dorayaki Theme-Nutzer zur Verfügung stellen möchtest, würden wir uns darüber sehr freuen.)

13. Child Theme

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

14. Doku Ausdrucken / als PDF speichern

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