Und wieder gibt es was neues an der WordPress Theme-Front: mein neues kostenloses WordPress-Theme ‚VIERZEHN‘. Im Mittelpunkt des Themes stehen großformatige Post-Thumbnails sowie ein Kopfzeilenbild, welches sich über die gesamte Breite erstreckt. Das Theme ist durch die Anzeige von Autoren-Infos und des Autoren-Avatars im Kopfbereich der Beiträge insbesondere für Multiautorenblogs sehr gut geeignet.
Ich hoffe, dir gefällt es:
Das Theme ist responsiv gestaltet, dass heißt angepasst für mobile Endgeräte und geringe Auflösungen, und bietet jede Menge cooler Features und CSS3-Funktionen. Darüber hinaus gibt es vielfältige Theme-Optionen mit denen das Theme auf einfache Weise den eigenen Bedürfnissen angepasst werden kann. So kannst du beispielsweise die Farbgestaltung verschiedener Theme-Elemente über Color-Picker verändern, Featured Posts in verschiedenen Varianten nutzen und aus einer ganzen Reihe von Google Web Fonts deine Lieblingsschriftart auswählen.
Besonders hübsch anzusehen ist der monochrome Touch des Themes, sofern die entsprechenden Optionen eingestellt sind. Auf Wunsch wird das Kopfzeilenbild, die Post-Thumbnails und die Artikel-Bilder in Graustufen dargestellt. Erst beim überfahren mit der Maus werden diese farbig. Dieser Effekt funktioniert leider nicht im aktuellen Internet Explorer 10.
[fullwidth-infobox color=“shadow“]
Features
- Layout ist komplett CSS-basiert (keine Grafiken)
- Cross-Browser kompatibel (Chrome, Firefox, Internet Explorer 9, Android und iOS 6 getestet)
- responsives Layout (CSS3 Media Queries) für optimale Darstellung auf mobilen Endgeräte (responsive Navigation nutzt den Checkbox-Hack)
- Post-Thumbnail-Funktion integriert
- vorbereitetes Gästebuch-Template
- Widget-Bereich im Fuß
- vielfältige Theme-Optionen
- Social Media-Integration (Twitter, Facebook, Google+, Xing, Pinterest, Tumblr, Picasa, flickr, Last.fm, Youtube und RSS-Feed)
- Custom-Background- und Custom-Header-Funktion
- Shortcodes für mehrspaltiges Layout, Info-Boxen und Buttons
- Unterstützung von WordPress Post-Formaten
- Schriftartauswahl (Google Web Fonts)
- zwei vorbereitete Bereiche für individuelle WordPress-Menüs (Kopf- und Fußbereich)
- zahlreiche Farbgestaltungsmöglichkeiten
- „translation-ready“: englisch und deutsch sind dabei
- Stylesheet für den visuellen Editor (Farben, Schriftarten des Themes im Editor)
- ab WordPress Version 3.4
[/fullwidth-infobox]
Eine Live-Demo gibt es hier:
Den Download findest du unter folgendem Link:
Und hier findest du eine Übersicht meiner WordPress-Themes:
Das Theme ist kostenlos und kann uneingeschränkt genutzt, verändert und weitergegeben werden. Einzige Voraussetzungen: der Autor im Fußbereich darf nicht gelöscht und das Theme nicht von Dritten vertrieben werden.
Frequently Asked Questions (FAQ)
F: Wo finde ich die Theme-Optionen bzw. die Theme-Vorschau?
A: Kannst du nicht verfehlen. Du findest die Theme-Vorschau unter „Desgin“ -> „Anpassen“ oder aber unter „Desgin“ -> „Themes“, nachdem du das Theme aktiviert hast.
Die Beschreibung der einzelnen Optionen sollte selbsterklärend sein. Falls nicht, probier die Option einfach aus und schau dir das Ergebnis an.
F: Wie installiere ich das Theme?
A: 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 wechselst du zum Register „Themes installieren“ und wählst über den Button „Datei auswählen“ die eben heruntergeladene Zip-Datei aus.
Ein Klick auf den Button „Jetzt installieren“ startet die Installation. Klick auf „Aktivieren“ und schon sieht deine Webseite heiß aus.
Ich habe dazu ein kurzes Video-Tutorial erstellt:
Nach dem Aktivieren solltest du dich an das Anpassen und Ausprobieren der Theme-Optionen machen.
F: Ich würde gerne ein anderes Hintergrundbild nutzen.
A: Im Menü „Design“ unter dem Punkt „Hintergrund“ hast du die Möglichkeit den Hintergrund nach deinem Geschmack anzupassen.
Du kannst entweder ein neues Hintergrundbild von deinem Rechner hochladen, oder ein Bild aus der Mediathek auswählen. Ebenso kannst du das Hintergrundbild komplett entfernen und stattdessen einen einfarbigen Hintergrund nutzen.
Auch hier habe ich ein Video vorbereitet:
F: Ich würde gerne ein anderes Logo nutzen.
A: Das Logo kann über die Theme-Vorschau („Desgin“ -> „Anpassen“) verändert werden. Hier hast du die Möglichkeit eine andere Bilddatei hochzuladen oder eine Datei aus der Mediathek auszuwählen.
Beachte bitte, dass die vordefinierte Größe 150 x 40 Pixel beträgt.
F: Wie kann ich ein anderes Kopfzeilen-Bild nutzen?
A: Im Menü „Design“ unter dem Punkt „Kopfzeile“ hast du die Möglichkeit ein anderes Bild einzubinden.
Du kannst entweder ein neues Bild von deinem Rechner hochladen, oder ein Bild aus der Mediathek auswählen. Beachte bitte, dass die vordefinierte Größe 1680 x 500 Pixel beträgt.
Magst du lieber Video gucken?
F: Wie kann ich das Gästebuch-Template nutzen?
A: Erstelle eine neue Seite, schreib eine nette Einleitung für deine Gäste und wähle als Template „Gästebuch“.
Fertig. Kommentare aktivieren nicht vergessen.
F: Welche Größe haben die Post-Thumbnails?
A: Die Artikel-Thumbnails haben eine Größe von 1000 x 250 Pixel. Für die Featured-Posts werden Thumbs in einer Größe von 371 x 200 Pixel verwendet. Für die Artikelempfehlung beträgt die Größe 294 x 150 Pixel. Um die Größe der Thumbs musst du dich allerdings nicht kümmern. Sofern du im Artikel ein Artikelbild einstellst, wird es automatisch auf die benötigten Größen zugeschnitten.
Sofern kein Artikelbild eingebunden wurde, wird ein Standard-Artikelbild angezeigt. Die Standard-Artikelbilder sind im image-Ordner des Themes abgelegt und haben folgende Bezeichnungen:
post-thumbnail.pngfür die Anzeige des Artikelbilds auf den Blogseiten sowie der Einzelansichtfeatured-thumbnail.pngfür das Artikelbild der Featured-Postsrecommendation-thumbnail.pngfür das Artikelbild der Artikelempfehlung
Wenn du die Standard-Thumbnails austauschen möchtest, überschreibe einfach die o.g. Bilddateien mit deiner eigenen Kreation. Achte aber auf die korrekte Größe.
F: Darf ich das Template verändern?
A: 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?
F: Und wenn ich den Autor-Link doch entfernen möchte?
A: 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 alles weitere mitteilen.
F: Wie kann ich ein Favicon nutzen?
A: Schau dir mal diesen Artikel an.
Changelog
v1.0 – 09.07.2013
- Release
Ein Hammer Theme, aber mal ne Frage:
muss das Kopfzeilenbild echt so groß sein?
Die Hälfte aller PC Nutzer wird es nicht komplett sehen können, da iht Monitor zu klein ist.
Gibt es da nicht auch andere Lösungen?
Hallo Gamba,
du kannst auch Kopfzeilenbilder mit geringerer Breite verwenden. Wenn dein Bild beispielsweise 1000 Pixel breit ist, fügst du mit einem Grafikbearbeitungsprogramm (z.B. Gimp) links und rechts jeweils 340 Pixel an. So kommst du auf eine Breite von 1680 Pixel und kannst es über die Theme-Optionen als Kopfzeilenbild verwenden.
Gruß Olli
Hey Oli,
großen Respekt für deine Arbeit! Ganz großes Kompliment. Ich baue grade für einen Freund eine Webseite und bin auch von Vierzehn angetan. Ich glaub ich werde es nutzen, auch wenn der Blog garnicht so im Vordergrund stehen soll, bieten deine Themes eine Vielzahl von Möglichkeiten. DANKE
Kurze Frage, ich würde VIREZEHN nehmen, allerdigs ist das Headerbild immer links ausgerichtet, kann man es auch zentral setzen? Da ich ehr der Meinung bin, Menschen nutzen 24″ & größer, würde ich es gern zentral ausrichten, allerdings weiß ich nicht wie.
Liebe Grüße Felix
Hallo Felix,
ich bin noch einer der vor einem 22-Zöller sitzt. Daher habe ich das auch gar nicht getestet. Also Danke für den Hinweis :)
Du kannst das Kopfzeilenbild zentrieren, indem du folgendes im Stylesheet veränderst:
#header { position: relative; float: left; width: 100%; height: 400px; max-width: 1680px; left: 50%; margin-left: -840px; }Die letzten beiden Werte musst du hinzufügen.
Gruß Olli