Nori Theme Dokumentation

Nori Theme Dokumentation
1. Die Theme-Installation
Nach dem erfolgreichem Themekauf erhältst du eine Email mit dem individuellen Download-Link. Über
diesen Link kannst du dir den Nori Theme-Ordner (.zip Datei) herunterladen.
(Standardmäßig sind 9 Downloads des Themes möglich. Benötigst du weitere Downloads des Theme-Ordners, sag bitte einfach in einer kurzen Email-Nachricht Bescheid.)
Installation über den WordPress Adminbereich
Um das Nori-Theme auf deinem WordPress-Blog zu installieren, klickst du in deinem WordPress-Adminmenü 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 Punkt „Hochladen“.
Der Nori Theme-Ordner muss für das Hochladen direkt im WordPress-Adminbereich im .zip Format sein.
Wähle also die Datei nori.zip aus und klicke auf den Button „Jetzt installieren“. Nach der erfolgreichen
Installation klickst du auf die Option „Aktivieren“. Dein Nori-Theme ist dann das aktuell aktive Theme deines Blogs.
Installation via FTP-Programm
Alternativ zur Installation des Themes direkt im Adminbereich kannst du den entzipten Nori Theme-Ordner
auch mit Hilfe eines FTP-Programms (z.B. Filezilla) auf deinen Serverplatz hochladen. Dafür musst du den
Ordner in den WordPress Installations-Ordner .../wp-content/themes/ hochladen.
Nach dem Upload des Theme-Ordners findest du Nori in der Vorschau-Ansicht unter Design / Themes bei
„Verfügbare Themes“ im Themes-Adminbereich. Dort kannst du das Theme aktivieren.
2. Theme-Optionen Seite
Nach der Installation kannst du loslegen, das Nori-Theme für deinen Blog einzurichten. Auf der ThemeOptionen Seite (im Adminbereich unter Design/Theme Optionen) hast du verschiedene, praktische Möglichkeiten der Anpassung.
Individuelle Linkfarbe und weiße Standardtextfarbe
In der ersten Theme-Option kannst du über einen Hex (#) -Farbwert oder den Farbwähler deine eigene
Linkfarbe wählen. Die Linkfarbe wird auch als Headerfarbe verwendet. Möchtest du einen dunklen Hintergrund einrichten (beu Design / Hintergrund möglich), kannst du anschließend weiß als Standardschriftfarbe
wählen.
Eigenes Logobild
Außerdem kannst du über die Theme-Optionen dein eigenes Logobild (jpg oder transparentes png) hochladen. Die Breite deines Logos sollte 320 Pixel sein. So kann garantiert werden, dass dein Logobild auf
einem Smartphone, Tablet und in der Desktopansicht passend angezeigt wird.
Lade dein vorbereitetes Logobild einfach über den WordPress-Mediathek Link in die Mediathek hoch und
kopiere dir dort die Datei-URL deines Logos. Jetzt kannst du diese Datei-URL in den Theme-Optionen einfügen. Vergiss dabei nicht, auf „Änderungen übernehmen“ zu klicken.
Footertext anpassen
Außerdem kannst du den Footer-Credittext für deinen Blog ändern und einen individuellen Footer-Text
in das Feld bei „Footer-Text anpassen“ eintragen (HTML z.B. <a href="linkurl">Linktext</a> ist
möglich).
Eigenes Favicon
Als weitere Theme-Option kannst du außerdem ein eigenes Favicon-Image für deinen Blog hochladen.
Erstelle einfach ein 16x16px großes JPG-Bild und wandle es mit Hilfe eines Online Favicon-Generators in
das benötigte .ico Dateiformat um. Die favicon.ico Datei lädst du dann über ein FTP-Programm in deinen
Nori-Themeordner hoch und fügst die entsprechende Datei-URL in das Textfeld „Eigenes Favicon“ ein.
Teilen-Buttons (Twitter, Google+, Facebook)
Über die Theme-Optionseite kannst du auch die Buttons von Twitter, Google+ und Facebook (Gefällt mir +
Senden) aktivieren. Optional kannst du die Buttons entweder für Artikel auf der Startseite und auf Einzelseiten, nur auf Artikel-Einzelseiten und auf WordPress-Seiten nutzen.
3. Individuelle Menüs
Im Adminbereich unter Design/Menüs hast du die Möglichkeit, dir individuelle Menüs für deinen Blog einzurichten. So kannst du genau bestimmen, welche Navigationspunkte in deiner Haupt-Navigation angezeigt
werden. Wähle dazu einfach dein individuell angelegtes Menü im Feld "Anordnung im Theme" als HauptNavigation aus und speichere deine Einstellung.
Als zusätzliche Menü-Option kannst du die Footer-Navigation des Nori-Themes nutzen. Diese eignet sich
besonders für einen zusätzlichen Kontakt-Link oder für den Link zum Webseiten-Impressum.
4. Hintergrund anpassen
Du kannst den Hintergrund des Nori-Themes anpassen, indem du unter Design / Hintergrund eine neue
Hintergrundfarbe wählst oder ein Hintergrundbild hochlädst.
Falls du dich für ein Hintergrundbild entscheidest, solltest du darauf achten, dass die Dateigröße deines
Bildes nicht zu groß ist, da der Hintergrund sonst zu lange braucht, um im Browser zu laden (besonders
bei mobilen Geräten). Besser ist es, ein kleines Bild (ca. 100x100 Pixel) zu erstellen und dieses über die
Kacheln-Option vertikal und horizontal zu wiederholen.
5. Widgets
Neben den WordPress Standard-Widgets kannst du die individuellen Widgets Flickr-Widget, Featured
Video-Widget und Social Links Widget des Nori-Themes nutzen.
Mit dem Social Links Widget kannst du auf deine Social-Profiles (z.B. Facebook, Twitter, Flickr, YouTube
und viele mehr) linken. Um das Social Links Widget zu nutzen, trägst du einfach die entsprechenden URLs
deiner Social-Profile für alle Dienste ein, die du anzeigen möchtest. Alle anderen Felder lässt du leer.
Im Flickr Widget kannst du wählen, wie viele Bilder zu in der 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
Filckr-ID herausfindest. Diese trägst du dann ebenfalls im entsprechenden Widgetfeld ein. Bei Flickr ProfilLink und Flickr Profil-URL kannst du unterhalb der Bildervorschau noch einmal auf dein Flickr-Profil oder
auf deine Flickr Diashow verlinken.
Im Featured Video Widget kannst du einfach den Einbetten-Code z.B. von YouTube oder Vimeo einfügen,
um ein Video im Widgetbereich einzubinden.
(Der Haupt-Widgetbereich im Nori-Theme)
Optionaler Widgetbereich
Neben dem Haupt-Widgetbereich unterhalb der Artikel- und Seiteninhalte, gibt es im Nori-Theme noch die
Möglichkeit, zusätzliche Widgets unterhalb der Haut-Navigation anzuzeigen. Dieser Bereich eignet sich
zum Beispiel für einen About-Text Widget oder für Bannerbilder.
6. Artikel-Formatvorlagen (Post Formats)
Im Nori-Theme kannst du für deine Artikel folgende WordPress Artikel-Formatvorlagen nutzen:
Standard, Kurzmitteilung, Link, Zitat, Bild, Galerie und Video
Das Artikel-Format wählst du während des Schreibens oder Bearbeitens eines Artikels 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.
Für die Anzeige von Zitaten kannst du dann im WordPress Text-Editor „Zitat“ bzw. den blockquote-tag wählen. Der Code im HTML-Editor sollte dann folgendes Format haben:
<blockquote>Der Zitat-Text hier...
<cite><a href="#">Zitat-Autor</a></cite></blockquote>
Für Videos kannst du einfach den entsprechenden YouTube oder Vimeo Einbetten-Code (iframe) in den Artikel einfügen. Für die Anzeige von Links im Links-Format kannst du folgende Format und die CSS-Klasse
"link" nutzen:
<a class="link" href="http://linkurl.de/">Das ist der Linktext →</a>
Für das Galerie-Artikelformat kannst du einfach mehrere Bilder über die Hochladen/Einfügen Option in
einen Artikel hochladen. Dann wählst du im Image-Menü die Option „Bildergalerie“ aus. Der Shortcode
[gallery] wird dann automatisch in einen Artikel eingefügt.
Um die Bildergalerie im Nori-Theme optimal anzuzeigen, solltest du 5 Spalten (statt der standardmäßigen 3
Spalten) wählen. Der Code sieht dann so aus:
[gallery columns="5"]
Weitere Optionen zur Verwendung der WordPress-Bildergalerie findest du auch im Elmastudio-Artikel:
http://www.elmastudio.de/wordpress/die-standard-bildergalerie-von-wordpress-nutzen/
7. Layout-Optionen
Fullwidth-Inhalte
Möchtest du für Bilder oder Texte in der Einzelartikel-Ansicht die gesamte Breite nutzen, kannst du
einen Div-Container mit der CSS-Klasse class="fullwidth" um das Bild oder den Textabsatz einbinden. Als Beispiel der Code für ein Bild mit Untertitel in gesamter Artikelbreite:
<div class="fullwidth">
[caption id="attachment_2466" width="1200" align="alignnone"
caption="Das ist ein Captions Text."]<img src="image-url.jpg" alt="alttext" title="title-text" width="1200" height="870" class="alignnone size-full wp-image-2466" />[/caption]
</div>
In der Nori Live-Demo kannst du dir diese Layout-Option hier anschauen:
http://themes.elmastudio.de/nori/2011/12/10/standard-post-with-images/
Seiten-Template: CenterColumn
WordPress-Seiten kannst du entweder in der gesamten Layout-Breite anzeigen (standard) oder du wählst
das Seiten-Template "CenterColumn", um eine schmalere Textbreite zu erhalten (nur in der Desktop-Ansicht sichtbar).
8. Autorenfeld
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 <a href="LinkURL">Link Text</a>).
9. Verschachtelte Kommentare
Nori ist für die Darstellung verschachtelter Kommentare (threaded comments) vorbereitet. Eventuell musst
du unter Einstellungen/Diskussion noch die Option für verschachtelte Kommentare aktiveren und die Anzahl der möglichen Ebenen festlegen.
10. Vorbereitete externe Plugins
Für die Verwendung von Formularen (z.B. einem Kontaktformular) haben wir Styles für das Contact Form
7 Plugin vorbereitet (http://wordpress.org/extend/plugins/contact-form-7/).
Wenn du eine eigene Archivseite für eine Übersicht aller Artikel deines Blogs anzeigen möchtest, kannst du
das Plugin „Smart Archives Reloaded“ verwenden. Die Styles sind ebenfalls schon für das Nori-Layout
angepasst (http://wordpress.org/extend/plugins/smart-archives-reloaded/). Nach der Aktivierung des Plugins musst du nur noch den Shortcode [smart_archives] auf einer neu angelegten Archiv-Seite eintragen.
Falls du längere Code-Schnipsel in deinen Artikeln anzeigen möchtest, solltest du das Syntax Highlight
Evolved Plugin verwenden. Auf diese Weise werden deine Code-Schnipsel auch auf mobilen Geräten optimal angezeigt (http://wordpress.org/extend/plugins/syntaxhighlighter/).
Wenn du die neusten Kommentare genau wie in der Live-Demo von Nori mit Gravatarbildern anzeigen
möchtest, kannst du das Plugin „Better WordPress Recent Comments“ einsetzten (http://wordpress.org/
extend/plugins/bwp-recent-comments/).
Möchtest du die gleiche Darstellung, wie in der Nori Live-Demo erreichen, kannst du in den Plugin-Optionen bei Template Options folgenden Template-Code einfügen:
<li class="sidebar-comment">%avatar%<div class="comment-content"><p><span
class="sidebar-comment-autor"><a href="%link%" title="%post_title_
attr%">%author%</a></span><br />%excerpt%</p></div></li>
Nori ist außerdem für das WP Pagenavi Plugin (http://wordpress.org/extend/plugins/wp-pagenavi/ ) vorbereitet. Du musst lediglich das Plugin installieren und die Einstellungen in den Theme-Optionen vornehmen.
Wähle dabei nicht die CSS-Styles des Plugins aus, da diese bereits extra im Nori-Theme vorbereitet sind.
Auch die Template-Dateien musst du nicht mehr bearbeiten, um die Seitennavigation von WP-Pagenavi
nutzen zu können.
Auch für die zusätzlichen Widgets des Jetpack-Plugins (http://wordpress.org/extend/plugins/jetpack/) sind
die Styles bereits an das Nori-Theme Layout angepasst. So kannst du ganz leicht ein Image-Widget, Newsletter-Subscription Widget und ein Twitter-Widget verwenden.
11. Shortcodes (für Mehrspaltigkeit Info-Boxen und Buttons)
Alle Shortcodes-Codes kannst du dir auch aus der Nori der Live Demo-Seite kopieren:
http://themes.elmastudio.de/Nori/shortcodes/
Um Text zweispaltig anzulegen kannst du folgende Shortcodes in deinen Artikeln oder Seiten nutzen:
[two_columns_one]
Text der linken Textspalte hier...
[/two_columns_one]
[two_columns_one_last]
Text der rechten Textspalte hier...
[/two_columns_one_last]
[divider]
Um Text in drei Spalten anzulegen, kannst du folgende Shortcodes verwenden:
[three_columns_one]
Text der linken Textspalte hier...
[/three_columns_one]
[three_columns_one]
Text der mittleren Textspalte hier...
[/three_columns_one]
[three_columns_one_last]
Text der rechten Textspalte hier...
[/three_columns_one_last]
[divider]
Um Text in vier Spalten anzulegen verwendest du folgende Shortcodes:
[four_columns_one]
Text der ersten Textspalte hier...
[/four_columns_one]
[four_columns_one]
Text der zweiten Textspalte hier...
[/four_columns_one]
[four_columns_one]
Text der dritten Textspalte hier...
[/four_columns_one]
[four_columns_one_last]
Text der vierten Textspalte hier...
[/four_columns_one_last]
[divider]
Der [divider] Shortcode kann genutzt werden, um die Mehrspaltigkeit zu beenden, ohne dass die nächste
Textzeile in den oberen Text fießt (also als clearing div).
Für die Info-Boxen in verschiedenen Farben kannst du folgende Shortcodes einsetzen:
[yellow_box] content here... [/yellow_box]
[red_box] content here... [/red_box]
[green_box] content here... [/green_box]
[white_box] content here... [/white_box]
[blue_box] content here... [/blue_box]
[lightgrey_box] content here... [/lightgrey_box]
[grey_box] content here... [/grey_box]
[dark_box] content here... [/dark_box]
[grey_box]dein Infotext hier... [/grey_box]
Für Buttons in verschiedenen Farben und zwei verschiedenen Größen kannst du folgende Shortcodes verwenden:
[button link="URL" color="red"]Roter Button[/button]
[button link="URL" color="green" target="blank" size="large"]Großer Button[/
button]
[button link="URL" color="yellow" size="small"]Kleiner Button[/button]
Als Button-Farbe beim Wert color kannst du red, green, blue, yellow, grey oder black eintragen.
12. Theme-Übersetzung
Das Nori-Theme ist für die Übersetzung in weitere Sprachen vorbereitet. Am besten verwendest du das
WordPress-Plugin „Codestyling Localisation“ (http://wordpress.org/extend/plugins/codestyling-localization/), wenn du das Theme in eine weitere Sprache übersetzen möchtest oder eine Übersetzung anpassen
möchtest.
13. Child Theme für individuelle Theme-Anpassungen
Falls du Nori über die Theme-Optionen hinaus individuell anpassen möchtest (und du 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 Nori nicht
verloren bzw. werden überschrieben.
Auf der Nori Themeseite (http://www.elmastudio.de/wordpress-themes/nori/) unter Dokumentation & Features (ganz unten) kannst du dir ein für Nori vorbereitetes Child-Themeordner herunterladen. So kannst du
schnell mit deinen Anpassungen loslegen.