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

Nach unserem gestrigen Start von WPBeginner Coupons konzentrieren wir uns voll und ganz darauf, das beste Design für die Hauptseite von WPBeginner zu entwickeln, das alles integriert und dabei gut aussieht. Wir wollten einen Slider auf unserer Seite einbauen, aber jedes Skript hatte seine Einschränkungen. Dann, dank des großartigen Matt Mickiewicz von 99designs, SitePoint und Flippa (siehe sein Interview auf WPBeginner), wurden wir von den Leuten von Digital Telepathy, den Machern von SlideDeck (dem mit Abstand besten Slider-Skript im Web), darauf aufmerksam gemacht. Wir haben damit herumgespielt und waren beeindruckt. Es ist großartig für Anfänger, da es ein komplettes WordPress-Plugin bietet, das Ihnen die einfache Drag-and-Drop-Oberfläche zur Erstellung von Slidern ermöglicht. Es ist aber auch großartig für Entwickler, da es eine jQuery-Version gibt, die Entwicklern zusätzliche Freiheit bietet, sie an ihre Bedürfnisse anzupassen. In diesem Artikel zeigen wir Ihnen, wie Sie einen Slider in WordPress erstellen können, ohne eine einzige Codezeile zu bearbeiten, mit dem SlideDeck WordPress Plugin.

Wenn Sie sehen möchten, was Sie mit diesem Plugin erstellen können, hier ist eine LIVE Demo.

Schritt 1. Herunterladen und Installieren des Plugins

Gehen Sie zu SlideDeck's Website und laden Sie das Plugin herunter. Sie haben 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 in unserer Entwicklung stecken geblieben, und ihr Support war erstaunlich und hat uns geholfen. Wir empfehlen Ihnen dringend, die PRO-Version zu erwerben, da sie coole Funktionen wie vertikale Folien, Touchscreen-Unterstützung, Support, RSS-Feed Smart SlideDecks, Hintergrundbild-Unterstützung und vieles mehr enthält.

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

Erstellen wir einen Slider

Sobald Sie das Plugin aktiviert haben, sehen Sie einen neuen Reiter namens SlideDeck. Gehen wir und klicken Sie auf Add New SlideDeck. Sie werden zu einem Bildschirm weitergeleitet, der dem Beitrags-Schreibfeld ähnelt.

Also haben wir den Inhalt in unsere Folie eingefügt und ihr den Titel gegeben. Wir hätten ein benutzerdefiniertes Hintergrundbild haben können (PRO-Funktion), aber der Einfachheit halber haben wir das nicht getan. Wir wollen zeigen, was dieses Plugin out of the box leisten 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 auf das obige Bild schauen, gibt es eine Schaltfläche namens "In vertikale Folie konvertieren". Nun, das ist die Schaltfläche, auf die wir für unsere nächste Folie geklickt haben, und das ist, was hinzugefügt wurde:

Wiederholen Sie nun den Vorgang für so viele Slides, wie Sie möchten. Sobald Sie mit der Erstellung der Slides fertig sind, schauen wir uns die SlideDeck-Optionen zum Veröffentlichen der Slides auf Ihrer Website an. Sie sehen dies auf der rechten Seite Ihres Bildschirms zum Bearbeiten von Slides.

Sie können es so einstellen, dass es automatisch abgespielt wird, die Navigation per Tastatur und Mausrad erlaubt, die Animationsgeschwindigkeit festlegt, eines ihrer tollen Skins auswählt und die Startfolie bestimmt. Sie können die Folien auch per Drag & Drop neu anordnen. Sie sehen, dass es einen Theme-Code-Snippet gibt, der den Code enthält, den Sie in Ihr Theme einfügen können. Sie können ihn überall in Ihrem Theme hinzufügen. Oh, Moment, haben wir nicht gesagt, dass Sie keine einzige Codezeile bearbeiten müssen, um SlideDeck in WordPress zu integrieren? Ja, wir bleiben bei unserem Wort in diesem Tutorial. Lassen Sie uns Ihnen zeigen, wie Sie es in Ihr WordPress integrieren können, ohne eine einzige Codezeile zu bearbeiten.

SlideDeck in WordPress-Beiträgen/Seiten integrieren

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

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öffentlichen, sieht Ihr Slider mit dem Classic Skin so aus:

Sie können es auf einem Sticky-Post, einer Full-Width-Seitenvorlage oder allem anderen verwenden, was Ihnen gefällt. Aber warten Sie, es hört hier nicht auf. Lassen Sie uns noch einen Schritt weiter gehen.

Slider mit vorgestellten Beiträgen hinzufügen

Featured Post Slider sind bei Bloggern beliebt. Wir sehen diese Funktion auf zahlreichen Blogs, aber die meisten dieser Slider sind fest in Themes einprogrammiert und bieten nur begrenzte Kontrolle für Benutzer. Nun, schauen wir uns an, wie einfach das mit SlideDeck geht. Sie können einen dynamischen Slider namens „Smart SlideDeck“ hinzufügen, mit dem Sie entweder Ihre neuesten Beiträge, beliebtesten Beiträge oder vorgestellten Beiträge (die Sie auswählen) anzeigen können. Sie können dies nach Kategorie sortieren, Sie können sogar RSS-Feeds von einer anderen Website importieren, um sie in Ihren Slider aufzunehmen. Sie können aus verschiedenen Skins wählen, verschiedene Arten von Navigationen auswählen und so ziemlich in weniger als 5 Minuten einen Slider fertigstellen. Lassen Sie uns Ihnen zeigen, wie. In unserem Tutorial zeigen wir Ihnen vorgestellte Einträge aus unseren Beiträgen.

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 Ihr Skin:

Wählen Sie aus, wie viele Folien angezeigt werden sollen, Wiedergabeoptionen, Inhaltstyp (sehen Sie, wie wir es als "Featured Entries" 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 hier bearbeiten. Holen Sie sich den Code aus der Seitenleiste, Theme Snippet Code, und fügen Sie ihn in Ihr Theme ein. Höchstwahrscheinlich am Anfang Ihrer index.php. Ein Beispielcode würde so 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 möchten, besuchen Sie die Website von SlideDeck und schauen Sie sich das an.

Teilen Sie uns Ihre Gedanken zum Plugin mit, während Sie es implementieren.