Weta Dokumentation

Demo / Theme kaufen

Video Tutorial

Weta Maße in Pixel:
• Standard Artikelbreite: 660
• Standard-Beitragsbild: 660 + flexible Höhe
• Breite Blog-Sidebar: 280
• Breite Sidebars Startseite: 300
• Beitragsbilder für „Weta: Recent Posts“ Widget: 1000×1000
• Beitragsbilder für „Weta: Posts Slider“ Widget: 1000×667

Wichtig: Um Artikelbilder von bereits veröffentlichten Artikeln anzupassen, bitte das Regenerate Thumbnails Plugin installieren und einmal laufen lassen. Alle fürs Weta benötigten Artikelbilder werden dann automatisch für deine Webseite generiert.

Live-Demo Logoschrift: FF Mister F Pro (erhältlich bei myfonts.com)

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 Weta Theme-Ordner (weta.zip) herunterladen.

1.1. Installation über den WordPress Adminbereich

Um das Weta-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 weta.zip Datei von deinem lokalen Computer auswählen und installieren. Nach der erfolgreichen Installation klickst du auf die Option Aktivieren. Dein Weta-Theme ist jetzt das aktuell aktive Theme deiner Webseite.

Wichtig: Der Weta 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 Weta 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 Weta in der Vorschau-Ansicht unter Design → Themes bei den verfügbaren Themes in deinem WordPress-Adminbereich. Dort kannst du das Theme dann aktivieren.

2. Die Startseite erstellen

Weta bietet eine Standard-Blogansicht mit einem Inhaltsbereich und einer optionalen rechtsbündigen Blog-Sidebar an. Wenn du die Weta-Startseite mit den verschiedenen Artikel-Bereichen nutzen möchtest, musst du dir als erstes eine neue, individuelle Startseite einrichten und diese als statische Startseite auswählen.

Dazu erstellst du eine neue, leere Seite (z.B. mit dem Titel „Start“ oder „Startseite“) und wählst für diese Seite im Bearbeitungsfeld „Attribute“ das Template Front Page aus. Jetzt kannst du unter Design → Anpassen → Statische Startseite deine neue Startseite als „statische Startseite“ auswählen.

Möchtest du auch die Standard-Blogansicht nutzen (wie wir es auch über den Link „Blog“ in der Weta Live-Demo tun), kannst du eine weitere neue, leere Seite anlegen (z.B. mit dem Namen News oder Blog) und diese unter Design → Anpassen → Statische Startseite als „Beitragsseite“ auswählen.

3. Widgetbereiche und Widgets

Weta bietet eine ganz Reihe von praktischen Widgetbereichen und Theme-eigenen Widgets an. Du findest die Einstellungen für die Widgets unter Design → Widgets oder unter Design → Anpassen → Widgets.

3.1. Blog-Sidebar Widgetbereich

Als erstes kommt die Standard-Sidebar Blog – Sidebar, ein rechtsbündige Sidebar mit einer Breite von 280 Pixeln. Die Blog Sidebar wird im Standard-Bloglayout, auf Artikel-Einzelseiten und auf Blog-Archivseiten angezeigt.

Du musst die Blog-Sidebar nicht unbedingt nutzen. Wenn du den Widgetbereich leer lässt, wird der Blog in einem mittigen Layout ohne Sidebar angezeigt.

3.2. Alle Startseiten-Widgetbereiche

Als nächstes siehst du die Weta Startseiten-Widgetbereiche:

• Fullwidth (oben)
• Content 1
• Sidebar 1 (rechtsbündig)
• Fullwidth (mittig)
• Sidebar 2 (linksbündig)
• Content 2
• Fullwidth (unten)

Hier eine Übersicht, wie die Widgetbereiche auf der Startseite angelegt sind:

weta-widgetareas-de

Hinweis: Auch auf der Startseite musst du nicht alle zur Verfügung stehenden Widgetbereiche nutzen. Du kannst z.B. auch nur einen der Fullwidth-Widgetbereiche einsetzen oder nur den Content 1 und Sidebar 1-Bereich.

3.3. Startseiten-Widgets

Für Weta haben wir eine Reihe von Weta-eigenen Widgets speziell für die individuelle Startseite von Weta vorbereitet.

Weta: Neueste Artikel (Weta: Recent Posts)

Mit dem Weta: Neueste Artikel Widgets kannst du die Artikel auf deiner Startseite gefiltert nach unterschiedlichen Kategorien anzeigen. Du kannst dabei unterschiedliche Layouts wählen (von 1-4-spaltig und mit dem Artikelinhalt rechtsbündig oder unterhalb des Beitragbildes).

Die Mehrspaltigkeit wird nur in den großen einspaltigen und in den Artikelinhalts-Widgetbereichen genutzt. In den Sidebar-Widgetbereichen werden alle Artikel immer einspaltig angezeigt.

Außerdem kannst du das Bildformat auswählen und gewisse Elemente des Artikels verbergen. So kannst du eine lebendige Startseite im Stil eines Online-Magazins gestalten. Alle Artikel können mit Hilfe von Kategorien nach Themengebieten gefiltert werden. Du kannst mehrere Kategorien auswählen, indem du sie hintereinander mit Komma getrennt auflistest.

Wichtig ist, dass du nicht den Kategorie-Namen einträgst, sondern den Permalink-Namen der Kategorie. Du findest die Liste Kategorie-Permalinks unter Beiträge → Kategorien.

Du kannst auch Video-Artikel im Widget anzeigen. Dazu solltest du alle Artikel im Video-Artikelformat in einer speziellen Kategorie anlegen, damit du sie filtern kannst. Artikel im Video-Artikelformat (das Artikelformat kannst du im Artikel-Adminbereich wählen) haben automatisch ein kleines Play-Icon unten links im Beitragsbild. Außerdem werden auf den Einzelseiten von Video-Artikeln standardmäßig die Beitragsbilder nicht mehr angezeigt, so dass dein integriertes Video direkt abgespielt werden kann, sobald der Artikel angeklickt wird.

Alternativ kannst du auch das WordPress-Plugin Featured Video Plus nutzen, um Videos direkt als Beitragsbilder zu integrieren.

Weta: Artikel Slider (Weta: Post Slider)

Mit dem Weta Artikel Slider kannst du einen oder mehrere Artikel-Slider auf deiner Startseite (oder zusätzliche auch in deiner Blog-Sidebar) integrieren. Du musst einfach nur die Schlagwörter der Artikel bestimmen, die du im Slider anzeigen möchtest. Du kannst bis zu 10 Artikel je Slider wählen.

Wichtig ist, dass alle Artikel, die im Slider gezeigt werden ein Beitragsbild mit den Maßen 1000×667 Pixel (oder größer) haben.

Weta: Nummerierte neueste Artikel (Weta: Numbered Recent Posts)

Über dieses Widget kannst du Artikel in einem etwas anderem Layout anzeigen und auf einer Hintergrundfläche (die Hintergrundfarbe ist wählbar unter Design → Anpassen → Farben) zwar ohne Beitragsbild und mit einer Nummerierung. Du kannst dis zu 12 Artikel in einem Widget anzeigen.

weta-numbered-posts

Widget: Zitat (Weta: Quote)

Mit dem Weta: Zitat Widget kannst du deine Lieblingssprüche oder Zitate auf deiner Webseite einbinden. Du kannst einfach den Zitat-Text in das Feld eintragen und optional auch noch den Autor des Zitats angeben. Du kannst für einen Link zur Webseite des Zitat-Autors wieder HTML nutzen:

by <a href ="AuthorURL">Autor Name</a>
Widget: Autoren (Weta: Authors)

Das Weta: Autoren Widget ist eine schöne Option, um die Autoren oder Mitglieder deiner Webseite (oder auch dein Team) zu präsentieren. Du kannst die Anzahl der angezeigten Autoren bestimmen und das Format der Gravatare (rund oder quadratisch). Es wird automatisch der neueste Artikel des jeweiligen Autors und ein Link zu allen Artikel eines Autors angezeigt.

weta-authors

Social Links

Um deine Social Links mit Icons in einem der Sidebar-oder Footer Widgetbereiche anzuzeigen, musst du die Links in einem eigenen Menü unter Design → Menüs anlegen (mit Hilfe der eigenen Link Option).

Für die folgenden sozialen Dienste sind Icons vorbereitet:

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

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

3.4. Footer-Widgetbereiche

Weta bietet auch einen optionalen fünfspaltigen Footer-Widgetbereich an. Dazu musst du einfach nur Widgets in die Widgetbereiche Footer 1 bis Footer 5 einfügen.

4. Theme Optionen und Anpassungsmöglichkeiten

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

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.

4.2. Farben

Im Tab Farben kannst du die Textfarbe deines Standard Seiten-Titels, der Standard-Hintergrundfarbe, deine Linkfarbe, die Header- und Footer-Hintergrundfarbe sowie die Hintergrundfarben für die Autoren-, Zitat- und Nummerierte neueste Artikel-Widgets anpassen.

4.3. Theme Optionen

Im Tab Theme Optionen kannst deine Hauptmenü-Leiste auf feststehend setzen, die Header-Suche (oben rechts) aktivieren, die Shop-Elemente des Headers aktivieren (nur, wenn du Weta mit WooCommerce nutzt), die hellgrauen Linien des Designs verbergen oder Beitragsbilder auf den Einzelseiten von Beiträgen verbergen.

Außerdem kannst du automatische Exzerpte/Textauszüge für die Archivseiten und/oder den Standard-Blog aktivieren, wenn du den Weiterlesen-Link in deinen Artikeln nicht setzen möchtest.

Du kannst auch einen Weiterlesen-Link für die Artikelauszüge auf der Weta-Startseite aktivieren. Außerdem haben wir Teilen-Buttons im Weta-Design (schwarze, schlichte Buttons) vorbereitet. Um diese zu nutzen, kannst du die entsprechende Theme-Option aktivieren. Du musst dazu auch das Teilen-Feature von Jetpack aktiv haben und die „Icons only“-Option in den Jetpack Teilen-Einstellungen ausgewählt.

Wenn du eine feststehende Menüleiste gewählt hast, kannst du ein kleines zusätzliches Logo-Icon linksbündig in der Menüleiste integrieren. Das Logo musst du erst mit der max. Höhe von 34 Pixel und der max. Breite von 100px vorbereiten und über das Medien-Menü im WordPress-Adminbereich hochladen. Dann musst du die URL des Bildes kopieren und diese in die Theme-Option einfügen.

Als weiteres hast du noch die Option ein paar Texte anzupassen. Und zwar den Kredit-Linktext im Footer, den Text des Subscribe-Buttons und des „Nein Danke“-Textes im Subscribe Widgetbereich mit der Lightbox.

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 Haupt-Menü für deine Hauptnavigation im Headerbereich, sowie ein zusätzliches „Header Top Menü“ und ein „Header- und Footer Social Menü“ 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, Schlagworte oder Formatvorlagen in dein Menü addierst. Nachdem du deine Menüpunkte angelegt hast, musst du dein neues Menü noch unter Menü-Einstellungen unten im Menü als das jeweilige Menü markieren und speichern.

6. Typografie Optionen

Du kannst eine Reihe von extra Typografie-Styles im Weta-Theme nutzen, um deine Texte noch ansprechender zu präsentieren. Hier findest du auch noch eine Übersicht der Text-Styles in der Live-Demo.

Dropcaps /Initial – Um einen Paragraph z.B. am Anfang eines Artikels hervorzuheben, kannst du einen großen Initial-Buchstaben zu Beginn des Absatzes nutzen. Dazu musst du diesen Code im HTML-Editor auf deinem Artikel oder auf deiner Seite nutzen:

<span class="dropcap">E</span>rster Buchstabe…

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>

7. Weta mit WooCommerce

Weta ist für das eCommerce WordPress-Plugin WooCommerce vorbereitet. Das heißt du kannst einfach das WooCommerce Plugin installieren und Weta für deinen Online-Shop nutzen. Für die Seiten „Warenkorb“, „Kasse“ und „Konto“ kannst du für Weta vorbereiteten Seiten-Templates aktivieren.

Außerdem kannst du die WooCommerce Produkt-Widgets natürlich auch in die Startseiten-Widgetbereiche einfügen und so deine Produkte speziell featuren.

Um den Warenkorb-Button und die extra Menü-Elemente im Header anzuzeigen, musst du nur die entsprechende Theme-Option unter „Anpassen“ aktivieren.

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

9. Unterstützte Plugins

Contact Form 7 für Formulare (z.B. das Kontaktformular)
Jetpack für Teilen-Buttons, Jetpack Widgets wie Blog Subscribe, Carousel Galerie-Slideshow, Tiled Gallery, Kontaktformulare und Infinite Scroll
Featured Video Plus für Videos als Beitragsbilder
WooCommerce für Online-Shops
WP Instagram Widget für eine Instagram Bildervorschau
MailChimp for WordPress Lite für ein Mailchimp-Newsletter Formular im Subscribe Blog-Widgetbereich

10. Theme-Übersetzung

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

11. Child Theme

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

12. Dokumentation drucken oder als PDF speichern

Um die Weta 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