Share
Integrare la funzionalità di slideshow in WordPress è una funzionalità altamente richiesta per quasi tutti i temi, ma quanto è difficile includere e quanto è flessibile? In questo tutorial stiamo andando, in diversi modi, a includere una delle presentazioni jQuery più popolari e usate, Nivo Slider.
In realtà, esiste già un plug-in WordPress codificato per Nivo Slider, proprio sulla pagina ufficiale di Slider di Nivo. Ma lo faremo comunque in questo tutorial, e sicuramente lo faremo in modo diverso. In questo tutorial creeremo un plug-in di Nivo che avrà funzionalità di widget, funzionalità di codice breve e sarete anche in grado di integrarlo come una semplice chiamata di funzione e di codificarlo nel vostro tema dove l'utente desidera.
Seguendo questo tutorial, è implicito che si sta eseguendo un server Apache e MySQL localmente o remotamente per poter installare WordPress. Inoltre, hai installato una versione 3.1+ di WordPress che hai accesso al suo file system e che hai conoscenza di base di PHP, CSS, JavaScript e HTML..
Una delle parti più facili di questo tutorial. Stiamo per creare una cartella denominata nivoplugin dentro il wp-content / plugins directory all'interno dell'installazione di WordPress. Dentro quella directory creeremo un nivoplugin.php file con il seguente codice:
Queste sono le informazioni di base del plugin utilizzate da WordPress per identificare il nome e i dettagli del plugin. Cose come Nome del plugin, Descrizione, Autore e Collegare sono richiesti parametri che vengono aggiunti come testo commentato nella parte superiore di ogni plugin in modo che WordPress possa identificare il plugin, gestirlo, eseguirlo e mostrare le informazioni richieste su di esso nella pagina dei plugin.
"Per ulteriori informazioni sul testo dell'intestazione del plugin e altre opzioni che possono essere aggiunte ad esso, leggi la scrittura di un plugin nel codice WordPress."
La presentazione è fatta da immagini, quindi per fare una semplice implementazione di jQuery Nivo Slider abbiamo bisogno di un modo per aggiungere e gestire le immagini nel pannello di amministrazione. Il nostro approccio farà buon uso della funzionalità di WordPress del tipo di post personalizzato. I tipi di post personalizzati verranno utilizzati per creare una nuova pagina personalizzata in cui ogni post contiene tutti i dettagli dell'immagine richiesti: il nome e, naturalmente, la parte più importante, l'immagine stessa. Utilizzeremo il titolo e l'editor per il nome e le informazioni sulla descrizione e la funzionalità dell'immagine in primo piano per caricare l'immagine, gestirla e identificarla.
Accentsconagua
function np_init () $ args = array ('public' => true, 'label' => 'Nivo Images', 'supports' => array ('title', 'thumbnail')); register_post_type ('np_images', $ args); add_action ('init', 'np_init'); Nell'esempio sopra stiamo aggiungendo un gancio al np_init funzione utilizzando il tag hook di avvio che verrà eseguito prima dell'esecuzione delle intestazioni. Abbiamo bisogno di fare questo in modo che possiamo includere all'interno del register_post_type funzione con i suoi parametri. Questa funzione è la funzione utilizzata per aggiungere e gestire un nuovo tipo di post personalizzato. Fondamentalmente includiamo un nuovo tipo di messaggio personalizzato denominato np_images con alcuni argomenti.
Gli argomenti sono una matrice di valori che rappresentano le impostazioni di quel nuovo tipo di messaggio personalizzato. Cose come se fosse destinato ad essere usato pubblicamente, abbiamo reso pubblico il vero, gli abbiamo dato un'etichetta con il nome Immagini Nivo e impostiamo il fatto che ogni post ha un titolo e un'immagine in primo piano con le variabili titolo e miniature come una matrice all'attributo principale supporti.
Questo crea il tipo di post personalizzato e assomiglia a questo:
A questo punto abbiamo un tipo di messaggio personalizzato registrato e funzionante con il nome di np_images. Possiamo aggiungere nuovi post, eliminarli e modificarli come con post normali, ma personalizzati per il nostro scopo di gestire le immagini per la presentazione. Fondamentalmente questo è il posto dove aggiungiamo le foto per lo slideshow Nivo come post.
Questo potrebbe sembrare qualcosa di leggermente complicato o dispendioso in termini di tempo un po 'più del solito. Non è. Stiamo per scaricare la versione jQuery gratuita di Nivo Slider e includere gli script e gli stili necessari in modo da poterli utilizzare successivamente con codice e immagini personalizzati.
Per scaricare le fonti andremo alla pagina Prezzi su nivo.dev7studios.com e fare clic sul plugin jQuery (versione gratuita) Scaricare pulsante a sinistra per scaricare i sorgenti.
Ai fini di questo tutorial, terremo le cose molto semplici. Scompattiamo il file e includiamo l'intera directory all'interno della nostra directory dei plugin. Dentro il nivo slider cartella abbiamo un'altra cartella denominata demo. Lo elimineremo perché non ne abbiamo alcuna utilità e non vogliamo un plug-in disordinato con elementi inutili.
La parte successiva di questo passaggio include i file Nivo Slider necessari. Nel nostro nivoplugin.php file aggiungeremo quanto segue:
add_action ('wp_print_scripts', 'np_register_scripts'); add_action ('wp_print_styles', 'np_register_styles'); Questo si collegherà ad alcune funzioni (il secondo parametro è il nome della funzione). Abbiamo bisogno di questi ganci per includere correttamente gli script e gli stili nel front-end. Diamo un'occhiata alle funzioni di callback dei nostri hook precedenti.
function np_register_scripts () if (! is_admin ()) // registra wp_register_script ('np_nivo-script', plugins_url ('nivo-slider / jquery.nivo.slider.js', __FILE__), array ('jquery')) ; wp_register_script ('np_script', plugins_url ('script.js', __FILE__)); // enqueue wp_enqueue_script ('np_nivo-script'); wp_enqueue_script ( 'np_script'); function np_register_styles () // registra wp_register_style ('np_styles', plugins_url ('nivo-slider / nivo-slider.css', __FILE__)); wp_register_style ('np_styles_theme', plugins_url ('nivo-slider / temi / default / default.css', __FILE__)); // enqueue wp_enqueue_style ('np_styles'); wp_enqueue_style ( 'np_styles_theme'); La funzione di callback dello script registra e include 3 file javascript importanti: jQuery (come una dipendenza di Nivo Slider), file di base nivo-slider (jquery.nivo.slider.js) e il nostro file di script personalizzato (script.js). Nivo Slider richiede jQuery per funzionare e abbiamo bisogno di uno script personalizzato per attivarlo.
jQuery (document) .ready (function ($) $ ('# slider'). nivoSlider ();); Lo script è piuttosto semplice, richiede jQuery per allegare il nivoSlider funzione al tag con l'id di cursore. Quel tag prenderà il nivo slider proprietà e funzionalità.
Infine, nel nostro passaggio precedente, la funzione di callback dello stile si registra e include 2 file più importanti: il nivo-slider.css file che ha tutti gli stili necessari per far apparire il cursore e funzionare di conseguenza, e a default.css file all'interno del themes / default cartella che usiamo per mostrare la presentazione con il predefinito nivo slider tema.
Come menzionato all'inizio, questo tutorial coprirà l'implementazione di un widget, uno shortcode e una funzione per l'hard-coding del cursore, se necessario, utilizzando il plugin che stiamo costruendo. Per lo shortcode e la funzione abbiamo bisogno delle stesse dimensioni dell'immagine e del widget di una dimensione più piccola per l'altezza e la larghezza delle immagini.
Innanzitutto, dobbiamo prendere in considerazione il fatto che stiamo usando le immagini in primo piano nei post personalizzati per le nostre immagini di presentazione. Quindi, come ridimensioniamo e ritagliamo quelle immagini per adattarle ai nostri bisogni richiesti? Stiamo per aggiungere nuove dimensioni di immagine che WordPress ridimensiona e ritaglia su ogni nuovo caricamento dell'immagine. Per aggiungere le nuove dimensioni dell'immagine useremo il add_image_size funzione aggiungendo il seguente codice all'interno del np_init funzione:
add_image_size ('np_widget', 180, 100, true); add_image_size ('np_function', 600, 280, true); Nel codice sorgente sopra abbiamo implementato 2 dimensioni dell'immagine che chiameremo in seguito usando i nomi np_widget per widget e np_function per lo shortcode e la funzione PHP per identificarli.
Per abilitare le miniature dei post nel plugin è necessario aggiungere la seguente riga di codice nel nostro plug-in. Lo aggiungeremo sopra il add_action Linee.
add_theme_support ('post-thumbnails'); "Dimensioni dell'immagine aggiunte con
add_image_sizefunzionerà solo per le nuove immagini che vengono caricate dopo l'attivazione della funzione. "
Una delle caratteristiche principali del plugin è una funzione PHP che puoi usare ovunque nel tuo codice tema per inserire la grande slideshow Nivo 600x280.
Poiché stiamo utilizzando post personalizzati per gestire le nostre immagini per la presentazione, dobbiamo interrogare quei post e ottenere i titoli e le immagini dal tipo di post personalizzato. Per questo useremo un nuovo WP_Query loop con i parametri del $ args variabile che seleziona il tipo di post personalizzato e crea una presentazione di massimo 5 immagini dalla query. Quindi creiamo una variabile $ result che ha tutto il codice HTML necessario per la presentazione Nivo. Utilizziamo i wrapper di codice HTML dimostrativi dalla nostra cartella di download degli script Nivo.
function np_function ($ type = 'np_function') $ args = array ('post_type' => 'np_images', 'posts_per_page' => 5); $ result = ''; $ result. = ''; // il ciclo $ loop = new WP_Query ($ args); while ($ loop-> have_posts ()) $ loop-> the_post (); $ the_url = wp_get_attachment_image_src (get_post_thumbnail_id ($ post-> ID), $ type); $ result. = '
'; $ result. = ''; $ result. = ''; $ result. = 'Questo è un esempio di a HTML didascalia con un link. '; $ result. = ''; $ result. = ''; ritorno $ risultato; All'interno del ciclo stiamo usando il wp_get_attachment_image_src funzione per recuperare l'immagine in primo piano dal nostro post personalizzato. Noi usiamo il np_function valore per la dimensione dell'immagine che abbiamo aggiunto in precedenza np_init. Perché siamo all'interno del ciclo, possiamo usare $ Post-> ID per identificare il post. La funzione ha un parametro, $ tipo, che viene utilizzato per impostare la dimensione delle immagini da wp_get_attachment_image_src con una delle dimensioni dell'immagine precedentemente impostate. La variabile ha il valore predefinito di np_function. Se non viene fornito alcun parametro quando si chiama la funzione, la variabile di default si avvia.
I titoli dei post vengono aggiunti come valori al parametro HTML del titolo del tag immagine e sono visibili nella parte inferiore della presentazione di immagini come testo mobile sulle immagini all'interno di uno sfondo scuro trasparente.
Il cursore viene ridimensionato automaticamente come le dimensioni dell'immagine al suo interno, quindi qualunque dimensione di immagine usiamo, avremo una presentazione di quella dimensione.
La presentazione nel np_function la taglia è simile a questa:
Questa anteprima della presentazione è l'implementazione dello shortcode che verrà descritta successivamente.
Un'altra caratteristica principale è l'implementazione del shortcode. Questo è in realtà estremamente facile da implementare e può essere fatto con una riga di codice. Basta aggiungere questa riga nel np_init funzione sopra tutto ciò che è già lì:
add_shortcode ('np-shortcode', 'np_function'); Il gancio shortcode utilizzerà effettivamente la nostra funzione PHP per restituire il contenuto della presentazione. Questa è l'implementazione molto semplice e veloce dello shortcode. Per usarlo, basta aggiungere [Np-shortcode] nel contenuto di qualsiasi post o pagina. Quel testo verrà sostituito con lo slideshow vero e proprio.
In questo passaggio costruiremo un semplice widget che avrà l'unico scopo di mostrare una piccola presentazione nella barra laterale dove è posizionata.
Abbiamo già impostato la dimensione al punto 4 e abbiamo tutte le altre funzionalità che includono e genera la presentazione Nivo che possiamo usare per integrare nel widget. Quindi tutto ciò che rimane ora è costruire il widget e integrare il codice precedente.
function np_widgets_init () register_widget ('np_Widget'); add_action ('widgets_init', 'np_widgets_init'); In questa prima parte implementeremo un nuovo hook che dovresti aggiungere tra gli altri. Questo hook utilizza il widgets_init tag e usa una funzione che chiameremo np_widgets_init. Questa funzione viene eseguita quando vengono creati i widget. Di conseguenza, registreremo il widget sotto il nome di np_Widget come nell'esempio sopra.
Per creare un nuovo widget, stiamo implementando una nuova classe chiamata np_Widget che estende il WP_Widget classe. Come prima funzione il __costruire è la funzione principale e più importante della classe e della nostra funzionalità di widget. La funzione ha parametri che usiamo per dare al widget un ID univoco che nel nostro caso è chiamato np_widget, un nome, Nivo Slideshow, e anche una descrizione come mostra il seguente codice:
class np_Widget estende WP_Widget public function __construct () parent :: __ construct ('np_Widget', 'Nivo Slideshow', array ('description' => __ ('A Nivo Slideshow Widget', 'text_domain')))); Questo è ovviamente solo l'inizio del nostro widget, ci sono alcune altre funzioni che dobbiamo implementare e configurare perché abbiamo bisogno che funzionino.
Il widget appare come qualsiasi altro widget nel back-end. Dobbiamo dare al widget un titolo che abbia la possibilità di essere inserito dall'utente e successivamente salvato dal plugin. Per fare questo abbiamo bisogno di scrivere il modulo funzione estesa dal WP_Widget classe. In questa funzione useremo il $ esempio parametro che la funzione fornisce per ottenere il titolo che è una variabile implementata in seguito, salvata e aggiornata. Quindi creiamo l'elemento di input del modulo usando il seguente codice:
modulo di funzione pubblica ($ istanza) if (isset ($ istanza ['titolo'])) $ title = $ istanza ['titolo']; else $ title = __ ('Widget Slideshow', 'text_domain'); ?>
Questo codice viene eseguito solo nel back-end ed è richiesto dalle seguenti funzioni per inviare il nome del titolo per il salvataggio e l'uso futuro nel front-end. Il $ esempio variabile ha il valore del titolo e viene utilizzata direttamente come nell'esempio precedente senza altre query o chiamate di funzione.
Salvataggio dei dati
Dopo che il modulo è stato inviato dalla funzione precedente, deve essere elaborato e salvato. Questo è fatto nel aggiornare funzione che dobbiamo anche aggiungere alla classe con il seguente codice:
aggiornamento della funzione pubblica ($ new_instance, $ old_instance) $ instance = array (); $ instance ['title'] = strip_tags ($ new_instance ['title']); restituire $ istanza;
Il valore del campo è passato attraverso il $ new_instance variabile che viene rimossa dai tag, inserita nel file $ esempio variabile in modo che possa essere restituita dalla funzione e salvata da WordPress come parte della sua funzionalità widget estesa.
Widget Front-End
Ultimo ma non meno importante, un'altra parte molto importante e anche rappresentativa del nostro widget è la funzionalità di front-end. Ovviamente, ogni pezzo è importante perché il risultato finale funzioni, ma questa parte è ciò che vedi nel tuo tema.
Il widget di la funzione sta gestendo il front-end del widget e ha due parametri: $ args e $ esempio. Il $ args parametro è usato per ottenere variabili come $ before_widget, $ after_widget e $ before_title, $ after_title che useremo nel nostro codice implementato. La funzione widget ha questo aspetto:
widget di funzioni pubbliche ($ args, $ istanza) extract ($ args); // il titolo $ title = apply_filters ('widget_title', $ instance ['title']); echo $ before_widget; if (! empty ($ title)) echo $ before_title. $ titolo. $ After_title; echo np_function ('np_widget'); echo $ after_widget; Per implementare la presentazione stiamo usando la funzione np_function ma in questo caso gli stiamo dando il parametro np_widget in modo da ottenere le dimensioni dell'immagine che vogliamo per il widget.
Questo copre l'implementazione del widget di Nivo Slider nel nostro plugin. A questo punto puoi accedere al pannello di amministrazione e aggiungere alcuni post nel menu Nivo images e allegare loro le immagini in modo che vengano visualizzate nella presentazione.
"Per ulteriori informazioni sull'API di WordPress Widget, consulta l'API di WordPress Codex Widgets."
Conclusione
È molto facile e veloce implementare una presentazione in WordPress se sai cosa stai facendo e soprattutto se la funzionalità della presentazione è già stata creata e la stai semplicemente integrando. Bisogna comunque stare attenti a non utilizzare alcune funzionalità già presenti e, naturalmente, è semplice implementarlo in maniera molto semplice come abbiamo appena fatto, poiché un approccio più flessibile con molte opzioni e funzionalità potrebbe complicare un po 'le cose, a seconda di quali sono le caratteristiche.
