Interagire con il personalizzatore di temi WordPress

  1. 1. Introduzione al personalizzatore di temi WordPress
  2. 2. Leggendo al momento: Interagire con il personalizzatore di temi WordPress
  3. 3. 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

Nella parte 1 della serie di personalizzatori di temi di WordPress ho menzionato che per interagire con il personalizzatore di temi devi caricare $ wp_customize oggetto, che è un’istanza di WP_Customize_Manager classe. Per farlo, devi usare customize_register gancio di azione:


add_action ('ustom_register ',' my_theme_customize_register ');
funzione my_theme_customize_register ($ wp_customize) {

// Interagisce con l'oggetto $ wp_customize

}

Puoi inserire questo codice nelle funzioni.php del tuo tema o in un file incluso da esso.

Aggiunta o rimozione di elementi di personalizzazione del tema (sezioni, impostazioni e controlli)

Una volta caricato $ wp_customize puoi usare uno dei suoi metodi per aggiungere, ottenere o rimuovere impostazioni, controlli e sezioni (add_setting, get_setting, remove_setting, add_control … ottieni il punto).

Quindi, se vuoi ottenere o rimuovere una sezione, controllo o impostazione, tutto ciò che serve è il suo ID. Questa riga rimuoverà la sezione Colori (inseriscila nella funzione my_theme_customize_register dal primo frammento di codice):

$ wp_customize-> remove_section ('colors');

L’aggiunta di una sezione, controllo o impostazione è leggermente diversa perché richiede alcuni parametri in più. Non li esaminerò tutti qui per due motivi:

  1. Non è proprio quello lo scopo di questa serie, creeremo una piastra di personalizzazione del tema che puoi semplicemente inserire nel tuo tema
  2. Alex Mansfield lo ha già coperto nel suo mostro di 6000 parole di a Tutorial per personalizzare il tema che ogni sviluppatore di temi WordPress deve leggere e poi twittare (seriamente, se non lo hai già fatto, vai a leggerlo ora).

Tuttavia, diamo un’occhiata a come è possibile aggiungere le proprie impostazioni con un controllo in una nuova sezione Personalizzatore temi, nonché alcuni degli argomenti. Dato che è molto più semplice lavorare con esempi reali, ecco cosa stiamo cercando:

  • Una nuova sezione, denominata “Layout”
  • Una nuova impostazione che memorizza il layout del tema
  • Un nuovo radiocomando con due opzioni: barra laterale a sinistra e barra laterale a destra

La prima cosa da aggiungere al Personalizzatore temi è la sezione “Layout”:

$ Wp_customize-> add_section (
// ID
'Layout_section',
// Array di argomenti
Vettore(
'title' => __ ('Layout', 'my_theme'),
'capacity' => 'edit_theme_options',
'description' => __ ('Ti permette di modificare il layout del tuo tema.', 'my_theme')
)
);

Non provare ancora a vederlo nel personalizzatore, una sezione non verrà mostrata a meno che non abbia un’impostazione e un controllo aggiunti ad essa. Quindi aggiungiamo entrambi:

$ Wp_customize-> add_setting (
// ID
'My_theme_settings [layout_setting]',
// Array di argomenti
Vettore(
'default' => 'barra laterale destra',
'type' => 'opzione'
)
);
$ Wp_customize-> add_control (
// ID
'Layout_control',
// Array di argomenti
Vettore(
'type' => 'radio',
'label' => __ ('Layout del tema', 'my_theme'),
'section' => 'layout_section',
'options' => array (
'left-sidebar' => __ ('Left sidebar', 'my_theme'),
'right-sidebar' => __ ('Right sidebar', 'my_theme')
),
// Quest'ultimo deve corrispondere all'ID impostazione dall'alto
'settings' => 'my_theme_settings [layout_setting]'
)
);

Presumendo che tu abbia letto il tutorial di Alex e / o le pagine del Codex, c’è solo un parametro nell’array degli argomenti add_setting – “tipo” – su cui vorrei concentrarmi. Hai due possibilità qui, “opzione” e “tema_mod” e puoi recuperarle utilizzando get_option e get_theme_mod, rispettivamente. Uso sempre l ‘”opzione” semplicemente perché ti consente di serializzare i valori delle impostazioni del tema fornendo loro ID come my_theme_settings [setting_1], my_theme_settings [setting_2] ecc. In questo modo tutti i valori verranno archiviati come un’unica voce di database nella tabella wp_options.

E infine, dopo aver aggiunto quei due frammenti di codice per la funzione a cui sei collegato customize_register hook di azione (primo frammento di codice in questo post), Personalizzatore temi è stato personalizzato:

Nuova sezione aggiunta al Personalizzatore temi

Nuova sezione aggiunta al Personalizzatore temi

Utilizzo dei valori delle impostazioni di Personalizzazione temi nel tema

Dopo aver dato la possibilità agli utenti di memorizzare questa impostazione, è possibile afferrare il suo valore, agganciarsi body_class hook di filtro e aggiungerlo alla matrice di classi di corpi esistenti:

add_filter ('body_class', 'my_theme_body_classes');
funzione my_theme_body_classes ($ classes) {

/ *
* Dato che abbiamo usato 'opzione' nell'array degli argomenti add_setting
* recuperiamo il valore utilizzando la funzione get_option
* /
$ my_theme_settings = get_option ('my_theme_settings');

$ classes [] = $ my_theme_settings ['layout_setting'];

restituisce $ classi;

}

Ciò aggiungerà .left-sidebar o .right-sidebar all’array di classi del corpo nel tuo tema. Utilizzando queste due classi nel file style.css del tuo tema, sarai in grado di creare due diversi layout. Per esempio:

/ * La barra laterale a destra è il layout predefinito * /
#content {
galleggiante: a sinistra;
larghezza: 60%;
}
#sidebar {
galleggiante: a destra;
larghezza: 30%;
}

/ * Uso della classe .left-sidebar per sovrascrivere il layout predefinito * /
.barra laterale sinistra #content {
galleggiante: a destra;
}
.barra laterale sinistra # barra laterale {
galleggiante: a sinistra;
}

Soprattutto, grazie al Personalizzatore temi WordPress, gli utenti possono visualizzare in anteprima entrambi i layout prima di salvare qualsiasi cosa. Prendi questo, pagine delle impostazioni del tema!

Riepilogo e ulteriori letture

TL; la versione DR di questo post sarebbe simile a questa: Puoi ottenere l’oggetto $ wp_customize e quindi aggiungere qualcosa (sezione, impostazione o controllo) o rimuoverlo. Tutto il resto si riduce ai parametri delle impostazioni.

La terza parte è quella in cui questa serie diventa interessante quando inizieremo ad automatizzare l’intero processo e a lavorare sulla piastra di caldaia per la personalizzazione dei temi che puoi inserire nel tuo tema e iniziare a utilizzare immediatamente. Rimanete sintonizzati!

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