Aggiunta di uno slider jQuery reattivo al tema WordPress

Oggi vi mostrerò come integrare un cursore jQuery reattivo nel tuo tema o sito WordPress. Non è un tutorial rivoluzionario, ma è raramente fatto bene, quindi mi piacerebbe provare a sistemarlo. In questo tutorial copriremo ogni passaggio dalla creazione di un tipo di post personalizzato per contenere le nostre diapositive, per utilizzare effettivamente il dispositivo di scorrimento all'interno del nostro sito.

Useremo l'adorabile FlexSlider 2 di WooThemes in quanto è uno slider reattivo molto ben codificato e concesso in licenza con licenza GPLv2. Se sei interessato, puoi dare un'occhiata al codice di FlexSlider nel suo repository GitHub.

Prima di fare qualsiasi cosa, faremo un passo indietro e penseremo a:

Quali file il cursore richiede
Quali file noi richiedere

La prima cosa che faremo è scaricare FlexSlider.

Dopo averlo fatto, procedi e decomprimilo.

Ci sono alcuni file che ci interessano, principalmente:

flexslider.css
images / bg_direction_nav.png
jquery.flexslider-min.js

Sono tutto ciò di cui abbiamo veramente bisogno dal download di FlexSlider.

Passaggio 1 Impostazione dei file

Spostiamo ora questi 3 file da sopra nella directory del nostro tema. A seconda del tema o del set-up puoi posizionare i file dove preferisci, basta prendere nota di dove questi file sono originati / referenziati e aggiustare il codice per adattarlo alla nuova posizione.

Per il bene di questo tutorial, utilizzeremo il tema predefinito Twenty Eleven. Nel inc / directory, creare una nuova cartella chiamata cursore. Lì creiamo alcune cartelle:

css
immagini
js

Mettiamo flexslider.css nel css cartella, bg_direction_nav.png nel immagini cartella e jquery.flexslider-min.js nel, hai indovinato, js cartella.

Nota: Normalmente li metterei dentro css/immagini/js cartelle in tutta la directory del tema con altri file, ma per rendere questo tutorial 'universale', stiamo organizzando i nostri file in questo modo. Se hai esperienza nello sviluppo di temi WordPress, potresti voler organizzare manualmente i tuoi file.

Ora creeremo altri 2 file nella cartella slider:

slider.php - crea il modello del dispositivo di scorrimento e carica i file del dispositivo di scorrimento
slider_post_type.php - crea il tipo di post scorrevole

Ora dovresti avere un cursore cartella che assomiglia a qualcosa del genere:

Prima di andare avanti, apri il tuo functions.php file e aggiungi le seguenti due righe, che caricheranno i due file .php appena creati:

// Crea Slider Post Type richiede (get_template_directory (). '/Inc/slider/slider_post_type.php'); // Crea Slider require (get_template_directory (). '/Inc/slider/slider.php');

Ora ... iniziamo la codifica!

Passaggio 2 Tipo di dispositivo di scorrimento

La prima cosa che faremo è creare un tipo di post personalizzato che conservi tutte le nostre diapositive. I tipi di messaggi personalizzati sono stati introdotti in WordPress 3.0 e sono probabilmente la cosa più bella che sia mai capitata al mondo (troppo lontano? Li adoro).

Aprire slider_post_type.php e aggiungi il seguente codice per creare il tipo di post personalizzato della diapositiva:

 _x ('Slides', 'nome generale del tipo di post'), 'singular_name' => _x ('Slide', 'post type singular name'), 'add_new' => __ ('Aggiungi nuova diapositiva'), 'add_new_item' => __ ('Aggiungi nuova diapositiva'), 'edit_item' => __ ('Modifica diapositiva'), 'new_item' => __ ('Nuova diapositiva'), 'view_item' => __ ('Visualizza diapositiva'), 'search_items' => __ ('Cerca diapositive'), 'not_found' => __ ('Diapositiva'), 'not_found_in_trash' => __ ('Diapositiva'), 'parent_item_colon' => __ ('Diapositiva'), ' menu_name '=> __ (' Diapositive ')); $ taxonomies = array (); $ supports = array ('title', 'thumbnail'); $ post_type_args = array ('labels' => $ labels, 'singular_label' => __ ('Slide'), 'public' => true, 'show_ui' => true, 'public_queryable' => true, 'query_var' = > true, 'capability_type' => 'post', 'has_archive' => false, 'hierarchical' => false, 'rewrite' => array ('slug' => 'slides', 'with_front' => false), 'supports' => $ supports, 'menu_position' => 27, // Dove si trova nel menu. Passa a 6 ed è sotto i post. 11 ed è sotto il media, ecc. 'menu_icon' => get_template_directory_uri (). ' /inc/slider/images/icon.png ',' tassonomie '=> $ tassonomie); register_post_type ( 'diapositive', $ post_type_args);  add_action ('init', 'register_slides_posttype');

Tipo di messaggio personalizzato aggiunto! Di seguito aggiungeremo il metabox in cui è presente un campo per l'URL a cui deve essere collegata la diapositiva. Ora stiamo andando a copiare il seguente grande muro di codice:

// Metabox per l'URL del dispositivo di scorrimento $ slidelink_2_metabox = array ('id' => 'slidelink', 'title' => 'Slide Link', 'page' => array ('slides'), 'context' => 'normal ',' priority '=>' default ',' fields '=> array (array (' name '=>' Slide URL ',' desc '=> ",' id '=>' wptuts_slideurl ',' class '= > 'wptuts_slideurl', 'type' => 'text', 'rich_editor' => 0, 'max' => 0),)); add_action ('admin_menu', 'wptuts_add_slidelink_2_meta_box'); function wptuts_adl_slidelink_2_meta_box () global $ slidelink_2_metabox; foreach ($ slidelink_2_metabox ['page'] come $ page) add_meta_box ($ slidelink_2_metabox ['id'], $ slidelink_2_metabox ['title'], 'wptuts_show_slidelink_2_box', $ page, 'normal', 'default', $ slidelink_2_metabox); // funzione per mostrare la funzione meta box wptuts_show_slidelink_2_box () global $ post; globale $ slidelink_2_metabox; globale $ wptuts_prefix; globale $ wp_version; // Usa nonce per la verifica echo ''; eco ''; foreach ($ slidelink_2_metabox ['fields'] come $ campo) // richiama i metadati del post corrente $ meta = get_post_meta ($ post-> ID, $ campo ['id'], vero); eco '','',''; switch ($ field ['type']) case 'text': echo '
', ", stripssfoglia ($ campo [' desc ']); pausa; echo'';  eco '', stripslashes ($ campo [' nome ']),' ','
';  // Salva i dati dalla meta box add_action ('save_post', 'wptuts_slidelink_2_save'); function wptuts_slidelink_2_save ($ post_id) global $ post; globale $ slidelink_2_metabox; // verifica nonce if (! wp_verify_nonce ($ _ POST ['wptuts_slidelink_2_meta_box_nonce'], basename (__ FILE__))) return $ post_id;  // controlla il salvataggio automatico se (definito ('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $ post_id;  // controlla i permessi se ('page' == $ _POST ['post_type']) if (! current_user_can ('edit_page', $ post_id)) return $ post_id;  elseif (! current_user_can ('edit_post', $ post_id)) return $ post_id;  foreach ($ slidelink_2_metabox ['fields'] come $ campo) $ old = get_post_meta ($ post_id, $ campo ['id'], vero); $ nuovo = $ _POST [$ campo ['id']]; if ($ new && $ new! = $ old) if ($ field ['type'] == 'date') $ new = wptuts_format_date ($ new); update_post_meta ($ post_id, $ campo ['id'], $ nuovo);  else if (is_string ($ new)) $ new = $ new;  update_post_meta ($ post_id, $ campo ['id'], $ nuovo);  elseif ("== $ nuovo && $ vecchio) delete_post_meta ($ post_id, $ campo ['id'], $ vecchio);

', stripslashes ($ campo [' nome ']),'	','

Uff. È finita. Vai alla tua Dashboard e vedrai un nuovo tipo di messaggio personalizzato "Diapositive".

Passaggio 3 Carica i file del dispositivo di scorrimento

Aprire slider.php. Ora andremo ad accodare jQuery, lo script jQuery FlexSlider e il foglio di stile FlexSlider. In alternativa è possibile copiare il codice da flexslider.css alla tua style.css file se desiderato.

Mentre lo facciamo, c'è qualcosa che devi fare. A causa della nostra struttura di file, il flexslider.css ha bisogno di alcune modifiche in modo che sappia dove trovare l'immagine della freccia. Aprilo e fai una ricerca e sostituisci per:

immagini con … /immagini

Passaggio 4 Inizializza il dispositivo di scorrimento

Ora dobbiamo aggiungere un po 'di jQuery al nostro per inizializzare il cursore. Aggiungiamo le seguenti righe a slider.php sotto il codice che abbiamo appena aggiunto!

// Inizializza la funzione Slider wptuts_slider_initialize () ?>

Uno dei motivi per cui ho scelto di usare FlexSlider è dovuto alla sua flessibilità. Ci sono alcuni parametri con cui puoi armeggiare, ma ho appena incluso quattro importanti sopra. Prova a cambiare diapositiva a dissolvenza, o orizzontale a verticale. Puoi dare un'occhiata a tutti i paremeters qui.

Nota: Tieni presente che un altro modo di fare quanto sopra è usare il wp_localize_script funzione (vedi nel Codex) ma questo è un po 'avanzato per questo tutorial. Tuttavia, Pippin Williamson (un altro autore di Wptuts +) ha appena scritto un eccellente tutorial sull'argomento, se sei interessato.

Passaggio 5 Crea dispositivo di scorrimento

Ora stiamo per creare il modello per il cursore. In primo luogo, faremo a WP_Query per estrarre "post" dal tipo di messaggio personalizzato Diapositive. Successivamente, controlleremo le diapositive e in tal caso avvii il cursore. Inizieremo il ciclo. Ogni "diapositiva" controllerà quindi se è stato impostato un URL per la diapositiva e, in tal caso, crea un collegamento per esso. L'immagine della diapositiva verrà quindi visualizzata e il ciclo verrà chiuso.

// Crea funzione Slider wptuts_slider_template () // Argomenti di query $ args = array ('post_type' => 'slide', 'posts_per_page' => 5); // The Query $ the_query = new WP_Query ($ args); // Controlla se la Query restituisce eventuali post se ($ the_query-> have_posts ()) // Avvia lo Slider?>   have_posts ()): $ the_query-> the_post (); ?>   ">    
  
 
  Passaggio 6 Uso del dispositivo di scorrimento
 Bene, finalmente abbiamo fatto il cursore! Ora è il momento di usarlo. È possibile aprire qualsiasi file modello, come index.php, ed eco il wptuts_slider_template funzione per visualizzare il cursore.
 Quindi, se volessimo mostrare il cursore in Twenty Eleven subito dopo l'intestazione sulla home page, ci apriremmo index.php e appena sotto get_header (); ?>, aggiungere il seguente:
 
 Ma cosa succede se lo stai facendo per un cliente o qualcuno che non vuole semplicemente toccare i file template e PHP? Probabilmente dovremmo creare un codice corto per loro, quindi possono semplicemente usare il cursore con a [Cursore] codice corto.
 Aggiungi questo in fondo a slider.php:
 // Funzione Shortcode di slider wptuts_slider_shortcode () ob_start (); wptuts_slider_template (); $ slider = ob_get_clean (); ritorno $ cursore;  add_shortcode ('slider', 'wptuts_slider_shortcode');
 Il dispositivo di scorrimento ora può essere utilizzato all'interno di post, pagine o in qualsiasi altro luogo che accetta uno shortcode!
  Scaricare
 Se lo desideri, puoi scaricare il cursore cartella, che contiene tutto ciò che abbiamo passato in questo tutorial. Hai solo bisogno di lasciarlo nel tuo tema inc cartella (o da qualche altra parte va bene, ma assicurati di regolare il codice sotto) e aggiungi quanto segue al tuo functions.php:
 // Crea Slider Post Type richiede (get_template_directory (). '/Inc/slider/slider_post_type.php'); // Crea Slider require (get_template_directory (). '/Inc/slider/slider.php');
 Nota: Per il bene di questo tutorial, lo spazio dei nomi / dominio del testo wptuts è stato usato. Dovresti fare una ricerca e sostituirla su tutto il codice se stai solo copiando / incollando e sostituendo:
   wptuts_ con il tuo nome_ 
  '' wptuts con 'il tuo nome' 
 
 Se ti è piaciuto questo tutorial, fammelo sapere e continuerò con un tutorial sulla personalizzazione del nostro slider! Daremo quindi un'occhiata all'utilizzo di miniature per la navigazione, all'integrazione di diapositive video e all'aggiunta di didascalie.



		
			
	   
	




Codice