Suidobashi Dokumentation

Demo / Theme kaufen

Suidobashi Maße in Pixel:
• Standard Artikel- und Portfoliobreite: 700
• Artikel-Beitragsbild: max. 960 + Höhe flexibel
• Portfolio-Beitragsbild: max. 960 + Höhe flexibel
• Inhalte im div-Container mit CSS-Klasse „wide-content“: max. 960 + Höhe flexibel

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 Suidobashi Theme-Ordner (suidobashi.zip Datei) herunterladen.

1.1. Installation über den WordPress Adminbereich

Um das Suidobashi-Theme direkt über den WordPress-Adminbereich zu installieren, klickst du im WordPress-Admin-Menü auf Design → Themes. Hier findest du ganz oben neben dem Installieren-Button und dann auf der nächsten Seite den Theme hochladen-Button< (em>.

Der Suidobashi Theme-Ordner muss für das Hochladen direkt über den WordPress-Adminbereich immer noch im .zip-Format sein. Wähle also die Datei suidobashi.zip aus und klicke auf den Button Installieren. Nach der erfolgreichen Installation klickst du auf die Option Aktivieren. Dein Suidobashi-Theme ist jetzt das aktuell aktive Theme deiner Webseite.

1.2. Installation via FTP-Programm

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

2. Das Portfolio anlegen

Suidobashi bietet einen einspaltigen Standard-Blog an (Artikelbreite 700px, Beitragsbilder max. 960px Breite). Neben der Blog-Funktion kannst du dir auch ein eigenes, vom Blog unabhängiges Portfolio anlegen, so wie du es in der Suidobashi Live-Demo sehen kannst. Um dieses Feature nutzen zu können, benötigst du das kostenlose Jetpack WordPress-Plugin.

2.1. Jetpack installieren

Jetpack ist ein WordPress-Plugin, dass von den WordPress-machern selbst entwickelt und betreut wird. Es bietet eine ganze Reihe von praktischen Features in einem kompakten Plugin (z.B. Social Media Teilen-Buttons oder schöne Bildergalerie-Optionen).

Du kannst Jetpack einfach installieren, indem du „Jetpack“ unter Plugins → Installieren → Plugins suchen eingibst und Jetpack unter den Ergebnissen auswählst.

Nachdem du Jetpack installiert hast, musst du es noch mit einem ebenfalls kostenlosen Account bei WordPress.com verbinden. Das ist nötig, um das Plugin nutzen zu können, da viele der Jetpack-Funktionen mit den Funktionen von WordPress.com verbunden sind. Du musst aber keinen Blog bei WordPress.com einrichten, sondern du kannst einfach nur ein Account mit Benutzernamen und Passwort erstellen (https://signup.wordpress.com/signup/de/?user=1). Diese Login-Daten musst du dann in deinem WordPress-Adminbereich bei „Connect Jetpack mit WordPress.com“ eintragen und schon kannst du alle Jetpack-Funktionen nutzen.

Für die Portfolio-Funktion benötigst du nur die Funktion „Custom Content Types“, alle anderen Funktionen kannst du, wenn du magst, unter Jetpack → Einstellungen deaktivieren.

2.2. Portfolio-Projekte anlegen

Sobald du „Custom Content Types“ aktiviert hast, siehst du in deinem WordPress Adminbereichs-Menü den neuen Menüpunkt „Portfolio“. Hier kannst du jetzt, genau wie bei Blog-Artikeln neue Portfolio-Projekte anlegen. Neben dem Inhalt deines Projekts kannst du Projektarten (das sind die Projekt-Kategorien), Projektschlagwörter und Beitragsbilder ein für deine Projekte bestimmen. Die Portfolio-Projekte werden auch wie Artikel nach dem Datum ihrer Veröffentlichung sortiert.

Beim Suidobashi-Theme kannst du Projekt-Beitragsbilder mit der maximalen Breite von 960px anzeigen. Fügst du größere Bilder ein, werden diese automatisch kleiner skaliert.

Die Beitragsbilder werden auf der jeweiligen Projekt-Einzelseite nicht wieder angezeigt. Du kannst einfach deine einzelnen Projekt-Bilder in das Projekt-Textfeld einfügen.

Hinweis: Standardmäßig ist die Breite der Inhalte auf den Einzel-Projektseiten 700 Pixel breit. Um Projektinhalte z.B. Bilder, Videos oder auch Texte breiter anzuzeigen (max. Breite von 960px), kannst du diese Inhalte im HTML-Editor in einen extra Div-Container mit der CSS-Klasse „wide-content“ setzen.

Hier der Beispiel-Code:

<div class="wide-content">
Deine Inhalte mit einer Breite von max. 960px hier…
</div>
2.3. Das Portfolio als Startseite festlegen

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

2.4. Den Blog auf einer Unterseite nutzen

Möchtest du neben dem Portfolio auch den Blog nutzen, kannst du eine weitere neue, leere Seite anlegen (z.B. mit dem Namen News oder Blog) und diese unter Design → Anpassen als „Beitragsseite“ auswählen. Mit Hilfe der eigenen Menü-Funktion kannst du den Blog in dein Hauptmenü einfügen.

3. Das About-Seitentemplate

Neben dem Portfolio hat Suidobashi auch noch ein eigenes About-Seitentemplate. So kannst du deiner About-Seite unter Design → Anpassen eine eigene Hintergrunds- und Textfarbe geben. Du kannst das spezielle About-Template für deine About-Seite under Attribute / Template auswählen.

Zur Gestaltung der Inhalte mit einem speziellen Layout kannst du dann z.B. die Suidobashi Shortcodes und die extra Text-Styles (siehe Beschreibung unten) nutzen. Hier ist der Beispiel-Code, den wir in der Suidobashi Live-Demo für die About-Seite genutzt haben:


<p class="intro">Dein Intro-Text...</p>

Hier About-Bild mit Bildtitel einfügen.

[three_columns_one]

<h2>About
Ellen Bauer</h2>

[/three_columns_one]

[three_columns_one]

<p class="justify">Text in linker Text-Spalte...</p>

[/three_columns_one]

[three_columns_one_last]

<p class="justify">Text in rechter Text-Spalte...</p>

[/three_columns_one_last]

<div class="divider-border"></div>

[three_columns_one]

<h4>Ueberschrift</h4>
Text...

[/three_columns_one]

[three_columns_one]

<h4>Ueberschrift</h4>
Text...

[/three_columns_one]

[three_columns_one_last]

<h4>Ueberschrift</h4>
Text...

[/three_columns_one_last]

4. Theme Optionen und Anpassungen

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

Im Tab Farben kannst du die Textfarbe des Webseiten-Titels, deine Standard-Hintergrundfarbe, die Linkfarbe, die Hintergrunds-Farbe für spezielle Links (z.B. Links für deine Kontaktdaten) sowie die About-Seiten Hintergrund- und Textfarbe wählen.

Im Tab Theme kannst du bestimmen, ob dein Titel auf größeren Bildschirmen feststehend sein soll und ob du die Suche verbergen möchtest.

Wenn du ein Logobild nutzen möchtest, dass für Retina-Bildschirme optimiert ist, kannst du diese Option außerdem hier aktivieren. Wichtig ist aber, dass du dein Logobild dann unter Design → Kopfzeile in der doppelten Größe hochlädst, die es eigentlich auf der Webseite haben soll (ein Logo, dass auf der Webseite mit 100x100px dargestellt werden soll, muss also in der Größe 200x200px hochgeladen werden).

Außerdem kannst du in den Theme-Optionen den Header-Introtext angeben (HTML, z.B. Links sind möglich). Du kannst hier auch deine Kontaktdaten für den Headerbereich im Suidobashi-Theme angeben. Wenn du deine Email-Adresse als Link angeben möchtest, musst du dieses HTML-Format nutzen:

<a href="mailto:kontakt@elmastudio.de">kontakt@elmastudio.de</a>

Als weitere Option kannst du noch den Credit-Text im Footer anpassen.

Die Suidobashi Theme-Einstellungen unter Design / Anpassen / Theme.
Die Suidobashi Theme-Einstellungen unter Design → Anpassen → Theme.

4.1. Eigenes Header-Logobild

Dein eigenes Logo- oder Headerbild kannst du unter Design → Kopfzeile einfügen und den Standard-Titel und Beschreibungstext dort deaktivieren.

4.2. 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 bereits für dein Portfolio nutzt. 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. Individuelles Menü

Im Adminbereich unter Design → Menüs kannst du dir ein eigenes Haupt-Menü für dein Menü im Suidobashi-Theme einrichten. So kannst du z.B. auch auf Projektarten (Projektkategorien) deines Portfolios verlinken.

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 Haupt-Menü markieren und speichern.

6. Typografie Optionen

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

Wide-Content – Um einen extra-breiten Artikel- bzw. Portfolio-Inhalt zu zeigen (mit einer max. Breite von 960 Pixeln), kannst diesen Inhalt einfach in einem div-Container mit der CSS-Klasse „wide-content“ einbinden.

<div class="wide-content">
Dein Inhalt hier…
</div>

Intro-Text – Du kannst einen Text-Abschnitt in einer größeren Schrift anzeigen, z.B. den ersten Absatz deines Artikels oder deiner Seite (dieser Style ist sehr schön für die About-Seite geeignet). Dazu kannst du diesen Absatz in einen p tag mit der CSS-Klasse „intro“ setzen:

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

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>

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

8. Vorbereitete Plugins

Jetpack für das Portfolio, Teilen-Buttons, Carousel Galerie-Slideshow, Tiled Gallery, Infinite Scroll (im Blog)
Contact Form 7 für Formulare (z.B. das Kontaktformular)
Simple Share Buttons Adder für Teilen-Buttons
Custom Favicon, um ein Favicon und Apple Touch Icon zu integrieren

9. Theme-Übersetzung

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

10. Child Theme

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

11. Dokumentation drucken oder als PDF speichern

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