O WordPress 4.7 foi lançado com uma tonelada de excelentes recursos novos ( que você pode verificar aqui ), incluindo algumas experiências de usuário e atualizações da interface do usuário para o Customizer do tema.
Caso você esteja ouvindo sobre o Customizer pela primeira vez, é um recurso no administrador do WordPress (vá para Aparência> Personalizar ) que permite aos usuários ajustar as configurações do tema usando uma interface WYSIWYG e personalizar as cores, fontes, texto e Praticamente qualquer outra coisa que você queira mudar.
Nesta postagem, eu vou orientá-lo sobre como o Customizer pode ser usado em temas para criar uma melhor experiência de usuário e todo o novo awesomeness que o WordPress 4.7 introduziu.
Uma Introdução ao Personalizador de Tema
O tema Customizer foi introduzido pela primeira vez no WordPress 3.4 e permite que você mude as mudanças de visualização que você faz no seu tema. Você pode jogar tudo o que quiser sem modificar seu site ao vivo. E quando você fez suas alterações , basta clicar em Salvar e tudo é aplicado instantaneamente.
Como desenvolvedores, temos acesso a funcionalidades básicas, como a edição do título do site ou imagem de cabeçalho, e também podemos criar controles personalizados para qualquer coisa que possamos, através da API de customizações do tema .
Desenvolvendo para o Personalizador de Tema
Existem três áreas de interesse ao codificar o customizador. Você vai precisar para criar os controles para o personalizador, o CSS e / ou lógica que implementa as configurações do tema e – opcionalmente – o ao vivo funcionalidade de visualização que fornece uma melhor experiência do usuário.
Primeiros passos
Antes de começar, vamos criar um ambiente em que possamos trabalhar. Para este tutorial vamos criar um novo tema, muito simples. Na verdade, não será qualificado como um tema apropriado , vou usar um arquivo index.php simples para criar uma página de destino.
Você pode baixar o tema inicial que estou usando ou acompanhar com o código do Github para fazer você mesmo.
Se você visitar o Customizer no administrador do WordPress, você já pode controlar o título do site, a descrição e o CSS adicional (o último sendo um novo recurso no 4.7) do seu site. Isso ocorre porque, por padrão, o Personalizador exibe alterações ao atualizar a página inteira. Vamos fazer isso um pouco mais suave um pouco depois, mas agora isso vai acontecer.
Colocando a Fundação
Vamos começar por estabelecer as bases para nossos esforços de personalização. Vou criar um arquivo customizer.php e certifique -se de exigi-lo no arquivo functions.php .
| Incluir (‘customizer.php’); |
O arquivo Customizer começará com uma ação enganada que contém todas as nossas seções, configurações e controles.
| Add_action (‘customize_register’, ‘cd_customizer_settings’); | |
| Função cd_customizer_settings ($ wp_customize) { | |
| } |
Seções, configurações e controles
Seções representam a navegação dentro do Customizador. Você já deve ver quatro deles: Identidade do site, Menus, Página inicial estática e CSS adicional . Ao definir uma seção, podemos criar uma nova entrada dentro da navegação e preenchê-la com os controles.
Os controles são os elementos visuais – a interface do usuário – que nos permitem manipular configurações. Estes podem ser campos de entrada, áreas de texto, seletores de cores e outros tipos de controles que servem para criar uma melhor experiência de usuário.
As configurações representam os dados que queremos que nosso tema aceite e use. Criamos controles para permitir aos usuários manipular configurações facilmente.
Criando uma Seção
Para adicionar uma nova seção, usaremos o $wp_customize->add_section()método. É preciso dois argumentos: um identificador de seção e uma série de opções adicionais como o título da seção visível e sua posição dentro da lista de seção.
| $ Wp_customize-> add_section (‘cd_colors’, array ( | |
| ‘Título’ => ‘Cores’, | |
| ‘Prioridade’ => 30, | |
| )); |
Não esqueça que o código acima e qualquer outro código que crie seções, controles ou configurações devem ser colocados na cd_customizer_settings()função .
Nossa seção agora está registrada, mas não será exibida até que possamos adicionar um controle a ela.
Criando um cenário
As configurações informam o WordPress de que nosso tema usará um valor que pode ser modificado pelo usuário. Eles são $wp_customize->add_setting()adicionados usando o método que leva dois parâmetros: o identificador para a configuração e uma matriz de opções que contêm informações como o valor padrão.
| $ Wp_customize-> add_setting (‘background_color’, array ( | |
| ‘Default’ => ‘# 43C6E4’, | |
| ‘Transporte’ => ‘atualizar’, | |
| )); |
O transporte realmente padrão para atualizar, mas eu adicionei, já que vamos modificá-lo mais tarde. Refresh significa que, quando a configuração for modificada, o WordPress deve atualizar a exibição. Implementações de Customizer mais sofisticadas permitem visualizações ao vivo que apenas modificam o elemento afetado em oposição a toda a página.
Criando um Controle
Controla as configurações de ligação para a entrada do usuário. Eles são adicionados com o $wp_customize->add_control()método. Argument-wise este método é um pouco mais complexo do que os anteriores.
Se o primeiro argumento for um objeto de controle, apenas um argumento é necessário, uma instância do objeto. O objeto provavelmente terá seus próprios argumentos adicionais.
O primeiro argumento também pode ser um identificador, caso em que é necessário um segundo argumento de opções.
No nosso caso, usaremos a WP_Customize_Color_Controlclasse para criar um elemento seletor de cores.
| $ Wp_customize-> add_control (novo WP_Customize_Color_Control ($ wp_customize, ‘background_color’, array ( | |
| ‘Rótulo’ => ‘Cor de fundo’ | |
| ‘Seção’ => ‘cd_colors’, | |
| ‘Configurações’ => ‘background_color’, | |
| ))); |
O primeiro parâmetro deste objeto deve ser o $wp_customizepróprio objeto, o segundo deve ser o ID dos controles . Eu costumo fazer isso o mesmo que a configuração que ele controla. A terceira matriz contém algumas opções como o rótulo, o id da seção em que será colocado e o id da configuração que ele controla.
Agora temos um par completo de configuração-controle que aparecerá em nossa nova seção. Ainda não faz nada, mas a configuração está lá e seu valor realmente está mudando.
Gerando o CSS
Para que isso realmente funcione, precisaremos aplicar o valor da configuração ao nosso tema. Neste caso, queremos garantir que o corpo tenha sempre o valor da cor de fundo como nossa nova configuração.
| Add_action (‘wp_head’, ‘cd_customizer_css’); | |
| Função cd_customizer_css () | |
| { | |
| ?> | |
| < Style type = “ text / css “ > | |
| Corpo { fundo : # <? Php echo get_theme_mod ( ‘ background_color ‘ , ‘ # 43C6E4 ‘ ); ?>; } | |
| < / Style > | |
| <? Php | |
| } |
Tenha em atenção que este código não deve ser colocado dentro do cd_customizer_settings()mesmo que fizemos com controles, seções e configurações.
Isso é tudo muito padrão, a única coisa a observar é como o valor é recuperado. A get_theme_mod()função recuperará as configurações do tema atual; O primeiro parâmetro é o nome da configuração, o segundo é o valor padrão.
A função pode – é claro – ser usada no código do tema para modificar a funcionalidade. Poderíamos – e logo – criar um controle e configuração que podem ser usados para ocultar / exibir o botão. Usaremos o Will get_theme_mod()será usado no index.phparquivo para mostrar / ocultar seletivamente o botão.
Previews ao vivo
Temos um sistema limpo, mas seria muito mais suave se a cor mudar e outras edições seriam instantâneas. As visualizações ao vivo nos permitem usar o Javascript para modificar os elementos seletivamente.
Para começar, vamos criar um arquivo customizer.js e garantir que ele seja enqueued.
| Add_action (‘customize_preview_init’, ‘cd_customizer’); | |
| Função cd_customizer () { | |
| Wp_enqueue_script ( | |
| ‘Cd_customizer’, | |
| Get_template_directory_uri (). ‘/customizer.js’, | |
| Array (‘jquery’, ‘customize-preview’), | |
| ”, | |
| verdade | |
| ); | |
| } |
O conteúdo deste arquivo deve ser um encerramento muito simples, nós colocamos todo o nosso código dentro dele.
| ( Função ( $ ) { | |
| }) (JQuery); |
Em seguida, verifique se o valor da transportopção da configuração está configurado para postMessage.
Finalmente, cole o seguinte no customizer.jsarquivo, dentro do encerramento .
| ( Função ( $ ) { | |
| Wp . Personalizar ( ‘ background_color ‘ , function ( value ) { | |
| Valor . Bind ( function ( newval ) { | |
| $ ( ‘ Corpo ‘ ). css ( ‘ background-color ‘ , newval); | |
| }); | |
| }); | |
| }) (JQuery); |
A customize()função possui dois parâmetros, o nome da configuração a ser ouvida e uma função que realiza uma ação. A função, por sua vez, aciona outra função que liga o valor da nossa configuração e nos permite usá-la em nosso lazer. Aqui usei para modificar o CSS do elemento do corpo. Diversão colorida segue:
Visualização ao vivo para a funcionalidade básica
A capacidade de modificar o título e a descrição do blog já existe devido à magia do código principal. Vamos aplicar a visualização ao vivo a esses elementos também.
Embora não tenhamos definido essas opções e controles, ainda temos os meios para modificá-los. Usaremos o get_setting()método da classe de customizadores para obter e modificar opções para uma configuração.
| $ Wp_customize-> get_setting (‘blogname’) -> transport = ‘postMessage’; | |
| $ Wp_customize-> get_setting (‘blogdescription’) -> transport = ‘postMessage’; |
O código acima deve ser adicionado dentro da cd_customizer_settings()função. O passo final é adicionar o código Javascript que será acionado sempre que o valor da configuração for alterado.
| Wp . Customize ( ‘ blogname ‘ , function ( value ) { | |
| Valor . Bind ( function ( newval ) { | |
| $ ( ‘ #intro h1 ‘ ). Html (newval); | |
| }); | |
| }); | |
| Wp . Customize ( ‘ blogdescription ‘ , function ( value ) { | |
| Valor . Bind ( function ( newval ) { | |
| $ ( ‘ #intro h2 ‘ ). Html (newval); | |
| }); | |
| }); |
No final deste processo, você deve ver o título do blog e a atualização da descrição conforme você digita.
Exemplos adicionais
Há tanto que você pode fazer com o personalizador, pensei que seria uma boa idéia incluir mais alguns exemplos. Vamos começar com alguns controles que regem o comportamento do botão.
Mostrar / Ocultar Seções
Para mostrar / ocultar um elemento que eu escolhi para criar um elemento de botão de rádio. Vamos usar dois parâmetros para o add_control()que significa que o primeiro é uma string simples, não um objeto de controle. O segundo parâmetro terá todos os detalhes que o controle precisa para construir a UI. Aqui está o código completo que deve ser colocado na cd_customizer_settings()função.
Em index.phpeu enrole o botão em uma instrução condicional que verifica o valor da configuração e exibe o botão adequadamente.
Observe que, por enquanto, estabeleci o método de transporte refresh. Quando o botão está escondido, ele não está carregado na página, então precisamos fazer mais do que simplesmente mostrar / ocultar um elemento via JavaScript. Aprenderemos a fazer isso ainda melhor em breve!
Modificações de texto
Continuando com as modificações de nossos botões, vamos tornar o texto editável. Nós já temos a seção do botão, tudo o que precisamos é uma configuração e um controle de campo de texto simples.
Para construir a opção no tema, get_theme_mod()substituiremos o texto codificado com a função e definiremos um padrão apropriado.
Finalmente , vamos cuidar da visualização ao vivo no arquivo customizer.js .
Usando Partials and Edit Shortcuts
Quando olhamos para a opção de exibição do botão, usamos a atualização, porque parecia que o uso de JavaScript sozinho não era realmente possível. Quando o botão está escondido, ele não está carregado, então não podemos simplesmente mostrar com Javascript, tornando-o visível.
É aí que os parciais entram. Eles permitem que você escreva um código mais modular que se presta à criação de temas e à personalização. Em vez de atualizar a página inteira quando o elemento muda, você pode atualizar esse único elemento.
Vamos começar gerando o nosso botão com a ajuda de uma função. Criei cd_show_main_button()e usei no arquivo de índice principal, envolvendo-o em um recipiente.
A função em si é exatamente como o nosso código já foi visto, mas agora pode ser reutilizado em outro lugar.
| Função cd_show_main_button () { | |
| Se (get_theme_mod (‘cd_button_display’, ‘show’) == ‘show’) { | |
| echo “< a href = ‘ ‘ class = ‘ botão ‘ >”. Get_theme_mod (‘cd_button_text’, ‘Come On In’). “</ A >”; | |
| } | |
| } |
O último passo está dizendo ao WordPress para atualizar seletivamente o elemento. Defina a transportpropriedade da cd_button_displayconfiguração para postMessagee adicione a seguinte dentro da cd_customizer_settings()função.
| $ Wp_customize-> selective_refresh-> add_partial (‘cd_button_display’, array ( | |
| ‘Selector’ => ‘# botão-container’, | |
| ‘Render_callback’ => ‘cd_show_main_button’, | |
| )); |
Isso diz ao WordPress que queremos atualizar seletivamente quando a configuração cd_button_displaymudar. O seletor dentro do qual queremos atualizar tudo é dado no segundo argumento e a função que gera o conteúdo também é definida.
Se você tentar o Customizer agora, verá que o botão fica opaco e, em seguida, carrega o conteúdo correto, em oposição a todo o site que está sendo atualizado.
A boa notícia é que os atalhos de edição serão adicionados automaticamente para você. Na verdade, se você simplesmente precisa de atalhos de edição, este é o caminho a seguir.
Adicionando um controle deslizante de intervalo
O personalizador tem muitos controles, desde campos de texto simples até carregamentos de imagens. Se você estiver trabalhando em um aplicativo de grande escala, você pode precisar de entradas mais acessíveis, como um controle deslizante de intervalo, ou mesmo algo completamente personalizado.
O Customizer permite que você crie seus próprios elementos UI facilmente, definindo classes de controle. Vamos criar nosso próprio controle deslizante de alcance que permite aos usuários selecionar valores com um mecanismo de controle pequeno. Vamos construir o controle:
| Se (class_exists (‘WP_Customize_Control’)) { | |
| A classe WP_Customize_Range estende WP_Customize_Control { | |
| Public $ type = ‘range’; | |
| Função pública __construct ($ manager, $ id, $ args = array ()) { | |
| Pai :: __ construir ($ manager, $ id, $ args); | |
| $ Padrão = array ( | |
| ‘Min’ => 0, | |
| ‘Max’ => 10, | |
| ‘Passo’ => 1 | |
| ); | |
| $ Args = wp_parse_args ($ args, $ padrão); | |
| $ This-> min = $ args [‘min’]; | |
| $ This-> max = $ args [‘max’]; | |
| $ This-> step = $ args [‘step’]; | |
| } | |
| Função pública render_content () { | |
| ?> | |
| < Label > | |
| < Span class = “ customize-control-title “ > <? Php echo esc_html ( $ this -> label ); ? > </ Span > | |
| < Input class = ‘ range-slider ‘ min = ” <? Php echo $ this -> min ? > “ Max = ” <? Php echo $ this -> max ? > “ Step = ” <? Php echo $ this -> Passo ? > “ Tipo = ‘ intervalo ‘ <? Php $ this -> link (); ? > | |
| < Input onKeyUp = “ jQuery (this) .prev (‘input’). Val (jQuery (this) .val ()) “ type = ‘ text ‘ value = ‘ <? Php echo esc_attr ( $ this -> value () ); ? > ‘ > | |
| </ Label > | |
| <? Php | |
| } | |
| } | |
| } |
Devemos primeiro verificar a existência da WP_Customize_Controlclasse, porque nem sempre é carregada quando todas as nossas opções são. Em seguida, estendemos a classe com a nossa, declarando a propriedade $typee a render_content()função. Nós precisamos produzir um controle HTML, cuidando usar $this->value()quando $this->link()precisamos do valor atual e no lugar do parâmetro nome.
Criei uma implementação de slider muito simples com um pouco de mágica jQuery para garantir que o valor seja visível em um campo de texto e a modificação do campo de texto também afetará o controle deslizante.
Eu adicionei algumas opções (min, max, passo) ao controle deslizante que eu atribuí às propriedades no construtor.
Para testá-lo, criarei um pequeno contador que mostra o número de fotos atualmente no site. No arquivo index.php estou adicionando o seguinte.
| < Div id = ‘ photocount ‘ > | |
| < Span > <? Php echo get_theme_mod ( ‘ cd_photocount ‘ , 0 ) ? > </ Span > fotos | |
| </ Division > |
Agora é hora de criar a configuração e o controle. O controle usará nosso controle deslizante de faixa recém-criado.
| $ Wp_customize-> add_setting (‘cd_photocount’, array ( | |
| ‘Default’ => 0, | |
| ‘Transporte’ => ‘pós-mensagem’, | |
| )); | |
| $ Wp_customize-> add_control (novo WP_Customize_Range ($ wp_customize, ‘cd_photocount’, array ( | |
| ‘Label’ => ‘Photo Count’, | |
| ‘Min’ => 10, | |
| ‘Max’ => 9999, | |
| ‘Passo’ => 10, | |
| ‘Seção’ => ‘title_tagline’, | |
| ))); |
Criar a visualização ao vivo é quase trivial agora, tudo o que preciso fazer é garantir que o elemento correto seja substituído pelo código JavaScript.
| Wp . Personalize ( ‘ cd_photocount ‘ , function ( value ) { | |
| Valor . Bind ( function ( newval ) { | |
| $ ( ‘ #fotocount span ‘ ). Html (newval); | |
| }); | |
| }); |
Obter Customizing!
Agora você deve poder trabalhar dentro do personalizador do tema para criar melhores controles para seus temas. É extremamente importante tornar o uso do tema fácil e intuitivo e o personalizador é uma ótima base para isso.
