Ok, você tem um grande problema a resolver… Vamos supor que você queira criar uma espécie de landing page no seu tema. Para que esta landing page tivesse o visual desejado, você necessitaria de excluir o menu e toda a parte do topo da página.
Vamos supor, ainda, que você quisesse que o seu tema fosse capaz de mostrar uma barra lateral diferente em páginas também diferentes do site. Ou, ainda, que ele fosse capaz de mostrar um cabeçalho distinto em determinadas páginas do site.
Qual seria a melhor estratégia a usar nesses casos todos? Bem, esta é uma pergunta que volta e meia eu recebo em todos os meus cursos sobre criação de temas em WordPress. A minha resposta é sempre a mesma: usem o poder das tags condicionais do WordPress!
Neste tutorial eu gostaria de falar um pouco sobre esse assunto desconhecido por muitos dos amantes do WordPress, embora extremamente útil. Não pretendo me aprofundar no tema, até porque ele é vastíssimo, conforme você poderá ver na documentação oficial (em inglês). Mas espero que o texto possa servir de base para suas próximas empreitadas.
Este artigo tem uma versão em vídeo que pode ser assistida logo abaixo:
O que são tags condicionais?
Tags condicionais, ou conditional tags, nada mais são do que funções que retornam verdadeiro ou falso dependendo do local do tema em que forem chamadas. Na prática, elas são perfeitas para fazermos todo tipo de verificação no código.
Como o nome implica, você deve usá-las dentro de blocos condicionais do tipo if/else. Logo, se retornarem verdadeiro, podem executar um trecho de código. Caso contrário, executam outro trecho, ou não fazem nada. Isso sempre está condicionado ao trecho ou local do seu código onde elas são chamadas.
A sintaxe básica será sempre parecida como o código abaixo:
if( funcao_condicional() ):
// Trecho a executar se o retorno for verdadeiro
else:
// Trecho a executar se o retorno for falso
endif;
A maioria das funções, ou tags condicionais, começam com a palavra is_ (é ou está, em inglês), ou com a palavra has_ (tem, em inglês). Isso significa que você sempre estará testando se está em determinada página, por exemplo, ou se um trecho de código testado tem uma ou outra característica.
Por exemplo, a condicional is_404() retorna verdadeiro apenas se executada num trecho de código carregado numa página de erro do tipo 404 (página não encontrada). Assim, você poderá usá-la para executar algum trecho de código SE e SOMENTE SE o visitante do site cair numa página do tipo 404.
Ainda em outro exemplo, a condicional has_post_thumbnail() só retorna verdadeiro se o post dentro de um loop possuir uma imagem destacada (thumbnail). Você pode usá-la para mostrar uma imagem alternativa caso o post não possuir uma imagem em destaque.
Você também pode inverter a lógica da condicional, passando o sinal de negação na frente da condição. Assim:
if( ! funcao_condicional() ):
// Trecho a executar se o valor for falso
else:
// Trecho a executar se o valor for verdadeiro
endif;
Exemplos práticos de uso
1) Criando o template de uma landing page usando tags condicionais
Vamos a um exemplo de uso bem simples. Vou usar o exemplo da landing page que eu mencionei no início do artigo.
Vamos supor que você queira que uma determinada página do seu tema funcione como uma landing page. A diferença entre esta página e as demais é que ela não mostrará o menu do site e nem qualquer outro elemento na parte superior do tema.
Para efeitos de comparação, este seria o visual inicial da landing page do seu site:
Esta é uma página comum do WordPress. Para fins de referência, o título desta página no admin do WordPress será “Landing Page” e o seu slug será ‘landing-page’.
Note que criamos um item de menu para acessá-la diretamente. Porém, ao visualizar a página, o visitante do site não poderá ver tudo que está acima da imagem do livro. Deverão desaparecer o menu, o logotipo e toda a barra vermelha no topo.
Geralmente, em temas WordPress, toda a região do topo vem de um arquivo chamado header.php. Neste caso, teremos que achar uma forma de fazer o seguinte:
- verificar se estamos na página “Landing Page”;
- se estivermos, omitiremos todo o trecho de código que chama os elementos da parte superior do tema. Caso contrário, se estivermos em qualquer outra página do site, executamos o HTML correspondente àquela área.
Podemos lançar mão de uma das tags condicionais chamada is_page(), uma das mais versáteis entre as dezenas disponíveis. Essa função retorna verdadeiro toda vez que for executada numa página comum do WordPress (via de regra, as páginas criadas através do menu “Páginas” do admin).
Você também pode passar parâmetros para ela, indicando o ID de uma página, o nome completo dela ou o seu slug (os dois últimos como strings). Também é possível passar um array combinando todos os tipos anteriores. Para mais detalhes, veja a documentação na página do WordPress.
Vamos usar o slug da nossa landing page como parâmetro para exibir ou não o trecho de código relativo à parte superior da página. Este seria o resultado final no arquivo header.php:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php
if( ! is_page( 'landing-page') ): ?>
<header>
<section class="top-bar">
<div class="container">
<div class="row">
<div class="social-media-icons col-xl-9 col-sm-7 col-6">
<?php
if( is_active_sidebar( 'social-media' ) ){
dynamic_sidebar( 'social-media' );
}
?>
</div>
<div class="search col-xl-3 col-sm-5 col-6 text-right"><?php get_search_form(); ?></div>
</div>
</div>
</section>
<section class="menu-area">
<div class="container">
<div class="row">
<div class="align">
<section class="logo col-md-2 col-12 text-center">
<?php the_custom_logo(); ?>
</section>
<nav class="main-menu col-md-10 text-right">
<?php
wp_nav_menu(
array(
'theme_location' => 'my_main_menu'
)
);
?>
</nav>
</div>
</div>
</div>
</section>
</header>
<?php endif; ?>
Note o trecho de código em destaque. Todo o código dentro do bloco IF só será executado se is_page( ‘landing-page’) retornar falso (note o ponto de exclamação antes da condição), ou seja, em todos os casos em que o slug da página não for ‘landing-page’. Haverá um único caso em que essa condição retornará verdadeiro, que é quando o usuário de fato abrir a landing page.
Há várias formas de se resolver o mesmo problema. Cada desenvolvedor pensa de um jeito e resolve a mesma questão usando lógica própria.
Você também pode deixar este exemplo ainda melhor, criando um template de página para ser reutilizado pelo seu tema. Com isso, seria possível criar várias páginas do tipo landing page no seu tema. Assim, seu tema não ficaria limitado a uma única página que possuísse exatamente o título e o slug definido no is_page(). Você poderia usar outra condicional chamada is_page_template() para verificar se a página visualizada está usando o arquivo de template em questão. Enfim, as possibilidades são gigantescas.
2) Adicionando uma imagem reserva quando o post não possui imagem em destaque
O usuário do site não é obrigado a adicionar uma imagem em destaque (post thumbnail, ou featured image) para cada post. Logo, se a chamada de um post dentro do loop for algo como o código abaixo, imagem alguma aparecerá dentro da tag article:
<article <?php post_class(); ?>>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'thumb' ); ?></a>
<?php the_excerpt(); ?>
</article>
Uma maneira simples de resolver isso é usando a tag condicional has_post_thumbnail() e indicar uma imagem alternativa para os casos em que o autor do post não passou nenhuma imagem. Assim:
<article <?php post_class(); ?>>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php if( has_post_thumbnail() ): ?>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'thumb' ); ?></a>
<?php else: ?>
<a href="<?php the_permalink(); ?>"><img src="<?php get_template_directory_uri(); ?>/imagens/imagem-reserva.jpg" /></a>
<?php endif; ?>
<?php the_excerpt(); ?>
</article>
A condicional has_post_thumbnail() retorna verdadeiro apenas se o post possuir uma imagem destaque. Logo, se o retorno for verdadeiro, o código mostra a imagem. Caso contrário, uma imagem JPG dentro do diretório ‘imagens’ do seu tema será apresentada.
3) Mostrando opções diferentes para usuários logados e não logados
Suponhamos que você esteja criando um tema para uma loja virtual, com WooCommerce. Neste tema, você deseja mostrar um link com opções de registro e login para usuários que, respectivamente, não possuem conta no site ou que não estejam logados. Já para todos os usuários logados, você deseja mostrar um link para a conta e para sair (fazer logout) do site.
Nesses casos, a função is_user_logged_in() viria em boa hora.
Você poderia construir o menu do usuário da seguinte forma:
<div class="account">
<div class="row">
<div class="menu-wrapper">
<ul class="user-menu">
<?php if ( is_user_logged_in() ) : ?>
<li>
<a href="<?php echo esc_url( get_permalink( get_option('woocommerce_myaccount_page_id') ) ); ?>"><?php esc_html_e( 'My Account', 'text-domain' ) ?></a>
</li>
<li>
<a href="<?php echo esc_url( wp_logout_url( get_permalink( get_option('woocommerce_myaccount_page_id') ) ) );?>"><?php esc_html_e( 'Logout', 'text-domain'); ?></a>
</li>
<?php else: ?>
<li>
<a href="<?php echo esc_url( get_permalink( get_option('woocommerce_myaccount_page_id') ) ); ?>"><?php esc_html_e( 'Login / Register', 'text-domain' ) ?></a>
</li>
<?php endif; ?>
</ul>
</div>
</div>
</div>
Nesse caso, is_user_logged_in() retornará verdadeiro caso o usuário do site esteja logado. Se esse for o caso, aparecerão links para a página da conta do usuário (“My Account”) e para que ele saia do site (“Logout”).
Caso contrário, aparecerá o link “Login / Register”, que servirá para que o usuário entre no site, caso ele tenha uma conta, ou se registre, caso seja um novo usuário.
Espero que este tutorial tenha sido útil para você começar a fazer os seus primeiros testes com as condicionais.
Este artigo é apenas uma introdução ao assunto. Aceito sugestões de casos de uso para deixá-lo um pouco mais completo. Comenta aí!