Impostazioni e controlli per una combinazione di colori nella personalizzazione del tema

Cosa starai creando

Il personalizzatore di temi è un ottimo strumento per consentire ai tuoi utenti più libertà di modificare un tema senza dover modificare il codice. Ma se vuoi permettere ai tuoi utenti di cambiare i colori del loro sito, le cose possono complicarsi. Aggiungere un controllo per ogni singolo elemento che possono cambiare renderà le cose ingombranti e gli utenti potrebbero finire con un sito che sembra un pasticcio appariscente.

Invece di aggiungere molti controlli per tutti gli elementi che desideri siano in grado di modificare, puoi semplicemente creare una combinazione di colori, consentendo agli utenti di selezionare alcuni colori e quindi applicarli a una serie di elementi nel tema.

In questo tutorial ti illustrerò la prima parte di questo processo, che sta impostando i controlli del customizer del tema. Nella parte successiva, ti mostrerò come collegare questi controlli al tuo tema in modo che quando gli utenti selezionano i colori, vengano portati al tema.

Il punto di partenza

Inizia installando il tema iniziale e attivandolo. Il customizer del tema sarà simile a questo:

Dopo aver completato il tutorial, il tuo personalizzatore avrà due sezioni aggiuntive.

Impostazione del personalizzatore del tema

Il primo passaggio consiste nel creare un file nel tema per contenere le funzioni di personalizzazione. Lavorerò con un tema base di partenza, basato sul tema creato durante la mia serie sulla creazione di un tema WordPress da HTML statico. Ho apportato alcune modifiche ad esso in modo che funzioni con le funzioni dello schema di colori, quindi se vuoi lavorare con questo tutorial, ti suggerisco di scaricare il tema iniziale.

Nella cartella principale del tuo tema, crea una cartella chiamata inc e in questo, crea un file chiamato customizer.php.

Apri i tuoi functions.php file e aggiungi quanto segue, che includerà il nuovo file che hai appena creato:

include_once ('inc / customizer.php');

Ora nel tuo customizer.php file, aggiungi questa funzione:

function wptutsplus_customize_register ($ wp_customize)  add_action ('customize_register', 'wptutsplus_customize_register');

Questo crea una funzione che conterrà tutte le tue impostazioni e controlli e la aggancia al customize_register gancio di azione. Il tuo tema è pronto per partire!

Creazione di impostazioni e controlli dello schema colore

Il primo passo è aggiungere le impostazioni e i controlli per la combinazione di colori. Potrai aggiungere controlli per quattro selettori di colori, il colore principale, il colore secondario e due colori di collegamento.

Aggiungere una nuova sezione

All'interno della funzione appena creata, aggiungi quanto segue:

/******************************************* Combinazione di colori **** **************************************** / // aggiungi la sezione per contenere le impostazioni $ wp_customize-> add_section ('textcolors', array ('title' => 'Color Scheme',));

Ciò crea una sezione vuota per i controlli della combinazione di colori.

Definire gli argomenti per i tuoi colori

Subito sotto, aggiungi:

// colore principale (titolo del sito, h1, h2, h4. h6, intestazioni di widget, collegamenti nav, intestazioni di piè di pagina) $ txtcolors [] = array ('slug' => 'color_scheme_1', 'default' => '# 000' , 'etichetta' => 'Colore principale'); // colore secondario (descrizione del sito, intestazioni della barra laterale, h3, h5, collegamenti nav al passaggio del mouse) $ txtcolors [] = array ('slug' => 'color_scheme_2', 'default' => '# 666', 'label' = > 'Colore secondario'); // link color $ txtcolors [] = array ('slug' => 'link_color', 'default' => '# 008AB7', 'label' => 'Link Color'); // link color (hover, active) $ txtcolors [] = array ('slug' => 'hover_link_color', 'default' => '# 9e4059', 'label' => 'Link Color (su hover)');

Questo aggiunge una nuova sezione al customizer del tema chiamato 'Color Scheme'. Quindi imposta gli argomenti per i quattro colori con cui lavorerai: una lumaca, un valore predefinito e un'etichetta. Il valore predefinito è il colore utilizzato nel tema, quindi potresti voler cambiare il tuo con i colori del tema.

Creazione delle impostazioni del colore

 Quindi è necessario creare le impostazioni per i colori usando gli argomenti appena definiti. Sotto l'ultimo blocco di codice, digitare:

// aggiungi le impostazioni e i controlli per ogni colore foreach ($ txtcolors come $ txtcolor) // SETTINGS $ wp_customize-> add_setting ($ txtcolor ['slug'], array ('default' => $ txtcolor ['default'] , 'tipo' => 'opzione', 'capacità' => 'edit_theme_options')); 

Questo utilizza a per ciascuno dichiarazione per lavorare attraverso ciascuno dei colori appena definiti, creando un'impostazione per ognuno usando gli argomenti che hai definito. Ma è ancora necessario aggiungere controlli in modo che gli utenti possano interagire con queste impostazioni utilizzando il customizer del tema.

Aggiunta di controlli

Dentro il per ciascuno parentesi e sotto il add_setting () funzione appena aggiunta, inserisci quanto segue:

// CONTROLLI $ wp_customize-> add_control (new WP_Customize_Color_Control ($ wp_customize, $ txtcolor ['slug'], array ('label' => $ txtcolor ['label'], 'section' => 'textcolors', 'settings' => $ txtcolor ['slug'])));

Questo aggiunge un selettore di colori per ciascuno dei tuoi colori, usando il WP_Customize_Color_Control () funzione, che crea selettori di colori per il customizer del tema.

Il tuo intero per ciascuno la dichiarazione ora sarà simile a questa:

// aggiungi le impostazioni e i controlli per ogni colore foreach ($ txtcolors come $ txtcolor) // SETTINGS $ wp_customize-> add_setting ($ txtcolor ['slug'], array ('default' => $ txtcolor ['default'] , 'tipo' => 'opzione', 'capacità' => 'edit_theme_options')); // CONTROLLI $ wp_customize-> add_control (new WP_Customize_Color_Control ($ wp_customize, $ txtcolor ['slug'], array ('label' => $ txtcolor ['label'], 'section' => 'textcolors', 'settings' => $ txtcolor ['slug']))); 

Ora puoi vedere la tua nuova sezione quando apri il customizer del tema con il tuo tema attivato:

E quando espandi uno dei controlli, sarai in grado di vedere il selettore di colori:

Al momento niente di quello che si fa con il selettore dei colori si rifletterà sul tuo tema in quanto non hai aggiunto alcun CSS per farlo funzionare - ci arriveremo a questo nella seconda parte di questa serie. Per ora aggiungeremo un'altra sezione per dare agli utenti un po 'più di controllo sulla loro combinazione di colori.

Creazione di impostazioni e controlli in background solidi

La prossima sezione non consentirà agli utenti di selezionare i colori, ma invece darà loro la possibilità di aggiungere uno sfondo solido all'intestazione e / o al piè di pagina del loro sito. Se lo selezionano, i colori di sfondo e di testo di tali elementi cambieranno.

Sotto il codice che hai appena aggiunto, ma ancora dentro il tuo wptutsplus_customize_register () funzione, aggiungere quanto segue:

/ ************************************** Colori di sfondo solidi ******** ******************************* / // aggiungi la sezione per contenere le impostazioni $ wp_customize-> add_section ('background' , array ('title' => 'Solid Backgrounds',)); // aggiungi l'impostazione per lo sfondo dell'intestazione $ wp_customize-> add_setting ('header-background'); // aggiungi il controllo per lo sfondo dell'intestazione $ wp_customize-> add_control ('header-background', array ('label' => 'Aggiungi uno sfondo solido all'intestazione?', 'section' => 'background', 'settings '=>' header-background ',' type '=>' radio ',' choices '=> array (' header-background-off '=>' no ',' header-background-on '=>' sì ' ,))); // aggiungi l'impostazione per lo sfondo del piè di pagina $ wp_customize-> add_setting ('footer-background'); // aggiungi il controllo per lo sfondo del piè di pagina $ wp_customize-> add_control ('footer-background', array ('label' => 'Aggiungi uno sfondo solido al footer?', 'section' => 'background', 'settings '=>' footer-background ',' type '=>' radio ',' choices '=> array (' footer-background-off '=>' no ',' footer-background-on '=>' sì ' ,)));

Questo aggiunge una seconda nuova sezione chiamata 'Solid Backgrounds' e quindi aggiunge due controlli ad essa, entrambi sono box radio. In ogni caso ci sono due scelte: sì e no. Nella seconda parte di questa serie ti mostrerò come definire variabili basate su quelle scelte e usare quelle per modificare il CSS nel tema.

Ora puoi vedere la nuova sezione nel customizer del tema:

Ancora una volta, non succederà nulla se selezioni una delle radio box in quanto non hai ancora collegato questo al CSS del tema, ma arriverà.

Sommario

In questa prima parte, hai aggiunto le impostazioni e i controlli necessari per creare l'interfaccia di personalizzazione del tema per la combinazione di colori.

Nella prossima parte ti mostrerò come definire le variabili in base alle scelte fatte dagli utenti nel customizer del tema e quindi utilizzare tali variabili per impostare il CSS.