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.
Klasse, es ist einfach eine Pracht und ich werde es weiter empfehlen
Weihnachten steht vor der Tür und die Frage ist nun da was man kaufen soll, wer weiß einen Rat?
@Patrick: oha, da ist uns ja glatt der Link entgangen. Danke dafür! 🙂
@Thomas K. : Ein bisschen Vorwissen in Sachen WordPress wird hier natürlich schon vorausgesetzt. Alles andere würde leider den Rahmen sprengen. Der Artikel richtet sich an halbwegs erfahrene WordPress Benutzer mit Programmierambitionen.
@shirtpress: “auf die Gefahr hin, dass das als Hijacking angesehen wird” – ach quatsch, ich hab euch doch im Artikel nicht umsonst verlinkt
@Thomas K.: auf die Gefahr hin, dass das als Hijacking angesehen wird, bei unserem geplanten Plugin wird das ganze sehr einfach ablaufen. Man gibt im Backend die ID seines Shops ein, die verfügbaren Produkte werden angezeigt und man wählt aus, was der User auf der Seite sieht. Ganz ohne DV Studium 😉
Hallo,
ich verstehe nur Bahnhof, habe allerdings auch keine Ahnung von Blogs und so.
Was ist RSS Feed?
“Zunächst legt ihr euch ein Template an, dazu erstellt ihr in eurem Themeordner eine PHP-Datei…” – Template, Themenordner, PHP-Datei, was, wo, wie???
“Admin Bereich” – wo?
Gibt es da nicht irgendwo eine genaue Anleitung für Laien, was man wo und wie zu tun hat?
Ich würde ja gerne unsere Seiten etwas pushen, weil bislang null Erfolg, aber ich fürchte ich muss erst einmal DV Studieren, wenn ich das hier so lese.
Gruß,
Thomas Kardung.
@fishbone: wir arbeiten gerade an einem Plugin, um den eigenen Spreadshop in WordPress zu integrieren. Wer Interesse hat, auf http://shirtpress-plugin.de kann man sich schon mal auf die “Early Bird” Newsletterliste setzen lassen. 🙂 Bis zum Launch sollte es jetzt nicht mehr allzu lange dauern.
@fishbone: ja im artikel war erst mal nur platz für einen kleinen einstieg. natürlich lässt sich noch deutlich mehr direkt in wordpress integrieren. bis auf den checkout (der nur im iframe) eigentlich ein kompletter shop
mit typo3 kenn ich mich leider nicht so wirklich aus, so dass ich dir da wirklich weiter helfen könnte.
@patrik: prima die api, aber da man dann lediglich im entsprechenden shopfenster landet (ohne wordpress drumrum), kann ich das auch mit nem simplen link veranstalten.
sinn macht das ganze doch erst dann, wenn ich auf der website bleibe. ich bin leider auch nicht der wordpress-profi. hab grad erst von zwei minuten eine standardversion installiert.
ich habe viel gegoogelt aber nichts wirkliches gefunden; gibt es ne möglichkeit einen spreadshirt-kern in typo3 zu integrieren? es gibt bei typo3 ein nettes inhaltsmodul in dem ich pures php einfügen kann.
man möge mir die unwissenheit nachsehen, ich bin nur ein reklamefuzzi…
Pingback: » Warum ich für meine Spreadshops Wordpress nutze?
sorry romibello, geht jetzt wieder
>Diese Schleife gibt bis zu 200 eurer Designs aus und verweist in euren Spreadshop, hier könnt ihr euch ansehen wie das aussieht.
der link will nicht.
was ist das für ein shop oben im bild?
Das ist ja cool, wusste gar nicht das Spreadshirt ne eigene API bietet
@chrisbears: dann hast du doch ein ziel auf das du zuarbeiten kannst 😉 die integration in wordpress als cms hat aber einige vorteile gegenüber einer normalen seite. schließlich wollen in einem guten shop auch eigene inhalte untergebracht und möglichst leicht gepflegt werden.
Hi Patrick,
vielen Dank für Deine Mühe. Das ist echt ein prima Einstieg.
Deine spreadshirt-api.class und Dein Beispiel eignen sich natürlich auch prima für Einbindungen in ganz normale Seiten, die nicht auf WordPress basieren.
Spannend wird es aber erst, wenn man auf eins der generierten Designs klickt und sich der Shop nicht in einem neuen Fenster öffnen soll…
:o)