Share
In questa serie, stiamo lavorando su un plugin per il semplice scopo di introdurre un selettore di date jQuery nell'editor dei post utilizzando una casella meta-box e quindi visualizzarlo sul front-end del sito.
Piuttosto che fare una serie ampia e dettagliata su un argomento profondo in WordPress - lo scopo di questa serie è quello di concentrarsi su un argomento molto di nicchia.
Nel primo articolo della serie, abbiamo realizzato quanto segue:
In questo articolo, riprenderemo il lavoro implementando il selettore di date jQuery, memorizzando la data nel post e quindi preparando il plug-in per il rilascio.
Abbiamo già completato tre dei sei passaggi necessari per implementare il nostro plug-in. Ora si tratta di incorporare tutto il codice JavaScript necessario per visualizzare il selettore di colori e recuperare i dati.
Ma grazie a WordPress, questo non è poi così difficile tanto che ciò di cui abbiamo bisogno è già associato all'applicazione principale.
Per implementare il selettore di date jQuery, abbiamo bisogno di diverse dipendenze:
Innanzitutto, aggiungi la seguente riga al tuo costruttore:
Accentsconagua
add_action ('admin_enqueue_scripts', array ($ this, 'register_admin_scripts')); Successivamente, dobbiamo definire la funzione che accoderà la libreria di selezione date di jQuery e il nostro file JavaScript personalizzato.
Quindi vai avanti e definisci register_admin_scripts e la riga per includere il selettore di date jQuery:
/ ** * Registra e accoda JavaScript specifico dell'amministratore. * * @version 1.0 * @since 1.0 * / public function register_admin_scripts () wp_enqueue_script ('jquery-ui-datepicker'); // fine register_admin_scripts Quindi, introdurre a js directory nel tuo plugin e quindi aggiungi un admin.js file in quella directory.
Il file dovrebbe contenere il seguente codice JavaScript:
(function ($) $ (function () // Verifica che la casella di input esista se (0 < $('#datepicker').length ) $('#datepicker').datepicker(); // end if ); (jQuery)); In poche parole, questo file eseguirà il codice JavaScript per ogni pagina caricata dal dashboard. Là è un modo alternativo per gestire questo, ma è oltre lo scopo di questo articolo.
Invece, abbiamo il nostro controllo JavaScript per l'esistenza dell'elemento. Se esiste, allora applica il date picker plugin per l'elemento.
Infine, dobbiamo registrare il foglio di stile del selettore di date jQuery con il nostro plug-in. Per fare ciò, aggiungi la seguente linea al tuo register_admin_styles funzione:
wp_enqueue_style ('jquery-ui-datepicker', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css'); A questo punto, aggiorna il plug-in e dovresti riuscire a fare clic su ingresso elemento e vedere qualcosa di simile a questo:
Molto carino, non è vero? Si noti che quando si seleziona una data verrà automaticamente applicata la data all'elemento di input. Se sei interessato a personalizzare ulteriormente il formato della data (o altri aspetti del selettore di date), assicurati di controllare i suoi documenti API.
A questo punto, siamo pronti per visualizzare la data sul post effettivo. Ai fini del nostro plug-in, prepareremo questo al contenuto.
Per fare ciò, definisci il seguente hook nel costruttore del tuo plugin:
add_action ('the_content', array ($ this, 'prepend_the_date')); Successivamente, dobbiamo effettivamente definire la funzione. È davvero semplice, però. Guardalo, poi lo spiegherò dopo il frammento di codice:
/ ** * Salva i dati di completamento del progetto per l'ID post in entrata. * * @param int L'ID corrente del post. * @version 1.0 * @since 1.0 * / public function prepend_the_date ($ content) // Se il post meta non è vuoto per 'the_date', quindi renderlo nel contenuto if (0! = ($ the_date = get_post_meta ( get_the_ID (), 'the_date', true))) $ content = ''. $ the_date. '
'. $ Content; // end if return $ content; // end prepend_the_date
In questa funzione, stiamo controllando i metadati del post per il post corrente. Poiché questa funzione si attiva nel contesto di The Loop, siamo in grado di utilizzarla get_the_ID ().
Se la stringa della data - cioè, la meta meta inserita da l'appuntamento - non è vuoto, quindi lo avvolgeremo in un tag di paragrafo e lo anteporremo al $ content; altrimenti, restituiamo solo il $ content così com'è.
A questo punto, ci sono solo due cose da fare:
La creazione del file di localizzazione è semplice. Dal momento che abbiamo definito il plugin.po file nel primo articolo, tutto ciò che dobbiamo fare è aprire il file con Poedit, fare clic su 'Aggiorna', quindi salvare il file. Questo genererà a plugin.mo file nel Lang elenco.
Quindi, dobbiamo creare un LEGGIMI file che segue le convenzioni Readme di WordPress. Anche se puoi essere creativo come preferisci, ho condiviso il mio qui sotto.
=== WordPress jQuery Date Picker === Collaboratori: tommcfarlin Tag: data, post Richiede almeno: 3.5 Testato fino a: 3.5.1 Tag stabile: 1.0 Un plug-in di esempio utilizzato per dimostrare come includere il selettore di date jQuery nel post editore. == Descrizione == WordPress jQuery Date Picker è un semplice plug-in utilizzato per dimostrare come sfruttare i meta box, i metadati e i plugin jQuery personalizzati per consentire agli utenti di selezionare le date da visualizzare nei loro post. == Installazione == = Utilizzo di WordPress Dashboard = 1. Passare al 'Aggiungi nuovo' Plugin Dashboard 2. Selezionare 'wordpress-jquery-date-picker.zip' dal computer 3. Carica 4. Attiva il plugin su WordPress Plugin Dashboard = Usando FTP = 1. Estrai 'wordpress-jquery-date-picker.zip' sul tuo computer 2. Carica la directory 'wordpress-jquery-date-picker' nella directory 'wp-content / plugins' 3. Attiva il plug-in sul dashboard dei plugin di WordPress == Domande frequenti == = In questo momento, la data appare solo nella parte superiore del post. Posso cambiare la sua posizione? = No. == Changelog == = 1.0 = * Versione iniziale
Niente di innovativo - dice esattamente quello che fa.
Se non lo hai già fatto, assicurati di scaricare l'ultima versione del plugin da GitHub, leggi i commenti e segui per assicurarti di aver compreso tutto ciò che accade nel plugin.
E questo è tutto - abbastanza facile, giusto?
Come al solito, si prega di lasciare commenti e domande nel modulo di commento qui sotto.
