{"id":12290,"date":"2011-03-22T12:40:52","date_gmt":"2011-03-22T10:40:52","guid":{"rendered":"https:\/\/www.spreadshirt.de\/blog\/?p=12290"},"modified":"2017-03-02T16:39:56","modified_gmt":"2017-03-02T14:39:56","slug":"spreadshirt-und-wordpress-so-listet-ihr-eure-designs-in-einem-blog","status":"publish","type":"post","link":"https:\/\/www.spreadshirt.de\/blog\/2011\/03\/22\/spreadshirt-und-wordpress-so-listet-ihr-eure-designs-in-einem-blog\/","title":{"rendered":"Spreadshirt und WordPress: So listet ihr Eure Designs in einem Blog"},"content":{"rendered":"

\"\"<\/p>\n

Nach SEO Tipps<\/a>, Promotion Ideen<\/a> und der Design Erstellung<\/a> kommt WordPress<\/strong>: Im n\u00e4chsten Artikel unserer Gastbeitrag Reihe<\/a> zeigt euch Patrick, wie ihr eure Designs in einem WordPress Blog einspeist. Ganz ohne iFrames. Es wird ein wenig technisch, aber es lohnt sich. <\/em><\/p>\n

Viele von euch nutzen bereits WordPress um ihren Shop auf einer externen Website zu betreiben oder um den Shop zus\u00e4tzlich zu bewerben. Um den Shop so richtig in WordPress einzubinden gibt es noch<\/a> keine wirkliche L\u00f6sung. Im Forum geistern ein paar L\u00f6sungen mit Iframes rum und sogar ein Plugin<\/a> gab es schon. Wie so eine Integration aussieht k\u00f6nnt ihr euch bei Sheepshirts<\/a> oder Katelein<\/a> anschauen, da l\u00e4uft bereits eine WordPressinstallation im Hintergrund.<\/p>\n

Einige nutzen schon den RSS Feed ihres Spreadshops um Produkte dynamisch einzubinden. Das ist gar nicht weit entfernt von der neuen Spreadshirt Rest API<\/a>, denn beide liefern XML Daten. Diese kann man dann mit PHP oder anderen Programmiersprachen auslesen.<\/p>\n

Ich werde euch jetzt mal in einem kleinen Beispiel zeigen, wie ihr dynamisch eure neuesten Motive in ein WordPress Blog<\/strong> einbinden k\u00f6nnt. Ich arbeite dabei mit dem neuen Standardtheme von WordPress 3, dem TwentyTen<\/a>.<\/p>\n

Zun\u00e4chst 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<\/strong>. In diese schreibt ihr dann ganz oben:<\/p>\n

<?php\r\n\r\n\/*\r\n\r\nTemplate Name: list-shop-designs<\/strong>\r\n\r\n*\/\r\n\r\n?><\/pre>\n
Wenn ihr nun in eurem Admin Bereich eine neue Seite (Page) erstellt, k\u00f6nnt ihr auf der rechten Seite das Template “list-shop-designs<\/strong>” w\u00e4hlen. Dadurch wird bei jedem Aufruf der Seite die Datei desing-listing.php<\/strong> genutzt.<\/p>\n
\"\"<\/p>\n
Damit die Seite in das Gesamtbild eures Blogs passt m\u00fcsst ihr noch das grundlegende Html-Ger\u00fcst einf\u00fcgen. Im TwentyTen sieht das so aus:<\/p>\n
<?php\r\n \/*\r\n Template Name: list-shop-designs<\/strong>\r\n *\/\r\n ?>\r\n <? get_header(); ?>\r\n <div id=\"container\">\r\n <div id=\"content\" role=\"main\"><\/pre>\n
...\r\n<\/pre>\n
 <\/div><!-- #content -->\r\n <\/div><!-- #container -->\r\n <?php get_sidebar(); ?>\r\n <?php get_footer(); ?><\/pre>\n
Jetzt m\u00fcssen 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<\/a>, die wesentliche Aufgaben der API vereinfacht. Ladet euch hier die Datei spreadshirt-api.class<\/strong>.php herunter und legt sie in das Verzeichnis des TwentyTen Themes.<\/p>\n
Jetzt wird die Datei eingebunden und noch eure ShopId gespeichert (leider gehen momentan nur ShopIds von Designershops)<\/p>\n
get_template_part( 'spreadshirt-api.class<\/strong>' );\r\n$shopid = '605588';<\/pre>\n
Nun kommt die API Klasse zum Einsatz. Wir erzeugen eine Instanz der Klasse und rufen mit ihr die Designdaten ab.<\/p>\n
$api = new SPREADSHIRT_API;\r\n$xml = $api->get('shops\/'.$shopid.'\/designs',array('limit'=>200,'offset'=>0));<\/pre>\n
Wenn ihr euch mal anschauen wollte was da eigentlich abgerufen wird, dann ruft diesen Link auf<\/p>\n
http:\/\/api.spreadshirt.net\/api\/v1\/shops\/605588\/designs?locale=de_DE&fullData=true&limit=200&offset=0<\/a><\/p>\n
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\u00e4sentiert dabei den Knoten <designs>. Wollen wir auf Werte wie den Namen zugreifen, die sich zwischen einem \u00f6ffnenden und einem schlie\u00dfenden Knoten befinden <name>Designname<\/name>, dann schreiben wir $xml->name. M\u00f6chten wir hingegen auf ein Attribut zugreifen <designs count=”12″>, schreiben wir $xml->attributes()->count.<\/p>\n
Mit einer foreach-Schleife lassen sich in PHP leicht mehrere Knoten durchlaufen, dabei wird jeder Knoten vor\u00fcbergehend in einer neuen Variable gespeichert.<\/p>\n
foreach($xml as $design):\r\n ?>\r\n <a href=\"http:\/\/<?=$shopid?>.spreadshirt.net\/-T6I<?=$design->attributes()->id?>\" style=\"margin:10px;\">\r\n <img src=\"<?=$api -> image ($design -> resources ->resource[0] -> attributes('xlink',true) -> href ,  array('width'=>'150','height'=>'150'))?>\"\/>\r\n <\/a>\r\n <?\r\n endforeach;<\/pre>\n
Diese Schleife gibt bis zu 200 eurer Designs aus und verweist in euren Spreadshop, hier k\u00f6nnt ihr euch ansehen wie das aussieht<\/a>. Nochmal das Skript im Gesamten.<\/p>\n
<?php\r\n\/*\r\nTemplate Name: list-shop-designs\r\n*\/\r\nget_header(); ?>\r\n<div id=\"container\">\r\n<div id=\"content\" role=\"main\">\r\n<?<\/pre>\n
get_template_part( 'spreadshirt-api.class' );<\/pre>\n
$shopid = '605588';\r\n$api = new SPREADSHIRT_API;<\/pre>\n
$xml = $api->get('shops\/'.$shopid.'\/designs',array('limit'=>200,'offset'=>0));<\/pre>\n
foreach($xml as $design):\r\n?>\r\n<a href=\"http:\/\/<?=$shopid?>.spreadshirt.net\/-T6I<?=$design->attributes()->id?>\" style=\"margin:10px;\">\r\n<img src=\"<?=$api -> image ($design -> resources ->resource[0] -> attributes('xlink',true) -> href , array('width'=>'150','height'=>'150'))?>\"\/>\r\n<\/a>\r\n<?\r\nendforeach;<\/pre>\n
?>\r\n<\/div><!-- #content -->\r\n<\/div><!-- #container -->\r\n<?php get_sidebar(); ?>\r\n<?php get_footer(); ?><\/pre>\n
Das ist nat\u00fcrlich 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!<\/p>\n
—
\nPatrick alias Great Graphics<\/a> ist Grafik- und Webdesigner aus Leipzig.<\/em><\/p>\n
\n
\n
Teile diesen Beitrag<\/h3>\n<\/div>\n