---
title: "Ari WordPress Theme für Blogs"
author: "Ellen Bauer"
date: 2010-12-22
lang: de
source: https://elmastudio.de/ari-wordpress-theme/
---
# Ari WordPress Theme für Blogs
## Das Ari Theme im Überblick
Ari ist ein leichtes, minimalistisches Blog-Theme, das für die Ansicht auf unterschiedlichen Bildschirmgrößen sowie mobilen Geräten wie Tablet-PCs und Smartphones optimiert ist. Die Hintergrund-, Text- und Link-Farben kannst du in den Theme-Optionen selbst anpassen, und auch das Einfügen eines eigenen Logos ist über die Theme-Optionen möglich. So musst du nicht mehr viele Einstellungen vornehmen, um schnell los bloggen zu können und deine Leser können deinen Blog auch bequem von unterwegs auf ihrem Tablet-PC oder Smartphones lesen.
*Dreispaltige Ansicht im Desktop-Browser, zweispaltig im iPad Hochformat und einspaltig auf dem iPhone oder anderen Smartphones.*
## Die Theme-Features
- minimalistisches Blog-Layout
- CSS3 Media Queries, vorbereitet für die Ansicht auf iPads, iPhones und anderen mobilen Geräten (das Layout wechselt von einer Dreispaltigkeit, auf eine zwei- und einspaltige Ansicht)
- Theme-Optionen im Adminbereich (individuelle Hintergrund-Farbe, Linkfarben und Textfarbe angeben und Bild als Logo einfügen)
- dunkle Version des Themes über die Theme-Optionen wählbar (besonders für Fotos geeignet)
- Social Links Sidebar-Widget mit Mini-Icons (RSS, Twitter, Facebook, Flickr, Xing, LinkedIn, Delicious)
- für Übersetzung vorbereitet (derzeit in Deutsch und Englisch übersetzt)
- verschachtelte Kommentare aktiviert
- vorbereitete CSS-Styles für das [Contact Form 7](https://wordpress.org/plugins/contact-form-7/) Kontaktformular-Plugin
- Verwendung der Droid Sans und Droid Serif Google Fonts
**Lizenz-Hinweis:** Das Theme ist unter der GPLv2-Lizenz (oder später) veröffentlicht. Weitere Infos findest du auf der Webseite [www.gnu.org](http://www.gnu.org/licenses/gpl.html).
## 1. Die Theme-Optionen
Bei Ari hast du die Möglichkeit deine eigenen Farben für den Blog-Hintergrund, die Link-Farben und die Textfarbe zu verwenden. Außerdem kannst du auch ein Bild für dein Blog-Logo verwenden. Diese Theme-Optionen kannst du bequem auf einer extra eingerichteten Theme-Optionen Seiten (unter Design / Theme-Optionen im WordPress-Admin) eintragen.
### Dunkle Theme-Version
Über die Theme-Optionen kannst du auch eine dunkle Theme-Variante von Ari auswählen. Dazu wählst du einfach das Häkchen bei "Zur dunklen Version des Themes wechseln" an und bestätigst deine Eingabe. Die Link- und Text-Farben kannst du natürlich weiterhin anpassen.
*Das Ari Theme hier in der dunklen Version.*
Eine Live-Demo der dunklen Theme-Option kannst du dir ansehen, indem du auf Theme Testseite [themes.elmastudio.de/ari](https://themes.elmastudio.de/ari/) in der rechten Sidebar ganz oben unter "Theme testen" die **Ari Dark-Version** auswählst.
### Individuelle Farben
Für die Farben kannst du einen HEX-Wert eintragen. Dabei solltest du darauf achten, immer Symbol # zusammen mit deinem Farbwert anzugeben (z.B. #88C34B). Alternativ kannst du auch Farbnamen wie blue, red oder black eintragen.
### Ein Bild als Logo verwenden
Falls du lieber ein Bild (im .jpg oder .png Format) als Logo verwenden möchtest, kannst du dieses ebenfalls über die Theme-Optionsseite einfügen. Dein Logo sollte maximal eine Größe von **240 x 75 Pixel** haben. Nachdem du dein Logo vorbereitet hast, kannst du es über die Mediathek (siehe Link in den Theme-Optionen) hochladen. Dabei kopierst du dir die angegebene URL des Logo-Bildes und fügst diese anschließend einfach in der Theme-Optionsseite ein.
Nachdem du die neuen Einstellungen gespeichert hast, wird dein Logo angezeigt.
## 2. Sidebar-Widgets
Ari hat im dreispaltigen Webseiten-Layout eine fixe, linke Sidebar von 240 Pixel Breite (Primary Sidebar), sowie eine zweite rechte Sidebar (Secondary Sidebar). Beide Sidebars sind für Widgets vorbereitet (unter Design / Widgets im WordPress Admin-Bereich). So kannst du dir deinen Blog ganz leicht individuell einrichten.
In der schmaleren Screen-Ansicht (z.B. auf einem iPad im Hochformat) rutscht die rechte Sidebar unterhalb des Hauptinhalts. Das Layout wechselt also in eine Zweispaltigkeit.
In der einspaltigen Ansicht für Smartphones ordnet sich die fixe, linke Sidebar ganz oben im Layout an, darunter folgt der Hauptinhalt und dann wieder die Inhalte der zweiten (ursprünglich rechten) Sidebar. Die linke Sidebar eignet sich daher besonders, um einen kleinen About-Text oder deine Seiten-Navigation anzuzeigen.
### Über mich Text-Widget
Um einen About-Text in deiner Sidebar anzuzeigen, kannst du ein einfaches Text-Widget nutzen. Falls du ein Profilbild von dir einfügen möchtest, kannst du diesem z.B. eine Größe von **75x85 Pixel** geben, und es in den Image-Ordner von Ari einfügen. Unter Widgets im WordPress Adminbereich fügst du dann deinen About-Text, sowie einen img-tag mit Link zu deinem Profilbild ein. Du kannst außerdem noch einen Link im Text setzen.
Der Code für dein About Text-Widget siehst dann z.B. so aus:
```
Hier im Über mich-Text-Widget kannst du einen kleinen Intro-Text von dir eintragen und auch einen Link, z.B. auf deine Portfolio-Webseite einfügen.
```
### Social-Links Widget
Um auf deinem Blog auch auf deine weiteren Profile im Netz, sowie auf den RSS-Feed deines Blogs hinzuweisen, haben wir ein individuelles Social-Links Widget für Ari vorbereitet.
Um das praktische Sidebar-Widget zu nutzen, fügst du im Widget-Bereich einfach das Widget **Ari Social Links** in eine der Sidebars ein. Hier kannst du einen Titel für dein Widget, sowie individuelle Texte und deine URLs für RSS, Twitter, Facebook, Flick, Xing, LinkedIn und Delicious eintragen.
Das Widget zeigt dann automatisch deine Links mit den kleinen Mini-Social Icons an.
### Individuellen Menü-Widget für die Seiten-Navigation
Um die Seiten deines Blogs anzuzeigen, ist das Ari-Theme für die Verwendung von individuellen Menüs vorbereitet. Dein Seiten-Menü erstellst du im Adminbereich unter Design / Menüs. Unterseiten kannst du festlegen, indem du das Element einfach per Drag'n'Drop leicht nach rechts verschiebst.
Anschließend nutzt du das individuelle Menü-Widget in den Widget-Optionen, um deine Seiten-Navigation anzuzeigen. Du kannst im individuellen Menü-Widget den Namen deines Menüs auswählen und einen Titel für das Widget bestimmen.
Neben diesen Widgets kannst du natürlich auch noch jede Menge weitere Standard-Widgets, z.B. Suchen, Blogroll, letzte Artikel oder letzte Kommentare für deinen Blog verwenden. Alle Widgets funktionieren sowohl in der linken, als auch in der rechten Sidebar.
## 3. Text, Bilder und Videos
In deinem Blog kannst du jede Menge Layout-Styes für deine Texte verwenden. Du kannst z.B. **Überschriften in h1 bis h6** nutzen, Zitate mit Hilfe des **blockquote-tags** einfügen, Code mit dem **pre-tag** eintragen sowie Tabellen und Listen (unordered mit dem **ul-tag** und ordered mit dem **ol-tag**) einfügen.
Eine Übersicht über die wichtigsten Elemente zum Styling deiner Blog-Texte kannst du dir in der [Live-Ansicht von Ari](https://themes.elmastudio.de/ari/) anschauen.
Neben Text-Elementen kannst du natürlich auch Bilder mit und ohne Bildunterschriften verwenden oder Videos z.B. von YouTube oder Vimeo einbetten.
Damit deine Bilder in den verschiedenen Layout-Ansichten des Themes flexibel skaliert werden können, sollte die Größe der **Bilder mindestens eine Breite von 650 Pixel** haben.
Eingebettete Videos werden ebenfalls automatisch im Layout skaliert. Eine Beispiel-Ansicht von Bildern und Videos in Ari findest du ebenfalls in der [Live-Demo](https://themes.elmastudio.de/ari/).
## 4. Ein Autorenfeld verwenden
Um ein Autorenfeld unter jedem Blog-Artikel einzufügen, musst du lediglich einen Autoren Info-Text unter Benutzer / Über dich / Biografische Angaben eintragen.
## 5. Verschachtelte Kommentare
Das Ari-Theme ist für verschachtelte Kommentare vorbereitet. Eventuell musst du diese in deinem Adminbereich noch unter Einstellungen / Diskussion aktivieren.
## 6. Formulare mit dem Contact 7-Plugin
Um ein Kontaktformular in deinem Blog zu verwenden, kannst du dir das [WordPress-Pugin Contact 7](https://wordpress.org/plugins/contact-form-7/) installieren. Für dieses Plugin haben wir die CSS-Stlyes bereits an das Theme-Layout angepasst.
Ein Beispiel-Formular kannst du dir auch auf der [Ari Live-Demo Webseite](https://themes.elmastudio.de/ari/) anschauen.
## 7. Die jQuery Thickbox für Fotos nutzen
Um deine Fotos auf Seiten und in Artikeln in einer größeren Ansicht anzeigen zu können, kannst du das jQuery-Thickbox Plugin nutzen. Der benötigte Code für das Plugin ist praktischerweise schon standardmäßig bei WordPress mitgeliefert. Um diesen Code auch für das Ari Theme zu nutzen, kannst du dir das Plugin ["Auto Thickbox"](https://wordpress.org/plugins/auto-thickbox/) installieren.
*Mit dem Thickbox-Plugin kannst du deine Bilder auch in einer großen Ansicht zeigen.*
## 8. Ein eigenes Favicon einfügen
Du kannst dein eigenes Favicon nutzen, indem du ein **16x16px** großes Favicon-Bild im JPG-Format vorbereitet, und dieses dann mit Hilfe eines Favicon-Generators (z.B. [favicon-generator.org](https://www.favicon-generator.org/)) in das benötigte .ico Format umwandelst.
Anschließend speicherst du dein .ico Favicon unter dem Namen **favicon.ico** in den Image-Ordner des Ari-Themes ab.
## 9. Theme-Übersetzung
Ari ist für die Theme-Übersetzung vorbereitet. Derzeit ist das Theme in Englisch und Deutsch übersetzt. Die Sprache deiner WordPress-Installation wird automatisch auch im Theme übernommen.
Falls du Ari in einer weiteren Sprache verwenden möchtest, kannst du das Theme am einfachsten mit Hilfe des [Codestyling Localization-Plugins](https://wordpress.org/plugins/codestyling-localization/) übersetzten (hier findest du eine [Anleitung zur Theme-Übersetzung](https://elmastudio.de/wordpress-theme-ubersetzung-mit-dem-codestyling-localization-plugin/)).
Wir hoffen dir gefällt unser kleines Ari Blog-Theme. Wenn du Fragen zum Theme hast, einen Fehler entdeckst oder dir Optimierungsvorschläge einfallen, schreibe uns doch einfach eine einen Kommentar oder eine Mail an kontakt(at)elmstudio(punkt)de.
Über dein Feedback, deine Tipps und Vorschläge zum Theme freuen wir uns sehr!