Zweispaltige Teaser mithilfe der Query Box erstellen

“Teaser” waren in früheren Versionen des Thesis-Themes ein beliebtes Seitenlayout.

Teaser bestehen aus mehreren Dingen: dem Titel eines Postings, dem Namen des Verfassers und dem Datum (auch “Byline” genannt), einem Auszug aus dem Posting und einem dazugehörigen “Thumbnail”-Bildchen.

Thesis-Teaser waren “zwei breit” voreingestellt, eine horizontale Zeile enthielt also zwei Teaser. Durch Veränderungen in der CSS konnte man “eins breite” Teaser erstellen, also einen Teaser pro Spalte.

Obwohl Teaser nicht zu den Voreinstellungen in Thesis 2.0 gehören, können sie durch die Flexibilität und Einfachheit des 2.0-Interaces jederzeit erstellt werden – ganz ohne PHP!

Und wie? Bauen wir uns also ein paar “Teaser” in Thesis 2.0. Genauer gesagt: Sehen wir uns doch mal Teaser in ein- und zweispaltigen Formaten an, wobei der ganze Unterschied in einer einzigen, schlichten CSS-Zeile liegt.

Zwei verschiedene Teaser-Layouts

Bevor wir uns das alles genauer ansehen, setzen wir uns doch ein “vorher”- und ein “nachher”-Ziel. Bevor wir die Teaser hinzufügen, setzen wir mal ein einfaches “komplettes” Posting auf der Homepage voraus.

Zunächst erstellen wir einen Satz Teaser mithilfe der wp_query-Box von Thesis, dann sehen wir uns die Unterschiede zwischen einspaltigen und zweispaltigen Teasern an.

Zuerst also das “vorher”-Bild. Hier haben wir eine Thesis-2.0-Seite in der “Classic”-Skin:

Thesis 2.0 ohne Teaser

Unten sehen wir ein 1 spaltiges Teaser-Layout, komplett mit Thumbnails. Obwohl es breiter ist als ein zweispaltiges Teaser-Layout, deuten Studien zur Benutzerfreundlichkeit darauf hin, dass ein Teaser pro Zeile den Überblick über eine Seite deutlich weniger beeinträchtigt.

Thesis 2.0 - 1 spaltiger Teaser mit Thumbnails

Schließlich haben wir ein Zwei-Spalten-Layout. Dieses deutlich kompaktere Format als die einspaltige Lösung (hauptsächlich, weil hier aus Platzgründen der dritte Teaser entfernt wurde) war in Thesis 1.x besonders beliebt.

Bedenke aber, dass ein Zwei-Spalten-Layout für die inhaltslastige Spalte in den meisten Seitendesign nicht gerade ideal ist. Kurz gesagt fällt es Besuchern schwerer, nicht-lineare Inhalte flüchtig zu überblicken.

Thesis 2.0 Seite mit zweispaltigen Teasern

Um Teaser hinzuzufügen, geht dieses Tutorial von einem Minimum an vier (4) Posts auf deiner Seite aus. Diese Annahme ermöglicht uns ein aktuelles, vollständiges Post und die zusätzlichen Posts, die eingeklappt sein und die erwähnten “Teaser”-Bestandteile demonstrieren werden: Titel, Byline, Thumbnail-Bild und Textauszug.

Auch müssen den Posts, auf die wir zugreifen werden, Thumbnails zugeordnet sein. Wir werden in diesem Beispiel den Thesis-Thumbnail verwenden. Die zugewiesenen Thumbnails werden nach folgendem Muster hinzugefügt: WP Admin > Posts > Edit > Thesis Thumbnail > Browse.

Ein Thumbnail-Bild von deinem Desktop hochzuladen, ist ein einfacher “Click-and-go”-Prozess:

Thumbnail in ein Thesis 2.0 Post hochladen

Mit einem Satz “Thumbnail zugewiesen”-Posts in unseren Teasern legen wir also los!

Mit dem Thesis Skin Editor eine WP-Query Box erzeugen

Wie immer in “2.0″, gibt es verschiedene Methoden und Herangehensweisen, um ein gewünschtes Ziel zu erreichen.

In diesem Tutorial werden wir eine bestimmte Methode verwenden … Die “Query Box” im HTML-Tab des Thesis Skin Editors. Hier eine Variante, dorthin zu kommen:

WP Admin > Thesis > Skin Editor >

Du solltest dich nun auf der Mustervorlage Home wiederfinden.

Wahlweise: Um die Zahl der Posts zu ändern, die auf deiner Homepage angezeigt werden, fahre mit der Maus über den Home-Text, klick auf das Zahnradsymbol, dann im Pop-Up auf WP Loop und gib bei Number of Posts to Show den gewünschten Wert ein. Die Bilder in diesem Tutorial basieren auf einem Wert von 1 in diesem Feld, doch du kannst so viele “normale” Posts anzeigen, wie du möchtest.

Nummer der Posts auf der Seite

Immer noch auf der “Home”-Vorlage im Skin Editor? Dann sieh nach rechts unten. Klick im Bereich Add Boxes auf das Dropdown-Menü, wähle Query Box und benenne den Kasten wie auch immer du möchtest, wie z.B. “My Teasers” im Beispiel unten. Drück auf den blauen Add Box-Button.

Query Box kreieren

Damit hast du eine Query Box — das führt zu den nötigen Interaktionen mit der HTML und der Datenbank, um einen “Teaser” zu erzeugen. Keine Sorge, du wirst trotzdem keinen Funken PHP oder HTML zu Gesicht bekommen, denn Thesis 2.0 kümmert sich für dich um die Drecksarbeit.

Folge dem nächsten Schritt sorgfältig. Stelle sicher, dass deine “Teasers” Query Box sich nicht innerhalb der WP Loop Box befindet. Fügst du eine Query Box in einem WP-Loop-Bereich ein, klappt dein Teaser mit jedem Post in der WP Loop auf und zu.

Nun klickst-und-ziehst du diese Query Box mit gedrückter Umschalttaste in die gewünschte Position. Wir wollen unsere Teaser hinter dem Hauptinhalt (der WP Loop) zeigen, also ziehen wir die “My Teasers”-Box im Container des WP-Loop-Bereichs in Position und lassen die Maus los:

Mit Shift kannst du die Query Box positionieren

Mit noch einem schnellen Klick ziehen wir die Query Box unter die Main Loop und landen hier:

Finale Positionierung der Query Box

Im obigen Beispiel ist das “Zahnrad” sichtbar. Klick darauf, um das folgende Pop-Up aufzurufen, zu dem das untenstehende Bild alles zeigt, was du so tun kannst – aber die Bereiche, für die wir uns am meisten interessieren, sind mit Pfeilen markiert. Mehr über diese Pfeile und die entsprechenden Einstellungen, nachdem du dir die Abbildung zu Gemüte geführt hast (klicken zum Vergrößern):

Query Box Konfiguration

Interessante Bereiche: Hier kannst du nach eigenem Gutdünken walten, aber wir entscheiden uns für “Posts” und “Recent Posts”, sowie die Zahl “3″ – exakt so viele “Teaser” wollen wir anzeigen.

Für Blogs eines einzelnen Autors sind die Filter für den Verfasser und andere Dinge kein Problem. Wir wählen einen “div”-Tag und – das ist wichtig – fügen unsere HTML-Klasse manuell hinzu, bzw. in unserem Fall Klassen:

teasers_home post_box

Eine davon, teasers_home, wird für CSS-Anpassungen in einem CSS-Package verwendet, das wir noch erstellen werden. Die zweite Klasse besteht bereits, und die Verwendung von post_box — die Hompage-Posts formatiert — reduziert den Aufwand an CSS, der nötig ist, um die Teaser optisch ans Seitendesign anzupassen.

Als Nächstes werden wir “Green Box”-Items aus der Leiste umordnen und hinzufügen, um die nötigen Elemente für unsere Teaser zu sammeln. Wir hätten gerne eine Überschrift, den Verfasser, das Datum, die Kategorie, in die das Posting gehört, das Thesis-Thumbnail-Bildchen und einen Auszug aus dem Posting.

Wenn alles an Ort und Stelle gezogen wurde, sollte es folgendermaßen aussehen – wie der erste Pfeil andeutet, klick zuerst auf jedes einzelne Item, um ihm die Werte zuzuweisen, die wir uns nach diesem Bild kurz ansehen werden:

Hinzufügen grüner Boxen der Tray Optionen auf die Query Box

Headline Zahnradsymbol-Einstellungen: HTML tag: H3. Und “Yes”, du möchtest die Überschrift mit der Artikelseite verknüpfen.

Author Zahnradsymbol-Einstellungen: Der Einleitungstext liegt ganz bei dieser: In diesem Beispiel benutzen wir Written by… als Einleitung. Die beiden Kontrollboxen sind angekreuzt, das ist aber deine Entscheidung: Ob du sie ankreuzt oder nicht, spielt für dieses Tutorial keine große Rolle.

Date Zahnradsymbol-Einstellungen: Der verwendete Einleitungstext lautet on…, doch diese und die übrigen Einstellungen hier liegen ganz bei dir.

Categories Zahnradsymbol-Einstellungen: HTML tag: span. Der verwendete Intro-Text lautete in…, und wieder ist der Rest deine Entscheidung.

Thumbnail und Excerpt haben für die Zwecke dieses Tutorials keine nennenswerten Einstellungen.

CSS-Packages für Teaser in Thesis 2.0

Du wirst es nicht glauben – aber abgesehen von ein bisschen Formatierung sind deine Teaser fertig!

Um ihnen zum Schluss noch den letzten Schliff zu geben, sehen wir uns den CSS-Bereich des Skin Editors an und fügen ein Package hinzu.

Genau genommen fügen wir drei “Single Element Styles” hinzu, um uns über diesen Teaser-Bereich die völlige Kontrolle zu ermöglichen. Hier ein Beispiel: Im Dropdown-Menü wurde Single Element Styles ausgewählt und die blaue Add Package-Schaltfläche gedrückt, was uns ein Single Element Styles Pop-Up beschert. Und das sehen wir uns gleich genauer an:

Single Element Style - Thesis CSS Skin Editor

Package Nummer Eins — beachte den Bezug (“Reference”) auf teaser_title, denn der kommt als &teaser_title auf die linke Seite, zusammen mit den anderen beiden Packages, die wir noch erstellen werden.

Das obenstehende CSS-Package dient uns hier hauptsächlich als Freischalter. Es kontrolliert den Font der Überschrift – den verlinkten Titel des Teasers – und kann mithilfe des mittigen Options-Tabs gewünschte Anpassungen umsetzen.

Die einzigen Änderungen, die an &teaser_title durchgeführt wurden, um die Ergebnisse aus diesem Tutorial zu erreichen, waren: Top Margin: 1px und Top Padding: 1px.

Package Nummer Zwei: Die gleichen Schritte bei Single Element Styles. Drücke auf die blaue Add Package-Schaltfläche und arbeite weiter mit Single Element Styles, wo dem Package-Tab eine Reference an thumb_link zugewiesen wurde. Der CSS Selector ist .thumb_link.

Minimale Änderungen im Options-Tab unseres Thumbnail-Packages: Top Margin 28px, Right Margin 18px und fertig.

Zum Schluss verpassen wir dem Additional CSS-Tab noch eine einzelne Codezeile, damit unser Thumbnail auch links neben dem Textauszug in die richtige Position “springt”:

.thumb_link { float:left; }

Um sicherzustellen, dass unsere Teaser und Thumbnails nicht verlorengehen, solltest du in diesem Tab mit diesem Code aufhören. Und nicht vergessen, zu speichern:

Erstellen der Teaser mit zusätzlichem CSS Tab eines custom Package

Package Nummer Drei – endlich! Die gleichen bekannten Schritte, “Reference” lautet dieses Mal teaser_excerpt, und die einzige Anpassung an die Zwecke dieses Tutorials bestand darin, unter Options den Bottom Margin auf 22px zu setzen.

Letzte Schritte im CSS-Tab — jetzt gehen wir auf Nummer sicher, dass unsere drei Packages als aktiver CSS-Code für die “Home”-Vorlage kompiliert werden. Erinnerst du dich an die “References”, die du beim Basteln dieser Packages erzeugt hast?

Setze einfach einen Adressoperator – ein “&” – vor den Namen der “Reference” und gib diese Items in die Skin CSS ein, drück den Save CSS-Button — und im Handumdrehen ist alles vorbei:

Zufügen der CSS Packages zum Thesis 2.0 Compiler Queue

Diese drei Packages sind im obenstehenden Bild zu Anschauungszwecken “weit oben” dargestellt. Es ist aber vernünftig, diese Packages weiter unten anzuschließen, um eine sinnvolle “Top-to-Bottom”-Reihenfolge aufrechtzuerhalten.

Bist du diesem Tutorial dicht genug gefolgt, um genau die gleichen “References” zu haben, dann kannst du nun Folgendes in deinem Skin-CSS-Bereich einfügen:


&teaser_title

&thumb_link

&teaser_excerpt

CSS speichern, und prompt solltest du drei einspaltige Teaser haben – ein einzelnes Posting pro Zeile, mit seinen Thumbnail-Bildern und Textauszügen, auf deiner eigenen Seite:

Thesis 2.0 Seite mit einspaltigen Teaser und Thumbnails

Aber wie war das noch mit den “alten” zweispaltigen Teasern aus der Thesis 1.x-Reihe?

Zweispaltige Teaser in Thesis 2.0

Und hier, meine Freunde, wird der entscheidende Aha-Effekt an Thesis 2.0 ersichtlich.

Ja, es war ein bisschen aufwändig, diese selbstgebauten Teaser auf die Beine zu stellen.

Aber gleichzeitig haben wir uns den nötigen Spielraum für die totale Kontrolle geschaffen.

Ab jetzt sind zusätzliche Änderungen in der Formatierung kinderleicht. Schriftart des Titels? Schriftgröße des Textauszugs, Farbe, Hintergrund? Ränder? Alles kinderleicht, wir müssen nur die drei Packages anpassen.

Und wenn du eben gerne “zwei breite” Teaser hättest, braucht es einzig und allein diese CSS-Zeile:


.teasers_home { float:left; width:275px; margin:0px 16px; }

Dieser Code kann in verschiedene Bereiche des CSS-Tabs im Skin Editor eingefügt werden.

In diesem Tutorial wurde die CSS in ein vorhandenes Package eingefügt, das schon vorher in dieser Anleitung erstellt wurde – unten sehen wir den “Additional CSS”-Tab des &teaser_title-Packages:

Einsetzen des CSS um die zwei Spalten für die Teaser mit Thumbnails in Thesis 2.0 zu erstellen

Fertig. Die Breite von 275px ist eben der Wert, an dem du drehen kannst, um deiner Seite die gewünschte Optik zu verpassen.

Nur eine lausige Zeile “Additional CSS”, und du hast zweispaltige Teaser mit Thumbnails!

Thesis 2.0 Seite mit einspaltigen Teaser und Thumbnails

Wie du mittlerweile vielleicht bemerkt hast, eröffnet die Thesis 2.0 Query Box — zusammen mit CSS-Packages — den Weg hin zu weit mehr als nur Teasern.

Also geh und spiel schön – Zeit, deiner Kreativität freien Lauf zu lassen!

VN:F [1.9.22_1171]
Rating: 10.0/10 (13 votes cast)
VN:F [1.9.22_1171]
Rating: +7 (from 7 votes)
Zweispaltige Teaser mithilfe der Query Box erstellen, 10.0 out of 10 based on 13 ratings

{ 0 comments… add one now }

Leave a Comment

*

Previous post:

Next post: