In Verbindung mit meinem Online-Marktplatz JUST YUM YUM Kitchen stand ich vor der Herausforderung, sämtliche Produktbilder mit alt-tags zu versehen.
Zwei Gründe machten schnell klar, warum der klassische Weg, die Bilder manuell mit alt-tags zu versehen, auf Dauer kein praktikabler Weg sein wird:
- Ich lade meine Affilate-Produkte per CSV-Upload auf JUST YUM YUM Kitchen hoch. Leider ist hier kein Feld für die alt-tags der Produktbilder vorgesehen, so dass ich in jedem Produkt die alt-tags nachbearbeiten müsste. Aufgrund der Menge an Bildern, die ein Upload mit sich bringt, wenig effizient.
- Als Verkäufer registrierte Nutzer können eigenständig ihre Produkte hochladen. Die Wahrscheinlichkeit, dass bei den Produktbildern die alt-tags regelmäßig vergessen werden, habe ich als sehr hoch eingeschätzt.
Um mir das Leben zu erleichtern und sicher zu stellen, dass sämtliche Produktbilder immer mit alt-tags versehen sind, musste also eine Lösung her, die alt-tags automatisch erstellen kann.
Da es mir herzlich egal ist, mit welchen alt-tags die Bilder in der Medienbibliothek von WordPress versehen sind, manipuliere ich bei meiner Lösung lediglich die Bildausgabe im Frontend von JUST YUM YUM Kitchen.
Die Umgebung
Damit Du die nachfolgenden Code Snippets besser einordnen kannst, nochmal kurz die Systemkomponenten, die hier relevant sind:
- WordPress
- WooCommerce Shop Plugin
- WC Marketplace Plugin
- REHub-Theme* – WordPress-Theme für Preisvergleichs-, Affiliate-Marketing-, Multi Vendor Store- und Community-Seiten
Die Erwähnung des REHub-Themes und des WC Marketplace-Plugins ist an dieser Stelle insofern wichtig, weil sich in den Code Snippets Passagen wiederfinden, die sich auf auf die Taxonomien store und dc_vendor_shop beziehen. Diese Taxonomien wird durch das Theme und das Plugin zur Verfügung gestellt.
In meinen alt-tags möchte ich grundsätzlich folgende Informationen anzeigen lassen:
- Produktname
- regulärer Preis
- Angebotspreis, sofern vorhanden
- Name des Anbieters oder des Verkäufers
- SEO-relevante Textpassagen
Die Angaben in Deinem eigenen automatischen alt-tag kannst Du natürlich entsprechend Deinen Anforderungen anpassen. Du musst dann lediglich die entsprechenden Meta-Daten in Deinem Skript zur Verfügung stellen und verarbeiten.
Code Snippets Plugin
Für die folgenden Code-Injections nutze ich das WordPress-Plugin Code Snippets von Shea Bunge, das Du Dir ebenfalls installieren solltest.
Für WooCommerce Produktseiten alt-tags automatisch erstellen
Um den alt-tag im HTML eines Produktbildes zu verändern, verwende ich einen Filter-Hook, den WooCommerce von Hause zur Verfügung stellt: woocommerce_single_product_image_thumbnail_html.
An diesen Filter binde ich nun mit add_filter() meine Funktion jyy_bw_automatedAltTags, in der ich dann meinen neuen alt-tag generiere.
add_filter( 'woocommerce_single_product_image_thumbnail_html', 'jyy_bw_automatedAltTags', 10, 1 );
Die Zahlen 10 und 2 bestimmen dabei die Priorität, mit der die angehängte Funktion jyy_bw_automatedAltTags ausgeführt werden soll und die Anzahl der akzeptierten Argumente, die diese Funktion akzeptieren soll.
In meinem Fall ist das lediglich ein Argument, nämlich $html.
Das neue alt-tag vorbereiten
Der erste Schritt innerhalb der Funktion besteht darin, die Informationen, die ich für den neuen alt-tag verwenden möchte, verfügbar zu machen.
Produktnamen abfragen und speichern
Den Produktnamen und den bzw. die Preise zu erhalten, ist die einfachste Übung. Denn hierfür stellen WordPress und WooCommerce eigens Funktionen zur Verfügung.
// get product name aka post title
$jyy_bw_img_alt_productname = get_post_field('post_title');
// get product meta data
$product = wc_get_product($post->ID);
$jyy_bw_img_alt_reg_price = $product->get_regular_price();
$jyy_bw_img_alt_sale_price = $product->get_sale_price();
Wichtig bei den WooCommerce-Produktdaten ist, dass Du zunächst über $product = wc_get_product($post->ID);ein Objekt erzeugst. Danach kannst Du dann wie oben zu sehen, die benötigten Informationen abholen.
Eine umfangreiche Liste der Informationen, die sich über das $product Objekt abfragen lassen, findest Du auf WooCommerce: Easily Get Product Info (ID, SKU, $) from $product Object.
Den Namen des Affiliate-Partner abfragen und speichern
Etwas diffiziler wird es mit dem Namen des jeweiligen Anbieters. Dieser steckt, wie schon erwähnt, in der Taxonomie store des REHub-Themes*.
Hierzu benutze ich zunächst die WordPress-Funktion get_the_terms(). Diese Funktion liefert mir ein WP_Term Object zurück, das sämtliche Informationen der Taxonomie store enthält, die mit dem Artikel beziehungsweise mit dem Produkt verbunden sind.
Um diese Werte zugänglich zu machen, schreibe ich die Werte aus dem Array mit der PHP-Funktion array_shift in die neue Variable $term.
Nun kann ich mir mit der WordPress-Funktion get_term_meta() den Namen des Anbieters holen und in der Variablen $jyy_bw_brand ablegen.
if ( $jyy_bw_store_terms = get_the_terms( $post->ID, 'store' ) ) {
$jyy_bw_store_term = array_shift( $jyy_bw_store_terms );
$jyy_bw_brand = get_term_meta( $jyy_bw_store_term->term_id,'brand_heading',true);
} // close if
Den Namen des Marktplatz-Verkäufers abfragen
Wenn sich auf JUST YUM YUM Kitchen ein Verkäufer registriert, wird für diesen auch immer eine Verkäuferseite erzeugt, das sogenannte Schaufenster. Diese Seite dient in erster Linie dazu, die Produkte dieses Verkäufers zu präsentieren.
Diese Verkäuferseite wird in der Taxonomie dc_vendor_shop erzeugt, die dieses Mal durch das WordPress-Plugin WC Marketplace zur Verfügung gestellt wird.
Da diese Verkäuferseite in der Regel den Namen des jeweiligen Verkäufers beziehungsweise seiner Unternehmung als Titel trägt, verwende ich eben diesen für meine alt-tags.
if($jyy_kitchen_vendors = get_the_terms($post->ID,'dc_vendor_shop')){
$jyy_kitchen_brand = $jyy_kitchen_vendors[0]->name;
} // close if
Um den Namen des Verkäufers zu speichern, verwende ich im Übrigen die gleiche Variable wie schon zuvor bei der Taxonomie store, nämlich $jyy_kitchen_brand.
Einen inhaltlichen Konflikt zwischen den beiden Taxonomien schließe ich dadurch aus, dass ich die Taxonomie store ausschließlich für Affiliate-Partnern verwende, während die Taxonomie dc_vendor_shop nur registrierten Marktplatz-Verkäufern vorbehalten ist.
Das neue alt-tag erzeugen
Nachdem ich nun alle für mich relevanten Informationen zusammen habe, geht es daran, den neuen alt-tag zusammenzusetzen.
Dazu führe ich zunächst die neue Variable $jyy_bw_automatedAltTag ein, in der ich den Inhalt des neuen alt-tags speichern werde.
Anschließend führe ich die Variablen, in denen ich die Informationen zu Anbieter und Preisen gespeichert habe, zusammen und gebe noch einige statische Textbausteine mit.
Bei den Preisen prüfe ich über eine if-Schleife, welche der Variablen eine Information enthält.
Bereits bestehende alt-tags entfernen
Zu guter Letzt muss ich nun noch ein gegebenenfalls bereits bestehendes alt-tag durch mein eigenes Attribut ersetzt.
$html = preg_replace('/alt=".*?"/', 'alt="' . $jyy_bw_automatedAltTag . '"', $html);
Dazu verwende ich die PHP-Funktion preg_replace. Diese Funktion durchsucht die Zeichenkette $html nach Übereinstimmungen mit einen Suchmuster (/alt=".*?"/) und ersetzt dieses mit meinem neuen alt-tag, das in der Variablen $jyy_bw_automatedAltTag steht.
Code Snippet: Auf WooCommerce-Produktseiten alt-tags automatisch erstellen
<?php
add_filter( 'woocommerce_single_product_image_thumbnail_html', 'jyy_bw_automatedAltTags', 10, 1 );
function jyy_bw_automatedAltTags($html) {
global $post;
$jyy_bw_img_alt_productname = get_post_field('post_title');
$product = wc_get_product($post->ID);
$jyy_bw_img_alt_reg_price = $product->get_regular_price();
$jyy_bw_img_alt_sale_price = $product->get_sale_price();
// get brand data - data only available if affiliate (external) product
if ( $jyy_bw_store_terms = get_the_terms( $post->ID, 'store' ) ) {
$jyy_bw_store_term = array_shift( $jyy_bw_store_terms );
$jyy_bw_brand = get_term_meta( $jyy_bw_store_term->term_id,'brand_heading',true);
} // close if
// get vendor data - data only available if product published by WCMp vendor
if($jyy_kitchen_vendors = get_the_terms($post->ID, 'dc_vendor_shop')){
$jyy_kitchen_brand = $jyy_kitchen_vendors[0]->name;
} // close if
// generate new alt tag content
$jyy_bw_automatedAltTag ='';
$jyy_bw_automatedAltTag .= $jyy_bw_img_alt_productname;
// only regular price available
if(!empty($jyy_bw_img_alt_reg_price) && empty($jyy_bw_img_alt_sale_price)){
$jyy_bw_automatedAltTag .=' - ';
$jyy_bw_automatedAltTag .= $jyy_bw_img_alt_reg_price;
$jyy_bw_automatedAltTag .= ' EUR';
} // close if
// regular price and sale price available
if(!empty($jyy_bw_img_alt_reg_price) && !empty($jyy_bw_img_alt_sale_price)){
$jyy_bw_automatedAltTag .=' - Regulärer Preis: ';
$jyy_bw_automatedAltTag .= $jyy_bw_img_alt_reg_price;
$jyy_bw_automatedAltTag .= ' EUR';
$jyy_bw_automatedAltTag .= ' - Jetzt im Angebot für ';
$jyy_bw_automatedAltTag .= $jyy_bw_img_alt_sale_price;
$jyy_bw_automatedAltTag .= ' EUR';
} // close if
if(!empty($jyy_bw_brand)){
$jyy_bw_automatedAltTag .= ' - Jetzt Produkte von ';
$jyy_bw_automatedAltTag .= $jyy_bw_brand;
$jyy_bw_automatedAltTag .= ' online auf JUST YUM YUM Kitchen Marktplatz kaufen!';
} // close if
$html = preg_replace('/alt=".*?"/', 'alt="' . $jyy_bw_automatedAltTag . '"', $html);
return $html;
}
?>
Auf Archiv- und Übersichtsseiten alt-tags automatisch erstellen
Damit ich auch auf Übersichts- und Archivseiten ebenfalls alt-tags automatisch erstellen kann, muss ich den obigen Code an verschiedenen Stellen anpassen:
- anderer Filter-Hook
- Angabe von Conditional Tags
- Abfrage des Produktnamens
- Überschreibung des bestehenden alt-tags
- Ausgabe des neuen alt-tags
Ein anderer Filter-Hook
Während ich für die WooCommerce Produktseite den Hook woocommerce_single_product_image_thumbnail_html verwende, muss ich außerhalb der Produktseiten diesen Hook auf wp_get_attachment_image_attributes ändern.
wp_get_attachment_image_attributes liefert mir das Array $attr zurück, das alle Attribute für das HTML-Markup eines Bildes enthält. Auch das aktuelle alt-tag, das ich mit meinem Skript manipulieren möchte.
Angabe von Conditional Tags
In Verbindung mit dem neuen Filter-Hook musste ich eine Ausschlüsse definieren, die dafür sorgen, dass das Skript auf bestimmten Seiten nicht ausgeführt wird. Andernfalls kommt es auf diesen Seiten zu unschönen Nebeneffekt, wenn nicht sogar zu einem Fatal Error.
Diese Ausschlüsse lassen sich durch die WordPress Conditional Tags und die WooCommerce Conditional Tags vornehmen.
// WordPress Conditional Tags is_home() // Startseite is_front_page() // Startseite is_page(array(3300)) // spezifische Seite via post ID wegen Nutzung des Plugins WCMp Advanced Frontend Manager // WooCommerce Conditional Tags is_cart() // Warenkorb is_checkout() // Kasse is_account_page() // Kundenkonto
Ob Du diese oder vielleicht andere Ausschlüsse benötigst, musst Du bitte intensiv testen.
Abfrage des Produktnamens
Da ich mich mit diesem Skript außerhalb einer Produkt-Detailseite bewege, kann ich den Produktnamen beziehungsweise den Seitentitel mit get_the_title() wesentlich einfacher abfragen.
$jyy_bw_img_alt_productname = get_the_title($post->ID);
Überschreiben des bestehenden alt-tags
Das Überschreiben des bestehenden alt-tags gestaltet sich hier ebenfalls etwas einfacher als auf der WooCommerce Produktseite. Ich muss lediglich den bestehenden Wert des alt-Attributs mit meinem neuen Wert ersetzen.
$attr['alt'] = $jyy_bw_new_alt_tag;
Und das war’s auch schon. Ansonsten funktioniert das Skript genauso wie schon auf der WooCommerce-Produktseite.
Code Snippet: Auf Archiv- und Übersichtsseiten alt-tags automatisch erstellen
<?php
add_filter( 'wp_get_attachment_image_attributes', 'jyy_bw_automatedAltTags_WP',10,1);
function jyy_bw_automatedAltTags_WP($attr){
if (is_home() ||
is_front_page() ||
is_cart() ||
is_checkout() ||
is_account_page() ||
is_page(array(3300))){
// don't manipulate image alt tag
} else {
global $post;
global $product;
$jyy_bw_img_alt_productname = get_the_title($post->ID);
$product = wc_get_product($post->ID);
$jyy_bw_img_alt_reg_price = $product->get_regular_price();
$jyy_bw_img_alt_price = $product->get_price();
$jyy_bw_img_alt_sale_price = $product->get_sale_price();
$jyy_bw_vendor = get_wcmp_product_vendors($product);
// get brand data - data only available if affiliate (external) product
if ( $terms = get_the_terms( $post->ID, 'store' ) ) {
$term = array_shift( $terms );
$jyy_bw_brand = get_term_meta( $term->term_id,'brand_heading',true);
} // close if
// get vendor data - data only available if product published by WCMp vendor
if($jyy_bw_vendors = get_the_terms($post->ID, 'dc_vendor_shop')){
$jyy_bw_brand = $jyy_bw_vendors[0]->name;
} // close if
// generate new alt tag content
$jyy_bw_new_alt_tag ='';
$jyy_bw_new_alt_tag .= $jyy_bw_img_alt_productname;
if(!empty($jyy_bw_img_alt_reg_price) && empty($jyy_bw_img_alt_sale_price)){
$jyy_bw_new_alt_tag .=' - ';
$jyy_bw_new_alt_tag .= $jyy_bw_img_alt_reg_price;
$jyy_bw_new_alt_tag .= ' EUR';
} // close if
if(!empty($jyy_bw_img_alt_reg_price) && !empty($jyy_bw_img_alt_sale_price)){
$jyy_bw_new_alt_tag .=' - Regulärer Preis: ';
$jyy_bw_new_alt_tag .= $jyy_bw_img_alt_reg_price;
$jyy_bw_new_alt_tag .= ' EUR';
$jyy_bw_new_alt_tag .= ' - Jetzt im Angebot für ';
$jyy_bw_new_alt_tag .= $jyy_bw_img_alt_sale_price;
$jyy_bw_new_alt_tag .= ' EUR';
} // close if
if(!empty($jyy_bw_brand)){
$jyy_bw_new_alt_tag .= ' - Jetzt Produkte von ';
$jyy_bw_new_alt_tag .= $jyy_bw_brand;
$jyy_bw_new_alt_tag .= ' online auf JUST YUM YUM Kitchen Marktplatz kaufen!';
} // close if
$attr['alt'] = $jyy_bw_new_alt_tag;
}
return $attr ;
}