Como criar controles personalizados para o WordPress Theme Customizer
Publicados: 2015-06-17O recurso WordPress Theme Customizer (também conhecido como “Customizer”) oferece aos desenvolvedores a capacidade de personalizar a aparência de seu tema e até mesmo ajudá-los a visualizar as alterações feitas no tema em tempo real. Na era de hoje, onde a corrida para atrair clientes para um site está se intensificando, muitas vezes você sentirá a necessidade de personalizar o design do seu site. E, graças ao personalizador de temas, você pode economizar muito do seu valioso tempo visualizando ao vivo as alterações feitas no seu design do WordPress.
O personalizador de temas do WordPress foi introduzido como parte da API de personalização de temas (introduzida na versão 3.4 do WordPress. Se você quiser fazer alterações nas configurações do seu tema, precisará usar os controles personalizados fornecidos com o tema personalizador como uma caixa de seleção, campo de texto, rádio e alguns outros. Mas, e se você quiser adicionar seus próprios controles personalizados ao seu tema WordPress?
Para ajudá-lo a entender como você pode criar e adicionar controles personalizados para atender às suas necessidades específicas, demonstraremos a criação de três controles personalizados para fazer algumas alterações no rodapé do nosso tema. No entanto, para começar o processo, primeiro você precisa se familiarizar com a classe WP_Customizer_Control.
Conhecendo a classe “WP_Customizer_Control”
Para gerar um controle personalizado, você precisa criar uma nova classe e estendê-la usando a classe WP_Customizer_Control. Essa classe usa o método “$wp_customize->add_control()” para adicionar seu próprio controle personalizado à tela de personalização do tema do seu site WordPress. Além disso, para acessar este método, você precisa usar o objeto $wp_customize disponível no gancho de ação: customize_register.
Vamos considerar um exemplo que ilustra como você pode adicionar um controle personalizado existente à sua seção de tema (no gancho de ação 'customize_register') da seguinte forma:
$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', ) ) );
No exemplo acima, estamos criando um controle que dará aos usuários a capacidade de escolher uma nova imagem de cabeçalho.
Exemplos Demonstrando: Como criar mais controles personalizados?
Esta seção é dividida em três etapas diferentes, em que cada etapa contém um código que gerará um controle personalizado para a área de texto do seu personalizador de tema. Vamos adicionar o código no arquivo footer.php do tema WordPress, para fazer alterações no rodapé através dos novos controles da área de texto.
Passo 1: Criando um Controle de Área de Texto Simples
Como discutimos acima, para criar um novo controle personalizado, precisamos definir uma classe que será usada para estender a classe WP_Customize_Control. Essencialmente, essa classe é usada em conjunto com a API de personalização de temas do WordPress para adicionar um controle de entrada (ou seja, controle personalizado) na tela de personalização do tema. Vejamos o código para implementar esta tarefa:
/*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', ));
Neste código, o gancho de ação customer_register é usado para informar ao WordPress sobre a função personalizada, que criamos com o nome: theme_footer_customizer. Como você deve saber, a classe WP_Customize_Manager ajuda a controlar o WordPress Theme Customizer e, portanto, o controle personalizado se tornará parte desta classe. No entanto, para acessar seu controle, você precisará usar o objeto “wp_customize” que é uma instância do hook customize_register.
No nosso caso, o objeto wp_customize é usado para definir uma nova seção de rodapé que será incluída na área de texto. Portanto, o que você digitar na seção de rodapé "área de texto" será exibido no rodapé do seu tema, conforme mostrado na captura de tela abaixo:
Nesta captura de tela, você pode ver que uma nova “seção de texto de rodapé” foi adicionada ao seu tema. O texto escrito nesta seção será exibido no rodapé do seu tema.
Etapa 2: adicionar controle personalizado para alterar a cor do plano de fundo
Portanto, agora que criamos um controle de área de texto, você pode adicionar muitos controles personalizados diferentes a ele. Neste exemplo, adicionaremos um controle personalizado à nossa nova seção de texto do rodapé que ajudará a alterar a cor de fundo do rodapé. Para fazer isso, basta adicionar o seguinte trecho de código no arquivo footer.php do seu 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', )));
Como você pode na captura de tela acima, escolhendo uma cor apropriada em “Footer Color Setting”, a cor de fundo do rodapé mudou para cinza.
Etapa 3: adicionar controle personalizado para adicionar logotipo
Outro controle que estamos adicionando à seção de texto do Rodapé é o “Logotipo do Rodapé”. Como o nome indica, o controle 'Footer Logo' ajudará na adição de um logotipo ao rodapé. Para adicionar esse controle, você precisará incluir o snippet de código abaixo no arquivo 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', ))); }
Vamos encerrar!
Você pode achar o processo de criação de controles personalizados um pouco demorado. Mas você não pode negligenciar o fato de que quanto melhores controles você adicionar à tela de personalização do tema do seu site, mais tempo de seus usuários poderá ser economizado, levando a uma experiência de usuário aprimorada. Portanto, se você planeja criar alguns controles personalizados por conta própria para serem adicionados ao personalizador de temas do WordPress, este post será um guia engenhoso para você.
