Como Exibir ou Ocultar Conteúdo de Blocos no WordPress

Ter controle sobre o que aparece no seu site e em quais condições é uma vantagem valiosa para qualquer desenvolvedor ou designer WordPress.

Felizmente, o ecossistema do WordPress oferece diversos plugins que ajudam nessa tarefa. A seguir, apresentamos quatro plugins que permitem:

• Ocultar conteúdo de rascunho em uma página ativa.
• Aplicar condições de exibição a grupos, cabeçalhos e rodapés.
• Mostrar conteúdo com base em data e hora.
• Exibir designs diferentes, dependendo do tipo de dispositivo.

Uma diferença importante entre os plugins analisados está na facilidade — ou na complexidade — de executar essas ações.

Os plugins selecionados têm como foco mostrar ou ocultar conteúdo dentro dos blocos. Neste artigo, não abordamos soluções mais amplas, como plugins de membros que restringem o acesso a páginas, nem discutimos como bloquear, desbloquear ou ocultar os próprios blocos. Para isso, consulte nosso artigo “Como desabilitar e bloquear blocos do Gutenberg”.

Todos os quatro plugins devem funcionar com temas baseados em blocos, híbridos ou clássicos. Eles também são compatíveis com padrões, padrões parcialmente sincronizados e padrões totalmente sincronizados criados com blocos.

Embora o código personalizado nem sempre seja a melhor maneira de mostrar ou ocultar blocos, fornecemos alguns trechos de código como exemplos.

Plugins para exibir ou ocultar conteúdo de blocos no WordPress

Os plugins que examinamos têm recursos semelhantes, mas são implementados de maneiras diferentes. A maioria inclui configurações globais em WP Admin > Configurações, exceto os dois últimos plugins mencionados na seção Outros plugins, que não têm essas opções.

No entanto, todos eles fornecem controles de visibilidade por bloco no painel Inspector (a barra lateral direita) do editor, quer você esteja trabalhando com uma página, um artigo, um tipo de artigo personalizado ou o editor do site.

Block Visibility

O Block Visibility é um dos plugins mais conhecidos dessa categoria. Presente desde os primeiros dias do editor de blocos, ele se destaca por oferecer uma interface intuitiva e um conjunto de recursos completo — totalmente gratuito e sem versão premium.

Você pode definir controles de visibilidade em qualquer bloco com base em diferentes condições, individualmente ou em combinação:

• Navegador e dispositivo – Mostre ou oculte um bloco dependendo do navegador do visitante (Chrome, Firefox, Safari, etc.) ou do tipo de dispositivo (desktop, tablet, celular).
• Cookie – Controle a visibilidade com base na presença ou não de um cookie específico no navegador do usuário, útil para personalização.
• Data e hora – Programe o conteúdo para ficar visível durante horas específicas ou em determinadas datas, como a exibição de uma mensagem somente durante o horário comercial.
• Ocultar bloco – Uma substituição direta que oculta completamente um bloco, independentemente de quaisquer outras condições.
• Localização – Mostre ou oculte conteúdo com base na localização geográfica do visitante (país, região ou cidade).
• Metadados – Controle a visibilidade usando valores de metadados personalizados, geralmente úteis para conteúdo dinâmico em tipos de artigo personalizado.
• Query String – Exibe ou oculta blocos conforme parâmetros da URL (como mostrar um bloco apenas se ?promo=true estiver presente).
• Fonte de referência – Altere a visibilidade dependendo da origem do visitante (como ocultar uma oferta especial se o usuário chegou pelo Google).
• Tamanho da tela – Ajuste a visibilidade com base na largura da tela, permitindo conteúdo diferente para usuários de celular, tablet ou desktop.
• Caminho da URL – Mostre ou oculte blocos com base na URL da página, o que é útil para exibir conteúdo somente em páginas ou seções específicas do site.
• Função do usuário – Restrinja a visibilidade com base na função do usuário logado, como mostrar conteúdo exclusivo para administradores ou membros.

O plugin também inclui recursos adicionais para gerenciar a visibilidade do bloco:

• Predefinições de visibilidade – Salve e aplique configurações de visibilidade predefinidas a vários blocos.
• Copiar e importar configurações – Duplique facilmente as configurações de visibilidade em diferentes blocos.

Além disso, um botão de alternância Hide block from everyone (Ocultar bloco de todos) está disponível diretamente na barra de ferramentas do bloco, permitindo ocultar rapidamente qualquer conteúdo.

Vamos dar uma olhada em dois exemplos comuns de como esse plugin pode ser usado.

Data e hora

O plugin Block Visibility oferece controle total sobre o agendamento de conteúdo com base em condições de data e hora. Você pode definir intervalos de tempo específicos, datas ou combinações de ambos.

Por exemplo, queremos exibir um título quando a loja estiver aberta e outro quando estiver fechada:

• “Nossa Loja Está Aberta Agora” deve estar visível entre 8h e 17h.
• “Estamos Fechados Agora” deve estar visível em todos os outros horários.

Se esta for a primeira vez que você faz isso, clique no ícone de mais (+) ou no menu de opções de três pontos para revelar as opções de controle do plugin e selecione Date & Time (Data e hora). Faça isso para os dois blocos de título.

Aplique a condição 8 a.m. – 5 p.m. ao título “Our Shop Is Open Now” (Estamos Fechados Agora).

O título “We Are Closed Now” (Estamos fechados agora) requer dois conjuntos de dados para fazer a ponte entre a mudança de dia e a meia-noite.

Resultado: os títulos são exibidos conforme a condição configurada.

Fonte de Referência (Referral Source)

Neste exemplo, ocultamos um botão se a fonte de referência contiver qualquer parte de uma URL específica. Alternativamente, poderíamos exibir o botão apenas se a URL corresponder.

Por fim, em Configurações > Visibilidade do bloco, você encontrará três seções principais:

• Configurações Gerais (General Settings)

• Controles de Visibilidade (Visibility Controls)

• Gerenciador de Blocos (Block Manager)

Para obter a melhor experiência, recomendamos que você ative o modo de controle total em General Settings. Isso garante que as configurações de visibilidade estejam disponíveis para cada bloco.

Alguns blocos, como o bloco de botão, exigem essa configuração porque os controles de visibilidade do plugin não estão ativados por padrão no painel Inspector.

Content Control

Não confunda com o plugin Restrict Content, o plugin Content Control oferece duas condições para ocultar ou exibir conteúdo.

• Regras de Dispositivo (Device Rules) – Controlam a visibilidade do bloco com base no tipo de dispositivo (desktop, tablet ou celular).

• Regras de Usuário (User Rules) – Exibe um bloco com base nas funções de usuário, podendo ser configurado para usuários logados, deslogados, todos os perfis, perfis específicos ou perfis excluídos.

Essas regras podem ser usadas separadamente ou combinadas para criar condições de visibilidade flexíveis. Por exemplo, usamos as Regras do Dispositivo para exibir uma imagem otimizada para diferentes tamanhos de tela. A imagem maior é definida para aparecer somente em desktops.

• A: No editor de páginas, as exibições Mobile e Tablet estão desativadas.
• B: No frontend, a imagem é dimensionada corretamente para desktops.

Além disso, a imagem otimizada para celular está configurada para aparecer somente em tablets e dispositivos móveis.

• A: No editor de páginas, a visualização Desktop está desativada.
• B: No frontend, a imagem é exibida para tablets e dispositivos móveis.

Essa configuração garante que os usuários vejam o tamanho de imagem mais apropriado para seus dispositivos, melhorando o desempenho e a experiência do usuário.

Além disso, cada bloco também inclui quatro configurações opcionais, acessíveis por meio do menu de opções de três pontos:

• Copy (Copiar) – Copia as configurações do bloco.
• Paste (Colar) – Aplica as configurações copiadas a outro bloco.
• Restore Default (Restaurar padrão) – Redefine todas as condições de visibilidade do bloco.
• Disable Device Rules / Disable User Rules (Desabilitar Regras de Dispositivo / Desabilitar Regras de Usuário) – Desativa temporariamente as condições de visibilidade sem excluí-las.

É altamente recomendável que você use as opções Disable Device Rules (Desativar regras do dispositivo) ou Disable User Rules (Desativar regras do usuário) ao testar o plugin. Isso facilita a redefinição e o ajuste das configurações de visibilidade conforme necessário.

Em WP Admin > Configurações, você encontrará várias configurações globais para o plugin, como a definição dos pontos de interrupção. Aqui estão os padrões para os três dispositivos.

Você também pode desativar o plugin para qualquer bloco dentro dessas configurações. A versão premium desse plugin inclui esses e muitos outros recursos:

• Agendamento de Blocos – Defina condições de visibilidade com base em data e hora.
• Regras para WooCommerce – Controle a visibilidade do bloco com base nas configurações do WooCommerce.
• Regras do Easy Digital Downloads – Restrinja o conteúdo para clientes de produtos digitais.
• Regras booleanas – Use condições lógicas para a visibilidade do bloco.
• Mecanismo de regras para blocos – Crie condições de visibilidade personalizadas com maior flexibilidade.

Outros plugins

Além das opções mais populares, há dois plugins menos conhecidos, com menos instalações ativas, que também oferecem controles de visibilidade de blocos:

Conditional Blocks – Advanced Content Visibility

Este plugin permite controlar a visibilidade de blocos do WordPress usando lógica avançada, tudo em uma interface modal simples. Você pode definir condições para determinar quando e onde um bloco deve estar visível.

A versão gratuita do Conditional Blocks inclui controles básicos de visibilidade, como:

• Bloquear o Bloco para Todos (Lockdown Block from Everyone) – Oculta completamente um bloco.

• Visibilidade Responsiva (Responsive Visibility) – Mostra ou oculta blocos com base no tipo de dispositivo (mobile, tablet ou desktop).

• Condições de Status do Usuário (User Status Conditions) – A opção Usuário Conectado exibe blocos apenas para usuários logados, enquanto Usuário Desconectado mostra blocos apenas para visitantes.

• Lógica de Condição AND/OR – Combina múltiplas regras para criar condições de visibilidade mais complexas.

A versão Pro amplia a funcionalidade com recursos adicionais, incluindo:

• Gerenciador de Presets (Preset Manager) – Salve grupos de regras e aplique a múltiplos blocos em todo o site.

• Breakpoints Avançados (Advanced Breakpoints) – Defina tamanhos de tela personalizados para diferentes dispositivos.

• Controle de Geolocalização (Geolocation Control) – Mostra ou oculta blocos com base na localização do visitante (requer uma chave de API).

• Configurações na Barra de Ferramentas (Toolbar Settings) – Gerencie condições de visibilidade diretamente na barra do bloco.

• Visibilidade por Função de Usuário (User Role-Based Visibility) – Restringe blocos com base em funções do usuário (como administradores, assinantes, clientes).

• Opções de Agendamento (Scheduling Options) – Define blocos para aparecerem apenas em determinados períodos de tempo.

• Integrações com WooCommerce e Membership – Controle a visibilidade com base em conteúdos do carrinho, associações de usuário e muito mais.

Para aqueles que precisam de maior flexibilidade e lógica condicional avançada, a versão Pro oferece um conjunto completo de ferramentas para gerenciar a visibilidade do conteúdo em escala.

Wicked Block Conditions

O plugin Wicked Block Conditions é um plugin gratuito que permite que você oculte ou mostre blocos com base em vários critérios:

• Status de login do usuário – Exibe ou oculta blocos dependendo se o usuário está logado.

• Função do usuário – Restringe a visibilidade com base na função atribuída.

• Data e hora – Agenda a exibição de conteúdo para momentos específicos.

• Categorias ou tags de artigo – Exibe conteúdo com base na categoria ou tag atribuída.

• Status do artigo – Controla a visibilidade com base no status (publicado, rascunho, pendente etc.).

• Parâmetro da URL (query string) – Ajusta a visibilidade com base em valores da URL.

• Função PHP personalizada – Permite executar lógica personalizada diretamente da interface para controle avançado de visibilidade.

A capacidade de usar funções PHP personalizadas torna este plugin especialmente útil para desenvolvedores que desejam implementar sua própria lógica diretamente no editor.

Código personalizado para mostrar ou ocultar o conteúdo do bloco

Se você tem um caso de uso simples e prefere carregar apenas o essencial, pode usar código personalizado em vez de plugins. Isso pode ser feito criando seu próprio plugin ou adicionando funções diretamente ao arquivo functions.php do seu tema.

Abaixo estão três exemplos baseados em PHP, mas se o desempenho for uma prioridade, o JavaScript pode ser uma escolha melhor.

Ocultar conteúdo com base no status de login do usuário

O exemplo a seguir oculta todos os elementos de parágrafo (<p>) quando um usuário está conectado:

add_action( 'wp_head', 'kinsta_toggle_paragraphs_visibility' );

function kinsta_toggle_paragraphs_visibility() {
   if (is_user_logged_in() ) {
       echo 'p { display: none !important; }';
   }
}

A função verifica se um usuário está conectado usando is_user_logged_in(). Se a condição for verdadeira, ela injeta CSS na seção <head>, ocultando todos os elementos <p> com display: none;. O conteúdo permanece no código-fonte da página, mas não é visível.

Você pode modificar esse comportamento substituindo is_user_logged_in() por:

• !is_user_logged_in() – Oculta o conteúdo quando o usuário estiver deslogado.

• is_user_logged_out() – Alternativa para detectar usuários deslogados.

• !is_user_logged_out() – Alternativa para detectar se o usuário está logado.

Ocultar conteúdo com base em geolocalização

Suponha que você queira ocultar conteúdo para usuários de um determinado local. Não há limite para o que você pode mostrar ou ocultar, mas aqui adotamos uma abordagem geral e ocultamos todas as imagens de usuários baseados nos EUA.

add_action('wp_head', 'kinsta_hide_images_for_us_visitors');

function kinsta_hide_images_for_us_visitors() {
   // Get visitor's IP address
   $user_ip = $_SERVER['REMOTE_ADDR'];
   $geo_api_url = "https://ipapi.co/{$user_ip}/json/";

   // Fetch geolocation data
   $response = wp_remote_get($geo_api_url);

   if ( is_wp_error($response) ) {
       return; // Exit if API request fails
   }

   $data = json_decode( wp_remote_retrieve_body($response) );

   // Check if the user is from the U.S.
   if ( isset($data->country_code) && $data->country_code === 'US' ) {
       echo 'h1, h2, h3, h4, h5, h6 { display: none !important; }';
   }
}

Observação:

• $_SERVER['REMOTE_ADDR'] A API nem sempre é confiável e pode retornar IPs incorretos.
• Fazer chamadas à API em todas as requisições pode afetar o desempenho. O ideal seria usar um transient para armazenar a resposta temporariamente.

Ocultar imagem destacada por categoria

Nenhum dos plugins que examinamos tinha uma maneira de mostrar ou ocultar títulos de página, ou imagens em destaque, pois eles não são blocos. Aqui, estamos ocultando a imagem em destaque de todos os artigos da categoria “books”:

add_filter('post_thumbnail_html', 'kinsta_hide_featured_image_for_books_category', 10, 2);

function kinsta_hide_featured_image_for_books_category($html, $post_id) {
   // Check if the post belongs to the "Books" category
   if (has_category('books', $post_id)) {
       return ''; // Hide the featured image by returning an empty string
   }
   return $html; // Show the featured image if the category is not "Books"
}

Esse filtro verifica se o artigo pertence à categoria Books usando a função has_category(). Se a condição for verdadeira, a imagem destacada é removida retornando uma string vazia. Caso contrário, a imagem destacada permanece inalterada.

Testando sua implementação

Antes de implementar o plugin ou o código personalizado que você escolheu, recomendamos que você faça testes completos para evitar problemas não intencionais, como restringir o conteúdo do público-alvo pretendido. Aqui estão algumas das principais etapas de teste:

• Garantir a compatibilidade – Certifique-se de que o plugin ou código funciona com plugins de blocos de terceiros.

• Revise o código-fonte da página – Alguns métodos apenas ocultam via CSS, enquanto outros removem o conteúdo do markup. Avalie como isso afeta o SEO.

• Use um ambiente de teste – A Kinsta oferece ambientes de teste, permitindo testar alterações com segurança antes de publicá-las no site de produção.

Resumo

Controlar a visibilidade de conteúdo é uma ferramenta essencial para a gestão de sites WordPress. A abordagem que você escolher — seja um plugin pronto ou código personalizado — vai depender das suas necessidades específicas e do seu nível de conhecimento técnico.

Se você procura uma hospedagem que facilite o desenvolvimento, os testes de plugins e a segurança do site, experimente a Kinsta.

Vulnerabilidades de segurança podem ser uma preocupação real, mas com a Kinsta você conta com varredura automática de malware a cada três minutos, firewalls de nível empresarial e uma plataforma otimizada para desempenho e confiabilidade. Comece a usar a Kinsta hoje mesmo.

Bud Kraus

Bud Kraus has been working with WordPress as an in-class and online instructor, site developer, and content creator since 2009. He has produced instructional videos and written many articles for WordPress businesses.