Guida passo passo alla creazione di uno slider in WordPress con SlideDeck

Dopo il lancio di WPBeginner Coupons ieri, ci siamo concentrati completamente sulla creazione del miglior design per il sito principale di WPBeginner che integri tutto pur mantenendo un bell'aspetto. Volevamo aggiungere uno slider al nostro sito, ma ogni script aveva le sue limitazioni. Poi, grazie all'eccezionale Matt Mickiewicz di 99designs, SitePoint e Flippa (vedi la sua intervista su WPBeginner) per averci indirizzato verso il team di Digital Telepathy, creatori di SlideDeck (di gran lunga il miglior script per slider sul web). Lo abbiamo provato e siamo rimasti impressionati. È ottimo per i principianti perché fornisce un plugin WordPress completo che consente di utilizzare la semplice interfaccia drag-and-drop per creare slider. Tuttavia, è ottimo anche per gli sviluppatori perché dispone di una versione jQuery che offre maggiore libertà agli sviluppatori per personalizzarlo in base alle proprie esigenze. In questo articolo, ti mostreremo come creare uno slider in WordPress senza modificare una singola riga di codice con il plugin WordPress SlideDeck.

Se vuoi vedere cosa puoi creare con questo plugin, ecco una DEMO LIVE.

Passaggio 1. Download e installazione del plugin

Vai sul sito web di SlideDeck e scarica il plugin. Hanno una versione GRATUITA e una versione PRO che offre supporto e molte più funzionalità. Ogni volta che lavoriamo con un nuovo prodotto, acquistiamo sempre la versione con supporto. Ci siamo bloccati un paio di volte nel nostro sviluppo e il loro supporto è stato incredibile e ci ha aiutato. Raccomandiamo vivamente di acquistare la versione PRO perché include fantastiche funzionalità come: Slide Verticali, Supporto Touch Screen, Supporto, SlideDecks Intelligenti con Feed RSS, Supporto Immagini di Sfondo e molto altro.

Una volta scaricato il plugin, procedi all'installazione/attivazione del plugin. (Segui la nostra Guida Passo Passo all'Installazione di un Plugin WordPress)

Creiamo uno Slider

Una volta attivato il plugin, vedrai una nuova scheda chiamata SlideDeck. Vai e fai clic su Aggiungi Nuovo SlideDeck. Ti verrà chiesto di accedere a una schermata simile al Pannello di Scrittura Post.

Quindi, quello che abbiamo fatto è stato aggiungere il contenuto nella nostra slide e darle un titolo. Avremmo potuto avere un'immagine di sfondo personalizzata (Funzionalità PRO), ma per semplicità, non l'abbiamo fatto. Vogliamo mostrare cosa questo plugin può fare subito. Quella era la nostra prima slide standard. La slide successiva che abbiamo aggiunto nella nostra demo era una slide verticale (Funzionalità PRO). Le slide verticali sono essenzialmente più slide all'interno di una slide. Se guardi nell'immagine sopra, c'è un pulsante chiamato Converti in Slide Verticale. Bene, quello è il pulsante che abbiamo cliccato per la nostra prossima slide, ed ecco cosa è stato aggiunto:

Ora ripeti il processo per quante slide desideri. Una volta terminate la creazione delle slide, diamo un'occhiata alle Opzioni SlideDeck per pubblicare le slide sul tuo sito. Vedrai questo sul lato destro della tua schermata di modifica delle slide.

Puoi selezionarlo per la riproduzione automatica, consentire la navigazione da tastiera, consentire la navigazione con la rotellina del mouse, impostare la velocità dell'animazione, scegliere una delle loro fantastiche skin e selezionare da quale diapositiva iniziare. Puoi anche riordinare le diapositive tramite drag-and-drop. Vedrai uno snippet di codice del tema che contiene il codice da includere nel tuo tema. Puoi aggiungerlo ovunque tu voglia nel tuo tema. Oh aspetta, non avevamo detto che non avresti dovuto modificare una singola riga di codice per integrare SlideDeck in WordPress. Sì, manterremo le nostre parole in questo tutorial. Ti mostreremo come integrarlo in WordPress senza modificare una singola riga di codice.

Integrazione di SlideDeck in Post/Pagine di WordPress

Crea un nuovo post o una nuova pagina. Vedrai una nuova casella SlideDeck aggiunta nella barra laterale destra.

Fai clic sul pulsante Inserisci SlideDeck. Scegli lo Slider che desideri aggiungere e Pubblica il post. Una volta pubblicato il post, il tuo slider apparirà così con la Skin Classica:

Puoi usarlo su un post in evidenza, un modello di pagina a larghezza intera o qualsiasi altra cosa ti piaccia. Ma aspetta, non finisce qui. Andiamo un po' oltre.

Aggiungi uno Slider con Post in Evidenza

Gli slider per post in primo piano sono i preferiti dai blogger. Vediamo questa funzionalità su numerosi blog, ma la maggior parte di questi slider sono codificati in modo fisso nei temi con un controllo limitato per gli utenti. Bene, diamo un'occhiata a quanto sia facile farlo con SlideDeck. Puoi aggiungere uno slider dinamico chiamato "Smart SlideDeck" che ti consente di mostrare i tuoi post più recenti, i post più popolari, i post in primo piano (quelli che scegli tu), puoi ordinarli per categoria, puoi persino importare feed RSS da un altro sito da aggiungere al tuo slider. Puoi scegliere tra le loro varie skin, scegliere diversi tipi di navigazione e avere praticamente uno slider pronto in meno di 5 minuti. Ti mostriamo come. Nel nostro tutorial, visualizzeremo le voci in primo piano dai nostri post.

Vai ai tuoi post attuali, seleziona 5 post e aggiungili a Smart SlideDecks selezionando la casella.

Ora, andiamo al tuo pannello SlideDeck e fai clic su Aggiungi Smart SlideDeck. Scegli la tua skin:

Seleziona quanti slide vuoi visualizzare, opzioni di riproduzione, tipo di contenuto (vedi come lo abbiamo impostato come voci in primo piano dal post). Puoi selezionare le impostazioni del contenuto come opzioni immagine, lunghezza del titolo, lunghezza dell'estratto, ecc. Scegli i tuoi stili di navigazione e fai clic su Pubblica.

Devi modificare il codice di questo. Prendi il codice dalla barra laterale, codice snippet del tema, e incollalo nel tuo tema. Molto probabilmente in cima al tuo index.php. Un esempio di codice sarebbe questo:

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

Questo visualizzerà il tuo slider solo sulla tua homepage.

Se vuoi vedere delle vere demo fantastiche di SlideDeck, visita il sito web di SlideDeck e controlla.

Fateci sapere cosa ne pensate del plugin mentre lo implementate.