Mit der Überschrift habe ich mich diesmal ein wenig schwer getan.
Ich beschreibe es mal ausführlicher. So grundsätzlich vertrete ich die Ansicht, Dinge immer so einfach wie möglich zu gestalten und zusätzliche Komplexität zu vermeiden. Das Thema eCommerce verfolgt mich ja schon seit Jahren, aber manchmal passt ein Online Shop wie WooCommerce mit Warenkorb und Zahlungsabwicklung einfach nicht ins Konzept der Website.
Dann benötigst du eine andere Herangehensweise, um mit einem Besucher in Kontakt über einen eventuellen Verkauf zu kommen. Im letzten Blog Post (Dynamische Formulare für WordPress) hatte ich gezeigt, wie du ein Formular „dynamisierst“ und dadurch eine Art Verkaufskatalog erstellen kannst. Wenn etwas zu verkaufen ist, wird das Formular angezeigt, wenn nicht, dann eben nicht.
Das klappt auch gut, aber es bedarf natürlich eines Hinweises in der Liste der Dinge, ob sie denn käuflich zu erwerben sind oder nicht. In der Werbung wird diese Technik oft benutzt und nennt sich Störer. Ein Störer will Aufmerksamkeit erzeugen. Ich meine so etwas wie „heute im Angebot“, in einer auffälligen Schrift. Dann fällt das den Kunden auf und vielleicht kaufen sie das Produkt. Auch in Content Management Systemen werden Störer verwendet, allerdings eher als Hinweise. In einer Liste stehen dann Worte wie: „aktualisiert“ oder „neu“ oder man arbeitet mit unterschiedlichen Farben. Hat man einmal darauf geklickt, verschwindet der Hinweis meistens. In unserem Fall wollen wir den Störer eher als permanenten Hinweis nutzen.
Das charmante an so einer Darstellung ist meines Erachtens die Kombination aus einer Portfolio-artigen Darstellung im Sinne von „Das habe ich schon alles gemacht“ und der Möglichkeit eine Zusatzinformation zu geben „und wenn du willst, kannst du dieses bestimmte Ding auch kaufen oder buchen“ oder „Das ist leider schon verkauft“.
So, und nun mach‘ mal eine griffige Überschrift aus dieser Anforderung 🙂
Die Liste
Die Liste ist eine Sammlung von Portfolio Items. In diesem Fall wird das Maker Theme benutzt, das Theme spielt aber keine entscheidende Rolle bei der Funktion. Ziel ist, das klar wird, was bereits verkauft ist.
Durch den Einsatz des dynamischen Formulars hat jedes Portfolio Item, das verkäuflich ist, den gleichen Shortcode für das Formular im Text. Wenn ich also bei der Darstellung der Liste nachsehe, ob der Shortcode vorhanden ist, oder nicht, habe ich bereits die Basis für meinen „Störer“.
Und tatsächlich gibt es in WordPress die Funktion has_shortcode(). Man gibt an, nach welchem Shortcode man im Text $content sucht und der Rückgabewert ist ein True oder False. Je nachdem, zeige ich etwas anderes an.
<?php
$content = $post->post_content;
if( has_shortcode( $content, 'contact-form-7' ) ) {
$sticker_content = '<h1>Available</h1>';
}
else{
$sticker_content = '<h1>Sold</h1>';
}
Wichtiger Hinweis: Wenn du an den Theme Dateien etwas änderst, solltest du vorher ein Child Theme erzeugen und darin ändern, damit bei einem Update des Themes deine Änderungen nicht wieder überschrieben werden.
Im konkreten Fall, die Seite nutzt das Plugin JetPack und das Maker Theme, musste ich die Datei content-portfolio-jetpack.php ändern. Das geht im Backend über den Editor.
Das Ergebnis ist noch nicht schön, aber es funktioniert.
Schön machen
Nun bin ich ja eher Entwickler und vom „schön machen“ verstehe ich nicht soviel. Prinzipiell gibt es wieder zwei Möglichkeiten.
- Du erstellst dir zwei Grafiken und blendest sie anstelle des Textes in einem HTML img-Tag oder per CSS ein. In WooCommerce gibt es übrigens Sticker Plugins, die so ähnlich funktionieren, beispielsweise Woo Stickers.
- Ein Entwickler versucht eher etwas zu coden, da er oder sie meistens keine anständige Bildbearbeitungssoftware installiert hat, geschweige denn bedienen kann und ein zusätzliches Bild die Site auch wieder komplexer macht, im Sinne von: „Wie sieht es auf dem Telefon aus?“, „wo soll die Datei gespeichert werden?“ etc.
Ich habe mich daher für die zweite Variante entschieden, umschließe den Text mit einem <p> Tag, füge eine CSS Klasse hinzu und konfiguriere mir online die CSS Befehle für einen Button, beispielsweise hier css3buttongenerator.com. Der Generator erstellt mir CSS Code, den ich, oder ein Designer, natürlich auch noch anpassen kann.
.sticker {
background: #d9345d;
background-image: -webkit-linear-gradient(top, #d9345d, #b82c5b);
background-image: -moz-linear-gradient(top, #d9345d, #b82c5b);
background-image: -ms-linear-gradient(top, #d9345d, #b82c5b);
background-image: -o-linear-gradient(top, #d9345d, #b82c5b);
background-image: linear-gradient(to bottom, #d9345d, #b82c5b);
-webkit-border-radius: 4;
-moz-border-radius: 4;
border-radius: 4px;
text-shadow: 1px 1px 3px #666666;
-webkit-box-shadow: 0px 1px 3px #666666;
-moz-box-shadow: 0px 1px 3px #666666;
box-shadow: 0px 1px 3px #666666;
font-family: Courier New;
color: #ffffff;
font-size: 21px;
padding: 10px 10px 10px 10px;
border: solid #1f628d 0px;
text-decoration: none;
}
.sticker:hover {
background: #cccccc;
text-decoration: none;
}
Wenn das Bild verkäuflich ist, soll nichts angezeigt werden, wenn es bereits verkauft ist, soll der Text mit dem CSS Code dargestellt werden.
<?php
$content = $post->post_content;
if( has_shortcode( $content, 'contact-form-7' ) ) {
$sticker_content = '';
}
else{
$sticker_content = '<p class ="sticker">Sold</p>';
}
An der Stelle, wo es angezeigt werden muss noch diese Zeile eingefügt werden.
<?php echo $sticker_content; ?>
Im Editor sieht das dann so aus:
Den CSS Code schreibe ich im Theme Customiser in den Bereich additional CSS.
Danach ist das Ziel erreicht, der Text wird entsprechend formatiert.
Fazit
Was mich an WordPress immer wieder fasziniert, ist die einfache Art, wie sich so eine Anforderung lösen lässt. An dem Design des Buttons/Störers kann man nun relativ einfach mit CSS Befehlen experimentieren ohne in den Quellcode des Themes eingreifen zu müssen.
tl;dr: In WordPress lassen sich Listen mit Hinweisen versehen
Schreibe einen Kommentar