Come creare controlli personalizzati per la personalizzazione del tema di WordPress
Pubblicato: 2015-06-17La funzione di personalizzazione del tema di WordPress (denominata anche "Personalizzazione") offre agli sviluppatori la possibilità di personalizzare l'aspetto del tema e persino di aiutarli in anteprima in tempo reale delle modifiche apportate al tema. Nell'era odierna, in cui la corsa per attirare clienti verso un sito web si sta intensificando, sentirai spesso il bisogno di personalizzare il design del tuo sito web. E grazie al personalizzatore del tema, puoi risparmiare molto del tuo tempo prezioso visualizzando in anteprima dal vivo le modifiche apportate al design di WordPress.
Il personalizzatore del tema di WordPress è stato introdotto come parte dell'API di personalizzazione del tema (introdotta nella versione 3.4 di WordPress. Se desideri apportare modifiche alle impostazioni del tema, dovrai utilizzare i controlli personalizzati forniti con il tema personalizzatore come una casella di controllo, un campo di testo, una radio e pochi altri, ma se volessi aggiungere i tuoi controlli personalizzati al tuo tema WordPress?
Per aiutarti a capire come creare e aggiungere controlli su misura per soddisfare le tue esigenze specifiche, dimostreremo la creazione di tre controlli personalizzati per apportare alcune modifiche al piè di pagina del nostro tema. Tuttavia, per iniziare il processo, devi prima acquisire familiarità con la classe WP_Customizer_Control.
Informazioni sulla classe "WP_Customizer_Control".
Per generare un controllo personalizzato, è necessario creare una nuova classe ed estenderla utilizzando la classe WP_Customizer_Control. Questa classe utilizza il metodo "$wp_customize->add_control()" per aggiungere il tuo controllo personalizzato alla schermata di personalizzazione del tema del tuo sito WordPress. Inoltre, per accedere a questo metodo, è necessario utilizzare l'oggetto $wp_customize disponibile nell'action hook: customize_register.
Consideriamo un esempio che illustra come aggiungere un controllo personalizzato esistente alla sezione del tema (nell'hook dell'azione 'customize_register') come segue:
$wp_customize->add_control( new WP_Customize_Header_Image_ Control( $wp_customize, 'header_image', array( 'label' => __( 'Header image', 'mynewtheme' ), 'section' => 'header_image_settings', 'settings' => 'header_image_position', ) ) );$wp_customize->add_control( new WP_Customize_Header_Image_ Control( $wp_customize, 'header_image', array( 'label' => __( 'Header image', 'mynewtheme' ), 'section' => 'header_image_settings', 'settings' => 'header_image_position', ) ) );
Nell'esempio sopra, stiamo creando un controllo che darà agli utenti la possibilità di scegliere una nuova immagine di intestazione.
Esempi di dimostrazione: come creare più controlli personalizzati?
Questa sezione è suddivisa in tre diversi passaggi, in cui ogni passaggio contiene codice che genererà un controllo personalizzato per l'area di testo per la personalizzazione del tema. Aggiungeremo il codice nel file footer.php del tema WordPress, in modo da apportare modifiche al footer tramite i nuovi controlli dell'area di testo.
Passaggio 1: creazione di un controllo dell'area di testo semplice
Come discusso in precedenza, per creare un nuovo controllo personalizzato, è necessario definire una classe che verrà utilizzata per estendere la classe WP_Customize_Control. In sostanza, questa classe viene utilizzata insieme all'API di personalizzazione del tema di WordPress per aggiungere un controllo di input (ad esempio un controllo personalizzato) nella schermata di personalizzazione del tema. Diamo un'occhiata al codice per implementare questa attività:
/*Customizer Code HERE*/ add_action('customize_ register', 'theme_footer_customizer'); function theme_footer_customizer($wp_ customize){ //adding section in wordpress customizer $wp_customize->add_section(' footer_settings_section', array( 'title' => 'Footer Text Section' )); //adding setting for footer text area $wp_customize->add_setting(' text_setting', array( 'default' => 'Default Text For Footer Section', )); $wp_customize->add_control(' text_setting', array( 'label' => 'Footer Text Here', 'section' => 'footer_settings_section', 'type' => 'textarea', ));/*Customizer Code HERE*/ add_action('customize_ register', 'theme_footer_customizer'); function theme_footer_customizer($wp_ customize){ //adding section in wordpress customizer $wp_customize->add_section(' footer_settings_section', array( 'title' => 'Footer Text Section' )); //adding setting for footer text area $wp_customize->add_setting(' text_setting', array( 'default' => 'Default Text For Footer Section', )); $wp_customize->add_control(' text_setting', array( 'label' => 'Footer Text Here', 'section' => 'footer_settings_section', 'type' => 'textarea', ));
In questo codice, l'action hook customer_register viene utilizzato per informare WordPress sulla funzione personalizzata che abbiamo creato con il nome: theme_footer_customizer. Come forse saprai, la classe WP_Customize_Manager aiuta a controllare il Customizer del tema di WordPress e quindi il controllo personalizzato diventerà parte di questa classe. Tuttavia, per accedere al tuo controllo, dovrai utilizzare l'oggetto "wp_customize" che è un'istanza dell'hook custom_register.
Nel nostro caso, l'oggetto wp_customize viene utilizzato per definire una nuova sezione del piè di pagina che verrà inclusa nell'area di testo. Quindi, qualunque cosa digiterai nella sezione "area di testo" del piè di pagina verrà visualizzata nel piè di pagina del tuo tema come mostrato nella schermata qui sotto:
In questa schermata, puoi vedere che una nuova "Sezione del testo del piè di pagina" è stata aggiunta al tuo tema. Il testo scritto in questa sezione verrà visualizzato nel piè di pagina del tuo tema.
Passaggio 2: aggiunta del controllo personalizzato per modificare il colore di sfondo
Quindi, ora che abbiamo creato un controllo dell'area di testo, puoi aggiungere molti diversi controlli personalizzati ad esso. In questo esempio, aggiungeremo un controllo personalizzato alla nostra nuova sezione di testo del piè di pagina che aiuterà a cambiare il colore di sfondo del piè di pagina. Per farlo, aggiungi semplicemente il seguente snippet di codice nel file footer.php del tuo tema:
//adding setting for background $wp_customize->add_setting(' background_color', array( 'default' => '#ffffff', ) ); $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'background_color', array( 'label' => 'Footer Color Setting', 'section' => 'footer_settings_section', 'settings' => 'background_color', )));//adding setting for background $wp_customize->add_setting(' background_color', array( 'default' => '#ffffff', ) ); $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'background_color', array( 'label' => 'Footer Color Setting', 'section' => 'footer_settings_section', 'settings' => 'background_color', )));
Come puoi nella schermata sopra, scegliendo un colore appropriato da "Impostazione colore piè di pagina", il colore di sfondo del piè di pagina è cambiato in grigio.
Passaggio 3: aggiunta del controllo personalizzato per aggiungere il logo
Un altro controllo che stiamo aggiungendo alla sezione del testo del piè di pagina è "Logo del piè di pagina". Come suggerisce il nome, il controllo "Footer Logo" aiuterà ad aggiungere un logo al piè di pagina. Per aggiungere questo controllo, dovrai includere lo snippet di codice seguente nel file footer.php:
//adding setting for footer logo $wp_customize->add_setting(' footer_logo'); $wp_customize->add_control(new WP_Customize_Upload_Control($ wp_customize,'footer_logo', array( 'label' => __('Footer Logo', 'mytheme'), 'section' => 'footer_settings_section', 'settings' => 'footer_logo', ))); }//adding setting for footer logo $wp_customize->add_setting(' footer_logo'); $wp_customize->add_control(new WP_Customize_Upload_Control($ wp_customize,'footer_logo', array( 'label' => __('Footer Logo', 'mytheme'), 'section' => 'footer_settings_section', 'settings' => 'footer_logo', ))); }
Chiudiamo!
Potresti trovare un po' dispendioso in termini di tempo il processo di creazione dei controlli personalizzati. Ma non puoi trascurare il fatto che migliori controlli aggiungerai alla schermata di personalizzazione del tema del tuo sito Web, più tempo dei tuoi utenti potrà essere risparmiato, portando così a una migliore esperienza utente. Quindi, se prevedi di creare da solo alcuni controlli personalizzati da aggiungere al personalizzatore del tema di WordPress, questo post si rivelerà una guida piena di risorse per te.
