Ich darf vorstellen: mein neues Theme ‚ZWANZIG‘ steht ab sofort zum kostenlosen Download bereit. ‚ZWANZIG‘ ist ein typisches Blog-Theme, welches durch eine Vielzahl von Theme-Optionen sehr flexibel anpassbar und wie alle meine Themes responsive gestaltet, also optimiert für mobile Endgeräte und kleine Bildschirmauflösungen, ist.

Besonderes Highlight des Themes ist ein eingebauter Slider für Beiträge im Kopfbereich.

Slider im Theme 'ZWANZIG'

Der Slider stellt die fünf neuesten Beiträge dar und ist vielseitig anpassbar (Progressbar, Richtung, Geschwindigkeit, etc.). Dazu mehr in den FAQ’s.

Über den Theme-Customizer kannst du u.a. die Ausrichtung der Sidebar bestimmen, die Farbgestaltung verschiedener Theme-Elemente über Color-Picker verändern und aus einer großen Auswahl vordefinierter Schriftarten (Google Web Fonts und Web-Standard-Schriftarten) deine Lieblingsschriftart auswählen. Und falls dir die voreingestellten Schriftarten nicht gefallen, kannst du auch deine favorisierte Schriftart ohne großen Aufwand einbinden. Auch dazu mehr in den FAQ’s unten.

Theme-Customizer im Theme 'ZWANZIG'

Hier die Highlights des Themes im Überblick:

Features
  • Layout ist komplett CSS-basiert (keine Grafiken)
  • Cross-Browser kompatibel (Chrome, Firefox, Internet Explorer 9 bis 11, Android 5.x und iOS 8 getestet)
  • responsives Layout (CSS3 Media Queries) für optimale Darstellung auf mobilen Endgeräte (Navigation nutzt den Checkbox-Hack)
  • Unterstützung von Beitragsbildern (Post-Thumbnail-Funktion)
  • vorbereitete Templates für Seiten ohne Sidebar, Seiten mit Kommentaren und ein Gästebuch
  • zwei vorbereitete Bereiche für individuelle WordPress-Menüs
  • zwei widgetfähige Bereiche
  • integrierter Kopfzeilen-Slider für die Anzeige der letzten 5 Beiträge
  • vielfältige Theme-Optionen
  • Social Media-Profillinks (Facebook, Twitter, Google+, Vimeo, Twitch, YouTube, Pinterest, Tumblr, flickr, Spotify und RSS-Feed)
  • integrierte „Teilen“-Buttons (Twitter, Facebook, Google+ und Pinterest)
  • Custom-Background- und Custom-Header-Funktion
  • Shortcodes für mehrspaltiges Beitrags- und Seiten-Layout, Info-Boxen und Buttons
  • Schriftartauswahl (Google Web Fonts und Standardfonts)
  • Einbindung von eigenen Schriftarten und -formatierungen
  • zahlreiche Farbgestaltungsmöglichkeiten
  • „translation-ready“: englisch und deutsch sind enthalten
  • Stylesheet für den visuellen Editor (Layout, Farben, Schriftarten des Themes im Editor)
  • vorbereitet für populäre Plugins (WP-Pagenavi, Syntaxhighlighter, Contact Form 7)
  • ab WordPress Version 3.4


Eine Live-Demo findest du hier:

Hier findest du eine Übersicht meiner WordPress-Themes:

Wie ich schon erwähnt habe, kannst du das Theme ganz nach deinem Farbgeschmack anpassen. Falls du etwas Inspiration für hübsche Farbkombinationen suchst, hab ich da vielleicht etwas für dich:

Viel Spaß beim Farb-Experimentieren.

Bitte beachte folgende Regeln

Das Theme ist kostenlos und kann privat wie gewerblich genutzt, verändert und weitergegeben werden mit folgenden Einschränkungen:

  • mein Name sowie der Link auf meine Webseite in der Fußzeile des Themes darf nicht gelöscht werden und
  • das Theme darf nicht von dir oder anderen Personen veräußert werden.

Mit dem herunterladen des Themes stimmst du diesen Regeln zu.

Möchtest du individuelle Anpassungen am Theme vornehmen, solltest du ein Child-Theme verwenden. So bleiben deine Änderungen auch erhalten, wenn das Theme mit einer neuen Version aktualisiert wird. Die dafür notwendigen Dateien kannst du hier herunterladen:

Du installierst das Child-Theme wie jedes andere Theme über Menü „Design“ -> „Themes“ -> „Installieren“.

Frequently Asked Questions (FAQ)

Klicke auf eine Frage um die Antwort zu sehen.


Lad dir diese Datei herunter. Anschließend loggst du dich im Backend deiner WordPress Installation ein und wählst aus dem Menü „Design“ den Punkt „Themes“. Dort klickst du auf den Button „Installieren“ und anschließend auf den Button „Theme hochladen“. Nun wählst du über den Button „Datei auswählen“ die eben heruntergeladene Zip-Datei.Ein Klick auf den Button „Installieren“ startet die Installation.

WordPress Theme-Installation

Du hast nun die Möglichkeit über „Live-Vorschau“ direkt in den Theme-Customizer zu wechseln und dort Farben, Schriftarten, etc. auszuwählen. Über den Button „Aktivieren“ wird das Theme als aktives Theme festgelegt.

Dazu noch ein Hinweis: wer bereits eines meiner Themes genutzt hat und sich über Darstellung und Farbgebung des neuen Themes wundert, muss gegebenenfalls einige Theme-Optionen manuell anpassen, da die Optionen und Farbwerte aus dem früheren Theme noch mit den Werten des vorherigen Themes gespeichert sind.


Wenn ich ein Update zum Theme veröffentliche, aktualisiere ich den Blogbeitrag des Themes. Am Ende des Beitrags findest du das Changelog, aus dem ersichtlich ist, welche Änderungen ich vorgenommen habe.

Ein Theme-Update kannst du auf zwei Arten durchführen. Lad dir zunächst die aktuelle Version des Themes mittels des obigen Download-Buttons oder über diesen Link herunter.

Update per WordPress-Backend

Log dich im Backend deiner WordPress Installation ein und wähle aus dem Menü „Design“ den Punkt „Themes“. Dort aktivierst du vorübergehend ein anderes Theme (z.B. das aktuelle Standard-WordPress-Theme). Klicke nun auf Theme ‚ZWANZIG‘ und lösche das Theme mit dem Button ‚Löschen‘ unten rechts. Keine Angst, die Theme-Optionen sowie sonstige Einstellungen, wie Menüs, Widgets, usw., bleiben erhalten.

Theme löschen

Nun kannst du das aktualisierte Theme ‚ZWANZIG.zip‘ wie unter Punkt 1 beschrieben installieren.

Update per FTP-Client

Du kannst das Update auch direkt in das Theme-Verzeichnis deines Webservers mit einem FTP-Client hochladen und die vorhandenen Dateien überschreiben. Entpacke das heruntergeladene Archiv (ZWANZIG.zip), starte deinen FTP-Client und wechsele in das Verzeichnis

/wp-content/themes/

In dieses Verzeichnis lädst du nun den entpackten Ordner ‚ZWANZIG‘ hoch. Achte darauf, dass die Dateien im vorhandenen Theme-Verzeichnis überschrieben werden.

Aber Achtung: ein Update überschreibt sämtliche Dateien im Theme-Verzeichnis. Von dir gemachte Änderungen an Templates oder Stylesheets werden durch das Update verloren gehen. Ich empfehle daher den Einsatz eines Child-Themes, falls du das Theme anpassen möchtest.


Du findest den Theme-Customizer im WordPress-Backend unter dem Menüpunkt „Desgin“ -> „Themes“ -> „Anpassen“.

Alternativ kannst du über „Desgin“ -> „Themes“ das Theme ‚ZWANZIG‘ auswählen und mit einem Klick auf den Button „Anpassen“ den Theme-Customizer aufrufen:

Theme anpassen

Im Theme-Customizer kannst du jede Veränderung an Theme-Optionen live mitverfolgen. Nachdem du eine Option verändert hast, wird die Ansicht aktualisiert und du siehst sofort, wie deine Webseite nach der Änderung aussehen wird.

Theme-Customizer im Theme 'ZWANZIG'

Die Beschreibung der einzelnen Optionen sollte selbsterklärend sein. Falls nicht, probier‘ es einfach aus. Erst nachdem du die Änderung(en) gespeichert hast wird die Webseite auch für deine Besucher aktualisiert.


Wenn du im Menü „Design“ den Punkt „Hintergrund“ aufrufst, wird der Theme-Customizer geöffnet.

WordPress Theme-Customizer Hintergrundbild einstellen
Hier hast du die Möglichkeit im Register „Hintergrund“ eine Bilddatei aus der Mediathek auszuwählen oder eine neue Bilddatei von deinem Rechner hochzuladen.

WordPress Theme-Customizer Hintergrundfarbe einstellen

Falls du die Hintergrundfarbe ändern möchtest, kannst du dies Über das Register „Farben“ -> „Hintergrundfarbe“ tun.


WordPress Theme-Customizer Logo einstellen
Du hast die Möglichkeit in der Top-Bar sowie in der Fußzeile eine Bilddatei (z.B. ein Logo) einzubinden. Du findest die Optionen dazu im Theme-Customizer unter dem Register „ZWANZIG – Logo“.

Aktiviere das entsprechende Kontrollkästchen, wenn du ein Logo anzeigen möchtest. Mit dem Button „Bild auswählen“ kannst du nun eine Bilddatei von deinem Rechner hochladen oder eine Datei aus der Mediathek auswählen. Aktivierst du das Kontrollkästchen und wählst anschließend keine Bilddatei aus, wird ein Standard-Logo angezeigt.


WordPress Theme-Customizer Kopfzeilenbild einstellen
Wenn du im Menü „Design“ den Punkt „Header“ aufrufst, wird der Theme-Customizer geöffnet. Im Register „Header-Bild“ hast du die Möglichkeit ein Bild von deinem Rechner hochzuladen oder ein Bild aus der Mediathek auszuwählen. Beachte bitte, dass das Kopfzeilenbild auf eine Größen von 1200 x 300 Pixel zugeschnitten wird.


Das Theme verfügt über folgende Seiten-Templates:

  • Seiten-Template ohne Sidebar
  • Seiten-Template mit Kommentaren
  • Seiten-Template für ein Gästebuch

Das „Seiten-Template ohne Sidebar“ füllt die gesamte Breite des Themes (1200 Pixel) aus. Die Sidebar wird dabei ausgeblendet. Dieses Template ist perfekt für Tabellen, großformatige Bilder, etc. geeignet.

Mit dem „Seiten-Template mit Kommentaren“ kannst du Kommentare für diese Seite aktivieren. Im Standard-Seiten-Template ist die Kommentarfunktion nicht vorhanden.

Ein oft genutztes Template ist das „Seiten-Template für ein Gästebuch“. Dieses Template stellt dir mittels der WordPress-Kommentarfunktion ein Gästebuch zur Verfügung, ohne dass du ein zusätzliches Plugin installieren musst. Weitere Funktionen dazu findest du in diesem Beitrag.

Seiten-Template einstellen

Und so kannst du die speziellen Seiten-Templates nutzen:

Zunächst erstellst du eine neue Seite (Menü „Seite“ -> „Erstellen“). Auf der rechten Seite findest du unter „Attribute“ die Schaltfläche „Template“:

Dort wählst du das entsprechende Template aus und veröffentlichst die Seite. Fertig.

Beachte, dass für das „Seitentemplate mit Kommentaren“ und „Seiten-Template für ein Gästebuch“ du gegebenenfalls die Kommentare noch aktivieren musst.


Mit dem Kopfzeilen-Slider hast du die Möglichkeit eine Slideshow der fünf neuesten Beiträge im Kopfbereich anzuzeigen. Das setzt allerdings voraus, dass diese fünf Beiträge über ein Beitragsbild verfügen.

Folgende Optionen stehen zur Verfügung:

Optionen des Kopfzeilen-Sliders

Kopfzeilen-Slider anzeigen
Aktiviert den Kopfzeilen-Slider

Kopfzeilen-Slider nur auf der Startseite anzeigen
Ist die Option aktiviert, wird der Slider nur auf der Seite angezeigt, die du in den WordPress-Optionen als Startseite eingestellt hast. Dies gilt sowohl für eine statische Startseite als auch für die Blogdarstellung.

Zeit für einen Durchlauf in Sekunden (Standard 30 Sekunden)
Ein Durchlauf dauert in der Voreinstellung 30 Sekunden. Du kannst hier einen beliebigen anderen numerischen Wert einstellen. Gib nur eine Zahl an, ohne Angabe von „s“, „Sekunden“, oder ähnliches.

Richtung umkehren
Ändert die Richtung der Slideshow und beginnt mit dem ältesten der fünf Beiträge.

Beitragsvorschau im Beitragstitel anzeigen
Zeigt eine Beitragskurzfassung (the_excerpt) im Titel an.

Fortschrittsbalken anzeigen
Blendet am unteren Rand des Bildes einen Fortschrittsbalken ein, der anzeigt, wann zum nächsten Beitrag gewechselt wird.

Beitragsbilder mit einem Rahmen anzeigen
Wenn aktiviert, wird um das Bild ein weißer Rahmen mit einer Breite von 10 Pixel angezeigt.

Slider bei kleinen Auflösungen nicht anzeigen (< 600 Pixel Breite)
Die Bilder im Slider werden bei kleinen Bildschirmauflösungen automatisch verkleinert. Das führt auf Endgeräten mit sehr geringen Auflösungen dazu, dass der Titel und auch das Bild selber nicht mehr zu erkennen ist. Mittels dieser Option kann die Slideshow bei Auflösungen von weniger als 600 Pixel Breite deaktiviert werden.


Das Theme verfügt über zwei Widgetbereiche, eine Sidebar seitlich sowie ein Sidebarbereich unterhalb des Inhaltsbereichs mit vier Sidebars.

Sidebars und Widgets

Die Widgets der „Sidebar seitlich“ des Inhaltsbereichs werden untereinandern dargestellt.

Um eine möglichst gleichmäßige (horizontale und vertikale) Aufteilung im Sidebarbereich unterhalb des Inhaltsbereichs zu erreichen, ist dieser in vier Sidebars („Sidebar unten links“, „Sidebar unten mitte links“, „Sidebar unten mitte rechts“ und „Sidebar unten rechts“) aufgeteilt, welche nebeneinander dargestellt werden. Jede der Sidebars nimmt 1/4 der Breite ein. Bestückst du also nur zwei der vier Sidebars mit Widgets, wird auch nur 50% der Breite genutzt. Den einzelnen Sidebars kannst du beliebig viele Widgets zuordnen; diese werden untereinander dargestellt.

Darüber hinaus gibt es eine Sidebar für das responsive Layout. Damit hast du die Möglichkeit verschiedene Widgets abhängig von der Auflösung zu verwenden. Das Verhalten ist wie folgt: die Sidebars seitlich und unterhalb des Inhaltsbereichs werden bei einer Breite von weniger als 700 Pixel ausgeblendet und die Sidebar für das responisve Layout stattdessen angezeigt.


Unter diesem Link findest du eine ausführliche Anleitung welche Shortcodes vorhanden sind und wie du diese in deine Beiträge und Seiten einfügen kannst.

Das Theme hat verschiedene Größen für Beitragsbilder. Das Standard-Beitragsbild wird auf den Blogseiten verwendet und hat eine Größe von 840 x 200 Pixel. Für den Kopfzeilen-Slider wird eine Größe von 1200 x 300 Pixel benötigt. Das Beitragsbild für die Beitragsempfehlungen verwendet eine Größe von 250 x 150 Pixel. In Archivseiten und dem Suchergebnis wird ein Beitragsbild in der Größe von 365 x 150 Pixel ausgegeben.

Die benötigten Bildergrößen werden automatisch erstellt und das Bild entsprechend zugeschnitten, Wenn du in deinem Beitrag ein Beitragsbild festlegst.


Das Theme kommt mit einer Vielzahl vordefinierter Webstandardschriftarten sowie Google Web Fonts. Sollten dir die Schriftarten nicht gefallen, kannst du deine Lieblingsschriftart auf einfache Weise einbinden.Wähle aus dem Menü „Design“ den Punkt „Anpassen“. Es öffnet sich die Theme-Vorschau. Im Reiter „Allgemeine Optionen“ findest du die Schriftoptionen. Du kannst sowohl für die Standardschrift als auch für Überschriften eine individuelle Schriftart einbinden. Und so geht’s:

Individuelle Standardschriftart

Ändere zunächst die Schriftartauswahl auf die Option „individuell“.

Sofern du eine andere Webstandardschriftart (Web Safe Fonts) einbinden möchtest, lässt du das Text-Feld „HTML-Code ( ) für individuelle Standardschriftart“ leer. In das Text-Feld „CSS-Code (font-family:…;) für individuelle Standardschriftart“ trägst du deine Font-Deklaration ein, also z.B.

font-family: "Comic Sans MS", cursive, sans-serif;

In diesem Feld hast du auch die Möglichkeit weitere Deklarationen hinzuzufügen. Nur mal angenommen, du möchtest den Zeichenabstand vergrößern, gibst du ein:

font-family: "Comic Sans MS", cursive, sans-serif; letter-spacing: 0.1em;

Aber Vorsicht: mit dieser Deklaration änderst du die Standardschrift. Wenn du also weitere Schriftformatierungen hinzufügst, gelten diese für sämtliche Schriften (auch Überschriften).

Sofern du eine Schriftart eines speziellen Dienstes (z.B. Google Web Fonts) einbinden willst, gehst du wie folgt vor:

Individuelle Schriftart am Beispiel eines Google Web Fonts

Such dir im Verzeichnis von Google Fonts deine Lieblingsschriftart und klick auf den Button „Quick-use“. Wähle nun unter den Punkten 1 und 2 die entsprechenden Schriftartoptionen. Nun markierst und kopierst den HTML-Link unter Punkt 3 in die Zwischenablage und fügst diesen in das Feld „HTML-Code ( ) für individuelle Standardschriftart“ ein.

Kopiere nun den CSS-Code aus Punkt 4 und füge diesen in das Feld „CSS-Code (font-family:…;) für individuelle Standardschriftart“ ein.

Hast du alles richtig gemacht, siehst du in der Vorschau die neue Schriftart. Speichern nicht vergessen.


Kein Problem. Lass deiner Kreativität freien Lauf. Einzige Voraussetzung: der Link und Hinweis auf den Theme-Autor (mich) im Fußbereich darf nicht entfernt werden. Wäre auch nicht fair, wenn du meine Arbeit als deine ausgeben würdest, oder?

Wenn du den Hinweis unbedingt löschen möchtest, halte ich es für fair, wenn du mir eine kleine Spende in Höhe von 10 € für meine Kaffeekasse zukommen lassen würdest. Schreib mir bitte eine Nachricht mittels des Kontaktformulars. Ich werde dir dann die Bankverbindung für die Überweisung mitteilen.

Changelog

v1.0 – 25.04.2015

  • Release

v1.01 – 27.04.2015

  • Fußzeile nach unten versetzt, wenn Option „Navigationsleiste standardmäßig geöffnet“ gesetzt ist (Danke @Peter und @Benny)
  • Überprüfung von Code-Eingaben im Theme-Customizer nicht korrekt (Danke @Benny)
  • Doppelte ID respond im Kommentar-Template
  • add_theme_support( 'title-tag' ); hinzugefügt
  • Style für Autor-Kommentare hinzugefügt
  • Innen-Rahmen für Infoboxen hinzugefügt (mehr dazu auf der Shortcode-Infoseite)

v1.02 – 28.04.2015

  • Bezeichnung der Beitragsnavigation vertauscht (Danke @Peter)

v1.03 – 30.05.2015

  • Responsives Menu nicht komplett aus dem sichtbaren Bereich positioniert, wenn viele Untermenüs oder Listenelemente enthalten sind (Danke @Sven)
  • kein hover auf dem Menü-Icon, wenn Option „Navigationsleiste standardmäßig geöffnet“ gesetzt und Navigation eingeklappt ist