Como Usar Shortcodes em Seus Temas do WordPress

Temos usado shortcodes em temas do WordPress por anos, e eles se tornaram uma parte padrão de como construímos sites.

Eles resolvem um problema direto: como adicionar a mesma funcionalidade em vários lugares sem duplicar código ou tornar seus arquivos de tema mais difíceis de gerenciar.

Shortcodes permitem que você crie trechos de código simples e reutilizáveis que funcionam em qualquer lugar do seu site.

Se você precisa exibir conteúdo personalizado, adicionar formulários ou criar elementos interativos, os shortcodes fornecem uma maneira limpa de adicionar essa funcionalidade e usá-la onde for necessário.

Neste guia, mostraremos como usar shortcodes em seus temas usando diferentes métodos.

Por que usar Shortcodes em seus Temas do WordPress?

Shortcodes podem adicionar todos os tipos de recursos ao seu site, incluindo galerias de imagens, formulários, feeds de mídia social e muito mais.

O WordPress vem com alguns shortcodes integrados, mas também existem muitos plugins populares do WordPress que adicionam shortcodes ao seu site.

Por exemplo, WPForms tem blocos fáceis de usar, mas também fornece shortcodes para que você possa adicionar formulários a outras áreas do seu site.

Na maioria das vezes, você adicionará shortcodes dentro de áreas de conteúdo como posts e páginas.

Para saber mais, consulte nosso guia completo sobre como adicionar um shortcode no WordPress.

No entanto, às vezes, você pode querer usar um shortcode dentro dos arquivos do seu tema do WordPress.

Isso permite que você adicione elementos dinâmicos a áreas que não pode editar usando o editor de posts padrão do WordPress, como sua página de arquivo. É também uma maneira fácil de usar o mesmo shortcode em várias páginas.

Por exemplo, você pode adicionar um shortcode ao modelo de Página ou Post do seu tema.

Com isso em mente, vamos ver como você pode usar shortcodes no seu tema do WordPress. Simplesmente use os links rápidos abaixo para pular diretamente para o método que você deseja usar:

• Método 1: Usando o Editor de Site Completo (Apenas Temas de Bloco)
• Método 2: Editando os Arquivos do Seu Tema do WordPress (Funciona Com Qualquer Tema do WordPress)
• Método 3: Adicionando Shortcode Com um Page Builder (Temas Personalizados)

Método 1: Usando o Editor de Site Completo (Apenas Temas de Bloco)

A maneira mais fácil de adicionar um shortcode do WordPress ao seu tema é usando o editor de site completo. Isso permite que você adicione um bloco de Shortcode a qualquer parte do seu site.

No entanto, este método só funciona com temas baseados em blocos como o Hestia Pro. Se você não estiver usando um tema habilitado para blocos, precisará usar um método diferente.

Para começar, vá para Aparência » Editor no painel do WordPress.

Por padrão, o editor de site completo exibe o modelo de página inicial do seu tema, mas você pode adicionar shortcodes a qualquer modelo.

Para ver todas as opções disponíveis, selecione 'Modelos'.

Agora você pode clicar no modelo de página personalizado que deseja editar.

Como exemplo, adicionaremos um shortcode ao modelo da página 404, mas os passos serão exatamente os mesmos, independentemente do modelo que você selecionar.

O WordPress agora mostrará uma prévia do modelo.

Para adicionar um shortcode, clique no pequeno ícone de lápis.

Com isso feito, clique no ícone azul '+' no canto superior esquerdo do editor de blocos.

Na barra de pesquisa, você precisa digitar 'Shortcode'.

Quando o bloco correto aparecer, arraste e solte-o no modelo do tema.

Agora, você pode colar ou digitar o shortcode que deseja usar.

Depois disso, clique no botão ‘Salvar’.

Agora, basta visitar seu blog WordPress para ver o shortcode em ação.

Método 2: Editando os Arquivos do Seu Tema do WordPress (Funciona Com Qualquer Tema do WordPress)

Você também pode adicionar shortcodes ao seu tema WordPress editando os arquivos do tema. Este método é mais avançado, mas funciona com temas clássicos e de blocos.

Se você nunca adicionou código ao seu site antes, confira nosso guia passo a passo sobre como copiar e colar código no WordPress.

Você pode modificar os arquivos individuais do tema diretamente, mas isso dificulta a atualização do seu tema WordPress sem perder personalizações. Por esse motivo, recomendamos substituir os arquivos do tema criando um tema filho.

Se você está criando um tema personalizado, pode adicionar ou modificar o código nos seus arquivos de tema existentes.

Ao editar os arquivos do seu tema, você não pode adicionar o shortcode no mesmo formato que usa com áreas de conteúdo padrão. Em vez de ver a saída do shortcode, você verá o próprio shortcode na tela.

Isso acontece porque o WordPress não executa shortcodes dentro dos arquivos de template do tema. Em vez disso, você precisará dizer explicitamente ao WordPress para executar o shortcode usando a função do_shortcode.

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

Aqui está um exemplo do código que você adicionará aos arquivos do seu tema WordPress:

echo do_shortcode('[gallery]');

Simplesmente substitua 'gallery' pelo shortcode que você deseja usar.

Se você não tem certeza de onde adicionar o shortcode, consulte nosso guia para iniciantes sobre a hierarquia de templates do WordPress.

Se você estiver adicionando um shortcode com parâmetros extras, precisará usar um trecho de código ligeiramente diferente.

Imagine que você criou um formulário de contato usando o WPForms. Neste caso, você precisará usar o shortcode padrão do WPForms mais o ID do formulário:

echo do_shortcode("[wpforms id='92']");

Solução de problemas: O que fazer quando do_shortcode não está funcionando

Às vezes, você pode adicionar um shortcode a um arquivo de tema, mas a saída do código não aparece no seu site WordPress. Isso geralmente significa que o shortcode depende de um plugin do WordPress ou de algum outro código em seu site.

Se a função do_shortcode não estiver funcionando, certifique-se de que o plugin que fornece o shortcode esteja instalado e ativado, indo para Plugins » Plugins Instalados.

Na imagem a seguir, o WPForms está instalado, mas desativado, portanto, o código echo do_shortcode não funcionará.

Você também pode verificar se um shortcode está disponível adicionando a função shortcode_exists() ao seu arquivo index.php.

No trecho a seguir, estamos verificando se o snippet do WPForms está disponível para uso em nosso site:

if ( shortcode_exists( 'wpforms' ))  {
  echo do_shortcode("[[wpforms id='147']]");
}

Se você ainda não vê a saída do shortcode em seu site, tente limpar o cache do WordPress, pois você pode estar vendo uma versão desatualizada do seu site.

Método 3: Adicionando Shortcode Com um Page Builder (Temas Personalizados)

Outra opção é criar um tema personalizado do WordPress. Este é um método mais avançado, mas permite que você adicione quantos shortcodes desejar a qualquer área do seu tema do WordPress. Você também pode fazer outras alterações para criar exatamente os recursos e o design que deseja.

No passado, você normalmente precisaria seguir um tutorial complicado ou escrever código personalizado para criar um tema personalizado do WordPress. No entanto, agora você pode criar um tema personalizado sem escrever uma única linha de código usando o SeedProd.

SeedProd é o melhor construtor de páginas WordPress e também vem com um construtor de temas, juntamente com kits de sites e templates completos. Ele permite que você crie seus próprios temas usando um editor de arrastar e soltar.

Várias de nossas marcas parceiras criaram seus sites inteiros com ele, e suas equipes adoraram como ele é amigável para iniciantes e fácil de usar.

Para instruções passo a passo, consulte nosso guia sobre como criar um tema personalizado do WordPress (sem código).

Após criar um tema, você pode adicionar shortcodes a qualquer parte do seu site WordPress indo em SeedProd » Theme Builder.

Aqui, encontre o template onde você deseja usar o shortcode.

Em seguida, passe o mouse sobre esse template e clique em ‘Edit Design’ quando ele aparecer.

Isso abrirá o template no construtor de temas do SeedProd.

No menu do lado esquerdo, role até a seção ‘Advanced’. Aqui, encontre o bloco Shortcode e arraste-o para o seu layout.

Na visualização ao vivo, simplesmente clique para selecionar o bloco Shortcode.

Agora você pode adicionar seu shortcode à caixa ‘Shortcode’.

Por padrão, o SeedProd não exibe a saída do shortcode na visualização ao vivo.

Para ver seu shortcode em ação, clique no alternador ‘Show Shortcode Option’.

Depois disso, você pode querer adicionar um estilo à saída do shortcode selecionando a aba ‘Advanced’.

Aqui, você pode alterar o espaçamento, adicionar CSS personalizado e até mesmo adicionar efeitos de animação CSS.

Quando estiver satisfeito com a aparência da página, clique no botão ‘Save’.

Depois disso, selecione ‘Publish’ para tornar o shortcode ativo.

Agora você pode visitar seu site para ver o shortcode personalizado em ação.

Esperamos que este tutorial tenha ajudado você a aprender como usar shortcodes do WordPress em seus temas. Você também pode querer conferir nosso guia sobre como criar uma landing page no WordPress e nosso guia definitivo sobre os elementos de design mais eficazes para 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.