Share
Quando il team di WordPress rilascia una nuova versione, introduce alcune nuove funzionalità non solo per gli utenti ma anche per gli sviluppatori. WordPress offre molti strumenti che facilitano lo sviluppo di nuovi fantastici temi o plugin.
Una delle ultime API disponibili per gli sviluppatori di WordPress è il nuovo Color Picker; questa funzione consente di sostituire il campo di testo standard con un selettore di colori piacevole e di facile utilizzo.
In questo tutorial, ti mostrerò come aggiungere il selettore di colori all'interno del tuo progetto WordPress. Iniziamo.
Ci sono alcuni motivi interessanti per cui gli sviluppatori di WordPress dovrebbero implementare la scelta dei colori usando la nuova API di selezione:
Dopo aver trattato alcuni degli aspetti principali di ColorPress Picker di WordPress, aggiungiamolo all'interno del nostro plugin o tema.
Prima di continuare, devo specificare che l'API Color Picker è stata introdotta con WordPress versione 3.5, quindi per poter lavorare con questo tutorial, assicurati di avere la versione 3.5 o successiva installata.
Per aggiungere il selettore di colori, è sufficiente includere un file jQuery e un foglio di stile. Le linee di codice qui sotto mostrano come farlo.
Accentsconagua
add_action ('admin_enqueue_scripts', 'wptuts_add_color_picker'); function wptuts_add_color_picker ($ hook) if (is_admin ()) // Aggiungi il file css color picker wp_enqueue_style ('wp-color-picker'); // Includere il nostro file jQuery personalizzato con la dipendenza da WordPress Color Picker wp_enqueue_script ('custom-script-handle', plugins_url ('custom-script.js', __FILE__), array ('wp-color-picker'), false, true) ; Si noti che quando abbiamo incluso il custom-script.js con wp-color-picker dipendenza. Ora puoi applicare il selettore di colori ai tuoi campi di testo all'interno del tuo file jQuery.
(function ($) // Aggiungi Color Picker a tutti gli input che hanno la classe 'colour-field' $ (function () $ ('. colour-field'). wpColorPicker (););) (jQuery) ; A questo punto, è il momento di mostrare come integrare Color Picker all'interno di un vero plugin.
Ecco cosa stiamo andando a coprire:
Una volta impostato il tuo plug-in all'interno del tuo WordPress wp-content / plugins cartella siamo pronti per iniziare. L'immagine sotto mostra come ho strutturato il plugin per questo tutorial.
Struttura del plugin Dentro colore-picker-plugin.php file, scrivi i commenti con informazioni sui plugin e crea una nuova classe PHP chiamata CPA_Theme_Options. Il codice seguente mostra tutti i metodi di classe che implementeremo passo dopo passo.
/ * Nome plugin: URI Plugin API Color Picker: http://code.tutsplus.com Descrizione: Demo sulla nuova API Color Picker Versione: 1.0 Autore: code.tutsplus.com URI autore: http: //code.tutsplus. com * / / ** * Main Class - CPA sta per Color Picker API * / class CPA_Theme_Options / * --------------------------- ----------------- * * Attributi * ----------------------------- --------------- * / / ** Si riferisce a una singola istanza di questa classe. * / private static $ instance = null; / * Opzioni salvate * / opzioni $ pubbliche; / * -------------------------------------------- * * Costruttore * -------------------------------------------- * / / ** * Crea o restituisce un'istanza di questa classe. * * @return CPA_Theme_Options Una singola istanza di questa classe. * / public static function get_instance () if (null == self :: $ instance) self :: $ instance = new self; return self :: $ istanza; // end get_instance; / ** * Inizializza il plug-in impostando la localizzazione, i filtri e le funzioni di amministrazione. * / private function __construct () / * --------------------------------------- ----- * * Funzioni * ----------------------------------------- --- * / / ** * Funzione che aggiungerà la pagina delle opzioni sotto Menu Impostazioni. * / public function add_page () / ** * Funzione che visualizzerà la pagina delle opzioni. * / public function display_page () / ** * Funzione che registrerà le opzioni della pagina di amministrazione. * / public function register_page_options () / ** * Funzione che aggiungerà il file javascript per Color Piker. * / public function enqueue_admin_js () / ** * Funzione che convaliderà tutti i campi. * / public function validate_options ($ fields) / ** * Funzione che controlla se il valore è un colore HEX valido. * / public function check_color ($ value) / ** * Funzione di callback per la sezione impostazioni * / public function display_section () / * Lascia vuoto * / / ** * Funzioni che visualizzano i campi. * / public function title_settings_field () public function bg_settings_field () // end class CPA_Theme_Options :: get_instance ();
Innanzitutto, implementiamo il costruttore della classe. Il codice seguente mostra cosa farà il plugin quando verrà creata una nuova istanza.
Lo farà:
opzioni attributo con le impostazioni salvate.funzione privata __construct () // Aggiungi la pagina al menu admin add_action ('admin_menu', array (& $ this, 'add_page')); // Registra le opzioni della pagina add_action ('admin_init', array (& $ this, 'register_page_options')); // Regole CSS per Color Picker wp_enqueue_style ('wp-color-picker'); // Registra javascript add_action ('admin_enqueue_scripts', array ($ this, 'enqueue_admin_js')); // Ottieni l'opzione registrata $ this-> options = get_option ('cpa_settings_options'); Il prossimo passo spiega come aggiungere la pagina delle opzioni e come visualizzarla.
/ ** * Funzione che aggiungerà la pagina delle opzioni sotto Menu Impostazioni. * / public function add_page () // $ page_title, $ menu_title, $ capability, $ menu_slug, $ callback_function add_options_page ('Opzioni tema', 'Opzioni tema', 'manage_options', __FILE__, array ($ this, 'display_page' )); / ** * Funzione che visualizzerà la pagina delle opzioni. * / public function display_page () ?> Opzioni del tema
Nota che abbiamo già scritto - all'interno del display_page () metodo: il codice che aggiungerà il modulo, i campi e il pulsante di invio per la registrazione delle opzioni della pagina.
Passaggio 5
In questa fase implementeremo i metodi che registreranno e visualizzeranno due campi di impostazioni: Titolo del Blog campo e Colore di sfondo campo. Entrambi i campi appartengono al Opzioni del tema sezione.
/ ** * Funzione che registrerà le opzioni della pagina di amministrazione. * / public function register_page_options () // Aggiungi sezione per i campi opzione add_settings_section ('cpa_section', 'Opzioni tema', array ($ this, 'display_section'), __FILE__); // id, title, display cb, page // Aggiungi campo Titolo add_settings_field ('cpa_title_field', 'Blog Title', array ($ this, 'title_settings_field'), __FILE__, 'cpa_section'); // id, title, display cb, page, section // Aggiungi campo colore di sfondo add_settings_field ('cpa_bg_field', 'Colore di sfondo', array ($ this, 'bg_settings_field'), __FILE__, 'cpa_section'); // id, titolo, display cb, page, section // Impostazioni registro register_setting (__FILE__, 'cpa_settings_options', array ($ this, 'validate_options')); // gruppo opzioni, nome opzione, sanitize cb / ** * Funzioni che visualizzano i campi. * / public function title_settings_field () $ val = (isset ($ this-> options ['title']))? $ this-> options ['title']: "; echo ''; public function bg_settings_field () $ val = (isset ($ this-> options ['title']))? $ this-> options ['background']: "; echo ''; Passaggio 6
Questa procedura è incentrata sulla convalida. Il codice seguente mostra come convalidare i due campi prima di salvarli.
/ ** * Funzione che convaliderà tutti i campi. * / public function validate_options ($ fields) $ valid_fields = array (); // Validate Title Field $ title = trim ($ fields ['title']); $ valid_fields ['title'] = strip_tags (stripslashes ($ title)); // Convalida colore di sfondo $ background = trim ($ fields ['background']); $ background = strip_tags (stripslashes ($ background)); // Controlla se è un colore esadecimale valido se (FALSE === $ this-> check_color ($ background)) // Imposta il messaggio di errore add_settings_error ('cpa_settings_options', 'cpa_bg_error', 'Inserisci un colore valido per lo sfondo' , 'errore'); // $ setting, $ code, $ message, $ type // Ottieni il precedente valore valido $ valid_fields ['background'] = $ this-> options ['background']; else $ valid_fields ['background'] = $ background; return apply_filters ('validate_options', $ valid_fields, $ fields); / ** * Funzione che controllerà se il valore è un colore HEX valido. * / public function check_color ($ value) if (preg_match ('/ ^ # [a-f0-9] 6 $ / i', $ value)) // se l'utente inserisce un colore HEX con # return true ; return false; Se l'utente tenta di inserire manualmente il codice colore, il Selettore colore notifica all'utente che ha inserito un valore non valido nel modulo di invio; tuttavia, il colore, sebbene possa essere sbagliato, verrà comunque salvato. Il check_color () la funzione si occupa di convalidare l'input del colore.
Passaggio 7
Questo è l'ultimo passaggio in cui includeremo il nostro file JavaScript che converte un semplice campo di testo in un utile selettore di colori.
/ ** * Funzione che aggiungerà il file javascript per Color Piker. * / public function enqueue_admin_js () // Assicurati di aggiungere la dipendenza da wp-color-picker al file js wp_enqueue_script ('cpa_custom_js', plugins_url ('jquery.custom.js', __FILE__), array ('jquery', ' wp-color-picker '), ", true); Creiamo iljquery.custom.js file.
(function ($) $ (function () // Aggiungi Color Picker a tutti gli input che hanno una classe 'color-field' $ ('.cpa-color-picker') .wpColorPicker (););) ( jQuery); Se provi ad attivare il plugin, dovresti ottenere una pagina dashboard con tutti i campi come nell'immagine mostrata di seguito:
Pagina finale dell'amministratore
Questo è tutto!
In questo tutorial, hai imparato come includere il nuovo Color Picker alimentato da WordPress. Nella demo del plug-in ti ho mostrato come integrare il selettore di colori in un vero plug-in, ma puoi usare l'API dove ti serve come all'interno di una meta-box, un modulo per i widget e così via.
Color Picker funziona con WordPress 3.5+, ma se un utente ha una versione precedente il tuo codice funzionerà. Assicurati di convalidare ogni input di colore usando il check_color () metodo mostrato in Passaggio 6.
Ora i tuoi plugin o temi saranno più potenti e facili da usare.
Pagina finale dell'amministratore