Nach SEO Tipps, Promotion Ideen und der Design Erstellung kommt WordPress: Im nächsten Artikel unserer Gastbeitrag Reihe zeigt euch Patrick, wie ihr eure Designs in einem WordPress Blog einspeist. Ganz ohne iFrames. Es wird ein wenig technisch, aber es lohnt sich.
Viele von euch nutzen bereits WordPress um ihren Shop auf einer externen Website zu betreiben oder um den Shop zusätzlich zu bewerben. Um den Shop so richtig in WordPress einzubinden gibt es noch keine wirkliche Lösung. Im Forum geistern ein paar Lösungen mit Iframes rum und sogar ein Plugin gab es schon. Wie so eine Integration aussieht könnt ihr euch bei Sheepshirts oder Katelein anschauen, da läuft bereits eine WordPressinstallation im Hintergrund.
Einige nutzen schon den RSS Feed ihres Spreadshops um Produkte dynamisch einzubinden. Das ist gar nicht weit entfernt von der neuen Spreadshirt Rest API, denn beide liefern XML Daten. Diese kann man dann mit PHP oder anderen Programmiersprachen auslesen.
Ich werde euch jetzt mal in einem kleinen Beispiel zeigen, wie ihr dynamisch eure neuesten Motive in ein WordPress Blog einbinden könnt. Ich arbeite dabei mit dem neuen Standardtheme von WordPress 3, dem TwentyTen.
Zunächst legt ihr euch ein Template an, dazu erstellt ihr in eurem Themeordner eine PHP-Datei mit beliebigem Namen. Ich nenne sie mal design-listing.php. In diese schreibt ihr dann ganz oben:
<?php /* Template Name: list-shop-designs */ ?>
Wenn ihr nun in eurem Admin Bereich eine neue Seite (Page) erstellt, könnt ihr auf der rechten Seite das Template “list-shop-designs” wählen. Dadurch wird bei jedem Aufruf der Seite die Datei desing-listing.php genutzt.
Damit die Seite in das Gesamtbild eures Blogs passt müsst ihr noch das grundlegende Html-Gerüst einfügen. Im TwentyTen sieht das so aus:
<?php /* Template Name: list-shop-designs */ ?> <? get_header(); ?> <div id="container"> <div id="content" role="main">
...
</div><!-- #content --> </div><!-- #container --> <?php get_sidebar(); ?> <?php get_footer(); ?>
Jetzt müssen wir nur noch die 3 Punkte durch eure Designs ersetzen. Um euch das Arbeiten etwas leichter zu machen, biete ich euch eine PHP Klasse an, die wesentliche Aufgaben der API vereinfacht. Ladet euch hier die Datei spreadshirt-api.class.php herunter und legt sie in das Verzeichnis des TwentyTen Themes.
Jetzt wird die Datei eingebunden und noch eure ShopId gespeichert (leider gehen momentan nur ShopIds von Designershops)
get_template_part( 'spreadshirt-api.class' ); $shopid = '605588';
Nun kommt die API Klasse zum Einsatz. Wir erzeugen eine Instanz der Klasse und rufen mit ihr die Designdaten ab.
$api = new SPREADSHIRT_API;
$xml = $api->get('shops/'.$shopid.'/designs',array('limit'=>200,'offset'=>0));
Wenn ihr euch mal anschauen wollte was da eigentlich abgerufen wird, dann ruft diesen Link auf
Das Skript macht nichts weiter als auch diese Seite aufzurufen und noch den Inhalt in eine Form zu bringen in der wir einen leichteren Zugriff haben. Die XML-Daten dieser Seite haben eine einfache Baumstruktur, welche nun in der Variablen $xml steckt. Die Variable repräsentiert dabei den Knoten <designs>. Wollen wir auf Werte wie den Namen zugreifen, die sich zwischen einem öffnenden und einem schließenden Knoten befinden <name>Designname</name>, dann schreiben wir $xml->name. Möchten wir hingegen auf ein Attribut zugreifen <designs count=”12″>, schreiben wir $xml->attributes()->count.
Mit einer foreach-Schleife lassen sich in PHP leicht mehrere Knoten durchlaufen, dabei wird jeder Knoten vorübergehend in einer neuen Variable gespeichert.
foreach($xml as $design):
?>
<a href="https://<?=$shopid?>.spreadshirt.net/-T6I<?=$design->attributes()->id?>" style="margin:10px;">
<img src="<?=$api -> image ($design -> resources ->resource[0] -> attributes('xlink',true) -> href , array('width'=>'150','height'=>'150'))?>"/>
</a>
<?
endforeach;
Diese Schleife gibt bis zu 200 eurer Designs aus und verweist in euren Spreadshop, hier könnt ihr euch ansehen wie das aussieht. Nochmal das Skript im Gesamten.
<?php /* Template Name: list-shop-designs */ get_header(); ?> <div id="container"> <div id="content" role="main"> <?
get_template_part( 'spreadshirt-api.class' );
$shopid = '605588'; $api = new SPREADSHIRT_API;
$xml = $api->get('shops/'.$shopid.'/designs',array('limit'=>200,'offset'=>0));
foreach($xml as $design):
?>
<a href="https://<?=$shopid?>.spreadshirt.net/-T6I<?=$design->attributes()->id?>" style="margin:10px;">
<img src="<?=$api -> image ($design -> resources ->resource[0] -> attributes('xlink',true) -> href , array('width'=>'150','height'=>'150'))?>"/>
</a>
<?
endforeach;
?> </div><!-- #content --> </div><!-- #container --> <?php get_sidebar(); ?> <?php get_footer(); ?>
Das ist natürlich ein sehr sparsames Beispiel. Aber ich bin sicher bei euch glimmen schon die Ideen was man mit der API noch alles machen kann. Also traut euch einfach!
—
Patrick alias Great Graphics ist Grafik- und Webdesigner aus Leipzig.