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.
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.
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.
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.
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.
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.
Alternativ kannst du über „Desgin“ -> „Themes“ das Theme ‚ZWANZIG‘ auswählen und mit einem Klick auf den Button „Anpassen“ den Theme-Customizer aufrufen:
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.
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.
Hier hast du die Möglichkeit im Register „Hintergrund“ eine Bilddatei aus der Mediathek auszuwählen oder eine neue Bilddatei von deinem Rechner hochzuladen.
Falls du die Hintergrundfarbe ändern möchtest, kannst du dies Über das Register „Farben“ -> „Hintergrundfarbe“ tun.

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.

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.
- 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.
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.
Folgende Optionen stehen zur Verfügung:
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.
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.
Die benötigten Bildergrößen werden automatisch erstellt und das Bild entsprechend zugeschnitten, Wenn du in deinem Beitrag ein Beitragsbild festlegst.
Ä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:
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.
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
Tolles Theme, Dankeschön.
Ein Bug habe ich gefunden, es fehlt Xing in den Sociallinks, dies gab es bei Neunzehn noch.
Hier leider nur LinkedIn
Grüsse und schönes Wochende
Christian
Hallo Christian,
ja, ist korrekt. Ich bin weg von (Image-)Icons hin zu Genericons und da gibt es (bisher) kein Xing-Icon.
Gruß und dir ebenfalls ein schönes Wochenende
Olli
Hallo Olli,
vielen Dank für deine tolle Arbeit. Wir werden das Theme vorraussichtlich für unsere Fußballseite nutzen.
Ich habe es schon in unserer Testinstallation ausprobiert. Einen kleinen Fehler habe ich gefunden: Wenn man das Topmenü standardmäßig einblendet, wird der Footer teilweise „abgeschnitten“, also um genau die Höhe des Menüs ins „Nichts“ verschoben und der Copyrightverweis sowie der Verweis auf deine Seite wird nicht mehr angezeigt. Der Fehler tritt auch auf, wenn man das Menü standardmäßig ausgeblendet lässt, zum Öffnen manuell anklickt und dann zum Seitenende scrollt.
Gruß aus Hannover
Peter
Hallo Peter,
lieben Dank für deine Rückmeldung. Fehler ist korrigiert.
Gruß Olli
Moin,
bin wie schon vom Theme 19 ebenso vom 20er begeistert und dabei umzustellen.
Gibt es eine – einfache – Möglichkeit, die Anzeige der Tags/Schlagwörter in Beiträgen auszublenden/abzuschalten?
Hab schon in der Style bzw. Single.php geschaut, finde aber den Baum vor lauter Wald wohl nicht.
Genutzt wird das Theme per Child-Theme.
Vielen Dank im voraus!
Gruß
JC
Hallo JC,
Danke für dein nettes Feedback.
Du kannst die Tags wie folgt ausblenden: kopier die
single.php
in das Child-Verzeichnis und lösche dann folgenden Code-Block:Viel Spaß mit dem Theme.
Gruß Olli
Wow,
das ging fix ;-)
Hab es so gemacht wie von Dir empfohlen. Funktioniert.
Einen Nachteil hat es jedoch: Dann ist auch der Einträg/Feld „ähnliche Artikel/Beiträge“ weg bzw. wird nicht mehr angezeigt.
Ich habe folgende Zeilen einfach mal auskommentiert:
Ob es so allerdings programmiertechnisch einwandfrei ist, weiß ich nicht.
So tauchen die Tags nicht mehr in den Beiträgen auf.
Der Hinweis auf ähnliche Beiträge erscheint bzw. wird angezeigt.
Auch das Genericon oben n Beiträgen für die Tags, aber damit kann ich leben ;-)
Schöne Grüße
JC
Hi,
ich schicke dir gleich eine angepasste
single.php
per Mail. Habe ganz übersehen, dass die Variable für die Tags oben auch für die ähnlichen Beiträge genutzt wird. Daher werden dort keine Beiträge mehr angezeigt.Gruß Olli
Wieder fix ;-)
BESTENS, funktioniert einwandfrei!
Vielen Dank und morgen einen schönen (Frei-)Feiertag!
Gruß
JC
Hi,
erstmal dickes Lob an dich für die tollen Themes.
Allerdings, wenn ich auf dem iPhone/Smartphone das Theme 20 aufrufe, klappt das Menü komplett auf, das versaut natürlich die Optik.
Kann ich das irgendwie verhindern?
Gruß Sven
Hallo Sven,
erst einmal vielen Dank für dein Lob.
Nun zu deinem Problem: wenn ich die Demo-Seite mit iOS 8 auf meinem iPhone aufrufe ist die Darstellung in Ordnung und das Menü nicht sichtbar. Um nachvollziehen zu können wo das Problem in deinem Fall liegt, wäre es hilfreich, wenn ich mir das live anschauen könnte. Falls das nicht geht, wäre auch ein Screenshot hilfreich. Kannst du mir über das Kontaktformular zusenden. Welchen iOS-Version nutzt du?
Gruß Olli
Hallo Oliver
Hab ich dir alles zugeschickt.
Danke für die Hilfe
Gruß Sven
Sieht toll aus! Ich wünsche dir viel Erfolg mit dem Theme und werde es mir mal anschauen, wenn ich demnächst wieder einen WordPress-Blog aufsetze.