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

Dopo il lancio di WPBeginner Coupons avvenuto ieri, siamo totalmente concentrati sulla costruzione 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 i suoi limiti. Quindi, grazie al fantastico Matt Mickiewicz di 99designs, SitePoint e Flippa(vedi la sua intervista su WPBeginner) che ci ha refererato i ragazzi di Digital Telepathy, creatori di SlideDeck (di gran lunga il miglior script per slider sul web). Ci abbiamo giocato e siamo rimasti impressionati. È ottimo per i principianti perché fornisce un plugin completo per WordPress che consente di utilizzare la facile interfaccia di trascinamento per creare cursori. Tuttavia, è ottimo anche per gli sviluppatori perché ha una versione jQuery che offre ulteriore libertà agli sviluppatori di personalizzarlo in base alle loro esigenze. In questo articolo vi mostreremo come potete creare uno slider in WordPress senza modificare una sola riga di codice con il plugin SlideDeck WordPress.

Se volete vedere cosa potete creare con questo plugin, ecco una demo live.

Passo 1. Scaricare e installare il plugin

Andate sul sito web di SlideDeck e scaricate il plugin. Esiste una versione gratuita e una versione PRO che offre supporto e molte altre caratteristiche. Ogni volta che elaboriamo in corso un nuovo prodotto, prendiamo sempre la versione di supporto. Ci siamo bloccati alcune volte durante lo sviluppo e il loro supporto è stato fantastico e ci ha aiutato. Consigliamo vivamente di acquistare la versione PRO perché include caratteristiche interessanti come: Slide verticali, supporto per touch screen, supporto, Feed RSS Smart SlideDecks, supporto per immagini di sfondo e molto altro ancora.

Una volta scaricato il plugin, procedere all’installazione/attivazione dello stesso. (Seguite la nostra Guida passo passo all’installazione di un plugin per WordPress).

Creiamo un cursore

Una volta attivato il plugin, verrà aggiunta una nuova scheda chiamata SlideDeck. Facciamo clic su Aggiungi nuovo SlideDeck. Verrà visualizzato uno schermo che assomiglia al pannello di scrittura degli articoli.

Abbiamo quindi aggiunto il contenuto alla nostra slide e le abbiamo dato un titolo. Avremmo potuto inserire un’immagine di sfondo personalizzata (caratteristica PRO), ma per semplicità non l’abbiamo fatto. Vogliamo mostrare ciò che il plugin è in grado di fare già pronto. Questa era la nostra prima slide standard. La slide successiva che abbiamo aggiunto alla nostra demo è stata una slide verticale (caratteristica PRO). Le slide verticali sono fondamentalmente slide multiple all’interno di una slide. Se guardate l’immagine qui sopra, c’è un pulsante chiamato Converti in slide verticale. Questo è il pulsante che abbiamo fatto clic per la nostra prossima slide e questo è ciò che è stato aggiunto:

Ora ripetete la procedura per tutte le slide che volete. Una volta terminata la creazione delle diapositive, diamo un’occhiata alle opzioni di SlideDeck per la pubblicazione delle diapositive sul sito. Le vedrete nella parte destra dello schermo di Modifica slide.

È possibile selezionare la riproduzione automatica, consentire la navigazione con la tastiera, consentire la navigazione con la rotellina del mouse, impostare la velocità dell’animazione, scegliere uno dei loro straordinari colori e selezionare la slide da cui si desidera iniziare. È anche possibile riordinare le slide tramite trascina e rilascia. È presente uno snippet di codice del tema che contiene il codice da includere nel tema. È possibile aggiungerlo in qualsiasi punto del tema. Oh, aspettate, non abbiamo detto che non dovrete modificare una sola riga di codice per integrare SlideDeck in WordPress? Sì, in questo tutorial ci atteniamo alle nostre parole. Vi mostriamo come potete integrarlo in WordPress senza modificare una sola riga di codice.

Integrare SlideDeck in articoli/pagine di WordPress

Create un nuovo articolo o una nuova pagina. Vedrete un nuovo box SlideDeck aggiunto nella barra laterale destra.

Fare clic sul pulsante Inserisci SlideDeck. Scegliere il cursore che si desidera aggiungere e pubblicare l’articolo. Una volta pubblicato l’articolo, il cursore avrà l’aspetto seguente con l’Editor classico:

Potete usarlo su un articolo in evidenza, su un template di pagina a larghezza piena o su qualsiasi altra cosa desideriate. Ma aspettate, non finisce qui. Andiamo un po’ oltre.

Aggiungere uno slider con articoli in primo piano

I cursori degli articoli in primo piano sono i preferiti dai blogger. Vediamo questa caratteristica su molti blog, ma la maggior parte di questi cursori sono codificati nei temi con un controllo limitato per gli utenti. Vediamo come è facile farlo con SlideDeck. È possibile aggiungere un cursore dinamico chiamato “Smart SlideDeck” che consente di mostrare gli articoli più recenti, i più popolari, le caratteristiche (quelle scelte dall’utente), di ordinarli per categoria e di importare i feed RSS da un altro sito per aggiungerli al cursore. Potete selezionare tra i vari colori, scegliere i diversi tipi di navigazione e avere uno slider pronto in meno di 5 minuti. Vi mostriamo come fare. Nel nostro tutorial, visualizzeremo le caratteristiche dei nostri articoli.

Andate ai vostri articoli attuali, scegliete 5 articoli e aggiungeteli a Smart SlideDecks selezionando la casella.

Ora passiamo al pannello SlideDeck e facciamo clic su Add-on Smart SlideDeck. Scegliete il vostro variante colore:

Selezionate il numero di slide che volete visualizzare, le opzioni di riproduzione, il tipo di contenuto (vedete come abbiamo messo in evidenza le caratteristiche dell’articolo). È possibile selezionare le impostazioni del contenuto, come le opzioni per le immagini, la lunghezza del titolo, la lunghezza del riassunto, ecc. Scegliete gli stili di navigazione e fate clic su Pubblica.

In questo caso è necessario modificare il codice. Prendere il codice dalla barra laterale, Codice snippet del tema e incollarlo nel tema. Probabilmente in alto nel file index.php. Un esempio di codice potrebbe essere questo:

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

Questo visualizza il cursore solo sulla homepage.

Se volete vedere alcune dimostrazioni davvero interessanti di SlideDeck, visitate il sito web di SlideDeck e date un’occhiata.

Fateci sapere cosa ne pensate di questo plugin man mano che lo implementate.