marcoandrei, Autor em Marco Andrei Kichalowsky

Como remover itens e seções do Personalizador do WordPress?

Quando criamos um tema personalizado, não raro temos opções presentes no Personalizador do WordPress (Theme Customizer) que serão ignoradas e não produzirão resultado prático no visual do sítio. Sendo assim, é mais conveniente que essas opções sejam removidas, já que poderão confundir o usuário.

Para começar, a classe que gerencia tudo que envolve o Personalizador se chama WP_Customize_Manager e o objeto criado em execução é $wp_customize.

Há 4 tipos de objetos no Personalizador: Panels (painéis), Sections (seções), Settings (Configurações/Ajustes) e Controls (controles). Neste artigo, vamos ver os dois primeiros.

Quando entramos no Personalizador temos um monte de linguetas/abas. Elas podem ser ou uma seção ou um painel, que contêm os diversos controles para se manipular as configurações.

Quando usamos uma seção ela só permite adicionar controles dentro dela. “Identidade do site” e “Cores” são itens implementados como uma seção.

Já um painel permite que se adicione seções dentro dele. “Menus” e “Widgets” são itens implementados como um painel.

Vamos ver a lista de seções e painéis presentes no WordPress:

Título	Tipo	ID	Ordem
Identidade do site	seção	title_tagline	20
Cores	seção	colors	40
Imagem do cabeçalho	seção	header_image	60
Imagem de fundo	seção	background_image	80
Menus	painel	nav_menus	100
Widgets	painel	widgets	110
Configurações da página inicial	seção	static_front_page	120
CSS adicional	seção	custom_css	200

Para se remover uma seção, usamos o método remove_section. Para remover um painel, o método remove_panel.

Finalmente, vamos a um exemplo de código. Cria um plugin ou adiciona este trecho no arquivo functions.php do teu tema:

function remove_itens_personalizador( $wp_customize ) {
  // Remove a seção "Imagem de fundo"
  $wp_customize->remove_section( 'background_image');
  // Remove o painel "Menus"
  $wp_customize->remove_panel( 'nav_menus');
  // Remove a seção "CSS adicional".
  $wp_customize->remove_section( 'custom_css');
}
add_action( 'customize_register', 'mytheme_customize_register',50 );

Simples, não? É isso.

Se tens algo a acrescentar ou tens alguma dúvida, comenta aí embaixo para a gente trocar uma ideia.

Até o próximo!

Como criar um link para enviar mensagem no WhatsApp

É fácil construir o URL para mandar uma mensagem diretamente para qualquer número

Com a popularização do WhatsApp, também tornou-se comum querer ter junto às redes sociais, um ícone para enviar uma mensagem diretamente para o aplicativo.

A maneira de construir o URL é bastante fácil e segue o seguinte modelo:

https://wa.me/numero-do-telefone

Por exemplo:

https://wa.me/5551999999999

sendo: “55” código internacional do Brasil, “51” código de área e depois o número em questão.

Também pode-se pré-definir uma mensagem padrão, no estilo: “Olá! Gostaria de saber mais sobre esse produto.”.

Para adicionar esta mensagem, usa-se o parâmetro “text”, assim:

https://wa.me/5551999999999?text=Gostaria%20de%20saber%20mais%20sobre%20o%20produto

(“%20” é código para espaço em branco.)

Simples, não?

Ao clicar no ícone, o telefone do usuário já vai abrir o app automaticamente com essa mensagem pronta para ser enviada para o número.

No computador, se o usuário tiver o aplicativo instalado, ele será aberto com a mensagem; se não, será aberta uma janela simples.

Tu conheces outro método para enviar mensagens para o WhatsApp? Tens outras ideias e dicas para implementar isso no WordPress? Deixa teu comentário aí embaixo!

WooCommerce: Como alterar a posição do botão “Comprar” na página de produto?

Saiba como mudar a ordem de exibição do sumário de informações dos produtos no WooCommerce.

Não raro, quando estamos trabalhando em um tema para uma loja virtual no WooCommerce, é necessário alterar o leiaute da página interna de produto.

Quando se trata da formatação, basta analisarmos os estilos presentes nas páginas e usar CSS para fazer as alterações necessárias. Mas quando precisamos alterar as posições dos elementos na página? Neste caso, lançamos mão dos ganchos presentes no WooCommerce.

No caso da página de produtos, estamos falando do arquivo content-single-product.php, onde encontramos o seguinte código:

<div class="summary entry-summary">
	<?php
	/**
	* Hook: woocommerce_single_product_summary.
	*
	* @hooked woocommerce_template_single_title - 5
	* @hooked woocommerce_template_single_rating - 10
	* @hooked woocommerce_template_single_price - 10
	* @hooked woocommerce_template_single_excerpt - 20
	* @hooked woocommerce_template_single_add_to_cart - 30
	* @hooked woocommerce_template_single_meta - 40
	* @hooked woocommerce_template_single_sharing - 50
	* @hooked WC_Structured_Data::generate_product_data() - 60
	*/
	do_action( 'woocommerce_single_product_summary' );
	?>
</div>

Este trecho é a seção “summary”, ou seja, um sumário das informações do produto, como vemos na figura abaixo:

Página de produto com o resumo de informações do produto.

A função do_action indica que o gancho do WooCommerce onde são chamadas as funções que exibem as informações se chama woocommerce_single_product_summary. A primeira linha do comentário documenta exatamente isso:

* Hook: woocommerce_single_product_summary

Dessa forma, qualquer coisa que se quiser que apareça nessa seção deve ser adicionada por meio de uma função associada a esse gancho.

As linhas que seguem descrevem as funções que estão enganchadas em woocommerce_single_product_summary por padrão e a sua ordem de chamada. A função que estamos buscando é woocommerce_template_single_add_to_cart, que é a função que exibe o botão “Comprar”.

No comentário, podemos ver que ela é chamada na ordem 30. Ela vem depois da função woocommerce_template_single_excerpt, que exibe a descrição resumida do produto e está na ordem 20.

Se quisermos mover o botão para antes dessa descrição, basta chamar a função woocommerce_template_single_add_to_cart ANTES, ou seja, em uma ordem que seja menor que 20.

Para isso, vamos usar remove_action para desenganchar a função e anular o comportamento padrão, para depois usar add_action para adicionar o botão antes da descrição curta do produto.

Então, vamos lá: adiciona esse código simples no functions.php ou via um plug-in:

/* Move o botão Comprar para logo depois do preço. */

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 15 );

O resultado será este:

Resumo de informações do produto com o botão sobre a descrição resumida.

Pronto! Simples e rápido, não?

Buenas, gostaste desse artigo? Foi útil para teu trabalho? Então compartilha na tua rede e deixa um comentário!

O que significa “slug” no WordPress?

Um dos termos mais comuns quando a gente começa a trabalhar com o WordPress, principalmente quando pensamos em SEO, é SLUG.

O WP Glossary, de Anders Nóren, define slug assim:

Um slug é um texto inteligível de um URL que representa um post, página, tag ou categoria, usualmente construído a partir do título do conteúdo que ele representa.

Talvez não seja tão óbvio, mas o segredo da definição é “inteligível”, ou seja, fácil de entender, mas também fácil de lembrar.

O WordPress se destaca justamente pela capacidade de gerar URLs claras e fáceis de entender tanto por humanos quanto por computadores, especialmente os motores de busca, como o Google, Bing e DuckDuckGo.

Para facilitar a nossa vida, o WordPress já gera automaticamente um slug para nossas páginas e artigos, a partir de seu título. Então um texto que tem um título “Código é poesia” no meu blogue, poderia ter um slug como esse: marcoandrei.com/codigo-e-poesia.

A palavra slug, em Inglês, tem origem no Jornalismo. “Slug” é uma ou mais palavras que identificam uma notícia específica de uma edição entre os profissionais da redação. No Brasil, a tradução desse termo seria “retranca”.

Mas um slug no WordPress não identifica só um texto ou página. Um slug é uma palavra ou uma sequência de palavras que ajudam a identificar um elemento do WordPress de maneira intuitiva e inequívoca.

Ele é usado e aparece mais obviamente quando vamos trocar os links permanentes das páginas de nosso sítio, mas dentro da programação do WordPress, também usamos slugs para identificar, de maneira única, outros elementos como widgets, instâncias de tipos personalizados de post e outros.