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

Na parte 1 da série WordPress Theme Customizer, mencionei que, para interagir com o Theme Customizer, é necessário carregar $ wp_customize objeto, que é uma instância de WP_Customize_Manager classe. Para fazer isso, você deve usar customize_register gancho de ação:


add_action ('customize_register', 'my_theme_customize_register');
função my_theme_customize_register ($ wp_customize) {

// Interagindo com o objeto $ wp_customize

}

Você pode colocar esse código nas funções do seu tema.php ou em um arquivo incluído nele.

Adicionando ou removendo elementos do Theme Customizer (seções, configurações e controles)

Depois de carregar $ wp_customize objeto, você pode usar qualquer um de seus métodos para adicionar, obter ou remover configurações, controles e seções (add_setting, get_setting, remove_setting, add_control … você entendeu).

Então, se você quiser pegue ou retirar uma seção, controle ou configuração, tudo o que você precisa é seu ID. Esta linha removerá a seção Cores (coloque-a na função my_theme_customize_register do primeiro trecho de código):

$ wp_customize-> remove_section ('cores');

Adicionar uma seção, controle ou configuração é um pouco diferente porque requer mais alguns parâmetros. Não analisarei todos eles aqui por dois motivos:

  1. Não é exatamente esse o objetivo desta série: criaremos um modelo personalizado do Theme Customizer, que você pode inserir no seu tema
  2. Alex Mansfield já o cobriu em seu monstro de 6000 palavras Tutorial do Customizador de temas que todo desenvolvedor de temas do WordPress deve ler e depois twittar (sério, se você ainda não o fez, leia-o agora).

Ainda assim, vamos dar uma olhada em como você pode adicionar sua própria configuração com um controle em uma nova seção do Customizador de temas, além de alguns dos argumentos. Como é muito mais fácil trabalhar com exemplos reais, eis o que procuramos:

  • Uma nova seção, chamada “Layout”
  • Uma nova configuração que armazena o layout do seu tema
  • Um novo controle de rádio com duas opções – barra lateral à esquerda e barra lateral à direita

A primeira coisa a adicionar ao Theme Customizer é a seção “Layout”:

$ wp_customize-> add_section (
// EU IRIA
'layout_section',
// Matriz de argumentos
matriz (
'title' => __ ('Layout', 'meu_mema'),
'resource' => 'edit_theme_options',
'description' => __ ('Permite editar o layout do seu tema.', 'my_theme')
)
);

Ainda não tente vê-lo no personalizador, uma seção não será mostrada a menos que tenha uma configuração e um controle adicionados a ela. Então, vamos adicionar os dois:

$ wp_customize-> add_setting (
// EU IRIA
'my_theme_settings [layout_setting]',
// Matriz de argumentos
matriz (
'default' => 'barra lateral direita',
'type' => 'opção'
)
);
$ wp_customize-> add_control (
// EU IRIA
'layout_control',
// Matriz de argumentos
matriz (
'type' => 'radio',
'label' => __ ('Layout do tema', 'my_theme'),
'section' => 'layout_section',
'escolhas' => matriz (
'barra lateral esquerda' => __ ('barra lateral esquerda', 'my_theme'),
'barra lateral direita' => __ ('barra lateral direita', 'my_theme')
),
// Este último deve corresponder ao ID da configuração acima
'settings' => 'my_theme_settings [layout_setting]'
)
);

Supondo que você leia o tutorial de Alex e / ou as páginas do Codex, existe apenas um parâmetro na matriz de argumentos add_setting – ‘tipo’ – no qual gostaria de me concentrar. Você tem duas possibilidades aqui, “opção” e “tema_mod” e pode recuperá-las usando get_option e get_theme_mod, respectivamente. Eu sempre uso a ‘opção’ simplesmente porque permite serializar os valores das configurações do tema, fornecendo a eles IDs como my_theme_settings [setting_1], my_theme_settings [setting_2] etc. Dessa forma, todos os valores serão armazenados como uma entrada de banco de dados na sua tabela wp_options.

E, finalmente, depois de adicionar esses dois trechos de código para funcionar, você se conectou customize_register gancho de ação (primeiro trecho de código nesta postagem), o Customizador de temas foi personalizado:

Nova seção adicionada ao Theme Customizer

Nova seção adicionada ao Theme Customizer

Usando os valores das configurações do Customizador de Tema no seu tema

Depois de permitir que seus usuários armazenem essa configuração, você pode pegar seu valor, conectar-se body_class gancho de filtro e adicione-o à matriz de classes corporais existentes:

add_filter ('body_class', 'my_theme_body_classes');
função my_theme_body_classes ($ classes) {

/ *
* Como usamos 'option' na matriz de argumentos add_setting
* recuperamos o valor usando a função get_option
* /
$ my_theme_settings = get_option ('minha_theme_settings');

$ classes [] = $ my_theme_settings ['layout_setting'];

retornar $ classes;

}

Isso adicionará .left-sidebar ou .right-sidebar à matriz de classes de corpo no seu tema. Ao usar essas duas classes no arquivo style.css do seu tema, você poderá criar dois layouts diferentes. Por exemplo:

/ * A barra lateral à direita é o layout padrão * /
#content {
flutuar: esquerda;
largura: 60%;
}
#Barra Lateral {
flutuador: direito;
largura: 30%;
}

/ * Usando a classe .left-sidebar para substituir o layout padrão * /
.barra lateral esquerda #content {
flutuador: direito;
}
.barra lateral esquerda #sidebar {
flutuar: esquerda;
}

O melhor de tudo é que, graças ao WordPress Theme Customizer, os usuários podem visualizar os dois layouts antes de salvar qualquer coisa. Pegue isso, páginas de configurações de tema!

Resumo e Leitura Adicional

A versão TL; DR desta postagem seria algo como isto: Você pode obter o objeto $ wp_customize e, em seguida, adicionar algo (seção, configuração ou controle) ou removê-lo. Tudo o resto se resume a parâmetros de configuração.

A Parte Três é onde essa série se torna interessante, pois começaremos a automatizar todo o processo e a trabalhar no Theme Customizer Boilerplate, que você pode inserir no seu tema e começar a usar imediatamente. Fique ligado!

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