Piastra per la personalizzazione dei temi di WordPress

Piastra per caldaia per personalizzare temi WordPress
  1. 1. Introduzione al personalizzatore di temi WordPress
  2. 2. Interagire con il personalizzatore di temi WordPress
  3. 3. Leggendo al momento: Piastra per la personalizzazione dei temi di WordPress
  4. 4. Estensione del bollettino per la personalizzazione dei temi di WordPress
  5. 5. Targhetta di personalizzazione del tema – Opzioni condizionali, Temi secondari e plugin

Aggiornamento: questo articolo è stato modificato il 19 febbraio 2013, per riflettere le modifiche apportate alla piastra di personalizzazione del tema del personalizzatore.


Spero che tu abbia letto e apprezzato i primi due post della serie di temi di personalizzazione – Introduzione a WordPress Tema di personalizzazione e Interazione con tema di personalizzazione. Ora è il momento di passare al corso principale e iniziare a assemblare il bollettino di personalizzazione dei temi che potrai utilizzare nei tuoi temi. Questo post contiene alcuni lunghi blocchi di codice, quindi fai attenzione ai commenti incorporati.

Nota: Se preferisci usare subito la piastra della caldaia, puoi scaricarla da Github e modificare i campi nell’array $ options collegandoti al gancio del filtro “thsp_cbp_options_array”.

Cosa stiamo creando

Struttura della directory della caldaia personalizzata del tema

Struttura della directory della caldaia personalizzata del tema

  • customizer.php – Questo è il file principale del programma di personalizzazione del tema del personalizzatore, quello che aggiunge sezioni, impostazioni e controlli utilizzando i dati dell’array di opzioni
  • custom-controls.php – Classi di controlli personalizzati e un hook di azione che ti consente di aggiungere i tuoi controlli personalizzati
  • helpers.php – Funzioni di supporto, utilizzate per recuperare opzioni di temi, impostazioni predefinite delle opzioni ecc.
  • options.php – Opzioni di esempio e un hook di filtro che consente di modificare l’array di opzioni e utilizzare i propri campi
  • customizer-controls.css – CSS di base per il controllo personalizzato della radio sostituito dall’immagine

L’idea è quella di essere in grado di copiare questi file in una sottodirectory nella directory del tema, includere il file customizer.php dal tuo function.php e modificare tutto ciò che ti piace, incluso e in particolare l’array di opzioni, usando gli hook di Custom Customizer Boilerplate (spiegato nella parte 4). Aggiornare: In precedenza, avresti semplicemente modificato options.php, ma l’uso di hook rende le cose molto più pulite.

Ora facciamo un esempio reale: aggiungeremo un controllo di testo a una nuova sezione di personalizzazione dei temi. L’array viene inserito in una funzione di supporto e al suo ritorno viene applicato un filtro. In questo modo è possibile aggiungere più opzioni da un tema o plug-in figlio. Ecco qui:

/ **
* Funzione di supporto che contiene una serie di opzioni del tema.
*
* @return array $ options Matrice di opzioni del tema
* @uses thsp_get_theme_customizer_fields () definito in customizer / helpers.php
* /
funzione thsp_get_theme_customizer_fields () {

/ *
* Utilizzo della funzione di supporto per ottenere la funzionalità predefinita richiesta
* /
$ required_capability = thsp_settings_page_capability ();

$ options = array (


// ID sezione
'new_customizer_section' => array (

/ *
* Stiamo verificando se questa è una sezione esistente
* o uno nuovo che deve essere registrato
* /
'isting_section '=> false,
/ *
* Argomenti correlati alla sezione
* Codice - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_section
* /
'args' => array (
'title' => __ ('Titolo nuova sezione', 'my_theme_textdomain'),
'description' => __ ('Descrizione della nuova sezione', 'my_theme_textdomain'),
'priorita' => 10
),

/ *
* L'array 'fields' contiene tutti i campi che devono essere
* aggiunto a questa sezione
* /
'fields' => array (

/ *
* ==========
* ==========
* Campo di testo
* ==========
* ==========
* /
// ID campo
'new_text_field' => array (
/ *
* Impostazione argomenti correlati
* Codice - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_setting
* /
'setting_args' => array (
'default' => __ ('Valore predefinito del testo', 'my_theme_textdomain'),
'type' => 'opzione',
'capacity' => $ required_capability,
'transport' => 'refresh',
'sanitize_callback' => 'thsp_sanitize_cb',
),
/ *
* Controllo argomenti correlati
* Codice - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_control
* /
'control_args' => array (
'label' => __ ('Nuova etichetta controllo testo', 'my_theme_textdomain'),
'type' => 'text', // Controllo del campo di testo
'priorita' => 1
)
)

)

),

);

/ *
* L'hook del filtro "thsp_customizer_options" ti permetterà di farlo
* aggiungi / rimuovi alcune di queste opzioni da un tema figlio
* /
return apply_filters ('thsp_customizer_options', $ opzioni);

}

Aggiornare: L’array rimane lo stesso, ma ora puoi anche passare l’array di opzioni a un hook di filtro, vedi Parte 4 per maggiori dettagli.

A prima vista sembra complicato, lo so, ma lasciami spiegare.

Il $ options l’array è composto da sezioni (solo una in questo caso – new_customizer_section), ogni sezione ha i suoi argomenti, campi e un valore booleano (esistenti_sezione) per indicare se è una nuova sezione, o stiamo solo aggiungendo alcuni campi a una esistente uno. L’array degli argomenti è identico a quello a cui passeresti $ Wp_customize-> add_section metodo. La matrice dei campi è leggermente più complessa.

Aggiornare: array di scelte in argomenti di controllo è ora un array multidimensionale.

Ogni campo è costituito da un’impostazione Personalizzatore e un controllo Personalizzatore. Ecco perché abbiamo array setting_args e control_args. Sono quasi esattamente gli stessi degli array di argomenti a cui passeresti $ Wp_customize-> add_setting e $ Wp_customize-> add_control metodi. L’unica differenza è l’array “scelte” negli argomenti di controllo, $ wp_customize-> add_control richiede che sia un semplice array chiave = = coppia di valori e invece utilizziamo un array multidimensionale.

In questo modo è possibile passare più dati a ciascuna delle scelte, quindi se, ad esempio, stai caricando Google Fonts nel tuo tema, sarai in grado di avere stringhe che ti consentano di caricare il carattere corretto all’interno dell’array scelte . Puoi vedere un esempio di questo tema che utilizza Customizer Boilerplate.

Quindi, se sei già a conoscenza di questi tre metodi, è tutto molto familiare.

L’aggiunta di un controllo checkbox è quasi la stessa, devi solo cambiare “type” in “checkbox” nell’array “control_args”:

/ *
* ==============
* Campo della casella di controllo
* ==============
* /
'new_checkbox_field' => array (
'setting_args' => array (
'default' => true,
'type' => 'opzione',
'capacity' => $ required_capability,
'transport' => 'refresh',
'sanitize_callback' => 'thsp_sanitize_cb',
),
'control_args' => array (
'label' => __ ('Nuova etichetta di controllo radio', 'my_theme_textdomain'),
'type' => 'checkbox', // Checkbox field control
'priorita' => 2
)
),

I controlli radio e di selezione sono quasi gli stessi, devi solo specificare determinate opzioni:

/ *
* ===========
* ===========
* Campo radio
* ===========
* ===========
* /
'new_radio_field' => array (
'setting_args' => array (
'default' => 'opzione-2',
'type' => 'opzione',
'capacity' => $ thsp_cbp_capability,
'transport' => 'refresh',
),
'control_args' => array (
'label' => __ ('Nuova etichetta di controllo radio', 'my_theme_textdomain'),
'type' => 'radio', // Radio control
'options' => array (
'option-1' => array (
'label' => __ ('Opzione 1', 'my_theme_textdomain')
),
'option-2' => array (
'label' => __ ('Opzione 2', 'my_theme_textdomain')
),
'option-3' => array (
'label' => __ ('Opzione 3', 'my_theme_textdomain')
)
),
'priorita' => 3
)
),

/ *
* ============
* ============
* Seleziona il campo
* ============
* ============
* /
'new_select_field' => array (
'setting_args' => array (
'default' => 'opzione-3',
'type' => 'opzione',
'capacity' => $ thsp_cbp_capability,
'transport' => 'refresh',
),
'control_args' => array (
'label' => __ ('Etichetta new select field', 'my_theme_textdomain'),
'type' => 'select', // Select control
'options' => array (
'option-1' => array (
'label' => __ ('Opzione 1', 'my_theme_textdomain')
),
'option-2' => array (
'label' => __ ('Opzione 2', 'my_theme_textdomain')
),
'option-3' => array (
'label' => __ ('Opzione 3', 'my_theme_textdomain')
)
),
'priorita' => 4
)
)

E infine, due complessi tipi di controllo integrati in WordPress: caricamento file e caricamento immagine:

/ *
* ===========
* ===========
* Upload di file
* ===========
* ===========
* /
'new_file_upload_field' => array (
'setting_args' => array (
'default' => '',
'type' => 'opzione',
'capacity' => $ thsp_cbp_capability,
'transport' => 'refresh',
),
'control_args' => array (
'label' => __ ('Upload file', 'my_theme_textdomain'),
'type' => 'upload', // Controllo campo caricamento file
'priorita' => 5
)
),

/ *
* ============
* ============
* Caricamento immagine
* ============
* ============
* /
'new_image_upload_field' => array (
'setting_args' => array (
'default' => '',
'type' => 'opzione',
'capacity' => $ thsp_cbp_capability,
'transport' => 'refresh',
),
'control_args' => array (
'label' => __ ('Caricamento immagine', 'my_theme_textdomain'),
'type' => 'image', // Controllo campo caricamento immagine
'priorita' => 6
)
)

Si noti che ho usato “Type” “=>” opzione “ nell’impostazione degli argomenti per tutti questi campi. Ciò consentirà a tutti i valori di essere memorizzati come un valore nel database. L’alternativa è “Type” “>>” theme_mod “ ma per ora continuiamo con “opzione”.

Utilizzo dell’array di opzioni per aggiungere sezioni, impostazioni e controlli del personalizzatore

Se non sei sicuro di come interagire con il personalizzatore di temi di WordPress, vai e controlla, perché è quello che faremo ora. L’unica differenza è che invece di aggiungere sezioni, impostazioni e controlli uno alla volta, automatizzeremo il processo utilizzando un array serializzato che abbiamo creato. Vediamolo:

funzione thsp_cbp_customize_register ($ wp_customize) {

/ **
* Controlli personalizzati
* /
richiedono (dirname (__ FILE__). '/custom-controls.php');


/ *
* Ottieni tutti i campi utilizzando una funzione di supporto
* /
$ thsp_sections = thsp_cbp_get_fields ();


/ *
* Ottieni il nome della voce DB sotto la quale verranno memorizzate le opzioni
* /
$ thsp_cbp_option = thsp_cbp_option ();


/ **
* Passa attraverso l'array e aggiungi sezioni Customizer
* /
foreach ($ thsp_sections as $ thsp_section_key => $ thsp_section_value) {

/ **
* Aggiunge la sezione Personalizzatore, se necessario
* /
if (! $ thsp_section_value ['isting_section ']) {

$ thsp_section_args = $ thsp_section_value ['args'];

// Aggiungi sezione
$ Wp_customize-> add_section (
$ thsp_section_key,
$ thsp_section_args
);

} // finisci se

/ *
* Passa attraverso l'array 'campi' in ogni sezione
* e aggiungi impostazioni e controlli
* /
$ thsp_section_fields = $ thsp_section_value ['fields'];
foreach ($ thsp_section_fields come $ thsp_field_key => $ thsp_field_value) {

/ *
* Controlla se 'opzione' o 'theme_mod' è usato per memorizzare l'opzione
*
* Se non viene impostato nulla, il metodo $ wp_customize-> add_setting verrà impostato su 'theme_mod'
* Se si utilizza 'opzione' come tipo di impostazione, il suo valore verrà memorizzato in una voce
* {prefisso} _options table. Il nome dell'opzione è definito dalla funzione thsp_cbp_option ()
* /
if (isset ($ thsp_field_value ['setting_args'] ['type']) && 'option' == $ thsp_field_value ['setting_args'] ['type']) {
$ setting_control_id = $ thsp_cbp_option. '['. $ thsp_field_key. ']';
} altro {
$ setting_control_id = $ thsp_field_key;
}

/ *
* Aggiungi la funzione di richiamata predefinita, se nessuna è definita
* /
if (! isset ($ thsp_field_value ['setting_args'] ['sanitize_cb'])) {
$ thsp_field_value ['setting_args'] ['sanitize_cb'] = 'thsp_cbp_sanitize_cb';
}

/ **
* Aggiunge le impostazioni di personalizzazione
* /
$ Wp_customize-> add_setting (
$ setting_control_id,
$ Thsp_field_value [ 'setting_args']
);

/ **
* Aggiunge il controllo Personalizzatore
*
* Il valore 'sezione' deve essere aggiunto alla matrice 'control_args'
* così il controllo può essere aggiunto alla sezione corrente
* /
$ thsp_field_value ['control_args'] ['section'] = $ thsp_section_key;

/ *
* Il metodo $ wp_customize-> add_control richiede che 'scelte' sia una semplice chiave => coppia di valori
* /
if (isset ($ thsp_field_value ['control_args'] ['Choice'])) {
$ thsp_cbp_choices = array ();
foreach ($ thsp_field_value ['control_args'] ['Choice'] come $ thsp_cbp_choice_key => $ thsp_cbp_choice_value) {
$ thsp_cbp_choices [$ thsp_cbp_choice_key] = $ thsp_cbp_choice_value ['etichetta'];
}
$ thsp_field_value ['control_args'] ['Choice'] = $ thsp_cbp_choices;
}


// Controlla il tipo di controllo
if ('color' == $ thsp_field_value ['control_args'] ['type']) {
$ Wp_customize-> add_control (
nuovo WP_Customize_Color_Control (
$ wp_customize,
$ setting_control_id,
$ Thsp_field_value [ 'control_args']
)
);
} elseif ('image' == $ thsp_field_value ['control_args'] ['type']) {
$ Wp_customize-> add_control (
nuovo WP_Customize_Image_Control (
$ wp_customize,
$ setting_control_id,
$ Thsp_field_value [ 'control_args']
)
);
} elseif ('upload' == $ thsp_field_value ['control_args'] ['type']) {
$ Wp_customize-> add_control (
nuovo WP_Customize_Upload_Control (
$ wp_customize,
$ setting_control_id,
$ Thsp_field_value [ 'control_args']
)
);
} altro {
$ Wp_customize-> add_control (
$ setting_control_id,
$ Thsp_field_value [ 'control_args']
);
}

} // end foreach

} // end foreach

}
add_action ('ustom_register ',' thsp_cbp_customize_register ');

Esaminando tutte le sezioni, aggiungendo quelle che non esistono già, quindi esaminando tutti i campi di ciascuna sezione, aggiungendo un’impostazione e un controllo per ciascuna. Questo è tutto quello che sta succedendo qui.

Ricorda che abbiamo usato “type” => “opzione” per tutte le impostazioni? Ecco perché ora abbiamo “My_theme_options [$ thsp_field_key]” sia per le impostazioni che per le sezioni. Ciò memorizzerà tutti i valori come un array serializzato che è possibile recuperare utilizzando get_option (“my_theme_options”). Oppure puoi semplicemente usare le funzioni di supporto definite in helpers.php per recuperare sia i valori correnti sia i valori predefiniti per tutti i campi:

/ **
* Ottieni valori delle opzioni
*
* Matrice che contiene tutti i valori delle opzioni
* Il valore predefinito dell'opzione viene utilizzato se l'utente non ha specificato un valore
*
* @uses thsp_get_theme_customizer_defaults () definito in /customizer/options.php
* @return array Valori correnti per tutte le opzioni
* @since Theme_Customizer_Boilerplate 1.0
* /
funzione thsp_cbp_get_options_values ​​() {

// Ottieni le impostazioni predefinite dell'opzione
$ option_defaults = thsp_cbp_get_options_defaults ();

// Analizza le opzioni memorizzate con i valori predefiniti
$ thsp_cbp_options = wp_parse_args (get_option (thsp_cbp_option (), array ()), $ option_defaults);

// Restituisce l'array analizzato
return $ thsp_cbp_options;

}


/ **
* Ottieni opzioni predefinite
*
* Restituisce un array che contiene valori predefiniti per tutte le opzioni
*
* @uses thsp_get_theme_customizer_fields () definito in /customizer/options.php
* @return array $ thsp_option_defaults Valori predefiniti per tutte le opzioni
* @since Theme_Customizer_Boilerplate 1.0
* /
funzione thsp_cbp_get_options_defaults () {

// Ottieni l'array che contiene tutti i campi delle opzioni del tema
$ thsp_sections = thsp_cbp_get_fields ();

// Inizializza l'array per contenere i valori predefiniti per tutte le opzioni del tema
$ thsp_option_defaults = array ();

// Passa attraverso l'array dei parametri dell'opzione
foreach ($ thsp_sections come $ thsp_section) {

$ thsp_section_fields = $ thsp_section ['fields'];

foreach ($ thsp_section_fields come $ thsp_field_key => $ thsp_field_value) {

// Aggiunge una chiave di matrice associativa alla matrice di default per ciascuna opzione nella matrice di parametri
if (isset ($ thsp_field_value ['setting_args'] ['default'])) {
$ thsp_option_defaults [$ thsp_field_key] = $ thsp_field_value ['setting_args'] ['default'];
} altro {
$ thsp_option_defaults [$ thsp_field_key] = false;
}

}

}

// Restituisce l'array predefinito
return $ thsp_option_defaults;

}

C’è solo un’altra cosa che dovrei menzionare: la funzione di callback di sanificazione che abbiamo specificato nell’array “setting_args”. La funzione è definita in extension.php e semplicemente esegue i dati wp_kses_post funzione:

/ **
* Funzione di callback di sanificazione di personalizzazione del tema
* /
funzione thsp_sanitize_cb ($ input) {

return wp_kses_post ($ input);

}

Dove da qui?

Per ora, puoi utilizzare questa piastra di personalizzazione del tema nei tuoi temi, tutto ciò che devi fare è scaricarlo da Github, copiarlo nella directory del tuo tema e includere il file principale da Functions.php, che è funzionale al 100% e abbastanza buono per la maggior parte temi.

Dato che il tuo tema non è “come la maggior parte dei temi”, la prossima settimana vedremo come estendere il boilerplate usando il filtro e i ganci di azione.

Mi piacerebbe sapere come pensi che questa piastra della caldaia possa essere migliorata o ampliata, quindi per favore fai fuoco nei commenti.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me