Mein neues Theme „ZWOELF“ steht ab sofort zum Dowload bereit. Es ist ein responsives WordPress-Theme mit jeder Menge cooler Features und CSS3-Funktionen. ‚ZWOELF‘ ist mein erstes „internationales“ Theme, welches für die Nutzung von Sprachdateien vorbereitet ist. So ist es relativ einfach weitere Sprachen (englisch und deutsch sind vorhanden) zu integrieren.
Das Besondere am Theme: die Artikel werden auf den Blogseiten in Spalten neben- und untereinander dargestellt. Ebenfalls hervorstechend ist das über die gesamte Breite verlaufende Kopfzeilenbild.
Es gibt vielfältige Theme-Optionen mit denen das Theme auf einfache Weise den eigenen Bedürfnissen angepasst werden kann. So kannst du beispielsweise die Darstellung der Artikel auf den Blogseiten (2- oder 3-spaltig und Hintergrundfarbe) anpassen, Featured Posts in verschiedenen Varianten nutzen und aus einer ganzen Reihe von Google Web Fonts deine Lieblingsschriftart auswählen.
[fullwidth-infobox color=“inset-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 inklusive Flyout-Navigationsmenü
- Post-Thumbnail-Funktion integriert (abschaltbar)
- vorbereitetes Gästebuch-Template
- Widget-Bereich im Fuß
- vielfältige Theme-Optionen
- Social Media-Integration (Twitter, Facebook, Google+, Xing, 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-Formats
- Schriftartauswahl (Google Web Fonts)
- zwei vorbereitete Menü-Bereiche (Kopf- und Fußbereich)
- „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.
Mein spezieller Dank geht an Oliver Stöckl, für seine Hilfe bei der englischen Lokalisierung.
Theme-Optionen
Die umfangreichen Theme-Optionen findest du unter „Desgin“ -> „Theme-Optionen“, nachdem das Theme aktiviert wurde. Die einzelnen Optionen werden dort ausführlich beschrieben. Wer vorab einen Blick auf die Optionen werfen möchte, schaut sich den folgenden Screenshot an.
Frequently Asked Questions (FAQ)
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:
Nun 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 ist im image-Verzeichnis des Themes abgelegt. Du kannst die Datei logo.png einfach mit deinem eigenen Logo ersetzen. 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 300 Pixel beträgt. Das Bild wird auch nur angezeigt, sofern die Theme-Option „Anzeige Logo“ aktiviert ist.
Magst du lieber Video gucken?
Dazu noch ein Tipp: wenn du ein Kopfzeilenbild in der Breite des Inhalts (Inhaltsbereich ist 1200 Pixel breit) verwenden möchtest, erstelle ein Bild in der Größe 1680 x 300 Pixel und setze dein Bild in die Mitte. Den rechten und linken Rand (jeweils 240 Pixel) färbst du weiß ein.
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 100 x 100 Pixel. Optimal sind Bilder mit identischer Höhe und Breite.
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.
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 eine kleine Spende in Höhe von 10 € für meine Kaffeekasse gibst. Schreib mir bitte eine Nachricht mittels des Kontaktformulars. Ich werde dir dann die Bankverbindung für die Überweisung mitteilen.
F: Wie kann ich ein Favicon nutzen?
A: Schau dir mal diesen Artikel an.
Changelog
v1.1 – 10.07.2013
- Sidebar im Footer angepasst. Es stehen nun vier einzelne Widgetbereiche zur Verfügung
- Redirect zur Suchfunktion hinzugefügt. Sofern nur ein Suchergebnis vorhanden ist, wird direkt auf den Artikel oder die Seite weitergeleitet
- neue Social Icons
- diverse Design-Anpassungen
v1.01 – 01.04.2013
- Kofpzeilenbild ist nicht zentriert bei einer Breite von mehr als 1680 Pixel; Danke @Max
v1.0 – 13.03.2013
- Release
Das ist gut geworden. :)
Besser sogar noch, als das davor. :thumbs:
Hallo Dean,
danke für dein Feedback.
Freut mich, dass ich deinen Geschmack getroffen habe :)
Gruß Olli
Heyho Oliver,
Da hast du ja wieder ganze Arbeit geleistet!
Kannst du mir sagen, welche Mockups du für die 3 Bildschirme oben verwendet hast? (Mac, Smartphone etc)
Grüße
Hallo Pascale,
das sind Icons. Bin mir nicht ganz sicher, aber ich glaube von Deviantart.
Kennst du schon PlaceIt?
Gruß Olli
Hallo Oliver,
Bei PCs mit einer Auflösung von 1920 x 1080 ist das Titelbild am linken Rand und das sieht nicht schön aus! :) Wie bekomm ich das zentriert?
LG, Max
Hallo Max,
korrekt, das sieht wirklich nicht schön aus ;)
Ändere mal folgendes im Stylesheet:
.header-img { width: 1680px; margin: 0 auto 50px auto; }Und danke für den Hinweis. Werd’s gleich mal als Update bereitstellen.
Gruß Olli
Gern geschehen! :)
Hallo Oliver
Ich habe mir Dein Theme12 runtergeladen und versuche damit WordPress besser kennenzulernen. Spannend an diesem Theme finde ich Darstellungsmöglichkeit von zwei Kolumen. Ich habe versucht den Shortcode [two-columns]Inhalt des Textabschnitts[/two-columns] in der function.php zu platzieren unter direkt nach // set shortcodes for columns. Das funktioniert natürlich nicht. Leider wird bei mir auch das Plugin addquicktag nicht angezeigt. Nun komme ich nicht mehr weiter und wollte Dich fragen, ob Du mir mitteilen könntest wie und wo genau ich diesen Shortcode einsetzten muss, damit er auf einer Seite funktioniert. Deinen Blog habe per Zufall gefunden und bin sehr begeistert davon. Der Artikel über die Lightbox-Bildergalerie mittels Checkbox-Hack finde ich sehr bereichernd und möchte gerne probieren wie man diese Galerie auf statischen Seiten einsetzen kann. Aber alles der Reihe nach.
Auf jeden Fall vielen Dank, dass Du hier Dein Wissen teilst.
Grüsse aus der Schweiz.
Hallo Vilma,
Shortcodes werden vom Theme-Ersteller in der
functions.phpdefiniert und stehen dann in Artikeln und Beiträgen zur Verfügung.Wenn du also einen Artikel oder eine Seite in mehrere Spalten aufteilen willst, musst du den Shortcode in den Artikel bzw. die Seite einfügen.
Vielleicht hilft dir dieser Codex-Artikel, sofern du dich weiter ins Thema einlesen möchtest.
Gruß Olli
Nachdem ich von „ZEHN“ genug habe, würde ich jetzt gerne auf „ZWOELF“umsteigen. Allerdings habe ich ein Problem: Ich würde gerne die Meta-Bog im Footer durch ein manuell erstelltes Text-Widget ersetzen (damit die Änderungen auch nach einem WP-Update Bestand haben). Das funktioniert prinzipiell auch, führt allerdings dazu, dass die Zeile mit Copyright und Hinweis auf das Theme an den rechten Rand rutscht und auch aus dem CSS „auszubrechen“ scheint: http://wobintosh.de/wp-content/uploads/2013/09/Bildschirmfoto-2013-09-03-um-14.47.40.jpg
Hast du eine Idee, woran das liegt bzw. wie ich es beheben kann? Danke schonmal :)
Hallo Fabian,
schön mal wieder von dir zu hören :)
Teste doch mal bitte und ändere im Stylesheet folgendes:
.footer-content .credits { float: left; width: 100%; margin-bottom: 20px; text-align: center; color: #aaa; }Gruß Olli
funktioniert. gracias :)
und schön, dass du dich an mich erinnerst :)
Mal was neues: Wie bekomme ich die Links wie auf deinem Screen oben über das Header-Bild? Ich habe den Schalter dazu nicht gefunden, wo ist der?
Ah. Hat sich prompt erledigt :)
Guck dir bitte mal das an, kann das am Theme liegen? http://forum.wpde.org/installation/121305-script-fehler-im-dashboard-nach-update-auf-3-7-1-a.html
Hi,
kann ich mir nicht vorstellen. Mein Demo-Blog läuft auf 3.7.1 ohne Probleme.
Hast du testweise mal ein anderes Theme probiert?
Gruß Olli
Liegt nicht an dir, wie mir scheint. Tritt mit Default-Theme auch auf.
Hallo
Ich nutze dein Theme 12 auf unserer Vereinshomepage. Mit dem Flyout menue ergibt sich folgendes Problem. Zusammen mit den Untermenues ist das ausgeklappte Flyout zu lang fuer Mobiltelefone und laesst sich nicht scrollen d.h. man kann die letzten Menuepunkte nicht mehr auswaehlen.
Das Theme 19 mit dem dein Blog laeuft hat dieses Problem nicht.
Gibts da einen Ausweg?
Hallo Rainer,
ändere im Stylesheet folgendes:
#nav-menu.navigation { position: fixed; ... }zu
#nav-menu.navigation { position: absolute; ... }Hab ich für ein Update schon länger auf der Agenda stehen, aber die Zeit …
Gruß Olli
Danke,
Supergeil,funktioniert.
Das nenne ich Support.
Aber wie war das noch mit dem kleinen Finger und der ganzen Hand?
Ich hab da noch ne Frage: Bei 12 wird das Kopfzeilenbild auf mobilen Geraeten nicht verkleinert sondern rechts abgeschnitten, ist das auch so einfach anzupassen?
Gruss
Rainer
Hallo Rainer,
ja, ist nur die Frage, ob du das wirklich willst. Ein verkleinern der Breite würde auch eine Verkleinerung der Höhe bedeuten, damit das Bild nicht verzerrt wird. Dadurch würde das Bild bei Geräten mit geringen Auflösungen sehr klein dargestellt. Aber du kannst es ja mal testen:
im Stylesheet scrollst du nach ganz unten zum Bereich
@media screen and (max-width: 1200px)und änderst den Eintrag
.header-img { margin-top: 30px; }in
.header-img { width: auto; margin-top: 30px; }und fügst hinzu
.header-img img { width: 100%; height: auto; }Gruß Olli
Danke zum Zweiten,
ich finde das sieht super aus, sowohl auf meinem Nexus 7, als auch auf dem HTC One SV.
Hoffentlich hält Dich die DVD nicht zu lange vom supporten ab.
Gruß
Rainer
LSV Lingen e.V.
Hallo Rainer,
herzlichen Dank für dein Präsent. Hast du gut ausgesucht :)
Gruß Olli
Ich schon wieder.
Die Vereinshomepage mit deinem Theme läuft super und ich (du) bekomme auch durchweg sehr positive Kritiken.
Ich hab da aber nochmal ne Frage. Bei Theme siebzehn kommt für mobile Geräte das Flyout Menue so schoen von links raus. Gibts ne Möglichkeit das in Theme zwoelf einzuarbeiten? Ein Gastflug bei uns wäre dafür mindestens drin.
Gruss
Rainer
Hallo Rainer,
na, das ist doch mal ein Angebot :) Allerdings ist das Fliegen nicht so meins. Trotzdem herzlichen Dank für die Einladung.
Mit dem responsiven Menü ist relativ einfach umgesetzt. Ändere im Stylesheet die beiden folgenden Deklarationen:
#nav-menu.navigation { position: fixed; top: 0; left: -100%; margin: 0; background: #eee; font-size: 1em; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; z-index: 999999; } #nav-menu:target.navigation { left: 0; }Das ist schon alles. Und weil’s hübscher ausschaut, solltest du den Pfeil nach oben bei ausgefahrenem Menü noch ändern. In der
header.phpänderst du die Zeile<a class="nav-close" href="#" title="<?php _e('Close the navigation-menu','og-zwoelf'); ?>">↑ <?php _e('Close Navigation','og-zwoelf'); ?></a>in
<a class="nav-close" href="#" title="<?php _e('Close the navigation-menu','og-zwoelf'); ?>">← <?php _e('Close Navigation','og-zwoelf'); ?></a>Dann zeigt der Pfeil nach links.
Gruß Olli
Moin,
ich mal wieder.
Auf der Beitragsseite erscheint in der Mitte am rechten oder beiden Raendern durchscheinend ein > zum vor oder zurueckblaettern. Das stoert meiner Ansicht nach besonders bei kleinen Geraeten. Wie kann ich das ausblenden?