Black Walnut Dokumentation

Black Walnut-Bildmaße in Pixel:
• Startseite Bild groß: 1200
• Startseite vier Bilder: 595×595
• Standard Artikelbreite: 630
• Breite Standard-Sidebar: 280
• Centered Seiten-Template Breite: 780
• Logo-Bild Breite: max.350 standard, max. 600 auf Startseite

Wichtig: Um Artikelbilder von bereits veröffentlichten Artikeln an die Black Walnut Beitragsbild-Breite anzupassen, bitte das Regenerate Thumbnails Plugin installieren und einmal laufen lassen. Alle fürs Black Walnut benötigten Artikelbild-Formate werden dann automatisch erstellt.

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 Black Walnut Theme-Ordner (blackwalnut.zip Datei) herunterladen.

1.1. Installation über den WordPress Adminbereich

Um die blackwalnut.zip Datei direkt über den WordPress-Adminbereich zu installieren, klickst du im Admin-Menü auf Design → Themes und dort auf den Installieren-Button ganz oben. Hier siehst du den Theme Hochladen-Button, über den du deine blackwalnut.zip Datei von deinem Computer auswählen, hochladen und installieren kannst. Um dein neu hochgeladenes Theme zu aktivieren, musst du jetzt noch den Aktivieren-Button klicken, den du bei Maus-Hover auf das Theme-Vorschaubild siehst.

1.2. Installation via FTP-Programm

Alternativ zur Installation des Themes direkt im Adminbereich kannst du den entzipten Black Walnut 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 Black Walnut in der Vorschau-Ansicht unter Design → Themes bei den verfügbaren Themes in deinem WordPress-Adminbereich. Dort kannst du das Theme aktivieren.

2. Die Startseite erstellen

Black Walnut bietet ein Standard-Blog und ein extra Startseiten-Template an. Es gibt zwei unterschiedliche Startseiten-Templates, eines mit einem großen Bild und eine alternative Startseite mit vier gleich großen Bildern.

Du kannst je Bild einen Bild-Slogantext einfügen und einen Link für das Bild setzen. Außerdem kannst du auswählen, ob der Slogan-Text auf dem Bild hell oder dunkel sein soll. So hast du auch die Möglichkeit dunkle Bilder auf deiner Startseite zu nutzen.

Um die Startseite zu nutzen, musst du zuerst eine neue, leere Seite (z.B. mit dem Titel „Start“ oder „Startseite“) erstellen und im Feld „Attribute“ das Template Startseite – Großes Bild oder Startseite – 4 Bilder auswählen.

Jetzt kannst du unter Design → Anpassen → Statische Startseite deine neue angelegte Seite als „Startseite“ festlegen. Möchtest du auch einen Blog auf deiner Webseite führen, kannst du eine weitere neue, leere Seite (z.B. mit dem Namen „Blog“ oder „News“) anlegen und diese im gleichen Menü als „Beitragsseite“ auswählen.

2.1. Die Startseiten-Bilder einfügen

Als erstes musst du das Bild für deine Startseite in einem Bildbearbeitungsprogramm wie Photoshop anlegen (siehe Bildmaße in der Infobox oben). Dann musst du dein großes Startseiten-Bild oder die vier kleinen Startseiten-Bilder unter Medien → Datei hinzufügen in WordPress hochladen.

Wenn du nach dem Bild-Upload auf eines der kleinen Vorschaubilder in der Medienübersicht klickst, bekommst du rechts vom Bild die Bild-URL angezeigt. Diese Bild-URL musst du kopieren und unter Design → Anpassen → Startseite – Großes Bild oder … Startseite – 4 Bilder eintragen.

In beiden Startseiten-Menüs findest du für jedes Bild folgende Option: Bild-URL, Link-URL, Slogan-Text, Slogan Text-Position und Slogan Text-Farbe. Du kannst HTML nutzen, um weiter Text-Links in den Slogan-Text einzubinden:

[code]
<a href="Link-URL">Linktext</a>
[/code]

3. Seiten-Templates

Neben der Option Standard-Seiten mit einer rechtsbündigen Sidebar (siehe Seiten Sidebar unter Design → Widgets) anzulegen, haben wir im Black Walnut noch einige weitere Seiten-Templates für dich vorbereitet. Unter Attribute → Template im Adminbereich von Seiten kannst du die folgenden Seiten-Templates auswählen:

  • Centered Page
  • Contact Page
  • Fullwidth Page
  • Testimonials Page
  • Menus Page
  • Startseite – großes Bild
  • Startseite – 4 Bilder

Das Centered Page-Template bietet die Möglichkeit Seiten mit einer maximalen Breite von 780px ohne Sidebar anzulegen. Mit der Contact-Page kannst du eine Seite anlegen, die ein ganz normales Layout mit rechtsbündiger Sidebar hat. Es wird aber automatisch der Inhalt der Kontakt-Sidebar (siehe Design → Widgets) gezeigt. So kannst du extra Widgets für deine Kontaktseite nutzen. Fullwidth-Pages haben eine Seiten-Breite von 1200px, ohne Sidebar.

3.1. Testimonials-Seite

Mit Black Walnut kannst du leicht eine Seite mit Testimonials (Kunden-Stimmen, Feedback deiner Kunden) anlegen. Du benötigst dazu kein extra WordPress-Plugin. Stattdessen kannst du einfach das Seiten-Template „Testimonials Page“ auswählen und im Text-Editor deiner Testimonials-Seite den von uns vorbereiteten Beispiel HTML-Code für Testimonials einfügen. Mit Hilfe des Beispiel-Codes kannst du jetzt deine eigenen Testimonials (mit oder ohne kleine Profilbilder deiner Kunden-Stimmen) einfügen. Für Profilbilder reicht die Bild-Größe 150×150 Pixel.

3.2. Menüs-Seite

Für Café- oder Restaurant-Webseiten bietet Black Walnut ein extra Menü-Seitentemplate an. Auch hier kannst du einfach wieder den vorbereiteten Beispiel-HTML Code in den Text-Editor deiner Menü-Seite einfügen, nachdem du unter Attribute → Template das Menu Page-Template ausgewählt hast.

4. Widgetbereiche und Widgets

Unter Design → Widgets kannst du die Widget-Bereiche des Themes mit deinen Widgets füllen. Black Walnut hat folgende Widget-Bereiche:

Eine Blog-Sidebar (sichtbar auf Artikel-Einzelseiten), eine Seiten-Sidebar (sichtbar Seiten mit dem Standard-Template), eine Kontakt-Sidebar (für das Kontakt Seiten-Template) und 3 Footer-Widgetbereiche für den drei-spaltigen Footer Widgetbereich.

Zitat-Widget (Quote Black Walnut)

Mit dem Black Walnut Zitat-Widget kannst einen deiner Lieblingssprüche oder Zitate in einen der Widgetbereiche integrieren. Du kannst einfach den Zitat-Text in das Feld eintragen und optional auch den Autor des Zitats angeben. Du kannst für einen Link zur Webseite des Zitat-Autors wieder HTML nutzen:

[code]
by <a href ="AuthorURL">Author Name</a>
[/code]

Social Links (mit dem individuelles Menü-Widget)

Für die Social Links mit Icon und Text darunter musst du als erstes ein neues, individuelles Menü mit dem Namen „Social One“ unter Design → Menüs anlegen (für weitere Social Link-Menüs nutze bitte die Menü-Namen „Social Two“ und „Social Three“, es sind bis zu drei Social Link Menüs möglich).

Du kannst die Links zu deinen sozialen Profilen mit Hilfe von „eigenen Links“ eintragen. Die URLs der folgenden sozialen Dienste werden mit Icons angezeigt:

Codepen, Digg, Dropbox, Facebook, Flickr, Google+, Instagram, LinkedIn, Pinterest, Path, Dribbble, PollDaddy, GetPocket, Reddit, Skype, StumpleUpOn, Tumblr, Twitter, Vimeo, YouTube, WordPress.com, WordPress.org, Feed (alle URLs mit /feed) und Email (mit mailto).

Jetzt kannst du wieder zurück zu deinen Widgets unter Design → Widgets gehen und das Individuelle Menü-Widget nutzen, um dein „Social“ Menü in einem Widgetbereich anzuzeigen.

5. Theme Optionen

Unter Design → Anpassen kannst du den WordPress-Customizer mit einer Live-Vorschau aufrufen. Hier findest du alle Theme-Optionen für das Black Walnut-Theme.

Im Tab Seitentitel und Untertitel kannst du dir einen der vier Schriftstile (serifenlos, serifenlos Großbuchstaben, serife oder serifen Großbuchstaben) für deinen Titel auswählen. Außerdem kannst du die allgemeine Schriftgröße des Titels einstellen, sowie die Schriftgröße des Titels auf der Startseite noch einmal unabhängig vergrößern.

Im Tab Farben kannst du die Textfarbe deines Header-Titels, deine Standard-Hintergrundfarbe und die Link-Textfarbe bestimmen.

Im Tab Theme findest du die Optionen das Hauptmenü auf größeren Bildschirmen feststehend zusetzen (fixed-positioned), die Beitragsbilder auf Einzelseiten zu verbergen und automatische Exzerpte (Textauszüge) Auf Archivseiten und/oder im Blog anzuzeigen (so musst du nicht manuell den More-Link in deinen Artikel setzen).

Außerdem kannst du einen individuellen Headertext eintragen, der auf deiner Startseite rechtsbündig im Header angezeigt wird (HTML, z.B. Links sind möglich). Auch den Footer-Credittext kannst du individuell anpassen.

Hinweis zu eigenen CSS-Anpassungen:

Um das Theme mit eigenem CSS anzupassen, kannst du das Custom CSS Feature von Jetpack nutzen, falls du das Jetpack-Plugin sowieso bereits installiert hast. Alternativ kannst du das Plugin “Simple Custom CSS” installieren, um dein eigenes CSS Theme-unabhängig einzutragen. Ein hilfreicher Artikel mit Tipps zu CSS-Anpassungen im Theme ist auch: Eigenes CSS in ein WordPress-Theme integrieren – so funktioniert’s

6. Individuelles Menü

Im Adminbereich unter Design → Menüs kannst du dein Haupt-Menü individuell anlegen, das dann statt des Standard Seiten-Menüs genutzt werden kann.

Du kannst dein eigenes 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ü einfügst. Nachdem du deine Menü erstellt hast, musst du dein neues Menü noch unter Menü-Einstellungen (unten im Menü) als Haupt-Menü markieren und speichern.

7. extra Typografie-Optionen

Du kannst eine Reihe von extra Typografie-Styles im Black Walnut-Theme nutzen, um deine Texte in den Blog-Artikeln und auf Seiten noch ansprechender zu präsentieren. Hier findest du auch noch eine Übersicht der Text-Styles in der Live-Demo.

Intro-Text – Du kannst einen Text-Abschnitt in einer größeren Schrift anzeigen, z.B. den ersten Absatz deines Artikels oder deiner Seite. Dazu kannst du diesen Absatz in einen p tag mit der CSS-Klasse „intro“ setzen:

[code]
<p class=„intro“>Deinen Introtext hier einfügen…</p>
[/code]

Pull Quotes – Um einen Satz im Text noch einmal extra zu betonen, kannst du rechts- und linksbündige Pull Quotes im Text einfügen. Dazu musst du einfach ein oder zwei Sätze in einem p tag mit der CSS-Klasse „pull-left“ oder „pull-right“ einbinden.

[code]
<p class="pull-left">Das ist ein linksbündiger Pullquote-Text.</p>
[/code]

Große Zitate – Neben normalen Zitaten kannst du auch extra große Zitate in deine Artikel und Seiten einfügen, indem du dem blockquote tag die CSS-Klasse „big“ gibst:

[code]
<blockquote class="big">Deinen großes Zitat hier einfügen…</blockquote>
[/code]

8. Shortcodes

Du kannst Shortcodes für mehrspaltige Elemente, Infoboxen und Buttons nutzen. Beispiele und alle Codes zum Kopieren/Einfügen der Shortcodes findest du auf der Shortcode-Seite der Black Walnut Live-Demo.

9. Unterstützte Plugins

Jetpack für Formulare, Teilen-Buttons, zusätzliche Jetpack-Widgets (z.B. Contact Info mit Google Maps-Integration), Carousel Galerie-Slideshow, gekachelte Bildergalerien und unendliches Scrollen des Blogs
Contact Form 7 für Formulare (wenn du Jetpack nicht nutzen möchtest)
Simple Share Buttons Adder für Teilen-Buttons
Custom Favicon, um ein Favicon und Apple Touch Icon zu integrieren.

10. Theme-Übersetzung

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

11. Child Theme

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

12. Dokumentation drucken oder als PDF speichern

Um die Black Walnut 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