Es hat länger gedauert als gedacht, doch nun kann ich es endlich vorstellen: mein neues Theme ‚ACHTZEHN‘. ‚ACHTZEHN‘ setzt auf große Typographie und großzügige Weißräume. Natürlich ist das Theme responsiv gestaltet, also angepasst für mobile Endgeräte und kleine Bildschirmauflösungen.
Durch vielfältige Theme-Optionen lässt sich das Theme umfangreich an deine Bedürfnisse anpassen. So kannst du beispielsweise 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 wenn dir keine der von mir vorausgesuchten Schriften gefällt, kannst du auch deine eigene Schriftart (s. FAQ’s) ohne großen Aufwand einstellen.
Weitere Besonderheiten des Themes: in der Fußzeile ist ein „Über mich“-Bereich vorbereitet, in dem du dich oder deinen Blog vorstellen kannst. Und: du hast die Möglichkeit jedem Beitrag eine spezielle Beitragsfarbe zuordnen. Weitere Infos dazu gibt es in den FAQ’s.
Ich hoffe, dir gefällt das Theme.
Features
- Layout ist komplett CSS-basiert (keine Grafiken)
- Cross-Browser kompatibel (Chrome, Firefox, Internet Explorer 9 + 10, Android und iOS 7 getestet)
- responsives Layout (CSS3 Media Queries) für optimale Darstellung auf mobilen Endgeräte (Navigation nutzt den Checkbox-Hack)
- Post-Thumbnail-Funktion integriert
- vorbereitetes Gästebuch-Template
- drei widgetfähige Bereiche im Fußbereich
- vielfältige Theme-Optionen
- „Über mich“-Bereich in der Fußzeile
- individuelle Beitragsfarben
- Social Media-Profillinks (Twitter, Facebook, Google+, Xing, Pinterest, Tumblr, Linkedin, Instagram, flickr, Last.fm, Youtube und RSS-Feed)
- integrierte „Teilen“-Buttons (Twitter, Facebook, Google+ und Pinterest)
- Custom-Background- und Custom-Header-Funktion
- Shortcodes für mehrspaltiges Layout, Info-Boxen und Buttons
- Schriftartauswahl (Google Web Fonts und Standardfonts)
- Einbindung von eigenen Schriftarten und -formatierungen
- 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 (Layout, Farben, Schriftarten des Themes im Editor)
- vorbereitet für populäre Plugins (WP-Pagenavi, Syntaxhighlighter, Contact Form 7)
- ab WordPress Version 3.4
Das responsive Layout auf einem Tablet:
Eine Live-Demo gibt es hier:
Und hier findest du eine Übersicht meiner WordPress-Themes:
Ach übrigens: wenn dir meine ausgewählten Farben nicht gefallen sollten (was ich mir so gar nicht vorstellen kann), schau doch mal hier oder hier vorbei. Da findest du jede Menge Inspiration und tolle Farbzusammenstellungen, die du auch für das Theme nutzen kannst. Viel Spaß beim Farb-Experimentieren.
Bitte beachte folgende Regeln
Das Theme ist kostenlos und kann privat wie gewerblich uneingeschränkt genutzt, verändert und weitergegeben werden.
Einzige Einschränkungen:
- mein Name sowie der Link auf meine Webseite im Theme 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. Bist du damit einverstanden, wünsche ich dir viel und lange Freude damit.
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 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. 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 in der Datenbank 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 ‚ACHTZEHN‘ und lösche das Theme mit dem Button ‚Löschen‘ unten rechts (Theme-Optionen sowie sonstige Einstellungen, wie Menüs, Widgets, usw., bleiben erhalten):
Nun kannst du das aktualisierte Theme ‚ACHTZEHN.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 (ACHTZEHN.zip), starte deinen FTP-Client und wechsele in das Verzeichnis
/wp-content/themes/
In dieses Verzeichnis lädst du nun den entpackten Ordner ‚ACHTZEHN‘ hoch. Achte darauf, dass die Dateien im vorhandenen Theme-Verzeichnis überschrieben werden.
Anstatt das vorhandene Verzeichnis
/wp-content/themes/ACHTZEHN
zu löschen, kannst du es auch umbenennen (z.B. in ACHTZEHN-alt) und sichern.
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 die Theme-Vorschau mit den Optionen unter „Desgin“ -> „Themes“. Wähle dort das hochgeladene Theme aus und klick auf den Button „Anpassen“:
In der Theme-Vorschau 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.
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:
Im Menü „Design“ unter dem Punkt „Kopfzeile“ hast du die Möglichkeit ein Bild einzubinden.
Du kannst entweder ein neues Bild von deinem Rechner hochladen, oder ein Bild aus der Mediathek auswählen. Beachte bitte, dass das Kopfzeilenbild lediglich die maximale Höhe von 60 Pixeln einnimmt.
Magst du lieber Video gucken?
Du musst zunächst in den Theme-Optionen (Menü „Design“ -> „Anpassen“) unter dem Reiter „ACHTZEHN – Beitragsfarben“ Farben definieren. Dabei kannst du bis zu fünf Beitragsfarben einrichten. Wenn du magst, kannst du den Farben auch noch einen Namen zuweisen, so dass es später bei der Auswahl nicht zu Verwechslungen kommt.
Hast du die Farben definiert, kannst du diese im Beitragseditor unterhalb des Beitrages auswählen
Soll ein Beitrag wieder ohne spezielle Farbe angezeigt werden, ändere die Farbe wieder auf „Standard-Farbe“.
In der Fußzeile ist ein „Über mich“-Bereich vorbereitet. Hier kannst du dich oder deinen Blog mit ein paar Worten vorstellen.
Die Optionen dazu findest du in den Theme-Optionen (Menü „Design“ -> „Anpassen“) unter dem Reiter „ACHTZEHN – Blog-Beschreibung“
Du kannst hier neben der Überschrift sowie des Vorstellungstextes auch ein Bild von dir oder ein Logo deines Blogs einfügen.
In der Fußzeile sind drei Bereiche (Spalten) für Widgets vorbereitet, welche nebeneinander positioniert sind. Wenn du nun alle Widgets nur einem Bereich zuordnest, werden diese auch nur in einer Spalte untereinander dargestellt.
Wenn du die Widgets auf die drei Bereiche aufteilst, werden diese hübsch gleichmäßig nebeneinander dargestellt.
Unter diesem Link findest du eine ausführliche Anleitung welche Shortcodes vorhanden sind und wie du diese in deine Beiträge und Seiten einfügst.
Die Artikel-Thumbnails haben eine Größe von 1400 x 300 Pixel. Um die Größe der Thumbs musst du dich allerdings nicht kümmern. Sofern du im Artikel ein Bild einstellst, wird es automatisch auf die benötigten Größen zugeschnitten.
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.
Ä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 (<link href=…>) 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 (<link href=…>) 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.
Schau mal in diesen Artikel an.
Changelog
v1.0 – 17.07.2014
- Release
v1.01 – 27.07.2014
- Öffnen-Animation des Info-Bereichs geändert
- Kopfzeilenbild im Firefox und IE nicht korrekt ausgerichtet
v1.02 – 04.10.2014
- Option zum Ausblenden der Beitragsnavigation im fixierten Kopfbereich hinzugefügt
Hallo Oliver.
Du hast mal wieder gute Arbeit geleistet, sehr schönes Theme :-)
Hallo,
gerne nutze ich das tolle Theme für diese Website, die sich noch im Aufbau befindet.
Frage: Wie kann die Schriftgröße für das Menü geändert werden?
Beste Grüße.
Hallo Karl-Wilhelm,
die Menü-Schriftgröße kannst du im Stylesheet (Menü „Design“ -> „Editor“) anpassen.
Suche nach dem Eintrag
.navigation
und verändere den Wertfont-size: 14px;
.Gruß Olli
Hallo Oliver,
ich habe gerade das Theme achtzehn installiert und frage mich wie ich nun das Menü aktiviere? Also mit allem drum und dran, so wie es in der Demo dargestellt ist …
Sorry, ich bin soeben von Joomla wieder zurück auf WordPress und blick noch nicht so ganz durch …
Tolle Arbeit!
Gruß
Hallo Marcel,
dann willkommen bei WordPress :)
Kurz gesagt: du stellst unter „Design“ -> „Menüs“ ein Menü zusammen und weist es einer Position im Theme zu.
In diesem Beitrag habe ich das mal etwas ausführlicher beschrieben.
Gruß Olli
Hi Oliver, komisch … auf Linux mit aktuellem Mozilla haben die Felder *Name, *E-Mail-Adresse, *Website, *Kommentar dieselbe Background-Color wie der Container. Vielleicht interessiert dich das?
Danke für deine Antwort, da hab ich wieder zu schnell geschossen … dann komme ich klar, Danke Dir.
Obwohl ja für den Positions-Scroll-Effekt ein Javascript zuständig sein müsste oder? jQuery? egal, ich werde es ja sehen wenn ich wieder Zeit dafür habe …
Daumen hoch! weiter so :-)
Gruß
Hallo Oliver,
ich bin dabei, HTML5 zu lernen, weil ich eine Seite bauen möchte, die sich je nach Gerät anpasst.
Deine Beispiele sind toll – aber auch sehr komplex. Hast du irgendwo eine Beschreibung, wie ich ein responsives Menü mit dem Checkbox-Hack erstelle, mit dem „Hamburger“ Icon, das sich so schön dreht, wie bei deinen Layouts? Also etwas, was nur das erklärt, ohne alles andere drum herum. Durch deine kompletten Layouts steige ich nicht durch, wenn ich versuche zu verstehen, wie du was machst.
Was ich auch nicht so recht verstehe ist, wie du es hinkriegst, dass ein Bild eine maximale Breite erhält, also verkleinert dargestellt wird, wenn die Spalte zu schmal wird. Du hast die Class „size-large“, aber wo wird definiert, was sich dahinter verbirgt?
Danke für Hilfe,
Micha