Shortcode

Shortcode WordPress é um código curto entre colchetes que executa funções complexas com uma linha simples. Em vez de o usuário escrever HTML complicado ou copiar JavaScript em cada página, ele insere algo como [contact-form-7 id=123] e o WordPress substitui pelo formulário inteiro renderizado. Plugins usam shortcodes para injetar funcionalidades em qualquer parte do conteúdo: galerias, formulários, players, tabelas de preço, calls-to-action.

O que é um shortcode

Shortcode é uma macro do WordPress: uma string entre colchetes que, quando aparece no conteúdo, é substituída por código mais complexo no momento de exibir a página. Foi introduzida no WordPress 2.5, em 2008, como solução para o problema de inserir blocos dinâmicos em posts sem que o usuário precisasse escrever HTML, JavaScript ou PHP.

O exemplo clássico é a galeria. Você seleciona imagens da biblioteca de mídia e o WordPress insere no conteúdo. Quando o post é exibido, o shortcode é processado e o navegador recebe o HTML completo da galeria, com estrutura, classes CSS e JavaScript necessários. O autor do post nunca precisou ver código.

Shortcodes wordpress proliferaram com a explosão de plugins. Hoje, praticamente qualquer plugin que precise inserir conteúdo dinâmico em posts oferece um shortcode próprio. Contact Form 7 usa [contact-form-7]. WooCommerce usa

. Yoast SEO oferece [yoast-breadcrumb]. O ecossistema inteiro adotou o padrão.

O sucessor moderno do shortcode é o bloco Gutenberg, com interface visual e configuração mais rica. Mas shortcodes continuam essenciais em milhões de sites WordPress legados, em widgets de sidebar, em templates de tema e em qualquer lugar onde o editor de blocos não chega. A pergunta sobre o que é shortcode ainda é frequente porque o conceito ainda permeia o WordPress.

Como funcionam os shortcodes

Tecnicamente, um shortcode é uma função PHP registrada no WordPress por meio da função add_shortcode. Você passa dois argumentos: a tag (palavra que vai entre os colchetes) e o callback (função que será chamada quando o shortcode aparecer). O WordPress se encarrega do resto.

O fluxo durante a exibição: o WordPress carrega o post do banco, processa o conteúdo e busca por padrões no formato [tag]. Quando encontra uma tag registrada, chama a função callback associada, passando os atributos do shortcode (se houver) e o conteúdo entre tags abertas e fechadas (em shortcodes envolventes). A função retorna HTML que substitui o shortcode no conteúdo final.

Existem dois formatos. Auto-fechantes: [contact-form-7 id=123]. O shortcode tem atributos mas não envolve conteúdo. Envolventes: [highlight]texto destacado[/highlight]. O shortcode tem abertura e fechamento, e processa o conteúdo entre as tags. Ambos são suportados desde a primeira versão da API.

Atributos passam parâmetros para o callback. [meu-shortcode cor=”vermelho” tamanho=”grande”] manda dois argumentos para a função, que pode usar para variar o output. É como funções comuns, mas chamadas de dentro do conteúdo do post pelo autor.

Cuidado com performance: cada shortcode no conteúdo dispara uma função PHP no carregamento da página. Plugins mal escritos com shortcodes pesados (consultas ao banco, chamadas externas) podem deixar páginas lentas. Combine com cache WordPress para mitigar o impacto, especialmente em sites com tráfego alto.

Como criar um shortcode personalizado

Como criar shortcode personalizado é tarefa simples para quem mexe com PHP. Adicione o código no functions.php do child theme, ou em plugin WordPress próprio (recomendado para portabilidade). A receita básica tem três passos.

Passo um: definir a função de callback. Crie uma função PHP que retorna HTML. Por exemplo, uma função que devolve um botão estilizado: function meu_botao_callback($atts, $content = null) { return texto_html_do_botao; }. A função pode receber atributos via shortcode_atts e processar conteúdo entre tags.

Passo dois: registrar o shortcode. Use add_shortcode passando a tag desejada e o nome da função: add_shortcode(‘meu-botao’, ‘meu_botao_callback’). A partir desse momento, qualquer post ou página que contiver [meu-botao] será processado pela sua função.

Passo três: usar no conteúdo. No editor do WordPress, escreva [meu-botao] em qualquer post, página, descrição de produto ou widget de texto. Visualize a página: o shortcode aparece substituído pelo HTML retornado.

Para shortcodes com atributos: defina os defaults no callback usando shortcode_atts. Algo como $a = shortcode_atts(array(‘cor’ => ‘azul’, ‘texto’ => ‘Clique’), $atts). Isso permite ao usuário escrever [meu-botao cor=”vermelho” texto=”Comprar”] ou simplesmente [meu-botao] (que usará os defaults).

Para shortcodes envolventes: o segundo parâmetro do callback recebe o conteúdo entre tags. Útil para criar shortcodes de destaque, alerta, caixa estilizada. Exemplo: [alerta]Atenção, oferta acabando![/alerta]. A função processa o texto entre tags e retorna HTML formatado ao redor.

Diferença entre shortcode e bloco Gutenberg

Shortcode e bloco Gutenberg resolvem o mesmo problema (inserir conteúdo dinâmico em posts) com tecnologias e abordagens diferentes. Entender quando usar cada um é decisão prática que afeta manutenção e usabilidade do site.

Shortcode é interface por texto: você digita [contact-form-7 id=123] no editor. Sem preview visual durante edição, sem auto-complete de atributos, sem validação imediata. O autor precisa lembrar a sintaxe ou copiar de algum lugar. Funciona em qualquer editor (Gutenberg, Classic Editor, Elementor, Bricks, widgets de sidebar).

Bloco Gutenberg é interface visual: você adiciona um bloco do plugin pelo menu de blocos, configura via campos no painel lateral, vê preview em tempo real no editor. Mais amigável, mas só funciona dentro do editor de blocos. Em widgets clássicos ou em page builder de terceiros, blocos não rodam.

Shortcode é mais flexível tecnicamente: pode ser inserido em qualquer lugar onde o WordPress processe shortcodes (incluindo descrições de produto, e-mails de notificação, mensagens de tema). Bloco Gutenberg é mais limitado, mas oferece UX superior dentro do editor.

Plugins modernos costumam oferecer os dois: o bloco para uso visual no editor, e o shortcode equivalente para casos de uso em outros contextos. É a abordagem que combina o melhor dos mundos.

Para quem está começando hoje, blocos Gutenberg são o caminho preferido para a maioria dos casos. Mas conhecer shortcode continua valendo: muito plugin antigo só oferece shortcode, e o conceito ainda é central no WordPress.

Para projetos profissionais que precisam de page builder com biblioteca completa de elementos visuais, theme builder e widgets avançados, a FULL Services entrega o Elementor PRO já licenciado e configurado dentro da stack profissional, com dezenas de widgets dinâmicos que substituem a necessidade de shortcodes em muitos casos. Em vez de o cliente memorizar shortcodes e configurar plugin por plugin, roda em uma stack que cobre criação visual completa do site.