1. 1. Introdução ao WordPress Theme Customizer
  2. 2. Interagindo com o WordPress Theme Customizer
  3. 3. WordPress Theme Customizer Boilerplate
  4. 4. Lendo atualmente: Estendendo o Boilerplate do WordPress Theme Customizer
  5. 5. Modelo personalizado do tema – Opções condicionais, temas filho e plugins

A Parte 3 da série Theme Customizer apresentou o modelo personalizado do Theme Customizer, que permite simplificar o código que trata das opções do tema. Tudo o que você precisa fazer é passar por uma variedade de campos de opções, e o clichê cuidará do registro das seções, configurações e controles do Theme Customizer para você nos bastidores.


Até agora, o boilerplate permitia o uso de campos de texto, caixas de seleção, botões de opção e campos selecionados no Theme Customizer, este artigo mostra como você pode estendê-lo.

Nota: Antes de continuar, faça o download da versão mais recente do WordPress Theme Customizer Boilerplate em seu repositório Github. Fiz algumas melhorias desde o último tutorial e é importante que seu código esteja atualizado. Dê uma olhada na postagem anterior para obter mais notas sobre alterações, mas, em poucas palavras, depois de copiar o padrão na sua pasta de temas, você não precisará editar seus arquivos – toda a edição é feita usando ganchos de filtro e ação.

Conectando-se ao Theme Customizer Boilerplate

Existem vários ganchos de ação e filtro no WordPress Theme Customizer Boilerplate. Você pode conectar-se a qualquer um deles a partir do arquivo functions.php do seu tema usando add_action e add_filter funções:

  • “Thsp_cbp_directory_uri” – O gancho de filtro definido em helpers.php, permite alterar a localização do Customizer Boilerplate na sua pasta de temas. Por padrão, o caminho padrão é semelhante a este – get_template_directory_uri (). ‘/ Customizer-boilerplate’ – mas se você preferir movê-lo para um local personalizado, esse é o gancho que pode ajudá-lo.
  • “Thsp_cbp_menu_link_text” – Gancho de filtro definido em helpers.php, permite alterar o link do texto do menu. O Boilerplate adiciona um link em Aparência no painel do WordPress, permitindo aos usuários acesso fácil ao Theme Customizer. Por padrão, esse link diz “Personalizador de temas” e você pode alterar o texto usando o gancho de filtro “thsp_cbp_menu_link_text”.
  • “Thsp_cbp_capability” – Gancho de filtro definido em helpers.php. Permite alterar a capacidade padrão requerida usada no método $ wp_customize-> add_setting.
  • “Thsp_cbp_option” – Gancho de filtro definido em helpers.php. Se você estiver usando a opção nos argumentos de configuração, use este gancho para alterar o nome da entrada em que os valores das configurações de tema serão armazenados na tabela wp_options. O valor padrão é “thsp_cbp_theme_options”, certifique-se de conectar-se a este e alterá-lo para algo que contenha o nome do seu tema.
  • “Thsp_cbp_options_array” – Gancho de filtro definido em options.php, você DEVE conectar-se a ele e substituir a matriz de opções padrão (contendo opções de amostra) pelas opções usadas em seu tema. Vou repetir, colocar em negrito e sublinhar: YDEVE conectá-lo e substituir a matriz de opções padrão pelas opções usadas no seu tema.
  • “Thsp_cbp_custom_controls” – Gancho de ação definido em custom-controls.php, conectando-o, você pode criar seus próprios controles personalizados, continue lendo para ver um exemplo de como fazê-lo.
  • “Tshp_cbp_remove_sections”“Tshp_cbp_remove_controls” e “Tshp_cbp_remove_settings” – Ganchos de filtro definidos em customizer.php. Você pode transmitir a eles matrizes de IDs de seção integrados (ou IDs de controle ou IDs de configurações) para remover algumas das seções, controles ou configurações integrados.

Observação: enquanto estamos na extensibilidade e criando seus próprios ganchos para que outros desenvolvedores possam usá-los para estender seu código, é impossível exagerar a importância disso. Afinal, é assim que o WordPress (núcleo) funciona. E eu não poderia agradecer Pippin e seu artigos o suficiente para colocar essa ideia na minha cabeça.

Controles personalizados

A versão atualizada do Theme Customizer (que você fez check-out, certo?) Tem mais alguns controles que você pode usar – campo textarea, campo numérico HTML5 e campo de imagens, que é basicamente uma versão sofisticada dos botões de opção.

Esses controles personalizados são definidos em custom-controls.php, não examinarei todos eles aqui, mas vamos dar uma olhada em um (campo numérico HTML5) para ver como tudo funciona:

/ **
* Cria o controle do Customizer para o campo de entrada [type = number]
*
* @since Theme_Customizer_Boilerplate 1.0
* /
A classe CBP_Customizer_Number_Control estende WP_Customize_Control {

public $ type = 'number';

função pública render_content () {
eco '';
}

}

Como você pode ver, tudo o que você precisa fazer é definir o novo controle $ type e sua função render_content que gera o controle na tela do Theme Customizer.

Usando os controles personalizados integrados do Customizer Boilerplate

É o mesmo que campos simples abordados no tutorial anterior, a única coisa que você precisa conhecer são os “tipos” que você precisa usar para cada um:

  • Campo numérico – ‘número’
  • Campo de área de texto – ‘Área de texto’
  • Imagens que funcionam como botões de opção – “Images_radio”, aqui está um exemplo desse controle em uma próxima versão gratuita Tema Cazuela:

Tema Customizer Boilerplate

Conhecer os nomes desses novos tipos de controle, é fácil adicionar um. Veja como você pode adicionar um controle de campo numérico à matriz que contém todas as suas opções:

/ *
* ============
* ============
* Campo numérico
* ============
* ============
* /
'new_number_field' => matriz (
'setting_args' => matriz (
'padrão' => '',
'type' => 'opção',
'recurso' => $ thsp_cbp_capability,
'transporte' => 'atualização',
),
'control_args' => matriz (
'label' => __ ('Número', 'nome_do_domínio_meu_domínio'),
'type' => 'number', // Controle da área de texto
'priority' => 8
)
)

Nota: Se você não tiver certeza de onde adicionar isso, consulte a seção “Usando a matriz de opções para adicionar seções, configurações e controles do personalizador” da Parte 3 desta série. Além disso, há uma amostra para cada um dos controles personalizados no arquivo options.php.

Adicionando seus próprios controles personalizados

Vamos voltar ao gancho de ação “thsp_cbp_custom_controls” que mencionei anteriormente:

/ **
* Gancho de ação que permite criar seus próprios controles
* /
do_action ('thsp_cbp_custom_controls');

É um gancho de ação simples do WordPress que permite adicionar seus próprios controles personalizados sem modificar os arquivos de Boilerplate do Theme Customizer. Por que você gostaria de evitar editá-los? Porque, se você está se conectando ao clichê, sempre que alguém a atualizar, você pode simplesmente pegar a versão mais recente, inseri-la no seu tema e não perder as alterações feitas. Pense em editar os principais arquivos do WordPress em vez de escrever um plug-in, editar um tema ou criar um tema filho, etc..

Se você precisar adicionar seus próprios controles personalizados, é assim que você pode fazê-lo:

função my_theme_add_customizer_boilerplate_control () {
/ **
* Cria controle personalizado para usar com o Theme Customizer Boilerplate
* Use um prefixo de classe exclusivo!
*
* @since Theme_Customizer_Boilerplate 1.0
* /
A classe CBP_Customizer_My_Control estende WP_Customize_Control {

public $ type = 'meu_tipo'; // Mude isso

função pública render_content () {
// A saída de controle vai aqui
}

}
}
add_action ('thsp_cbp_custom_controls', 'my_theme_add_customizer_boilerplate_control');

Prefixe sua classe de controle personalizada com algo exclusivo, para que seu nome não colidir com outra classe. Usei ‘CBP_’ (Customizer Boilerplate) – como você usa o boilerplate em um tema, o nome do tema faz muito sentido e deve funcionar bem para você.

Personalizador de temas: o que vem a seguir?

Agora que o Boilerplate do WordPress Theme Customizer é extensível por meio de ganchos, vamos dar uma olhada para adicionar “opções de tema condicionais” – aquelas que só aparecerão se um determinado plug-in estiver ativo e ajudarão a manter a tela do Customizador de Tema desorganizada.

O que você acha do Customizer Boilerplate até agora? Você planeja usá-lo em seus temas? Alguma idéia de como isso poderia ser melhorado? Seu feedback é bem-vindo, sempre.

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