Stampin' Up! Produkte & Bastelideen
-

Diese Webseite wird nicht mehr aktualisiert -  HIER  gehts weiter!

Seite auswählen

Heute möchte ich dir zeigen, wie ich den Slider mit Stampin‘ Up!-Produkten in meinen Blog eingebunden habe.
Wenn es dich interessiert, hole dir ein Tässchen Kaffee oder Tee. Interessiert es dich nicht, brauchst Du ja nicht weiter lesen 😉

For my english visitors: The important things are blue for you.
We (hubby and i) would also like you to pin this tutorial if you found it helpful. Thank you! 

Vorab allerdings ein Hinweis:

Hinter dem Code steckt einiges an Arbeit.

Mein Mann hat sich die Arbeit für mich gemacht, da ich es nicht hin bekommen habe (javascript & PHP sind nicht so mein Gebiet^^). Der Code ist so einfach wie möglich gehalten, aber es kann natürlich trotzdem sein, dass es bei dem ein oder anderen nicht funktioniert. Auch ist es gut möglich, dass der Slider eventuell nicht in jedem Browser und auf jedem Gerät funktioniert. Wir können außerdem nicht die Richtigkeit garantieren, wir sind keine Experten. Wir haben einfach so lange probiert bis es geklappt hat.

Habe bitte Verständnis dafür, dass wir keinen Support bieten können, da wir den Code kostenlos zur Verfügung stellen.

Wenn Du den Slider benutzt und dich jemand fragt wie Du das gemacht hast, verlinke bitte auf diesen Beitrag.

Wenn Du ihn weiterempfehlen möchtest, verlinke bitte direkt auf diesen Beitrag.

PIN this tutorial – it would give us great pleasure …

Wir wollen kein Geld, sondern Wertschätzung der Arbeit.

Product-Slider for Stampin' Up!-Demonstrators (for WordPress)

Die Anleitung ist speziell für uns bloggende Stampin‘ Up!-Demostratoren (Wenn Du dich auskennst kannst Du ihn aber natürlich gerne für deine Zwecke ändern!). Denn für den Kunden ist es ein guter Service, unter einem Projekt die Produkte auf zu listen, die bei dem Projekt verwendet wurden.
Und da das recht oft nötig ist wenn man aktiv bastelt, soll es beim schreiben eines Blogeintrags natürlich so schnell wie möglich gehen.

Bevor Du los legst:

» Von Vorteil ist, wenn Du DBWS hast (Demos wissen was gemeint ist). Falls Du das (noch) nicht hast kannst Du probieren ob es auch ohne funktioniert und die Nummer später ändern.
You should have DBWS. If you do not have it, just remove my Demo-ID and try out what happens!

» Wenn Du deine WordPress-Seite nicht selbst hostest musst Du schauen ob du Zugang zu den nötigen Dateien hast, am besten per FTP. Kommst Du da nicht dran, dann funktioniert mein Weg leider nicht bei dir.
You should have FTP-access to your WordPress. If you do not host your blog by yourself, maybe you cant use this tutorial – sorry!

» Ich hoffe Du arbeitest mit einem eigenen oder zumindest mit einem Child-Theme. Wenn Du nämlich ein Theme benutzt das vom Hersteller ab und zu ein Update bekommt, dann werden deine Änderungen beim nächsten Update überschrieben. Der Slider funktioniert dann nicht mehr!
If you use a theme that is not written by you, you always should use a child theme. If your theme gets updated, your changes will disappear and the slider won’t work anymore!

Ich nutze dazu einen sogenannten Shortcode.
Ein Beispiel, was ich in WordPress eintippe:
What i type into my blogpost:

Ja, das sieht erstmal monströs aus. Schau es dir aber genauer an, dann ist alles halb so wild.

Und das kommt im Blogeintrag dabei raus:
What it looks:

Der Shortcode ist also:
The shortcode i use:

Der Shortcode „susliderliste“ ist in unserem Fall dafür zuständig, dass das ganze sich bewegen lässt. Dank Javascript.
Der Shortcode „susliderprodukt“ zeigt das Produkt und die Beschreibung an.

Du siehst: Wir brauchen 2 Teile.
Den Slider als Funktion an sich und einen Shortcode, der uns das einbinden vereinfacht UND gleich noch die Produkte ausgibt die wir anzeigen wollen.

Lies dir alles durch und mach es so wie es da steht, dann sollte das in 5 Minuten erledigt sein.

Teil 1 – der Slider

Source (as a sign of esteem) : Ken Wheeler

header.php
Code dem < head > hinzufügen:
Paste between < head > and < / head >:

 

Code in die style.css:
Paste into your style.css:

 

header.php
Code in < body > einfügen:
Paste after < body >:

 

Teil 2 – Shortcode in WordPress anlegen

Code in die functions.php einfügen:
Paste into your functions.php:

Bei dbwsdemoid= ist es für dich natürlich von Vorteil, wenn du deine eigene ID einträgst.
Don’t forget to change your Demo-ID!

Und das war es auch schon!
Wenn Du es ausprobiert hast und erfolgreich warst hinterlasse uns doch einen Kommentar, denn auch mein Mann freut sich sehr über Feedback 🙂

Ähnliches entdecken:
Kategorie: Daily drunter und drüber


Nadine

Du möchtest neue Beiträge von mir sehen? Hier gelangst Du zu meiner neuen Webseite »


Diese Seite dient nur noch als Archiv!

Datenschutzerklärung | Impressum

* = Preise inkl. MwSt.

Der Inhalt dieser Webseite unterliegt meiner alleinigen Verantwortung als unabhängige Stampin' Up!-Demonstratorin und Stampin' Up!® hat keinen Einfluss auf die Verwendung sowie die Inhalte der in dem Blog, der Webseite und jedwedem anderen Internetmedium angebotenen Kurse, Dienstleistungen oder Produkte.