Share
I cursori sembrano essere di gran moda in questi giorni, e per una buona ragione! Puoi aggiungere foto, contenuti, video e altro a un'area animata e accattivante del tuo sito web. Mentre c'è un gran numero di plug-in di slider (il mio attuale preferito è quello per Nivo Slider), non ce n'è uno per FlexSlider, uno slider che ha scorciatoie da tastiera e funziona con i touchscreen a scorrimento. In questo tutorial, creeremo quel plugin!
La prima cosa che dobbiamo fare è impostare il plugin. Crea la cartella / envato-flex-slider /, e in essa, un file chiamato "envato-flex-slider.php". Qui aggiungeremo tutte le informazioni e il codice necessari per il nostro plugin, a partire dal blocco di definizione del plugin:
Mi piace anche impostare alcune costanti per le informazioni che userò molto nel plugin. Sotto il blocco di definizione, ma prima del tag di php di chiusura, aggiungo queste informazioni:
Accentsconagua
define ('EFS_PATH', WP_PLUGIN_URL. '/'. plugin_basename (dirname (__ FILE__)). '/'); define ('EFS_NAME', "Envato FlexSlider"); define ("EFS_VERSION", "1.0"); Creo tre costanti: il percorso del plug-in, il nome del plug-in e la versione del plug-in, che viene utilizzata per gli aggiornamenti e, se necessario, per informare la directory Plug-in di WordPress delle modifiche. Avviso avvio tutte le mie costanti con "EFS". Farò la stessa cosa per i nomi di funzioni in modo da non creare conflitti con altri plugin o con il core di WordPress.
Ora che abbiamo completato l'installazione, aggiungiamo i file e il codice di FlexSlider.
È ora di aggiungere la parte importante: javascript e CSS per FlexSlider. Lo faremo usando WordPress ' wp_enqueue_script e wp_enqueue_style per evitare conflitti. Puoi scaricare FlexSlider qui. Avremo bisogno di 2 file: jquery.flexslider-min.js e flexslider.css e la cartella / theme /.
wp_enqueue_script ('flexslider', EFS_PATH.'jquery.flexslider-min.js ', array (' jquery ')); wp_enqueue_style ('flexslider_css', EFS_PATH.'flexslider.css '); In entrambe le righe, assegniamo un nome a ogni script, quindi colleghiamo ai file .js e .css. Si noti che stiamo usando la nostra costante ESF_PATH. Abbiamo bisogno di utilizzare l'intero percorso o i file non saranno collegati correttamente. Noterai anche che abbiamo un terzo parametro in wp_enqueue_script. Questa è una serie di altri script da cui dipende il nostro script. In questo caso, è solo uno, ed è JQuery. Ecco un elenco completo di script inclusi con WordPress. È possibile utilizzare qualsiasi handle nell'array delle dipendenze.
La prossima cosa che vogliamo fare è includere l'effettivo JavaScript che farà funzionare il cursore. Lo facciamo con la nostra funzione e un'azione WordPress.
function efs_script () print ''; add_action ('wp_head', 'efs_script'); La linea importante qui è add_action ('wp_head', 'efs_script');, che eseguirà la nostra funzione, efs_script () quando viene chiamato wp_head. La nostra funzione stampa semplicemente il codice JavaScript richiesto per fare in modo che FlexSlider faccia il suo dovere!
Noterai che sto usando 'JQuery' invece del tradizionale '$' solitamente usato negli script di JQuery. Questo è così il nostro script non è in conflitto con altre librerie JavaScript, come Scriptaculous.
Infine, copia semplicemente la cartella / theme / nella cartella / envato-flex-slider /.
In seguito, imposteremo il nostro shortcode e il nostro tag template. Lo shortcode permetterà agli utenti di inserire il cursore in qualsiasi pagina o post. Qui abbiamo un tutorial introduttivo davvero interessante sugli shortcode. Il tag template permetterà agli sviluppatori di temi di inserire il cursore direttamente nei loro temi. Come sviluppatore di temi, penso che sia incredibilmente importante includerli e renderli facili da trovare nella documentazione. Non sai mai chi userà il tuo plugin.
function efs_get_slider () // Lo riempiremo in seguito. / ** aggiungi lo shortcode per lo slider- per l'uso nell'editor ** / function efs_insert_slider ($ atts, $ content = null) $ slider = efs_get_slider (); ritorno $ cursore; add_shortcode ('ef_slider', 'efs_insert_slider'); / ** aggiungi tag modello- da utilizzare nei temi ** / function efs_slider () print efs_get_slider (); In questo momento questo codice sembra piuttosto semplice. Per lo shortcode, chiamiamo la nostra funzione generale, efs_get_slider () e restituire i risultati. Per il tag del modello, stampiamo i risultati. Usiamo anche WordPress ' add_shortcode () funzione per registrare il nostro shortcode. Ho intenzionalmente omesso l'implementazione di efs_get_slider () perché non abbiamo ancora impostato come faremo le immagini. Per semplificare agli utenti l'aggiunta di qualsiasi numero di immagini al loro dispositivo di scorrimento, creeremo un tipo di post personalizzato.
La prima cosa che faremo è creare un nuovo file chiamato "slider-img-type.php", dove andrà tutto il nostro codice per il tipo di post personalizzato. Innanzitutto, eseguiremo alcune impostazioni come abbiamo fatto per il plug-in.
Come puoi vedere, tutto ciò che ho fatto finora è creare alcune costanti (che sarebbero utili per i tipi di post personalizzati più avanzati) e aggiunto il supporto per le miniature per il nostro nuovo tipo. L'unica altra cosa che faremo in questo file è registrare il nuovo tipo di messaggio personalizzato. Per ulteriori informazioni sui tipi di post personalizzati, puoi vedere il mio tutorial su come creare un portfolio killer. Subito prima della chiusura del tag php, aggiungeremo questo codice:
function efs_register () $ args = array ('label' => __ (CPT_NAME), 'singular_label' => __ (CPT_SINGLE), 'public' => true, 'show_ui' => true, 'capability_type' => ' post ',' hierarchical '=> false,' rewrite '=> true,' supports '=> array (' title ',' editor ',' thumbnail ')); register_post_type (CPT_TYPE, $ args); add_action ('init', 'efs_register'); Abbiamo creato una funzione per registrare un tipo di post personalizzato che utilizza il titolo, l'editor e le miniature. Quindi aggiungiamo un'azione WordPress per chiamare quella funzione non appena WordPress viene inizializzato. Questo è tutto! L'ultima cosa da fare è includere il nostro nuovo file aggiungendo require_once ( 'slider-img-type.php'); a envato-flex-slider.php. L'ho aggiunto proprio sopra dove accodiamo i nostri script.
Ora che sappiamo come implementiamo le immagini di scorrimento, torniamo indietro e riempi la nostra funzione generale per il cursore.
Tornate al punto in cui abbiamo definito efs_get_slider () e sostituire il commento // Lo riempiremo in seguito con il seguente:
$ slider = ''; ritorno $ cursore;'; $ efs_query = "post_type = slider-image"; query_posts ($ efs_query); if (have_posts ()): while (have_posts ()): the_post (); $ img = get_the_post_thumbnail ($ post-> ID, 'large'); $ Slider. ='
- '$ Img.'
'; ENDWHILE; finisci se; wp_reset_query (); $ slider. = '
Le prime due linee sono necessarie a causa di come funziona FlexSlider. Cercherà una lista non ordinata chiamata 'slides' all'interno di un div chiamato 'flexslider' e applicherà le javascript / animazioni a quello. Il nostro CSS è anche impostato per definire .flexslider e ul.slides. Dopodiché, creiamo un ciclo WordPress che acquisisce tutti i post di tipo slider-image (il nostro tipo di post personalizzato) e lo otteniamo per stampare la versione grande dell'immagine in primo piano. Quindi restituiamo tutto l'HTML generato come variabile, che può essere stampato, come con il nostro tag modello, o restituito, come con il nostro shortcode.
Ora è il momento di testare! Dopo aver aggiunto un paio di immagini al tuo nuovo tipo di post personalizzato, crea una nuova pagina (ho appena chiamato il mio Slider) e aggiungi il nostro shortcode appena creato, [Ef_slider]. Salva la pagina e visualizzala. Dovresti vedere qualcosa di simile a questo:
Questo è tutto per ora. Ci sono sicuramente alcune cose che possiamo fare per migliorare il plugin, come aggiungere opzioni di supporto per le personalizzazioni avanzate che FlexSlider ha da offrire o aggiungere il supporto di didascalie. Detto questo, questo plugin ti offre tutto il necessario per creare una versione di FlexSlider per WordPress abbastanza semplice, facile da gestire e facile da inserire! Se non si è sicuri del posizionamento o dei file da includere, è possibile scaricare i file di origine utilizzando il collegamento nella parte superiore del tutorial. Godere!
