Meta box riutilizzabili, parte 3 campi extra

Nella parte 1 e nella parte 2 della nostra serie di tutorial sui modelli di meta box personalizzati, abbiamo imparato come creare un array di campi per scorrere e creare una meta box personalizzata con i campi standard. Ora inseriamo un po 'di JavaScript per alcuni campi fantasiosi ma estremamente utili.

Date picker

Ciascuno dei campi che tratteremo in questo tutorial richiederà jQuery e l'interfaccia utente jQuery. Fortunatamente, WordPress rende super facile utilizzarli wp_enqueue_script, e al punto 3.3, tutte le interazioni e i widget dell'interfaccia utente jQuery sono forniti in bundle con WordPress.

Dato che stiamo lavorando su una pagina che accoda già jQuery, possiamo saltarla, ma avremo bisogno di ottenere il jQuery UI Datepicker. Avremo anche bisogno di creare il nostro foglio di stile in quanto il CSS necessario non viene ancora fornito in bundle in WordPress, anche se lo stanno elaborando.

 if (is_admin ()) wp_enqueue_script ('jquery-ui-datepicker'); wp_enqueue_style ('jquery-ui-custom', get_template_directory_uri (). '/ css / jquery-ui-custom.css'); 

Dobbiamo solo caricarli nell'amministratore e non nella parte anteriore del sito, quindi racchiudere le funzioni in modo condizionale. La prima funzione chiama datepicker e caricherà anche l'interfaccia utente jQuery Core. La seconda funzione chiamerà il nostro foglio di stile jquery-ui-custom.css dalla cartella css del tema. Il foglio di stile di esempio incluso nel download all'inizio di questo tutorial non richiede immagini. Puoi anche creare il tuo tema dell'interfaccia utente jQuery.

Ora diamo un'occhiata all'elemento dell'array che dobbiamo aggiungere al nostro $ custom_meta_fields array che abbiamo iniziato nella prima parte.

 array ('label' => 'Date', 'desc' => 'Una descrizione per il campo.', 'id' => $ prefix.'date ',' type '=>' date ')

Questo array è quasi identico al nostro elemento di testo. Ha un'etichetta principale, una descrizione, un ID univoco e il tipo di data è definito. Stiamo andando semplicemente con un'implementazione di base del selezionatore di date nel nostro esempio qui, ma se hai bisogno di rendere più veloce l'uso del selettore di date, potresti anche aggiungere altre informazioni all'array come il formato preferito, la localizzazione e intervallo di date per citarne alcuni. Quindi è possibile utilizzare tali informazioni nel seguente call call da aggiungere alla parte superiore della pagina:

 add_action ( 'admin_head', 'add_custom_scripts'); function add_custom_scripts () global $ custom_meta_fields, $ post; $ output = ''