Moka Dokumentation

Demo / Theme kaufen

Video Tutorial

Moka Maße:
– Artikel Standard-Breite: 720 Pixel
– Full Width Seiten-Breite: 1070 Pixel
– Beitragsbilder (Thumbnails): 720px oder 1070px für große Beitragsbilder im Einzelartikel
– Einstellung/Medien/Miniaturbilder: mind. 350x350px
(Nach dem Speichern der neuen Einstellung das Regenerate Thumbnails Plugin laufen lassen, um alte Artikel-Thumbnails anzupassen.)

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

1.1. Installation über den WordPress Adminbereich

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

2. Anpassungen im Customizer

Über Design → Anpassungen kannst du den WordPress-Customizer mit einer Live-Vorschau aufrufen. Neben den Standard-Anpassungsoptionen kannst du hier vor allem die Farben deines Moka-Themes anpassen. Die Farboptionen sind eingerichtet für: Hintergrund, Seiten-Titel (Text), Seitentitel-Hintergrund, Links, Link-Maushover und die Schriftfarbe der großen Schriften im About- und Zitat-Widgets.

Farb-Anpassung über den Customizer
Farb-Anpassung über den Customizer

3. Weitere Theme-Optionen

Weitere Theme-Optionen findest du unter Design → Theme Optionen (schaue dir ein Screenshot der Moka Theme Optionen an).

3.1. Eigenes Logobild

Hier kannst du ein eigenes Logobild für die linke Sidebar vom Moka hochladen. Die maximale Breite sollte 200 Pixel sein, die Höhe ist flexibel. Dein Bild sollte als transparentes PNG oder JPG gespeichert sein. Um ein Retina-optimiertes Bild zu nutzen, kannst du dein Logo einfach doppelt so groß vorbereiten (also z.B. 400x160px) und dann in den Angaben zur Breite und Höhe dennoch 200 und 80 eintragen.

3.2. Feste Sidebar, Exzerpt und Footertext

Außerdem kannst du die linke Sidebar mit deinem Blog-Titel und der Hauptnavigation auf großen Bildschirmen (ab einer Bildschirmbreite von 1366px) fixieren, so dass sie immer im linken Bildschirm zu sehen ist.

Möchtest du nicht den more-link in einem Standard-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 Standard-Artikel automatisch gekürzt und ein Weiterlesen-Link wird 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. 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 Artikel-Einzelseiten oder nur auf den Artikel-Einzelseiten verwenden.

3.4. 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).

4. Individuelle Menüs

Im Adminbereich unter Design → Menüs kannst du dir ein angepasstes Haupt-Menü für die linke Sidebar anlegen.

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 als Haupt-Navigation markieren und das neue Menü speichern.

Zusätzlich kannst du für die Footer Widgetbereiche weitere Menüs anlegen und diese dann über das „Individuelle Menü“-Widget (siehe Design → Widgets) in den dreispaltigen Footer einbinden.

5. Startseiten-Template (Frontpage Sticky oder Slider)

Eines der Theme-Highlights ist die individuelle Startseite (Template Frontpage) von Moka. Um statt der Standard-Blogansicht eine eigene Startseite mit deinen neuesten Artikeln und verschiedenen Widgets wie in der Moka Live-Demo anzuzeigen, musst du dir als erstes eine neue, leere Seite anlegen (z.B. mit dem Namen Startseite). Denke daran auf dieser Seite die Kommentare im Feld „Diskussion“ zu deaktivieren. Wenn du das Feld „Diskussion“ nicht gleich siehst, kannst du es über den „Optionen einblenden“ Button oben rechts im Adminbereich einblenden. Außerdem musst du deiner neuen Seite noch das Seiten-Template „Front Page Sticky“ für eine Startseite mit großem Sticky Post oder „Front Page Slider“ für einen Artikel-Slider ganz oben auf der Startseite unter Attribute / Template angeben.

Wenn du den Standard-Blog in einem Untermenü zusätzlich anzeigen möchtest, kannst du eine weitere neue Seite (z.B. mit dem Namen Blog) anlegen. Jetzt kannst du die neue Startseite und die Seite für deinen Blog unter Einstellungen → Lesen (oder über den Customizer unter Design → Anpassen) auswählen.

5.1. Front Page Slider

Für den Slider mit max. 10 Artikeln benötigst du außerdem noch das Jetpack WordPress-Plugin mit seiner Featured Content-Option. Nachdem du das Plugin installiert hast, kannst du eines deiner Schlagwörter unter unter Design → Anpassen → Featured Content angeben. Alle Artikel (max. Anzahl 10) mit diesem Schlagwort werden dann in deinem Slider auf der Startseite angezeigt (wie hier in der Moka Live-Demo.) Die Beitragsbilder für deine Artikel im Slider sollten ein Bild-Format von 1070px x 600px haben.

5.2. Front Page Sticky

Um einen Featured Artikel mit einem 3-spaltigen Textauszug auf der Startseite zu zeigen, musst du das „Front Page Sticky“ auswählen und einen Artikel unter Beträge → Quick Edit mit „Diesen Beitrag oben behalten“ markieren.

5.3. Deine neuesten Artikel auf der Startseite

Die Startseite zeigt standardmäßig drei deiner neuesten Artikel und deinen neuesten Sticky-Artikel oder dem Slider. Du kannst die Anzahl der neuesten Artikel unter Design → Anpassen → Startseiten-Optionen auf 0, 3, 9 oder 12 erweitern.

Jetzt kannst du deine Startseite noch weiter mit individuellen Startseiten-Widgets einrichten.

6. Widgets

Unter Design → Widgets findest du alle Widgetbereiche und Widgets für das Moka-Theme. Du kannst neben allen WordPress-Standardwidgets auch zusätzliche Widgets des WordPress Jetpack-Plugins nutzen, z.B. um ein Twitter- oder Facebook Widget zu integrieren oder um eine Blogartikek-Abonnieren Option anzubieten.

6.1. Startseiten-Widgets

Für die Moka-Startseite kannst du unter Frontpage-Widgetbereich z.B. ein eigenes About-Widget nutzen, um einen kleinen Text über dich, ein Foto (Maße 517×517 Pixel, JPG) und eine Sub-Info, wie z.B. Links zu deinen sozialen Profilen anzuzeigen. Dein About-Foto kannst du über Medien → Datei hinzufügen hochladen und dann die Bild-URL im Widget eintragen.

Eine weitere sehr schöne Widget-Option speziell für die Moka Startseite ist das Große Zitat-Widget. Du kannst einfach ein Zitat oder Slogan in das Textfeld eingeben und optional noch den Autor des Zitats angeben.

Mit dem Moka-Widget „Neueste Artikel nach Kategorien (Moka)“ kannst du außerdem sehr schön weitere Artikel deines Blogs auf deiner Startseite featuren. Am schönsten sieht dieser Widgetbereich aus, wenn du Thumbnails für deine Artikel nutzt.

Du kannst zwischen 4,8 oder 12 Artikel einer Kategorie wählen und die Kategorie-ID angeben. Die ID einer Kategorie findest du heraus, indem du auf Beiträge → Kategorie gehst, dort die gewünschte Kategorie auswählst und dann in der URL die entsprechende ID abliest.

Möchtest du deinen Lesern noch weitere Filter-Optionen für Artikel bieten, kannst du im Frontpage-Widgetbereich außerdem noch das Standard Schlagwörterwolke-Widget integrieren, und so Links zu deinen Kategorien oder Schlagwörtern anzeigen.

7. Seiten-Templates (Archiv und Fullwidth)

Beim Anlegen oder Bearbeiten einer Seite kannst du über Attribute → Template die Moka Seiten-Template „Archive Page“ und „Full Width Page“ wählen. Mit Hilfe des Archivseiten-Templates kannst du ganz leicht eine eigene Archivseite für deinen Blog anlegen, auf der die wichtigsten Schlagwörter, die 30 neuesten Artikel und ein monatliches Archiv deines Blogs angezeigt wird. Mit dem Full Width Seiten-Template kannst du Seiten in der vollen Breite von 1070px statt der Standard-Breite von 720px anlegen.

8. Artikel-Formatvorlagen (Galerie, Bild)

Moka unterstützt neben Standard-Artikeln die WordPress Artikelformate: Bild und Galerie. Das gewünschte Artikel-Format kannst du im Feld „Formatvorlage“ beim Verfassen oder Ändern eines Artikels auswählen. Auf diese Weise kannst du Artikel mit Bildergalerien oder reine Bilderartikel anlegen und diesen auch ein Beitragsbild (Thumbnail) zuweisen. Das Thumbnail wird dann auf deiner individuellen Startseite (z.B. in den neuesten Artikel oder im Widget „Artikel nach Kategorien“ angezeigt), ohne dass es in der Standard-Blogansicht noch einmal gezeigt wird.

Sehr schön Features für Galerie-Artikel sind die Tiled Galleries und das Bilder-Carusel des Jetpack WordPress-Plugins.

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

10. Shortcodes

Im Moka-Theme kannst du Shortcodes für mehrspaltige Elemente, Infoboxen und Buttons nutzen. Beispiele und den Code zum Kopieren/Einfügen findest du auf der Shortcode-Beispielseite der Moka Live-Demo.

11. Unterstützte Plugins

Contact Form 7 für Formulare (z.B. das Kontaktformular)
Jetpack für Jetpack Widgets, Carousel Galerie-Slideshow, Tiled Gallery etc.
WP-PageNavi für eine nummerierte Seiten-Navigation (bitte deaktiviere auch hier die CSS-Styles des Plugins in den Plugin-Einstellungen)
Custom Favicon, um ein Favicon und Apple Touch Icon zu integrieren

12. Theme-Übersetzung

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

13. Child Theme

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

14. Dokumentation drucken / als PDF speichern

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