Ich war mal wieder fleißig: es gibt ein neues WordPress-Theme. ‚ACHT‘ bietet vielfältige Theme-Optionen, mit denen ihr euer spezielles Layout auf einfache Weise realisieren könnt. Artikel ein-, zwei- oder dreispaltig, in Kurzfassung oder bis zum Weiterlesenlink, Sidebar links oder rechts oder auch ohne und vieles weitere lässt sich bequem im Backend einstellen. Und wem das rot gehaltene Standardlayout nicht gefällt, wählt eine der beiden anderen Farbvarianten, blau oder dunkel.
Magst‘ mal schauen?
Highlights:
- Layout ist komplett CSS-basiert (keine Grafiken)
- Cross-Browser kompatibel (Chrome, Firefox, Internet Explorer 9, Android und iOS 5 getestet)
- responsives Layout (CSS3 media queries) angepasst für mobile Endgeräte
- Post-Thumbnail-Funktion integriert
- vorbereitetes Gästebuch-Template
- Template für Artikelübersicht
- 1 widgetfähige Sidebar, 4 Widgetbereiche im Footer
- 3 Farbschemas (rot, blau und dunkel)
- vielfältige Theme-Optionen
- Social Media-Integration (Twitter, Facebook, Google+, Xing, Last.fm, Youtube und RSS-Feed)
- Custom-Background- und Custom-Header-Funktion
- ab WordPress Version 3.4
Eine Live-Demo gibt es hier:
Und hier den Download:
‚ACHT‘ ist natürlich kostenlos und kann uneingeschränkt genutzt, verändert und weitergegeben werden. Einzige Voraussetzung: die Theme-Credits (also der Autor) im Fußbereich darf nicht gelöscht werden.
Werfen wir mal einen Blick auf die Theme-Optionen, welche ihr im „Design“-Menü unter dem Punkt „Theme Optionen“ findet, nachdem ihr das Theme aktiviert habt:
Theme Optionen
- Breite des Inhaltsbereichs
Der Inhaltsbereich hat standardmäßig eine Breite von 1000 Pixeln. Wem das nicht reicht, oder einen kleineren Inhaltsbereich möchte, kann hier einen eigenen Wert (XXX% oder XXXpx) eintragen.
- Anzeige Logo
Im Kopfbereich kann ein Logo angezeigt werden. Das voreingestellte Logo kann übrigens bequem über das „Design“-Menü > „Kopfbereich“ verändert werden (s. FAQs unten).
- Anzeige Bloginfo
Im Kopfbereich kann der Name des Blogs sowie der Slogan angezeigt werden. Oder auch nicht, wenn ihr nicht wollt…
- Anzeige Top-Artikel
Ihr habt die Möglichkeit über den Artikeln eine Auswahl von vier Artikeln einzublenden.
Ihr habt dabei die Wahl zwischen den vier meistkommentierten Artikeln oder vier zufällig ausgewählten Artikeln, die bei jedem aktualisieren der Seite neu zusammengestellt werden.
- Überschrift Top-Artikel
Wem „Meistkommentierte Artikel“ oder „Zufällige Artikel“ nicht gefällt, trägt hier eine eigene Überschrift ein („Für dich ausgewählt“, „Lieblingsartikel“, „Das Beste vom Besten“, oder was auch immer).
- Anzeige Vorschau für Top-Artikel
Zeigt eine Kurzfassung des Artikels (excerpt) unterhalb als Tooltip. Du kannst die Länge der Kurzfassung übrigens mit der Option „Anzahl Zeichen für Kurzfassung“ selbst festlegen.
- Artikel nebeneinander anzeigen
Wie viele Artikel sollen auf den Blogseiten nebeneinander (in Spalten) dargestellt werden? Standard ist ein Artikel. Du kannst die Artikel aber auch in zwei oder drei Spalten darstellen lassen.
- Anzeige Anzahl Artikel und Kommentare
Im Fußbereich kann die Anzahl der veröffentlichten Artikel und Kommentare angezeigt werden, wenn ihr wollt…
- Copyright Text
Wenn euch der Standard-Copyrighthinweis nicht gefällt, könnt ihr hier euren eigenen eintragen.
- Google Analytics Code
Wer Google Analytics zur Besucherauswertung nutzt, kann hier den von der Analytics-Webseite erhaltenen Tracking-Code einfügen. Achtet darauf, dass ihr den vollständigen Code (inkl. <script>/</script>
) kopiert und einfügt.
- Tooltip für oben gehaltene Artikel
Sogenannte Sticky-Posts, also Artikel die oben gehalten werden, werden auf den Blogseiten durch orange Elemente signalisiert. Zusätzlich wird links vom Artikel ein Infokasten angezeigt (nur bei einspaltiger Artikelansicht). Den Tooltiptext der Info kannst du hier verändern. Standard: „Dies ist ein oben gehaltener Artikel“.
- Anzahl Zeichen für Kurzfassung
Du kannst hier die Anzahl der Zeichen für die Kurzfassung von Artikeln (excerpt) festlegen. Standard sind 55 Zeichen.
- More-Link bei Kurzfassung
Wenn du bei der Option „Anzeige der Artikel“ die Kurzfassung der Artikel gewählt hast, kannst du mit dieser Option bestimmen, ob ein Weiterlesen-Link angezeigt werden. Standardmäßig wird lediglich […] angezeigt.
Artikel Optionen
- Anzeige der Artikel
Die Artikel können auf der Startseite, im Archiv, den Übersichten sowie dem Suchergebnis
- normal (bis zum Weiterlesen-Link)
- vollständig (ohne Weiterlesen-Link) oder in einer
- Kurzfassung (nur Text)
angezeigt werden.
- Anzeige Artikelinformationen
Mittels dieser Option können Informationen zu den Artikeln (Veröffentlichungsdatum, Kategorie und Tags) angezeigt werden.
- Anzeige Autor
Wer die Option zur Anzeige von Artikelinformationen nutzt, kann entscheiden, ob der Name des Artikelautors eingeblendet werden soll.
- Anzeige Artikelempfehlung
Unterhalb eines Artikels kann eine Empfehlung für vier themenverwandte Artikel angezeigt werden.
Die Ähnlichkeit der Artikel wird anhand des ersten verwendeten Schlagworts ermittelt.
- Überschrift für Artikelempfehlung
Du hast mit dieser Option die Möglichkeit deine eigene Überschrift für die Artikelempfehlung anzuzeigen. Standard ist „Ähnliche Artikel“.
- Anzeige Artikelnavigation oben/Anzeige Artikelnavigation unten
Oberhalb bzw. unterhalb des Artikels kann eine Artikelnavigation (nächster/vorheriger Artikel) eingeblendet werden.
Artikelübersicht
Das Theme verfügt über ein vorbereitetes Template (s. FAQs) für eine Übersicht bzw. ein Archiv der Artikel. Mit den Optionen
- Anzeige Kategorieübersicht
- Anzeige Schlagwortübersicht
- Anzeige Jahresarchiv
- Anzeige Monatsarchiv
- Anzeige Tagesarchiv
- Anzeige Artikelliste
könnt ihr die Inhalte wählen, die dort angezeigt werden sollen.
Sidebar
- Anordnung der Sidebar
Die Sidebar kann rechts oder links des Inhaltsbereichs positioniert oder bei Bedarf auch komplett ausgeblendet werden.
- Anzeige Footer-Widget-Bereich
Im unteren Teil kann ein Bereich mit vier Widget-Feldern angezeigt werden.
Theme-Design
- Farbschema
Du kannst hier das Farbschema festlegen. Du kannst zwischen rot (Standard), blau und dunkel wählen.
- Farbe der Hyperlinks und der Hover-Farbe
Die Farben der Hyperlinks sowie der Hover-Farbe kannst du bequem über einen Color Picker auswählen. Wenn du wieder die Standardfarbe nutzen möchtest, lösch den Wert einfach aus den Eingabefeldern und speicher die Optionen.
Soziale Netzwerke
Du hast hier die Möglichkeit deine Verknüpfungen zu sozialen Netzwerken einzurichten. Die entsprechenden Icons werden nach Aktivierung im oberen Bereich der Webseite angezeigt.
Es stehen zur Verfügung:
- Google+
- Last.fm
- Youtube
- Artikel-RSS-Feed
Bildergalerie
Hier noch ein paar Eindrücke:
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:
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: Im Menü „Design“ unter dem Punkt „Kopfzeile“ hast du die Möglichkeit ein anderes Logo einzubinden.
Du kannst entweder ein neues Logo von deinem Rechner hochladen, oder ein Bild aus der Mediathek auswählen. Dazu muss allerdings die Theme-Option „Anzeige Logo“ aktiviert sein. Beachte bitte, dass das Theme auf eine Größe von 300 x 80 Pixeln angepasst ist.
Magst du lieber Video gucken?
F: Wie richte ich die Artikelübersicht ein?
A: Erstelle eine neue Seite und wähle als Template „Artikelübersicht“.
Fertig. Vergiss nicht in den Theme-Optionen die Inhalte für die Artikelübersicht zu aktivieren. Sonst siehst du nur eine leere weiße Seite.
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 50 x 50 Pixel. In den Top-Artikeln sowie der Artikelempfehlung werden Thumbs in der Größe 100 x 100 Pixel verwendet. 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 – 13.10.2012
- Shortcodes hinzugefügt
- Layout-Anpassungen
v1.0 – 27.08.2012
- Release
[…] mit seinem Theme “ACHT” (Gibt auch noch sieben weitere […]
Hallo,
ist es möglich, in der Anzeige der Top-Artikel, die Anzahl der Kommentare zu entfernen?
Danke
Hallo Micha,
ja ist keine große Sache. Du kannst entweder im Stylesheet das Element wie folgt ändern:
oder in der Datei
top_artikel.php
diese Zeilelöschen.
Gruß Olli
Hallo Olli,
Du hast hier ein paar wirklich tolle Themes vorgestellt – alle Achtung!
Ich überlege meinen Blog http://www.technoviel.de mit „ACHT“ umzugestalten und bin mit den ersten Versuchen in der lokalen Testumgebung auch ganz zufrieden (danke auch für den XAMPP Artikel, darüber bin ich erst auf Deine Seite gestoßen!)
Allerdings würde ich gerne deutlich größere Thumbnails in der Artikelübersicht verwenden – am liebsten so, dass sie von der Kurzfassung rechts umflossen werden.
Ist das ohne größere Umbauarbeiten möglich?
Wäre es auch möglich, die Auswahl der Top-Artikel über „meistkommentiert“ und „zufällig“ hinaus zu beeinflussen? Also z.B. manuell festlegen, meistgelesen oder meistkommentiert auf die letzten x-Monate beschränkt? Die Auswahl nach Kommentaren klappt eigentlich sehr gut, nur ist bei mir dann immer mind. ein sehr alter, definitiv nicht mehr interessanter Artikel dabei…
Oh, und noch etwas: Der coole Vergrößerungseffekt beim Hovern über Bildern auf der Seite hier ist in Deinen Themes nicht eingebaut, oder?
Es wäre toll wenn ich von Dir hören würde :-)
Gruß,
Klaus
PS: Ich hoffe das „Du“ ist ok, so wie im Web sehr verbreitet…
Ich habe noch ein wenig gesucht und die Stelle in functions.php gefunden, in der die Thumbnails auf 50×50 beschränkt werden. Wenn ich die Werte dort erhöhe wachsen die Thumbnails allerdings sehr unschön in die Texte hinein. Wäre ein Umfließen der Texte sehr aufwändig zu realisieren?
Gruß,
Klaus
Hallo Klaus,
erstmal danke für das Lob :)
Nun zu deinen Fragen:
Wenn du größere Thumbnails verwenden willst, muss der gesamte Kopfbereich (Titel und Meta-Infos) umgebaut werden.
Die Top-Artikel kannst du relativ einfach anpassen. Dahinter stecken Abfrgen (
wp_query
) in der Dateitop_artikel.php
. Schau mal hier, da findest du jede Menge Beispiele, wie die vorhanden Abfragen erweitert werden können. Unter anderem auch mit Datum-Parametern.Der Vergrößerungseffekt ist in dem Theme nicht dabei. Ist aber recht simpel zu implementieren. Füge im Stylesheet diesen beiden Einträge hinzu:
Die Zeit (0.2s) sowie die Skalierung (1.2) musst du noch auf deine Bedürfnisse anpassen.
Gruß Olli
Hallo Olli,
erst mal vielen Dank für Deine Antwort. Ich habe fleißig probiert und im rohen HTML/CSS Output in etwa das Ergebnis mit den Thumbnails erreicht. Aber der Versuch das in das Theme einzuarbeiten fällt mir nun schwer…
Für meine Änderungen müsste ich einige css-Klassen auf der Hauptseite (in den Abstracts) anders aussehen lassen als in der Artikeldarstellung (die soll so bleiben wie sie ist). Kannst Du mir einen Tipp geben, wo ich da ansetzen kann?
Also wo ich die Ausgabe der Hauptseite mit den Artikel-Kurzfassungen anpassen und ihm andere css-Klassen verpassen kann, ohne das die Seite für einen einzelnen Artikel dadurch geändert wird…
Sorry falls das eine dumme Frage ist, ich habe bislang noch nie so tief in ein WP Theme hinein geschaut…
Im Voraus tausend Dank,
Klaus
Ich hab’s mittlerweile gefunden, content.php ist mein Freund :-)
Ich denke spätestens am Wochenende werde ich das von mir modifizierte ACHT Theme über meinen Blog stülpen und hier mal nach Feedback fragen.
Nochmals Danke für das tolle Theme, Olli. Das sieht nicht nur im Browser toll aus, auch der Code macht (so weit ich das als WP-Theme-Neuling einschätzen kann) sehr sauber aus!
Eine Frage bzw. Bitte hätte ich dann doch noch: Kannst Du mir einen Tipp geben, wie ich am einfachsten ein Page-Template für die volle Breite erstelle / anpasse? In ACHT ist ja leider keins enthalten…
Ich habe eine Seite die eine sehr große Tabelle enthält. Bisher habe ich die komplett in PHP erzeugt und nur den Look des alten WP Themes imitiert – die Seite existiert so leider völlig außerhalb von WP, so dass z.B. Statistiken sie nicht erfassen. Das würde ich mit dem neuen Theme gerne ändern.
Dazu müsste ich ein Page-Template bauen, dass die komplette Breite des Browser-Fensters nutzt. Zudem müsste ich die HTML Header anpassen können, da ich dort JavaScript verankern muss.
Ich wäre für jeden hilfreichen Hinweis sehr dankbar!
Falls es Dich interessiert, so sieht die bisherige Seite aus: http://www.technoviel.de/smartphones/
Hallo Klaus,
dafür legst du am besten ein neues Template an. Kopier die
guestbook.php
und nenn siefullwidth.php
. Nun öffnen und den Template Name von „Gästebuch“ auf „Fullwidth Template“ ändern.Jetzt löscht du den Aufruf des Kommentar-Templates
, es sei denn, du willst auf der Seite Kommentare zulassen.
WordPress gibt beim Aufruf den Namen des Templates als Body-Klasse an, welche du im Stylesheet ansprechen und die Seitenbreite abweichend von den restlichen Seiten verändern kannst:
Nun musst du noch die Sidebar ausblenden und den linken Bereich vergrößern:
Nun legst du eine neue Seite an, wählst als Template „Fullwidth Template“ und fügst dort deine Tabelle ein. Voilà!
Mit deinem Script würde ich per PHP lösen und den Template Namen abfragen:
Gruß Olli
Hallo Olli,
nochmals tausend Dank für Deine wertvollen Tipps und das tolle Theme. http://www.technoviel.de steht kurz davor, im neuen Glanz eines abgewandelten ACHT Themes zu erstrahlen. Deine Tipps habe mir sehr dabei geholfen alle meine Pläne umzusetzen – das mit dem fullwidth-Tamplate z.B. hat wunderbar geklappt, endlich wird mein Smartphone-Vergleich Teil des WordPress Blogs und von Statistiken erfasst :-)
Eine Frage habe ich aber noch: Bei den empfohlenen Artikeln besagt der Text in den Optionen, dass diese anhand des ersten Tags/Schlüsselworts ausgewählt werden, und so verstehe ich auch den Code in single.php.
Anscheinend speichert WordPress Tags aber immer in alphabetischer Reihenfolge, so dass immer nach dem alphabetisch ersten Tag empfohlen wird. Da ich sehr häufig das Tag „Android“ verwende, wird die Auswahl nicht sonderlich gut funktionieren. Kannst Du das bestätigen, oder liege ich falsch? Falls dem so ist, hast Du eine Idee wie ich etwas besser die Artikelempfehlungen beeinflussen könnte ?
Optimal wäre ja eine möglichst große Übereinstimmung mit allen Tags, aber das ist sicher recht aufwändig bzw. kaum per WP_Query machbar…
Gruß,
Klaus
Hallo Klaus,
prima, dass nun alles funktioniert :)
Was die Artikelempfehlungen angeht, ist das, wenn ein Tag besonders oft verwendet wird, eher wenig hilfreich, da hast du recht.
Vielleicht gibt es Plugins, mit denen die Ausgabe feiner justiert werden kann. Hab da aber keine Empfehlung.
Eine andere Lösung wäre der Wechsel von den Tags zu Kategorien. Weiß nicht, ob das für dich besser geeignet ist. Sergej Müller hat dazu eine Lösung vorgestellt.
Gruß Olli
Hallo Olli,
es ist vollbracht, http://www.technoviel.de ist nun mit einem auf ACHT basierenden Theme online.
Ein paar der Änderungen die ich gemacht habe:
– „Featured pictures“ anstelle von Thumbnails (also größer, rechts floatend)
– Einige andere Umformatierungen auf der Hauptseite
– Thumbnails für top posts verbeitert, aber weniger hoch (passt eher zu den bei mit häufigen Bildern)
– Sidebar verbreitert (für die liebe Werbung…)
– Header ein wenig gestaucht
Ich hoffe, Dir rollen sich nicht die Zehennägel hoch wenn Du das siehst ;-)
Gruß,
Klaus
Hallo Olli,
„Acht“ treibt noch immer meinen Blog an und ich bin sehr zufrieden. Eine Frage habe ich allerdings:
Das Theme verhindert das Zoomen auf Android Geräten, ich meine auch irgendwo etwas im CSS Code zum Zoom gesehen zu haben, finde es nun aber nicht mehr… da war meine ich ein Hinweis auf den IE dabei. Kannst Du mir sagen, warum das so ist, und wie ich das ggfs. ändern kann?
Auch wenn das responsive Design für eine brauchbare Lesbarkeit sorgt, ist eine Website die sich nicht wie gewohnt zoomen lässt für mich lästig…
Wäre nett, wenn Du mir da einen Tipp geben könntest.
Gruß,
Klaus
Hallo Klaus,
diese Zeile in der
header.php
verhindert das zoomen:Gruß Olli