Werkstatt Dokumentation

Werkstatt Maße in Pixel:
• Breite Beitragsbild: 1100 oder kleiner (Höhe flexibel)
• Standard-Breite Beiträge: 600
• Bilderbreite in Widgets (Info Overlay-Spalten): 800

Wichtig: Um Bilder von bereits veröffentlichten Beiträge automatisch anzupassen, kannst du das Regenerate Thumbnails Plugin installieren und einmal laufen lassen.

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 Werkstatt Theme-Ordner (werkstatt.zip) herunterladen.

1.1. Installation über den WordPress Adminbereich

Um das Werkstatt-Theme direkt über den WordPress-Adminbereich zu installieren, klickst du im WordPress-Admin-Menü auf Design → Themes. Hier findest du den Button Installieren ganz oben auf der Seite. Über den Button Theme hochladen kannst du dann die werkstatt.zip Datei von deinem lokalen Computer auswählen und installieren. Nach der erfolgreichen Installation klickst du auf die Option Aktivieren. Dein Werkstatt-Theme ist jetzt das aktuell aktive Theme deiner Webseite.

Wichtig: Der Werkstatt Theme-Ordner muss für das Hochladen direkt über den WordPress-Adminbereich im zip-Format sein.

1.2. Installation via FTP-Programm

Alternativ zur Installation des Themes direkt über den WordPress-Adminbereich kannst du den entzipten Werkstatt Theme-Ordner auch mit Hilfe eines FTP-Programms (z.B. dem kostenlosen Programm Filezilla) über Web-FTP auf deinen Serverspace 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 Werkstatt in der Vorschau-Ansicht unter Design → Themes bei den verfügbaren Themes in deinem WordPress-Adminbereich. Dort kannst du das Theme dann aktivieren.

2. Blog-Startseite

Die Blog-Seite von Werkstatt hat ein horizontal-scrollbares Layout. Es ist wichtig, dass allen Beiträgen ein Beitragsbild zugewiesen wird, da die Werkstatt-Blogseite reduziert nur mit Beitragsbildern und dem Titel (bei Maushover) angezeigt wird.

Den Intro-Text zu Beginn des Blogs kannst du über die „Theme Optionen“ unter Design → Anpassen eintragen (siehe Beschreibung der Theme Optionen weiter unten).

3. Widget-Infobereich

Werkstatt bietet einen 4-spaltigen Widget-Overlaybereich, der über den Info-Button (rechts oben im Menü) erreicht werden kann. Du kannst die vier Widget-Spalten unter Design → Widgets mit deinen Widgets füllen.

Du kannst alle WordPress Standard-Widgets und die zusätzlichen Widgets des Jetpack-Plugins in die Widgetbereiche einfügen.

4. Theme Optionen

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

4.1. Theme Optionen

Im Tab Theme Optionen kannst du den Intro-Text für die Blog-Startseite eintragen (HTML ist erlaubt) und den Credit-Linktext individualisieren (dieser wird in der vierten Widget-Spalte ganz unten angezeigt).

4.1. Eigenes Logo

Dein eigenes Logo kannst du unter Design → Logo einfügen. Den Standard-Titel und Beschreibungstext kannst du dann unter Seiten-Titel deaktivieren. Das Logobild sollte nicht allzu hoch sein, so dass das Layout vom Theme erhalten bleibt.

4.2. Farben

Im Tab Farben kannst du die Textfarbe deines Standard Seiten-Titels, der Standard-Hintergrundfarbe, deine Linkfarbe 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

5. Individuelle Menüs

Im Adminbereich unter Design → Menüs kannst du dir ein eigenes Menü (wenn du möchtest mit Unter-Menüpunkten) für deine Hauptnavigation anlegen.

Du kannst ein Menü erstellen, indem du einen beliebigen Namen für dein Menü wählst und dann deine gewünschten Seiten, Links, Kategorien oder Schlagwörter in dein Menü addierst. Nachdem du deine Menüpunkte angelegt hast, musst du dein neues Menü noch unter Menü-Einstellungen unten als Hauptmenü markieren.

Social Links Menü

Außerdem kannst du die Social-Links unterhalb des Blog-Intro-Textes mit Hilfe eines weiteren individuellen Menüs (mit dem Namen „Social“) anzeigen. Dazu erstellst du Links mit der individuellen Link-Option. Dann speicherst du dein Link als „Social-Menü“ in den Menü-Einstellungen.

Die Icons werden dann für die folgenden Dienste automatisch angezeigt.

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

6. Typografie Optionen

Du kannst eine Reihe von extra Typografie-Styles im Werkstatt-Theme nutzen, um deine Texte noch ansprechender zu präsentieren.

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.

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

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:

<p class="intro">Deinen Introtext hier einfügen…</p>

Breiter Beitragsbereich – Du kannst extrabreite Bereiche anlegen (um z.B. Fotos größer zu präsentieren). Dazu musst du deine Inhalte in einen extra Div-Container einbinden.

 <div class="wide-content">
Your content here, images, text or iframe videos...
</div>

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 Werkstatt Live-Demo.

9. Unterstützte Plugins

Contact Form 7 für Formulare (z.B. das Kontaktformular)
Jetpack für Teilen-Buttons, Jetpack Widgets, Carousel Galerie-Slideshow, Tiled Gallery, Kontaktformulare und den Infinite Scroll-Effekt auf dem Blog.

10. Theme-Übersetzung

Werkstatt ist für die Übersetzung in weitere Sprachen vorbereitet. Am besten verwendest du das WordPress-Plugin Loco Translate, wenn du das Theme in eine weitere Sprache übersetzen oder eine Übersetzung anpassen möchtest. (Wenn du deine Übersetzung auch für andere Werkstatt-Nutzer zur Verfügung stellen möchtest, würden wir uns sehr freuen.)

11. Child Theme

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

12. Dokumentation drucken oder als PDF speichern

Um die Werkstatt 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 oder PDF speichern