Nori Theme Dokumentation

Transkript

1 Nori Theme Dokumentation 1. Die Theme-Installation Nach dem erfolgreichem Themekauf erhältst du eine 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 -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 Theme- Optionen 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.

2 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 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 Haupt- Navigation 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.

4 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 Profil- Link 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.

5 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=" 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: 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:

6 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 ( 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 ( 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 ( 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 ( 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 ( ) 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 ( 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.

7 11. Shortcodes (für Mehrspaltigkeit Info-Boxen und Buttons) Alle Shortcodes-Codes kannst du dir auch aus der Nori der Live Demo-Seite kopieren: 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]

8 [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 ( 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 ( unter Dokumentation & Features (ganz unten) kannst du dir ein für Nori vorbereitetes Child-Themeordner herunterladen. So kannst du schnell mit deinen Anpassungen loslegen.