Copriamo un sacco di argomenti su questo blog - qualsiasi cosa che va da qualcosa di semplice come come includere e richiedere i file di template nei progetti WordPress a qualcosa come un'intera serie sull'API Settings, ma penso che ci sia sempre spazio per coprire un semplice How -Per coprire una singola attività specifica nel contesto di WordPress.
Quindi, in questa serie in due parti, daremo un'occhiata a come introdurre un selettore di date jQuery nel nostro editor di post in modo da poter associare una data a un determinato post.
Informazioni sul plugin
Faremo tutto questo nel contesto di un plugin in modo che il codice sorgente sia facilmente scaricabile tramite GitHub e fornirà un esempio operativo del tutorial.
La prima cosa da notare è che incorporare il selettore di date jQuery è non destinato a sostituire la data di pubblicazione del post. Invece, ha lo scopo di fornire un modo semplice per selezionare una data, salvarla nei metadati del post e quindi visualizzarla per un altro scopo come, ad esempio, quando si verificherà un evento.
Pianificazione del plugin
Per chiunque abbia letto uno dei miei post precedenti, sai che sono un fan della pianificazione del progetto fin dall'inizio, quindi implementando ogni passo alla volta per assicurarmi di essere chiari su tutto ciò che sta accadendo.
Quindi facciamolo ora:
Forniremo la classe skeleton per il plugin
Scriveremo il codice responsabile della generazione della casella di posta elettronica che consente all'utente di selezionare la data
Implementeremo il selettore di date jQuery in modo che gli utenti possano effettivamente selezionare una data
Salveremo i dati quando il post è pubblicato e / o aggiornato
Mostreremo la data nella parte anteriore del post
Semplice, giusto? Detto ciò, iniziamo.
Costruire il plugin
Alla fine di questo articolo, l'intero plugin sarà disponibile in questo repository GitHub, ma consiglio vivamente di seguire e scrivere il codice da solo per assicurarti di seguire tutto ciò che stiamo facendo.
Il codice volontà essere commentato quindi dovrebbe essere facile da seguire. In caso contrario, sentitevi liberi di lasciare commenti dopo il post.
1. Stub Out the Plugin Class
Supponendo che tu abbia già creato il WordPress-jQuery-Data-Picker directory nel tuo wp-content / plugins directory, vai avanti e crea due file:
plugin.php
README.txt
Rivisiteremo il LEGGIMI file in un po ', ma andiamo avanti e spegniamo la classe che funge da nostro plugin.
Ecco il codice con ulteriori spiegazioni dopo lo snippet:
Ovviamente, non c'è ancora molto da fare. Abbiamo semplicemente definito la classe, impostato un costruttore vuoto e istanziato il plug-in all'esterno della classe.
Prima di procedere oltre, andiamo avanti e prepariamo il plug-in per la localizzazione. Per fare questo, dobbiamo fare diverse cose:
Presentare a Lang elenco
Inserisci lang / plugin.po
Imposta il dominio di testo per il plugin all'interno del costruttore
Ricorda che la localizzazione è utilizzata per garantire che i traduttori possano rendere il nostro plugin compatibile con altre lingue e che Poedit sia lo strumento di scelta.
Il plugin.po il file dovrebbe contenere qualcosa di simile al seguente (il tuo sarà ovviamente diverso in base alla data, all'ora e alla configurazione di Poedit):
msgid "" msgstr "" "Versione ID progetto: WordPress jQuery Date Picker 1.0 \ n" "Report-Msgid-Bugs-To: \ n" "POT-Creazione data: 2013-02-07 13: 36-0500 \ n "" PO-Revision-Date: 2013-02-07 13: 36-0500 \ n "" Last-Translator: Tom McFarlin \ n "" Team di lingue: Tom McFarlin \ n "" Lingua: en_US \ n "" Versione MIME: 1.0 \ n "" Tipo di contenuto: testo / semplice; charset = UTF-8 \ n "" Content-Transfer-Encoding: 8bit \ n "" X-Poedit-KeywordsList: __; _ e \ n "" X-Poedit-Basepath:. \ n "" X-Generator: Poedit 1.5 .5 \ n "" X-Poedit-SearchPath-0: ... \ n "
Successivamente, dobbiamo impostare il dominio di testo nel costruttore. Innanzitutto, includi la seguente riga nel tuo costruttore:
// Carica il dominio del testo del plugin add_action ('init', array ($ this, 'plugin_textdomain'));
Successivamente, aggiungi la seguente funzione al tuo file:
/ ** * Carica il dominio del testo del plug-in per la traduzione * * @version 1.0 * @since 1.0 * / public function plugin_textdomain () load_plugin_textdomain ('wp-jquery-date-picker', false, dirname (plugin_basename (__FILE__)). '/ lang'); // end plugin_textdomain
La cosa più significativa da notare qui è l'uso del wp-jquery-Data-picker chiave in quanto è ciò che useremo per localizzare le stringhe per tutto il resto del plugin.
Infine, lo rivisiteremo insieme al LEGGIMI file più avanti nel tutorial.
2. Crea la Meta Box
A questo punto, siamo pronti a definire il codice che renderà la meta-box. Questo consiste di diversi passaggi:
Definire il gancio nel costruttore
Registra la meta-box con WordPress
Definire una funzione usata per rendere l'attuale meta-box
Nel costruttore, aggiungi la seguente riga di codice. Questo è ciò che useremo per registrare la nostra casella di posta:
Nella funzione di cui sopra, stiamo dicendo a WordPress di cercare la nostra meta box della data in una funzione chiamata add_date_meta_box, quindi dobbiamo definirlo adesso.
All'interno della tua classe, aggiungi il seguente codice:
/ ** * Registra la meta-box per la visualizzazione dell'opzione 'Data' nell'editor dei post. * * @version 1.0 * @since 1.0 * / public function add_date_meta_box () add_meta_box ('the_date', __ ('The Date', 'wp-jquery-date-picker'), array ($ this, 'the_date_display') , "post", "side", "low"); // end add_date_meta_box
Abbiamo coperto approfonditamente i meta box in vari tutorial e il Codice WordPress ha un articolo fantastico che spiega cosa fa ogni parametro, quindi non voglio sottolineare il punto qui.
Detto questo, c'è una cosa specifica che dobbiamo notare nella chiamata sopra. Si noti che la meta-box sta cercando di registrare il suo display usando una funzione chiamata the_date_display.
In quanto tale, dobbiamo definire questa funzione. Fortunatamente, la meta-scatola può essere molto semplice: per attivare il selezionatore di date, abbiamo solo bisogno di un singolo elemento. Dal momento che stiamo per rendere la data, optiamo per utilizzare una semplice casella di input.
Successivamente, aggiungi la seguente funzione alla tua classe:
/ ** * Esegue il rendering dell'interfaccia utente per il completamento del progetto nella relativa casella associata. * * @version 1.0 * @since 1.0 * / public function the_date_display ($ post) wp_nonce_field (plugin_basename (__FILE__), 'wp-jquery-date-picker-nonce'); eco ''; // termina the_date_display
Facile da capire, giusto?
Definiamo un valore nonce per scopi di sicurezza fornendoci le funzionalità di sicurezza di cui abbiamo bisogno per assicurarci che l'utente abbia i permessi per salvare i valori per questo campo, e quindi rendiamo un elemento di input allo schermo.
Si noti che il ingresso elemento include un ID di "datepicker" e un nome di "la data". Questo verrà importato in seguito, ma per ora salva il tuo lavoro.
Se attivi il plugin adesso, dovresti vedere qualcosa di simile al seguente:
Ovviamente, questo ha bisogno di uno stile leggero per farlo sembrare un po 'meglio. Quindi, facciamo quanto segue:
Successivamente, aggiungi questa funzione al tuo plugin:
/ ** * Registra e accoda stili specifici dell'amministratore. * * @version 1.0 * @since 1.0 * / public function register_admin_styles () wp_enqueue_style ('wp-jquery-date-picker', plugins_url ('WordPress-jQuery-Date-Picker / css / admin.css')); // termina register_admin_styles
A questo punto, la larghezza della casella di input per il selettore di date dovrebbe estendersi per la larghezza del contenitore della meta box. Lo fa sembrare un po 'più bello, secondo me.
3. Salva la data
Prima di iniziare effettivamente a implementare il selezionatore di date, procediamo e assicuriamoci che il nostro nuovo post meta box possa salvare correttamente le informazioni. Al momento, non è possibile perché non abbiamo scritto il codice per questo.
Questo particolare passaggio comporterà quanto segue:
Definizione di una funzione per il salvataggio dei dati
Assicurarsi che l'utente abbia la possibilità di salvare i dati
Effettivamente salvando i dati
Per prima cosa, dobbiamo definire il gancio per salvare i dati. A questo, aggiungi la seguente riga al tuo costruttore direttamente sotto la linea in cui abbiamo definito l'hook per creare la meta-box:
add_action ('save_post', array ($ this, 'save_project_date')); [php] Quindi, dobbiamo effettivamente definire il save_project_date funzione. Questa funzione sarà responsabile per assicurarsi che l'utente abbia il permesso di salvare i dati e quindi salverà effettivamente il contenuto del campo di input nel post meta per il post associato. Quindi, aggiungi la seguente funzione al tuo plugin: [php] / ** * 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 save_the_date ($ post_id) // Se l'utente ha il permesso di salvare i metadati ... if ($ this-> user_can_save ($ post_id, 'wp-jquery-date-picker -nonce ')) // Elimina eventuali metadati esistenti per il proprietario if (get_post_meta ($ post_id,' the_date ')) delete_post_meta ($ post_id,' the_date '); // end if update_post_meta ($ post_id, 'the_date', strip_tags ($ _POST ['the_date'])); // end if // end save_the_date
Questa funzione funziona fondamentalmente controllando se questo utente può salvare. Se è così, allora cancellerà qualsiasi post esistente meta in modo da non ingombrare il database, quindi aggiungere la data specificata per questo post.
Ma c'è un problema: stiamo facendo una chiamata a una funzione chiamata user_can_save. Questa particolare funzione è una funzione di supporto che dobbiamo definire in quanto semplifica gran parte del codice boilerplate necessario per assicurarsi che l'utente abbia il permesso di salvare il file.
Quindi, nell'area "Funzioni di aiuto" della tua classe, aggiungi la seguente funzione:
/ ** * Determina se l'utente corrente ha la possibilità di salvare i metadati associati a questo post. * * @param int $ post_id L'ID del post che si sta salvando * @param bool Se l'utente ha o meno la possibilità di salvare questo post. * @version 1.0 * @since 1.0 * / private function user_can_save ($ post_id, $ nonce) $ is_autosave = wp_is_post_autosave ($ post_id); $ is_revision = wp_is_post_revision ($ post_id); $ is_valid_nonce = (isset ($ _POST [$ nonce]) && wp_verify_nonce ($ _POST [$ nonce], plugin_basename (__FILE__)))? vero falso; // Restituisce true se l'utente è in grado di salvare; altrimenti, falso. ritorno ! ($ is_autosave || $ is_revision) && $ is_valid_nonce; // end user_can_save
Si noti che questa funzione accetta l'ID corrente e il valore nonce corrente (che abbiamo impostato in precedenza in questo post). Infine, questa funzione restituisce true se questo non è un salvataggio automatico, una revisione del post e che il nonce è valido.
Se è vero, l'utente ha il permesso di salvare.
Conclusione
A questo punto, proviamo quello che abbiamo. Attiva il plug-in e dovresti visualizzare la meta-box nel dashboard dell'editor dei post. Al momento, dovresti essere in grado di salvare qualsiasi valore che desideri in quel particolare campo.
Puoi prendere una copia del plugin nella sua versione attuale per questo post usando questo link.
Nel prossimo articolo, daremo un'occhiata all'implementazione effettiva del selezionatore di date. Ciò include l'importazione delle dipendenze JavaScript necessarie, la scrittura di un po 'del nostro JavaScript e il rendering della data sul front-end del post.
Infine, prepareremo il plugin per il rilascio generando i file di localizzazione e quindi preparando il LEGGIMI.
Share
Accentsconagua
