Bem vindo ao
Blog da FULL.

Aprenda, crie e cresça seu negócio na internet.

Encontre conteúdos, dicas, tutoriais e novidades sobre as principais ferramentas Wordpress

Estendendo o padrão do personalizador de temas do WordPress

Você está em:

Estendendo o padrão do personalizador de temas do WordPress
  1. 1. Introdução ao personalizador de temas do WordPress
  2. 2. Interagindo com o WordPress Theme Customizer
  3. 3. Caldeira do personalizador de temas do WordPress
  4. 4. Atualmente lendo: Estendendo o padrão do personalizador de temas do WordPress
  5. 5. Personalizador de Temas: Condicionais, Temas Filhos e Plugins

A parte 3 da série Theme Customizer apresentou a você o Theme Customizer Boilerplate , que permite simplificar o código que lida com as opções do seu tema. Tudo o que você precisa fazer é passar uma série de campos de opções e o clichê cuidará de registrar as seções, configurações e controles do Personalizador de Temas para você nos bastidores.

Até agora, o clichê permitia usar campos de texto, caixas de seleção, botões de opção e selecionar campos no Personalizador de temas, este artigo mostra como você pode estendê-lo.

Nota: Antes de continuar, baixe a 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 no post anterior para mais notas sobre as alterações, mas em poucas palavras, uma vez que você copie o clichê para a pasta do seu tema, você não precisa editar seus arquivos – toda a edição é feita usando filtro e ganchos de ação.

Conectando-se ao painel do personalizador de temas

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

  • ‘thsp_cbp_directory_uri’ – Gancho de filtro definido em helpers.php, permite que você altere a localização do Customizer Boilerplate na pasta do seu tema. Por padrão, o caminho padrão se parece com isso – get_template_directory_uri() . ‘/customizer-boilerplate’ – mas se você preferir movê-lo para um local personalizado, este é 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. Boilerplate adiciona um link em Aparência no painel do WordPress, permitindo que os usuários acessem facilmente o Personalizador de Temas. Por padrão, esse link dirá “Theme Customizer” 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 que você altere o recurso padrão necessário usado no método $wp_customize->add_setting.
  • ‘thsp_cbp_option’ – Gancho de filtro definido em helpers.php. Se você estiver usando ‘option’ em seus argumentos de configurações, use este gancho para alterar o nome da entrada em que os valores de configurações do seu 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 tenha o nome do seu tema nele.
  • ‘thsp_cbp_options_array’ – Filtro de gancho definido em options.php, você DEVE ligá-lo e substituir o array de opções padrão (contendo opções de amostra) por opções que são usadas em seu tema. Vou repetir isso, negrito e sublinhado: Você DEVE se conectar a ele e substituir o array de opções padrão por opções que são usadas em seu tema.
  • ‘thsp_cbp_custom_controls’ – Gancho de ação definido em custom-controls.php, ao se conectar a ele 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’ – Hooks de filtro definidos em customizer.php. Você pode passar a eles matrizes de IDs de seção integradas (ou IDs de controles ou IDs de configurações) para remover algumas das seções, controles ou configurações internas.

Observação: enquanto estamos em 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 (core) funciona. E eu não poderia agradecer o suficiente a Pippin e seus artigos  por colocar essa ideia na minha cabeça.

Controles personalizados

A versão atualizada do Theme Customizer (que você acabou de conferir, certo?) tem mais alguns controles que você pode usar – campo de área de texto, campo de número HTML5 e campo de imagens, que é basicamente uma versão sofisticada de botões de opção.

Esses controles personalizados são definidos em custom-controls.php, não vou passar por todos eles aqui, mas vamos dar uma olhada em um (campo de número HTML5) para ver como tudo funciona:

/**

 * Creates Customizer control for input[type=number] field

 *

 * @since Theme_Customizer_Boilerplate 1.0

 */

class CBP_Customizer_Number_Control extends WP_Customize_Control {

public $type = ‘number’;

public function render_content() {

echo ‘<label>

<span class=”customize-control-title”>’.  esc_html( $this->label ) .'</span>

<input type=”number” ‘. $this->link() .’ value=”‘. intval( $this->value() ) .'” />

</label>’;

}

}

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 Theme Customizer.

Usando os controles personalizados integrados do Customizer Boilerplate

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

  • Campo de número – ‘número’
  • Campo Textarea – ‘textarea’
  • Imagens que funcionam como botões de rádio – ‘images_radio’ , aqui está um exemplo desse controle em um próximo tema gratuito do Cazuela :

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

/*

 * ============

 * ============

 * Number Field

 * ============

 * ============

 */

‘new_number_field’ => array(

‘setting_args’ => array(

‘default’ => ”,

‘type’ => ‘option’,

‘capability’ => $thsp_cbp_capability,

‘transport’ => ‘refresh’,

),

‘control_args’ => array(

‘label’ => __( ‘Number’, ‘my_theme_textdomain’ ),

‘type’ => ‘number’, // Textarea control

‘priority’ => 8

)

)

Observação: se você não tiver certeza de onde adicionar isso, verifique 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:

/**

 * Action hook that allows you to create your own controls

 */

do_action( ‘thsp_cbp_custom_controls’ );

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

Se você precisar adicionar seus próprios controles personalizados, é assim que você pode fazer isso:

function my_theme_add_customizer_boilerplate_control() {

/**

* Creates custom control to use with Theme Customizer Boilerplate

* Use a unique class prefix!

*

* @since Theme_Customizer_Boilerplate 1.0

*/

class CBP_Customizer_My_Control extends WP_Customize_Control {

public $type = ‘my_type’; // Change this

public function render_content() {

// Control output goes here

}

}

}

add_action( ‘thsp_cbp_custom_controls’, ‘my_theme_add_customizer_boilerplate_control’ );

Certifique-se de prefixar sua classe de controle personalizada com algo exclusivo, para que seu nome não entre em conflito com outra classe. Eu usei ‘CBP_’ (Customizer Boilerplate) – já que você está usando clichê em um tema, o nome do seu tema faz muito sentido e deve funcionar bem para você.

Personalizador de temas: o que vem a seguir?

Agora que o WordPress Theme Customizer Boilerplate é extensível através de ganchos, vamos dar uma olhada para adicionar “opções de tema condicional” – aquelas que só aparecerão se um determinado plugin estiver ativo e ajudá-lo a manter a tela do Theme Customizer organizada.

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

Aprenda com a FULL.

Junte-se a mais de 50 mil pessoas que recebem em primeira mão as principais ferramentas e tecnologia para desenvolvimento web

O meu carrinho
🎁 Faltam 300,00 para liberar o Cupom Secreto
O seu carrinho está vazio.

Parece que ainda não tomou uma decisão.