Baylys Dokumentation

Video Tutorial

1. Theme-Installation

Nach dem erfolgreichen Themekauf erhältst du eine Email mit deinem individuellen Download-Link. Über diesen Link kannst du dir den Baylys Theme-Ordner (.zip Datei) herunterladen.

1.1. Installation über den WordPress Adminbereich

Um das Baylys-Theme direkt über den WordPress-Adminbereich zu installieren, klickst du im WordPress-Admin-Menü 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 Menü-Punkt „Hochladen“.

Der Baylys Theme-Ordner muss für das Hochladen direkt über den WordPress-Adminbereich immer noch im .zip-Format sein. Wähle also die Datei Baylys.zip aus und klicke auf den Button „Jetzt installieren“. Nach der erfolgreichen Installation klickst du auf die Option „Aktivieren“. Dein Baylys-Theme ist nun das aktuell aktive Theme deines Blogs.

1.2. Installation via FTP-Programm

Alternativ zur Installation des Themes direkt im Adminbereich kannst du den entzipten Baylys Theme-Ordner auch mit Hilfe eines FTP-Programms (z.B. dem kostenlosen Programm Filezilla) auf deinen Serverplatz hochladen. Dafür musst du den kompletten Baylys-Ordner in den WordPress Installations-Ordner …/wp-content/themes/ hochladen.

Nach dem Upload des Theme-Ordners findest du Baylys in der Vorschau-Ansicht unter Design / Themes bei den verfügbaren Themes in deinem WordPress-Adminbereich. Dort kannst du das Theme aktivieren.

2. Theme-Optionen

Nach der Installation kannst du loslegen, das Baylys-Theme für deinen Blog einzurichten. Über den Menüpunkt Theme-Optionen (siehe Design/Theme Optionen) findest du verschiedene, praktische Möglichkeiten zur Anpassung und Individualisierung des Themes (Screenshot der Theme-Optionenseite).

2.1. Eigene Farben

Ganz oben auf der Theme-Optionseite kannst du entweder über einen Hex-Farbwert (z.B. #437bf5) oder per Klick in das Farbfeld über den Farbwähler deine eigene Linkfarbe, eine Link-MausHoverfarbe und eine Footer-Hintergrundfarbe auswählen.

2.2. Layout-Optionen

Du kannst außerdem wählen, ob du das Baylys-Theme mit einer rechten Sidebar, einer linken Sidebar oder ohne Sidebar nutzen möchtest.

2.3. Eigenes Logo, Artikel-Exzerpte und Footer-Text

Weiter kannst du auf der Theme-Optionenseite ein eigens Logobild hochladen (ein transparentes PNG ist als Datei-Format am besten geeignet). Die Größe des Logos ist flexibel, 250 x 40 Pixel sind als Anhaltspunkt ein geeignetes Format.

Möchtest du nicht den more-link in einem Artikel setzen, um diese auf der Blog-Startseite zu kürzen, kannst du als nächstes die automatische Exzerpt-Option wählen. Bei dieser Ansicht werden alle Artikel automatisch nach 35 Zeilen gekürzt und ein Weiterlesen-Link wird angezeigt. Allerdings zeigen automatische Exzerpte keine Artikel-Vorschaubilder an.

Direkt in den Theme-Optionen kannst du auch den Footertext deiner Webseite anpassen und einen individuellen Footertext in das Feld eintragen (HTML ist möglich).

2.4. Portfolio Kategorie

Möchtest du das Portfolio-Seitentemplate von Baylys verwenden, kannst du hier die Kategorie-Titelform der Kategorie wählen, die du als Portfolio verwenden möchtest. Die Titelformen von Kategorien findest du unter Artikel / Kategorien.

2.5. Favicon und Apple Touch Icon

Als weitere Theme-Option kannst du ein eigenes Favicon für deine Webseite hochladen. Erstelle einfach ein 16×16 Pixel großes jpg-Bild und wandle es mit Hilfe eines Online Favicon-Generators (z.B. www.faviconr.com) in das benötigte .ico Dateiformat um. Die favicon.ico Datei lädst du dann über ein FTP-Programm (z.B. Filezilla) in deinen Baylys-Themeordner hoch und fügst die entsprechende Datei-URL in das Textfeld „Eigenes Favicon“ ein.

Zusätzlich kannst du ein Apple Touch Icon (Icon zum Speichern von Webseiten auf dem Home Screen z.B. des iPads) einfügen, indem du ein 128×128 Pixel großes PNG-Bild erstellst, dieses über die Mediathek hochlädst und die Bild-URL in das Textfeld „Apple Touch Icon“ einfügst. Abgerundete Ecken oder ein Glossy-Effekt werden auf Apple Geräten automatisch für dein Icon erstellt.

2.6. Teilen Buttons (Twitter, Google+, Facebook, Pinterest)

Über die Theme-Optionseite kannst du auch die offiziellen Teilen-Buttons von Twitter, Google+, Pinterest und Facebook für deinen Blog aktivieren. Optional kannst du die Buttons entweder für Artikel auf der Blog-Startseite und auf Einzelseiten oder nur auf den Artikel-Einzelseiten sowie auf WordPress-Seiten verwenden.

2.7. Responsive Slider

Über die letzte Theme-Option kannst du den Bilder-Slider des Responsive Slider WordPress-Plugins automatisch unter deinem Blog-Titel einbinden. Der Slider wird dann auf deinen Blog-Startseiten oder (wenn du eine statische Seite als Startseite gewählt hast) auf deiner statischen Startseite angezeigt. Die Slider-Bilder sollten die Maße 1400×550 Pixel haben.

Eine Anleitung zur Verwendung des Responsive Slider-Plugins findest du auch im Elmastudio Blog-Artikel: „Der Responsive Slider vorgestellt“.

3. Individuelle Menüs

Es gibt zwei Menü-Optionen im Baylys-Theme. Die Haupt-Navigation (im Header) und eine optionale Footer-Navigation. Nach der Theme-Installation werden in der Haupt-Navigation standardmäßig alle Seiten deines Blogs angezeigt. Über die Option Design / Menüs im WordPress-Adminbereich kannst du ein individuelles Menü für deine Haupt-Navigation aus individuellen Links, Kategorien oder Seiten anlegen. Über das Feld „Anordnung im Theme“ (oben rechts bei Menüs) musst du dein individuell angelegtes Menü jetzt nur noch als Haupt-Navigation auswählen und speichern.

Als zweites, optionale Menü kannst du eine Footer-Navigation anlegen. Auch dieses Menü musst du erst wieder unter „Anordnung um Theme“ als Footer-Navigation auswählen. In der Footer-Navigation werden keine Unter-Menüpunkte angezeigt.

4. Widgets

Das Baylys-Theme bietet 2 Widgetbereiche an, den Haupt-Widgetbereich (für die Integration von Widgets in der rechten oder linken Sidebar) und den 4-spaltigen Footer-Widgetbereich (für die Integration von Widgets im Footer, siehe Footer-Spalte 1 bis 4).

Neben WordPress Standard-Widgets und einigen Jetpack-Widgets (z.B.Twitter, Bild, Blog per Email-Abo) kannst du die folgenden individuellen Widgets im Baylys-Theme nutzen:

4.1. Baylys Social Links Widget

Mit dem Social Links-Widget kannst du auf deine sozialen Profilseiten (z.B. Facebook, Twitter, Flickr,
YouTube und viele mehr) verlinken. Um das Social Links-Widget zu nutzen, trägst du einfach die entsprechenden URLs deiner Profile für alle Dienste ein, die du anzeigen möchtest. Alle anderen Felder lässt du einfach leer. Über die Theme-Optionenseite (siehe eigene Farben) kannst du die Hintergrundfarbe des Social Links Widgets bestimmen.

4.2. Baylys Flickr Widget

Im Flickr-Widget kannst du wählen, wie viele Bilder du in einer 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 Flickr-ID herausfindest. Diese trägst du dann 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.

4.3. Baylys Featured Video Widget

Im Featured Video-Widget kannst du einfach den Einbetten-Code z.B. eines YouTube- oder Vimeo-Videos einfügen, um ein Video im Widgetbereich anzuzeigen.

4.4. Baylys About Widget

Im Baylys About-Widget kannst du über die Bild-URL ein Profilbild von dir eintragen (lade dieses wieder zuerst über Mediathek / Datei hinzufügen hoch). Die Breite und Höhe deines Bildes gibst du dann ebenfalls im Widgetbereich an (nur die Zahl ohne die Maßeinheit px).

5. Artikel-Formatvorlagen (Post Formats)

Im Baylys-Theme kannst du neben Standard-Artikeln die folgenden WordPress Artikel-Formatvorlagen nutzen: Bild, Galerie, Video, Audio, Link, Zitat, Kurzmitteilung, Status. Das Artikel-Format wählst du 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.1. Zitat

Für die Formatierung von Zitaten kannst du im WordPress Text-Editor das Symbol „Zitat“ bzw. im HTML-Editor den b-quote Button auswählen, nachdem du deinen Zitat-Text markiert hast. Der Code im HTML-Editor sollte dann folgendes Format haben:

[code]

<blockquote>Der Zitat-Text hier…</blockquote>

[/code]

Möchtest du außerdem den Autor des Zitats angeben, kannst du im HTML-Editor den cite-tag hinzufügen:

[code]

<blockquote>Der Zitat-Text hier…
<cite><a href="#">Zitat-Autor</a></cite></blockquote>

[/code]

5.2. Video

Für Videos kannst du einfach den entsprechenden YouTube- oder Vimeo-Einbetten-Code (iframe) in den Artikel einfügen. Falls du Probleme mit der direkten Einbindung des iframe-Codes hast (dieser wird in manchen Fällen automatisch nach dem Speichern wieder gelöscht), kannst du das IFrame WordPress-Plugin nutzen. Mit Hilfe des Plugins kannst du dann einen iframe-Shortcode für die Einbindung von Videos nutzen. Videos werden in allen Artikeln automatisch in der vollen Artikelbreite anzeigt, so können sie für kleinere Bildschirmformate automatisch kleiner skaliert werden.

5.3. Link

Für die Anzeige von Links im Link Artikel-Format kannst du folgendes Format und die CSS-Klasse „link“ im HTML-Editor verwenden:

[code]

<a class="link" href="http://linkurl.de/">Das ist der Linktext</a>

[/code]

Der Pfeil hinter deinem Link-Text wird mit Hilfe von CSS automatisch im Link-Artikelformat eingefügt.

5.4. Bildergalerie

Für das Galerie-Artikelformat kannst du ganz einfach mehrere Bilder über die Hochladen/Einfügen-Option (oberhalb des Editor-Feldes) in einen Artikel hochladen. Dann wählst du im Image-Menü die Option „Bildergalerie“ aus. Der Gallery-Shortcode wird so automatisch in einen Artikel eingefügt.

Möchtest du alle Galerie Vorschau-Bilder in einem einheitlichen Format einbinden, solltest du in deinen WordPress Admin-Einstellungen unter Einstellungen / Mediathek / Größe der Miniaturbilder dein bevorzugtes Miniaturbild-Format (z.B. 250x250px) und die Option „Beschneide das Miniaturbild auf die exakte Größe“ auswählen. Als Mindestbreite und Höhe solltest du aber auf jeden Fall 340 x 280 px angeben, wenn du die Portfolio-Funktion von Baylys nutzen möchtest.

Weitere Optionen zur Verwendung der WordPress-Bildergalerie und des Shortcodes findest du auch im Elmastudio-Artikel: „Die Standard-Bildergalerie von WordPress nutzen“.

5.5. Bild

In das Bild-Artikelformat kannst du einfach wie gewohnt über den „Hochladen“Einfügen“-Upload-Button ein Bild (mit oder ohne Bildbeschreibung) in einen Artikel einbinden.

5.6. Audio

Für die Integration eines Audio-Streams eignet sich z.B. das Soundcloud-iframe Widget von
soundcloud.com. Mit Hilfe des Soundcloud Shortcode WordPress-Plugins funktioniert die Einbindung des Audio-Streams besonders leicht. Das Soundcloud-Widget ist auch für responsive Themes geeignet und funktioniert auch auf allen
iOS-Geräten (iPhone, iPad).

5.7. Chat

Um das Chat-Artikelformat zu stylen, musst du eine ul-Liste mit der CSS-Klasse „chat“ erstellen und den li-Listenelementen jeweils abwechselnd die CSS-Klassen „odd“ und „even“ zuweisen.

[code]
<ul class="chat">
<li class="odd">Text 1…</li>
<li class="even">Text 2…</li>
<li class="odd">Text 3…</li>
<li class="even">Text 4…</li>
</ul>
[/code]

6. Seiten-Templates

Beim Anlegen oder Bearbeiten einer Seite kannst du über Attribute / Template die drei unterschiedlichen Seiten-Templates von Baylys (Ohne Sidebar, Full Width und Portfolio) auswählen. Das Full Width-Seitentemplate eignet sich dabei besonders für die Nutzung der Mehrspaltigen Shortcodes.

Über das Seiten-Template „Portfolio“ (hier eine Beispiel-Ansicht) kannst du eine Übersicht aller Artikel deiner in den Theme-Optionen festgelegten Portfolio-Kategorie anzeigen. Du kannst außerdem einen Intro-Text für dein Portfolio erstellen (indem du einfach einen normalen Standardtext auf der Seite angibst. Wichtig ist außerdem, dass du allen Artikeln in der Portfolio-Kategorie ein Artikelbild mit dem Mindestmaß 340 x 280 Pixel zuteilst. In den Artikelbild-Einstellungen bei Einstellungen / Mediathek sollte ebenfalls dieses Format gewählt sein.

7. Autorenfeld in Einzelartikeln

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 Link Text). Das Gravatar des Autors wird automatisch integriert.

8. Shortcodes

Im Baylys-Theme kannst du Shortcodes für mehrspaltige Texte (oder andere Elemente), Infoboxen und Buttons nutzen. Beispiele und den Code zum Kopieren findest du auf der Shortcode-Beispielseite der Baylys Live-Demo.

9. Theme-Übersetzung

Das Baylys-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 oder eine Übersetzung anpassen möchtest.

10. Child Theme

Falls du Baylys ü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 gehen deine eigenen Anpassungen bei einem späteren Update von Baylys nicht verloren bzw. werden überschrieben. Du kannst du dir den vorbereiteten Baylys Child-Theme Order herunterladen (Download: Baylys Child-Theme). So kannst du schnell mit deinen Anpassungen loslegen.