Nach unserem Start von Themelocal-Gutscheine Gestern haben wir uns voll und ganz darauf konzentriert, das beste Design für die Themelocal-Hauptseite zu erstellen, das alles integriert und trotzdem gut aussieht. Wir wollten unserer Seite einen Slider hinzufügen, aber jedes Skript hatte seine Grenzen. Dann danke an den großartigen Matt Mickiewicz von 99designs, SitePoint und Flippa (siehe sein Interview auf Themelocal), der uns an die Leute von Digital Telepathy verwiesen hat, die die Schöpfer von SlideDeck sind (bei weitem das beste Slider-Skript im Internet). Wir haben damit herumgespielt und waren beeindruckt. Es ist großartig für Anfänger, da es ein vollständiges WordPress-Plugin bietet, mit dem Sie die einfache Drag-Drop-Oberfläche zum Erstellen von Schiebereglern verwenden können. Es ist jedoch auch großartig für Entwickler, da es eine jQuery-Version hat, die Entwicklern zusätzliche Freiheit bietet, es an ihre Bedürfnisse anzupassen. In diesem Artikel zeigen wir Ihnen, wie Sie mit dem SlideDeck WordPress Plugin einen Slider in WordPress erstellen können, ohne eine einzige Codezeile zu bearbeiten.
Wenn Sie sehen möchten, was Sie mit diesem Plugin erstellen können, finden Sie hier eine LIVE-Demo.
Schritt 1. Herunterladen und Installieren des Plugins
Besuchen Sie die Website von SlideDeck und laden Sie das Plugin herunter. Sie haben eine KOSTENLOSE Version und eine PRO-Version, die Unterstützung und viele weitere Funktionen bietet. Immer wenn wir mit einem neuen Produkt arbeiten, bekommen wir immer die Support-Version. Wir sind ein paar Mal in unserer Entwicklung stecken geblieben, und ihre Unterstützung war großartig und hat uns weitergeholfen. Wir empfehlen Ihnen dringend, die PRO-Version zu erwerben, da sie coole Funktionen enthält wie: Vertikale Folien, Touchscreen-Unterstützung, UnterstützungRSS-Feed Smart SlideDecks, Unterstützung von Hintergrundbildern und vieles mehr.
Nachdem Sie das Plugin heruntergeladen haben, fahren Sie fort und installieren/aktivieren Sie das Plugin. (Befolgen Sie unsere Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins)
Lassen Sie uns einen Schieberegler erstellen
Sobald Sie das Plugin aktiviert haben, sehen Sie eine neue hinzugefügte Registerkarte namens SlideDeck. Los geht’s und klicken Sie auf Neues SlideDeck hinzufügen. Sie werden zu einem Bildschirm aufgefordert, der wie das Post Write Panel aussieht.
Also fügten wir den Inhalt in unsere Folie ein und gaben ihm den Titel. Wir könnten ein benutzerdefiniertes Hintergrundbild (PRO-Funktion) haben, aber der Einfachheit halber haben wir darauf verzichtet. Wir wollen zeigen, was dieses Plugin out of the box kann. Das war unsere erste Standardfolie. Die nächste Folie, die wir in unserer Demo hinzugefügt haben, war eine vertikale Folie (PRO-Funktion). Vertikale Folien sind im Grunde mehrere Folien innerhalb einer Folie. Wenn Sie sich das Bild oben ansehen, gibt es eine Schaltfläche namens Convert to Vertical Slide. Nun, das ist die Schaltfläche, auf die wir für unsere nächste Folie geklickt haben, und das wurde hinzugefügt:
Wiederholen Sie den Vorgang nun für beliebig viele Folien. Wenn Sie mit dem Erstellen von Folien fertig sind, schauen wir uns die SlideDeck-Optionen zum Veröffentlichen der Folien auf Ihrer Website an. Sie sehen dies auf der rechten Seite Ihres Bildschirms zum Bearbeiten von Folien.
Sie können es für die automatische Wiedergabe auswählen, die Tastaturnavigation zulassen, die Maus-Scrollrad-Navigation zulassen, die Animationsgeschwindigkeit festlegen, eine ihrer erstaunlichen Skins auswählen und auswählen, mit welcher Folie Sie beginnen möchten. Sie können die Folien auch per Drag-Drop neu anordnen. Sie sehen, dass es ein Design-Code-Snippet gibt, das den Code enthält, den Sie in Ihr Design einfügen können. Sie können es an beliebiger Stelle in Ihrem Thema hinzufügen. Oh Moment, haben wir nicht gesagt, dass Sie keine einzige Codezeile bearbeiten müssen, um SlideDeck in WordPress zu integrieren. Ja, wir werden in diesem Tutorial bei unseren Worten bleiben. Lassen Sie uns Ihnen zeigen, wie Sie es in Ihr WordPress integrieren können, ohne eine einzige Codezeile zu bearbeiten.
Integration von SlideDeck in WordPress Post/Pages
Erstellen Sie einen neuen Beitrag oder eine neue Seite. In der rechten Seitenleiste wird ein neues SlideDeck-Feld hinzugefügt.
Klicken Sie auf die Schaltfläche SlideDeck einfügen. Wählen Sie den Slider aus, den Sie hinzufügen möchten, und veröffentlichen Sie den Beitrag. Sobald Sie den Beitrag veröffentlicht haben, sieht Ihr Slider mit dem Classic Skin so aus:
Sie können es für einen klebrigen Beitrag, eine Seitenvorlage in voller Breite oder alles andere verwenden, was Sie möchten. Aber warten Sie, es endet hier nicht. Gehen wir noch ein bisschen weiter.
Fügen Sie einen Slider mit hervorgehobenen Beiträgen hinzu
Featured Post Slider sind die Favoriten von Bloggern. Wir sehen diese Funktion in zahlreichen Blogs, aber die meisten dieser Schieberegler sind fest in Themen mit eingeschränkter Kontrolle für Benutzer codiert. Lassen Sie uns einen Blick darauf werfen, wie einfach es mit SlideDeck ist. Sie können einen dynamischen Schieberegler namens „Smart SlideDeck“ hinzufügen, mit dem Sie entweder Ihre neuesten Posts, die beliebtesten Posts oder die empfohlenen Posts (die von Ihnen ausgewählten) anzeigen können. Sie können diese nach Kategorien sortieren und sogar RSS-Feeds von einer anderen Website importieren um Ihren Slider hinzuzufügen. Sie können aus ihren verschiedenen Skins auswählen, die verschiedenen Navigationstypen auswählen und in weniger als 5 Minuten einen Schieberegler fertig haben. Lassen Sie uns Ihnen zeigen, wie. In unserem Tutorial werden wir hervorgehobene Einträge aus unseren Beiträgen anzeigen.
Gehen Sie zu Ihren aktuellen Beiträgen, wählen Sie 5 Beiträge aus und fügen Sie sie in Smart SlideDecks hinzu, indem Sie das Kontrollkästchen aktivieren.
Gehen wir nun zu Ihrem SlideDeck Panel und klicken Sie auf Smart SlideDeck hinzufügen. Wählen Sie Ihre Haut:
Wählen Sie aus, wie viele Folien Sie anzeigen möchten, Wiedergabeoptionen, Art des Inhalts (sehen Sie, wie wir es als hervorgehobene Einträge aus dem Beitrag haben). Sie können die Inhaltseinstellungen wie Bildoptionen, Titellänge, Auszugslänge usw. auswählen. Wählen Sie Ihre Navigationsstile und klicken Sie auf Veröffentlichen.
Sie müssen den Code auf diesem bearbeiten. Holen Sie sich den Code aus der Sidebar, Theme Snippet Code, und fügen Sie ihn in Ihr Theme ein. Höchstwahrscheinlich ganz oben in Ihrer index.php. Ein Beispielcode würde so aussehen:
<?php if (is_home()) { slidedeck( 73, array( 'width' => '100%', 'height' => '370px' ) ); } ?>
Dadurch würde Ihr Slider nur auf Ihrer Startseite angezeigt.
Wenn Sie einige wirklich coole Demos von SlideDeck sehen möchten, besuchen Sie die Website von SlideDeck und probieren Sie es aus.
Teilen Sie uns Ihre Gedanken über das Plugin mit, während Sie es implementieren.