Schritt für Schritt Anleitung zum Erstellen eines Sliders in WordPress mit SlideDeck

Nach dem gestrigen Start von WPBeginner Coupons konzentrieren wir uns voll und ganz darauf, das beste Design für die WPBeginner-Hauptseite zu entwickeln, das alles integriert und trotzdem gut aussieht. Wir wollten einen Slider in unsere Seite einbauen, aber jedes Skript hatte seine Grenzen. Dann haben wir dem großartigen Matt Mickiewicz von 99designs, SitePoint und Flippa(siehe sein Interview auf WPBeginner) dafür gedankt, dass er uns an die Leute von Digital Telepathy verwiesen hat, die SlideDeck entwickelt haben (das mit Abstand beste Slider-Skript im Web). Wir haben damit herumgespielt und waren beeindruckt. Es ist großartig für Anfänger, weil es ein komplettes WordPress-Plugin bietet, mit dem man Slider mit einer einfachen Drag-Drop-Schnittstelle erstellen kann. Es eignet sich aber auch hervorragend für Entwickler, da es über eine jQuery-Version verfügt, die den Entwicklern zusätzliche Freiheit bei der Anpassung an ihre Bedürfnisse bietet. In diesem Artikel zeigen wir Ihnen, wie Sie mit dem SlideDeck WordPress Plugin einen Slider in WordPress erstellen können, ohne eine einzige Zeile Code 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. Es gibt eine KOSTENLOSE Version und eine PRO-Version, die Support und viele weitere Funktionen bietet. Wenn wir mit einem neuen Produkt arbeiten, holen wir uns immer die Support-Version. Wir sind ein paar Mal bei der Entwicklung stecken geblieben, und der Support war großartig und hat uns geholfen. Wir empfehlen Ihnen dringend, die PRO-Version zu erwerben, da sie coole Funktionen enthält wie: Vertikale Dias, Touchscreen-Unterstützung, Unterstützung, RSS Feed Smart SlideDecks, Unterstützung von Hintergrundbildern und vieles mehr.

Sobald Sie das Plugin heruntergeladen haben, installieren/aktivieren Sie das Plugin. (Folgen Sie unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins)

Lassen Sie uns einen Slider erstellen

Sobald Sie das Plugin aktiviert haben, sehen Sie eine neue Registerkarte mit dem Namen SlideDeck. Gehen Sie los und klicken Sie auf Neues SlideDeck hinzufügen. Sie werden zu einem Bildschirm weitergeleitet, der wie das Post Write Panel aussieht.

Wir haben also den Inhalt in unsere Folie eingefügt und ihr einen Titel gegeben. Wir könnten ein benutzerdefiniertes Hintergrundbild einfügen (PRO Feature), aber der Einfachheit halber haben wir das nicht getan. Wir wollen zeigen, was dieses Plugin von Haus aus leisten kann. Das war unsere erste Standardfolie. Die nächste Folie, die wir in unserer Demo hinzugefügt haben, war eine vertikale Folie (PRO Feature). Vertikale Folien sind im Grunde mehrere Folien innerhalb einer Folie. In der Abbildung oben sehen Sie eine Schaltfläche mit der Bezeichnung In vertikale Folie konvertieren. Das ist die Schaltfläche, auf die wir für unsere nächste Folie geklickt haben, und das ist das Ergebnis:

Wiederholen Sie nun den Vorgang für so viele Folien, wie Sie möchten. Wenn Sie mit dem Erstellen der Folien fertig sind, sehen wir uns die SlideDeck-Optionen für die Veröffentlichung der Folien auf Ihrer Website an. Sie finden diese auf der rechten Seite des Bildschirms „Folien bearbeiten“.

Sie können die automatische Wiedergabe aktivieren, die Navigation mit der Tastatur zulassen, die Navigation mit dem Mausrad zulassen, die Animationsgeschwindigkeit einstellen, eines der fantastischen Skins auswählen und das Dia auswählen, mit dem Sie beginnen möchten. Sie können die Folien auch per Drag-and-Drop neu anordnen. Wie Sie sehen, gibt es ein Code-Snippet für das Thema, das den Code enthält, den Sie in Ihr Thema aufnehmen können. Sie können ihn an beliebiger Stelle in Ihr Thema einfügen. Oh, Moment, haben wir nicht gesagt, dass Sie keine einzige Codezeile bearbeiten müssen, um SlideDeck in WordPress zu integrieren? Ja, wir werden uns in diesem Tutorial an unsere Worte halten. Wir zeigen Ihnen, wie Sie SlideDeck in Ihr WordPress integrieren können, ohne eine einzige Zeile Code zu bearbeiten.

Integration von SlideDeck in WordPress-Beiträge/Seiten

Erstellen Sie einen neuen Beitrag oder eine neue Seite. Sie werden eine neue SlideDeck-Box in der rechten Seitenleiste sehen.

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 wie folgt aus:

Sie können ihn auf einem Sticky-Post, einer Seitenvorlage mit voller Breite oder auf jeder anderen beliebigen Seite verwenden. Aber halt, das ist noch nicht alles. Gehen wir noch ein bisschen weiter.

Einen Schieberegler mit Featured Posts hinzufügen

Schieberegler für vorgestellte Beiträge sind die Favoriten der Blogger. Wir sehen diese Funktion auf zahlreichen Blogs, aber die meisten dieser Schieberegler sind fest in Themes kodiert und bieten den Nutzern nur begrenzte Kontrolle. Schauen wir uns einmal an, wie einfach das mit SlideDeck geht. Sie können einen dynamischen Slider namens „Smart SlideDeck“ hinzufügen, mit dem Sie entweder die neuesten Beiträge, die beliebtesten Beiträge oder die wichtigsten Beiträge (die Sie auswählen) anzeigen können. Sie können diese nach Kategorien sortieren und sogar RSS-Feeds von anderen Websites importieren, um sie in Ihren Slider einzufügen. Sie können aus verschiedenen Skins auswählen, verschiedene Navigationsarten wählen und in weniger als 5 Minuten einen Slider erstellen. Wir zeigen Ihnen, wie es geht. In unserem Tutorial werden wir Featured-Einträge aus unseren Posts anzeigen.

Gehen Sie zu Ihren aktuellen Beiträgen, wählen Sie 5 Beiträge aus und fügen Sie sie in Smart SlideDecks ein, indem Sie das Kästchen markieren.

Gehen Sie nun zu Ihrem SlideDeck Panel und klicken Sie auf Smart SlideDeck hinzufügen. Wählen Sie Ihr Skin:

Wählen Sie die Anzahl der anzuzeigenden Dias, die Abspieloptionen und die Art des Inhalts aus (hier sehen Sie, dass es sich um „Featured entries“ aus dem Beitrag handelt). 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.

Hier müssen Sie den Code bearbeiten. Nehmen Sie den Code aus der Sidebar, Theme Snippet Code, und fügen Sie ihn in Ihr Theme ein. Wahrscheinlich oben in der index.php. Ein Beispielcode würde wie folgt aussehen:

<?php if (is_home()) { slidedeck( 73, array( 'width' => '100%', 'height' => '370px' ) ); } ?>

Dies würde Ihren Slider nur auf Ihrer Homepage anzeigen.

Wenn Sie einige wirklich coole Demos von SlideDeck sehen wollen, dann besuchen Sie die SlideDeck-Website und sehen Sie es sich an.

Lassen Sie uns wissen, was Sie über das Plugin denken, wenn Sie es einsetzen.