7 Dicas Essenciais para Usar Shortcodes no WordPress

Seja você um usuário experiente do WordPress ou um completo iniciante, usar shortcodes pode desbloquear novas maneiras de personalizar seu site sem nenhum conhecimento de codificação.

Shortcodes permitem que você adicione várias funções a posts, páginas e widgets sem realmente escrever nenhum código. Muitos plugins e temas do WordPress também usam shortcodes para adicionar diferentes elementos, como tabelas de preços e calendários de eventos.

Na WPBeginner, usamos consistentemente shortcodes e plugins de shortcode ao construir sites WordPress para nossos clientes ou testá-los para nossos leitores. Ao longo do caminho, aprendemos algumas maneiras de tornar o uso de shortcodes mais fácil e eficaz.

Neste artigo, compartilharemos algumas dicas essenciais para usar shortcodes no WordPress.

O que são Shortcodes no WordPress?

No WordPress, shortcodes são pequenos trechos de código entre colchetes que permitem adicionar conteúdo dinâmico ou funcionalidade aos seus posts, páginas ou widgets.

Aqui está um exemplo:

[example_shortcode]

Quando você adiciona conteúdo a um site WordPress, ele passa automaticamente por verificações de segurança e filtros para garantir que nenhum código prejudicial chegue a posts, páginas ou comentários. Isso significa que você não pode escrever código diretamente nessas áreas.

No entanto, há momentos em que você pode precisar adicionar código específico a essas seções. Shortcodes fornecem uma maneira de fazer isso.

Eles agem como atalhos para adicionar recursos avançados, como sliders responsivos bonitos, formulários de contato, galerias de imagens ou vídeos incorporados, de forma simples e amigável.

Por exemplo, em vez de incorporar manualmente um trecho complexo de HTML ou JavaScript, você pode usar um shortcode para obter o mesmo resultado com apenas uma linha de texto. Isso torna os shortcodes incrivelmente úteis para iniciantes e especialistas.

No entanto, mesmo que os shortcodes sejam fáceis de usar, saber as melhores maneiras de adicioná-los e gerenciá-los pode economizar seu tempo, melhorar seu fluxo de trabalho e prevenir problemas.

Dito isso, vamos dar uma olhada em algumas dicas para usar shortcodes no WordPress. Você pode clicar nos links abaixo para pular para qualquer dica:

• Saiba Quando Não Usar Shortcodes
• Prepare Seus Shortcodes Para o Futuro
• Como Pesquisar Shortcodes no Seu Tema do WordPress
• Usando Shortcodes em Widgets
• Dica 5: Adicionar Shortcode em Arquivos de Tema
• Dica 6: Ocultar um Shortcode Quebrado
• Dica 7: Encontrar Shortcodes Usados em Posts
• Bônus: Erros Comuns de Shortcode a Evitar

Dica 1: Saiba Quando Não Usar Shortcodes

Shortcodes podem ser incrivelmente úteis, mas depender deles para cada post ou página nem sempre é a melhor ideia. Muitos temas do WordPress afirmam ter mais de 200 shortcodes, mas usar muitos deles pode criar problemas a longo prazo.

Por exemplo, se você usar um shortcode de um tema para criar botões de call-to-action (CTA) em suas postagens, você estará se prendendo a esse tema. Se você mudar de tema, esses shortcodes podem parar de funcionar, deixando para trás conteúdo quebrado ou ilegível.

Se você estiver procurando uma maneira de adicionar botões de CTA às suas postagens, deve ler nosso guia sobre como adicionar botões CSS no WordPress sem usar shortcodes.

Você também pode usar o bloco de Botão integrado do WordPress para criar botões de call-to-action sem nenhum código.

Da mesma forma, se você estiver usando shortcodes para elementos repetitivos como anúncios em banner ou texto de assinatura no final de suas postagens, recomendamos considerar uma abordagem diferente. Você pode usar um plugin do WordPress ou trabalhar com um desenvolvedor para adicionar esses elementos ao seu blog.

Este método garante um estilo consistente e facilita a atualização ou remoção de elementos no futuro.

Por fim, lembre-se que os shortcodes espalhados por posts podem ser um incômodo para remover se você decidir parar de usá-los. Editar cada post manualmente consome tempo.

É por isso que é importante ter cuidado com como e onde você usa shortcodes. Limite-se a adicioná-los apenas onde forem necessários, pois o uso excessivo pode criar problemas maiores mais tarde.

Dica 2: Prepare seus Shortcodes para o Futuro

Shortcodes são ótimos, mas se o seu tema os fornece, você pode querer pensar duas vezes antes de usá-los excessivamente.

Isso ocorre porque, se você mudar de tema, é provável que seu novo tema não suporte o mesmo shortcode, deixando você com conteúdo quebrado.

Para evitar esse problema, você pode migrar para um plugin específico do site. Dessa forma, seus shortcodes permanecerão independentes e continuarão funcionando, independentemente do tema que você usar.

Para fazer isso, você pode simplesmente localizar o trecho do shortcode no arquivo functions.php do seu tema e copiá-lo. Em seguida, cole-o em um plugin específico do site para garantir que ele permaneça funcional.

No entanto, editar o arquivo functions.php diretamente não é o ideal, pois um pequeno erro pode travar todo o seu site.

É aqui que o WPCode entra. Na nossa opinião, ele oferece a maneira mais fácil de adicionar um trecho de shortcode ao seu tema.

Ele permite que você adicione código personalizado com apenas alguns cliques e até destaca erros em seus trechos de código.

Testamos completamente o plugin em nosso site e achamos que ele é bastante amigável para iniciantes. Para saber mais, veja nossa análise do WPCode.

Além disso, ele não travará seu site se você adicionar código incorreto acidentalmente, tornando-o uma opção confiável para qualquer pessoa.

Para mais informações, consulte nosso guia sobre como adicionar código personalizado no WordPress.

Dica 3: Como pesquisar por shortcodes no seu tema do WordPress

Para garantir que seus shortcodes permaneçam funcionais, é importante saber como eles se parecem e como encontrá-los no seu tema.

Primeiro, você precisa abrir a pasta do seu tema, que geralmente é encontrada em /wp-content/themes/nome-do-seu-tema/.

Você vai querer procurá-lo dentro do arquivo functions.php, ou se o tema tiver uma pasta 'includes', então dentro dela.

Assim que localizar o arquivo, abra-o e procure pelo termo 'add_shortcode'. Isso ajudará você a localizar todos os shortcodes que estão sendo atualmente usados pelo seu tema do WordPress.

Aqui está um exemplo de como um trecho de shortcode se parece:

function my_shortcode_function() { 
$i = '<p>Hello World!</p>';
return $i;
} 
add_shortcode('my-shortcode', 'my_shortcode_function');

Este código cria um shortcode 'meu-shortcode', que retorna uma saudação de texto simples e pode ser incorporado a uma postagem ou página do WordPress como esta:

[meu-shortcode]

Para mais detalhes, você pode consultar nosso guia sobre como adicionar um shortcode no WordPress.

Dica 4: Usando shortcodes em widgets

Muitos usuários pensam que shortcodes são apenas para postagens e páginas, mas esse não é o caso.

Você também pode usá-los dentro de widgets do WordPress, o que lhe dá ainda mais flexibilidade para adicionar conteúdo dinâmico a barras laterais, rodapés e outras áreas prontas para widgets.

Para fazer isso, visite a página Aparência » Widgets no painel do WordPress e clique no botão ‘Adicionar Bloco’ (+). Isso abrirá o menu de blocos, de onde você precisará adicionar o bloco ‘Shortcode’ (Código Curto).

Para fazer isso, você precisará navegar até o editor correto para o seu tema. Se você estiver usando um tema clássico, vá para Aparência » Widgets no painel do WordPress. Se você usar um tema de blocos, vá para Aparência » Editor em vez disso.

Uma vez que você esteja no editor correto, simplesmente clique no botão ‘Adicionar Bloco’ (+) para abrir o menu de blocos. A partir daí, procure e adicione o bloco ‘Shortcode’ (Código Curto) à sua barra lateral ou outra área de widget.

Lembre-se de que o método acima só funcionará se você estiver usando um tema clássico como Hestia.

No entanto, se você usar um tema de bloco, você poderá adicionar um shortcode a qualquer área de widget usando o editor completo do site.

Para mais detalhes, veja nosso tutorial sobre como usar shortcodes em seus widgets de barra lateral do WordPress.

Dica 5: Adicionar Shortcode em Arquivos de Tema

Precisa adicionar um shortcode fora de posts, páginas ou widgets?

Se você quiser adicionar um shortcode a um arquivo de tema personalizado ou a uma seção específica do seu tema, você pode fazer isso facilmente adicionando o shortcode diretamente ao código do seu tema.

Por exemplo, digamos que você criou um modelo de página personalizado e deseja incluir um slider responsivo usando um shortcode.

Em vez de inserir manualmente o shortcode na área de conteúdo, você pode exibi-lo diretamente no tema. Basta adicionar seu shortcode assim:

<?php echo do_shortcode("[example_shortcode]"); ?>

Essa técnica é útil quando você deseja incorporar shortcodes em áreas como páginas personalizadas, cabeçalhos, rodapés ou outras partes do seu tema que não estão vinculadas ao editor de conteúdo típico.

Se precisar de ajuda, consulte nosso guia sobre colar snippets da web no WordPress.

Dica 6: Ocultar um Shortcode Quebrado

Frequentemente, os usuários mudam seus temas sem perceber que seus antigos shortcodes não funcionarão. Às vezes, eles descobrem meses depois, quando um usuário visita sua postagem antiga e encontra um texto estranho lá.

Bem, você tem duas maneiras de consertar isso. Você pode remover manualmente o shortcode quebrado de cada postagem ou ocultá-lo. Recomendamos ocultá-lo porque é uma solução mais rápida.

Para fazer isso, você precisará instalar e ativar o plugin WPCode. Após a ativação, visite a página Code Snippets » + Add Snippet e escolha a opção ‘Add New Custom Code (New Snippet)’

Isso o levará à página ‘Create Custom Snippet’, onde você terá que escolher a opção ‘PHP Snippet’ no menu suspenso.

Em seguida, adicione o seguinte código na caixa ‘Code Preview’ e alterne o switch ‘Inactive’ para ‘Active.’

add_shortcode( 'shortcodetag', '__return_false' );

Não se esqueça de substituir shortcodetag pelo nome do seu shortcode. Finalmente, clique no botão ‘Save Snippet’ para salvar suas configurações.

Este código agora adicionará de volta o shortcode órfão sem nenhuma saída.

Dica 7: Encontrar Shortcodes Usados em Posts

Se você não quiser usar o truque na Dica 6 e quiser remover todos os shortcodes manualmente, o primeiro passo é encontrar todas as postagens que usam o shortcode.

Para fazer isso, adicione o seguinte código no arquivo functions.php do seu tema ou no WPCode:

function wpb_find_shortcode($atts, $content=null) {
ob_start();
extract( shortcode_atts( array(
		'find' => '',
	), $atts ) );

$string = $atts['find'];

$args = array(
	's' => $string,
	);

$the_query = new WP_Query( $args );

if ( $the_query->have_posts() ) {
        echo '<ul>';
	while ( $the_query->have_posts() ) {
	$the_query->the_post(); ?>
	<li><a href="<?php  the_permalink() ?>"><?php the_title(); ?></a></li>
	<?php
	}
        echo '</ul>';
} else {
        echo "Sorry no posts found";
}

wp_reset_postdata();
return ob_get_clean();
}
add_shortcode('shortcodefinder', 'wpb_find_shortcode');

Este código simplesmente cria um shortcode chamado shortcodefinder. Ele executa uma consulta do WordPress e lista postagens com uma tag de shortcode específica.

Por exemplo, se você quisesse encontrar todas as postagens contendo o shortcode [contact-form], você simplesmente digitaria [shortcodefinder find=’contact-form’] em uma página do WordPress e a salvaria. Agora, se você pré-visualizar a página, poderá ver todas as postagens contendo o shortcode.

Para instruções mais detalhadas, confira nosso guia sobre como encontrar e ocultar shortcodes não utilizados no WordPress.

Bônus: Erros Comuns de Shortcode a Evitar

Embora os shortcodes sejam úteis e necessários para muitos sites, os usuários frequentemente cometem alguns erros comuns ao trabalhar com eles.

Esses erros podem levar a funcionalidades quebradas, código confuso ou baixo desempenho do site. Aqui estão cinco erros importantes a serem observados e como evitá-los:

• Sobrecarga de Páginas com Muitos Shortcodes: Usar muitos shortcodes em uma única página pode levar a tempos de carregamento lentos e um design confuso. É por isso que recomendamos limitar o uso de shortcodes a elementos essenciais.
• Aninhando Shortcodes Incorretamente: Shortcodes aninhados (usando um shortcode dentro de outro) podem ser complicados e causar problemas como um shortcode não funcionar ou uma página exibir conteúdo incorreto. Se você precisar aninhar shortcodes, teste-os primeiro para garantir que sejam exibidos como esperado.
• Esquecendo de Fechar Shortcodes Corretamente: Às vezes, os usuários esquecem de fechar shortcodes, o que pode quebrar o layout de uma postagem ou página. É por isso que você deve sempre garantir que seu shortcode seja aberto e fechado corretamente com colchetes. Para shortcodes de uso único, certifique-se de não deixar espaços ou símbolos extras.
• Usando Shortcodes em Áreas Não Suportadas: Certas áreas do WordPress podem não suportar shortcodes por padrão. Tentar usar um shortcode lá pode resultar em conteúdo quebrado ou invisível. Antes de inserir shortcodes em widgets ou campos personalizados, verifique se a área os suporta. Frequentemente, você pode usar um plugin para habilitar shortcodes em áreas não suportadas.
• Não Testando Shortcodes em Dispositivos Móveis: Muitos usuários esquecem de verificar como os elementos criados com shortcodes aparecem em dispositivos móveis. O que parece ótimo em um desktop pode quebrar ou aparecer mal em telas de celular. Sempre visualize suas páginas e postagens em vários dispositivos para garantir que a saída do shortcode seja responsiva.

Ao evitar esses erros comuns e seguir estas dicas, você pode ter uma experiência mais tranquila ao usar shortcodes em seu site WordPress.

Esperamos que estas dicas tenham ajudado você a aprender como usar shortcodes e aproveitá-los ao máximo no WordPress. Você também pode querer ver nosso guia para iniciantes sobre como copiar e colar no WordPress sem problemas de formatação e nossas dicas de especialistas para dominar o editor de conteúdo do WordPress.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.