--- title: "Yoko WordPress Theme für Blogs" author: "Ellen Bauer" date: 2011-04-26 lang: de source: https://elmastudio.de/yoko-wordpress-theme/ --- # Yoko WordPress Theme für Blogs ## Das Yoko Theme im Überblick ![Yoko WordPress Theme](https://elmastudio.de/wp-content/uploads/2011/04/yoko-wordpress-theme-notebook.png) *Desktop-Browser, dreispaltiges Layout.* ![Yoko WordPress Theme](https://elmastudio.de/wp-content/uploads/2011/04/yoko-wordpress-theme-ipad-quer.png) *iPad Querformat, zweispaltiges Layout.* ![Yoko WordPress Theme](https://elmastudio.de/wp-content/uploads/2011/04/yoko-wordpress-theme-ipad-hoch.png) ![Yoko WordPress Theme](https://elmastudio.de/wp-content/uploads/2011/04/yoko-wordpress-theme-iphone.png) *Tablet PCs im Hochformat und Smartphones, einspaltiges Layout.* ## Die Theme-Features - Responsive Layout mit CSS3 Media Queries: Das Theme-Layout passt sich der jeweiligen Bildschirmgröße an. Optimal für die Ansicht auf Tablet PCs und Smartphones. - HTM5 (Fallback für Internet Explorer < 9) - Individuelle Linkfarbe, Headerbild, Hintergrund und Logobild - Zusätzliches Navigationsmenü (Sub Menu) unter dem Headerbild - Theme-Optionsseite im Adminbereich - Yoko Social-Links Widget mit Mini-Icons (RSS, Twitter, Facebook, Flickr, Vimeo, LinkedIn, Delicious Icons) - Artikel-Formatvorlagen (post formats) für Standard, Aside, Gallery, Link, Video, Image und Quote (WordPress 3.1 wird benötigt) - verschachtelte Kommentare (threaded comments) - Artikel-Vorschaubilder (post thumbnails) - CSS-Styling für das [Contact Form 7 Formular-Plugin](https://contactform7.com/) - Verwendung der Google Web-Fonts Droid Sans und Droid Serif - Theme ist zur Übersetzung vorbereitet (derzeit ist Yoko in Englisch, Deutsch und Französisch übersetzt) ## Die Theme-Optionen erklärt Du kannst dir das WordPress-Theme Yoko über den Download-Button oben im Artikel herunterladen. Den entzippten Theme-Ordner „Yoko“ lädst du dann, am besten mit Hilfe eines FTP-Upload Programms (z.B. das kostenlose Filezilla), in den Themes-Ordner (http://deinedomain.de/wp-content/themes/…) hoch. In deinem WordPress-Adminbereich kannst du jetzt unter **Designs / Themes** das Yoko-Theme auswählen und aktivieren. ## 1. Individuelle Link-Farbe und Logobild Über die Theme-Optionsseite (Design / Theme Optionen) kannst du eine individuelle Linkfarbe bestimmen und dein eigenes Logobild im Headerbereich einfügen. ![Yoko WordPress Theme](https://elmastudio.de/wp-content/uploads/2011/04/yoko-wordpress-theme-01.jpg) Wenn du deine Linkfarbe als Hexwert eintippst (z.B. #009BC2) musst du darauf achten, dass du das **#-Zeichen** mit angibst. Alternativ kannst du auch red, green, blue… als Farbwerte angeben. Für dein Logobild kannst du ein individuelles Format wählen. Dein fertiges Logobild lädst du dann im .jpg oder .png Format über die WordPress-Mediathek hoch. Dort kopierst du die URL des Bildes. Diese URL fügst du dann einfach in den Theme-Optionen ein. ## 2. Individuelle Kopfzeile (Header) Um ein eigenes Headerbild einzufügen, wählst du im Adminbereich unter Design den Punkt **Kopfzeile** aus. ![Yoko WordPress Theme](https://elmastudio.de/wp-content/uploads/2011/04/yoko-wordpress-theme-02.jpg) Hier kannst du entweder eines der vorgegebenen Headerbilder von Yoko auswählen oder du lädst deinen eigenen Header hoch. Dein Bild sollte bereits passend auf die **Größe 1102×350 Pixel** zugeschnitten sein. Mit Hilfe des Buttons Kopfzeilen-Bild entfernen hast du außerdem die Möglichkeit komplett auf ein Headerbild zu verzichten. ## 3. Individueller Hintergrund Unter **Design / Hintergrund** kannst du eine andere Farbe oder ein Hintergrund-Bild für deinen Blog wählen. ![Yoko WordPress Theme](https://elmastudio.de/wp-content/uploads/2011/04/yoko-wordpress-theme-03.jpg) Mit Hilfe des Farbwählers beim Link „Wähle eine Farbe“ kannst du deine Farbe direkt auswählen. Wenn du ein Bild als Hintergrund nutzen möchtest, kannst du dieses horizontal und vertikal wiederholen, um so ein Muster zu erzeugen. Dein Bild könnte z.B. nur eine Größe von 100×100 Pixel haben und sich dann wie Kacheln wiederholen. Auf diese Weise ist deine Bilddatei nicht so groß und deine Webseite kann schnell im Browser laden. ## 4. Anpassung der Hauptnavigation Um die Hauptnavigation oben rechts im Theme-Layout anzupassen, kannst du die individuelle Menü-Funktion von WordPress nutzen. ![Yoko WordPress Theme](https://elmastudio.de/wp-content/uploads/2011/04/yoko-wordpress-theme-04a.jpg) Unter **Design / Menüs** kannst du dir ein individuelles Menü aus benutzerdefinierten Links, Seiten und Kategorien anlegen und dieses dann im Optionsfeld **„Anordnung im Theme“** oben links im Adminbereich als Hauptnavigation auswählen. Dein Menü erscheint jetzt automatisch in der Navigation oben rechts im Theme-Layout. ## 5. Zusätzliches Navigationsmenü (Sub Menu) Ein weiteres Yoko-Feature ist das zusätzliche Menü unterhalb des Headerbildes. ![Yoko WordPress Theme](https://elmastudio.de/wp-content/uploads/2011/04/yoko-wordpress-theme-04.jpg) Über die Individuelle Menüfunktion (seit WordPress 3.0) kannst du so ein weiteres Menü mit jeder Menge Platz für Untermenüpunkte nutzen. Um das Sub Menu zu aktivieren, wählst du in deinem WordPress-Adminbereich unter Design den Punkt Menüs aus. Lege hier ein neues Menü mit dem Namen **»Sub Menu«** an und füge Kategorien, Seiten oder individuelle Links ein. Nachdem du dein neues Menü gespeichert hast, wird es im Theme angezeigt. ## 6. Artikel-Formatvorlagen (Post Formats, seit WordPress Version 3.1) Yoko unterstützt die Artikel-Formatvorlagen **Standard**, **Aside** (kurze Notiz), **Gallery** (Bildergalerie), **Link**, **Video**, **Image** (einzelnes Bild) und **Quote** (Zitat). Während des Anlegens eines neuen Artikels wählst du das gewünschte Format einfach im Feld „Artikel-Formatvorlage“ aus. ![Yoko WordPress Theme](https://elmastudio.de/wp-content/uploads/2011/04/yoko-wordpress-theme-05.jpg) Die einzelnen Formate werden dann in der Artikel-Übersicht deines Blogs individuell angezeigt. ![Yoko WordPress Theme](https://elmastudio.de/wp-content/uploads/2011/04/yoko-wordpress-theme-06.jpg) *Ein Galerie-Artikelformat zeigt z.B. ein Vorschaubild der Bildergalerie, sowie die Gesamtanzahl aller Bilder im Artikel.* ## 7. Artikelbilder (Post Thumbnails) Für deine Artikel kannst du auch individuelle Artikel-Vorschaubilder (thumbnails) nutzen. ![Yoko WordPress Theme](https://elmastudio.de/wp-content/uploads/2011/04/yoko-wordpress-theme-07.jpg) Die Vorschaubilder haben das **Format 140×140 Pixel** (größere Bilder werden automatisch verkleinert). Beim Anlegen eines Artikels lädst du dein Vorschaubild über die Funktion „Artikelbild“ im Adminbereich von WordPress an. ## 8. Das Social-Links Widget Das Yoko Theme hat ein individuelles Social-Links Widget. So kannst du in einer der beiden Sidebars auf deine weiteren Profile im Internet verweisen. ![Yoko WordPress Theme](https://elmastudio.de/wp-content/uploads/2011/04/yoko-wordpress-theme-08.jpg) *Die Links haben praktische Mini-Icons für RSS, Twitter, Facebook, Flickr, Vimeo, LinkedIn und Delicious.* Um das Social-Links Widget zu verwenden, ziehe unter Design / Widgets das Yoko Social Links Widget in die Sidebar 1 oder die Sidebar 2. In den Widget-Einstellungen kannst du jetzt den Titel des Sidebar-Elements, sowie individuelle Link-Texte und die URLs zu deinen Online-Profilen eintragen. ## 9. Autorenfeld In der Einzelansicht eines Artikels kannst du ein Autorenfeld mit Gravatarbild und Autoreninfo anzeigen. ![Yoko WordPress Theme](https://elmastudio.de/wp-content/uploads/2011/04/yoko-wordpress-theme-09.jpg) Um diese Option zu nutzen, füllst du einfach einen Text unter **„Biographische Angaben“** in den Profil-Einstellungen unter **Benutzer** ein. Das Autorenfeld erscheint dann automatisch unter jedem Artikel. ## 10. Verschachtelte Kommentare Das Yoko-Theme unterstützt verschachtelte Kommentare (threaded comments). Das bedeutet auf jedes Kommentar kann über den Antworten-Link direkt geantwortet werden. Die Antwort-Kommentare werden im Layout eingerückt dargestellt. Eine Demo der Threaded-Comments Funktion kannst du dir in der [Yoko Live-Demo](https://themes.elmastudio.de/yoko/) anschauen. ## 11. Theme Übersetzung Yoko ist für die Theme-Übersetzung vorbereitet. Derzeit ist das Theme in Englisch und Deutsch übersetzt. Weitere Sprachen oder Änderungen in der Übersetzung kannst du mit Hilfe des WordPress-Plugins [„Codestyling Localization“](https://wordpress.org/plugins/codestyling-localization/) vornehmen. Auf der [Plugin-Homepage](https://www.code-styling.de/) findest du eine sehr nützliche Dokumentation zur Verwendung des Plugins. ## 12. Individuelle Theme-Anpassungen mit Hilfe eines Child Themes Falls du das Yoko-Theme noch weiter individuell anpassen möchtest und z.B. die Styles in der style.css Datei ändern willst, solltest du am besten ein eigenes Child Theme für deine Anpassungen anlegen. Auf diese Weise gehen deine eigenen Anpassungen bei einem späteren Update von Yoko nicht verloren bzw. werden überschrieben. Im Artikel [„WordPress Theme-Anpassung mit Hilfe eines Child Themes“](https://elmastudio.de/wordpress-theme-anpassungen-mit-hilfe-von-child-themes/) findest du eine Anleitung, um dein Child Theme anzulegen. Wir hoffen dir gefällt das Yoko WordPress-Theme. Wenn du Fragen zum Theme hast oder einen Fehler im Theme entdeckst, schreibe uns doch am besten einen [Kommentar ](#reply-title)oder fülle unser [Kontaktformular](https://elmastudio.de/wer-wir-sind/) aus. Wir freuen uns sehr über dein Feedback, weitere Anregungen und Fragen!