Como Adicionar um Shortcode no WordPress (Guia para Iniciantes)

Frequentemente ouvimos de usuários que se sentem sobrecarregados com os shortcodes do WordPress.

Esses pequenos trechos de código podem parecer confusos no início, mas na verdade são um dos recursos mais poderosos do WordPress quando usados corretamente.

Quer você queira adicionar formulários de contato, galerias ou layouts personalizados, os shortcodes oferecem uma maneira fácil de inserir recursos complexos sem tocar em nenhum código.

Neste guia amigável para iniciantes, mostraremos exatamente como adicionar shortcodes no WordPress, onde colocá-los e as melhores maneiras de usá-los.

Dividimos tudo em etapas simples e fáceis de seguir que qualquer um pode entender, mesmo que você seja completamente novo no WordPress.

O Que São Shortcodes?

Shortcodes no WordPress são atalhos de código que ajudam você a adicionar conteúdo dinâmico a posts, páginas e widgets de barra lateral do WordPress. Eles são exibidos entre colchetes assim:

[meushortcode]

Para entender melhor os shortcodes, vamos dar uma olhada no histórico de por que eles foram adicionados em primeiro lugar.

O WordPress filtra todo o conteúdo para garantir que ninguém use posts e conteúdo de páginas para inserir código malicioso no banco de dados. Isso significa que você pode escrever HTML básico em seus posts, mas não pode escrever código PHP.

Mas e se você quisesse executar algum código personalizado dentro de suas postagens para exibir posts relacionados, anúncios, formulários de contato, galerias ou algo mais?

É aqui que entra a API de Shortcode.

Basicamente, ela permite que os desenvolvedores adicionem seu código dentro de uma função e, em seguida, registrem essa função no WordPress como um shortcode, para que os usuários possam usá-lo facilmente sem ter nenhum conhecimento de codificação.

Quando o WordPress encontra o shortcode, ele executa automaticamente o código associado a ele.

Vamos ver como adicionar shortcodes facilmente às suas postagens e páginas do WordPress.

Você pode usar os links abaixo para pular para o seu método preferido:

• Adicionando um Shortcode em Postagens e Páginas do WordPress
• Adicionando um Shortcode em Widgets de Barra Lateral do WordPress
• Adicionando um Shortcode no Editor Clássico Antigo do WordPress
• Adicionando um Shortcode em Arquivos de Tema do WordPress
• Adicionando um Shortcode em Arquivos de Tema de Bloco com o Editor de Site Completo
• Creating Your Own Custom Shortcode in WordPress
• Shortcodes vs. Blocos do Gutenberg
• Perguntas Frequentes Sobre Shortcodes

Adicionando um Shortcode em Postagens e Páginas do WordPress

Primeiro, você precisa editar a postagem e a página onde deseja adicionar o shortcode.

Depois disso, você precisa clicar no botão de adicionar bloco '+' para inserir um bloco de Shortcode.

Após adicionar o bloco de Shortcode, você pode simplesmente inserir seu shortcode nas configurações do bloco.

O shortcode será fornecido por vários plugins do WordPress que você pode estar usando, como o WPForms para formulários de contato.

Para saber mais sobre o uso de blocos, consulte nosso tutorial do editor de blocos Gutenberg para mais detalhes.

Agora você pode salvar sua postagem ou página e visualizar suas alterações para ver o shortcode em ação.

Adicionando um Shortcode em Widgets de Barra Lateral do WordPress

Você também pode usar shortcodes em widgets da barra lateral do WordPress.

Simplesmente visite a página Aparência » Widgets e adicione um bloco de widget de 'Shortcode' a uma barra lateral.

Agora, você pode colar seu shortcode dentro da área de texto do widget.

Não se esqueça de clicar no botão 'Atualizar' para salvar as configurações do seu widget.

Depois disso, você pode visitar seu site WordPress para ver a prévia ao vivo do shortcode no widget da barra lateral.

Adicionando um Shortcode no Editor Clássico Antigo do WordPress

Se você ainda está usando o antigo editor clássico, você pode adicionar shortcodes diretamente na área de conteúdo.

Simplesmente edite a postagem ou página e cole o shortcode onde você deseja que o recurso apareça.

Para melhores resultados, recomendamos colocá-lo em sua própria linha, especialmente para shortcodes que adicionam elementos grandes como formulários ou galerias. Isso ajuda a evitar problemas de formatação.

Não se esqueça de salvar suas alterações. Você pode então pré-visualizar sua postagem para ver o shortcode em ação.

Adicionando um Shortcode em Arquivos de Tema do WordPress

Shortcodes são feitos para serem usados dentro de postagens, páginas e widgets do WordPress. No entanto, às vezes, você pode querer usar um shortcode dentro de um arquivo de tema do WordPress.

O WordPress facilita isso, mas você precisará editar os arquivos do seu tema do WordPress. Se você nunca fez isso antes, consulte nosso guia sobre como copiar e colar código no WordPress.

Basicamente, você pode adicionar um shortcode a qualquer modelo de tema do WordPress simplesmente adicionando o seguinte código:

<?php echo do_shortcode('[your_shortcode]'); ?>

O WordPress agora procurará o shortcode e exibirá sua saída no seu modelo de tema.

Adicionando um Shortcode em Arquivos de Tema de Bloco com o Editor de Site Completo

Se você estiver usando um tema de blocos, achará mais fácil adicionar shortcodes nos arquivos do seu tema WordPress usando o editor de site completo.

Você pode acessar esta ferramenta selecionando Aparência » Editor no painel do WordPress.

Por padrão, você verá o modelo inicial do seu tema e poderá alternar para outros modelos selecionando a opção ‘Modelos’.

Depois de escolher um modelo, você pode começar a editá-lo clicando no painel direito do editor. O editor agora preencherá a tela.

Agora você pode clicar no ícone do inseridor de blocos ‘+’ e procurar pelo bloco de shortcode. Depois disso, basta arrastá-lo para o modelo e digitar o shortcode que deseja usar.

Não se esqueça de clicar no botão ‘Salvar’ na parte superior da tela para armazenar suas alterações.

Criando Seu Próprio Shortcode Personalizado no WordPress

Shortcodes podem ser muito úteis quando você deseja adicionar conteúdo dinâmico ou código personalizado dentro de posts e páginas do WordPress. No entanto, se você quiser criar um shortcode personalizado, isso exigirá alguma experiência em codificação.

Se você se sente confortável escrevendo código PHP, aqui está um código de exemplo que você pode usar como modelo:

// function that runs when shortcode is called
function wpb_demo_shortcode() { 
 
// Things that you want to do.
$message = 'Hello world!'; 
 
// Output needs to be return
return $message;
}
// register shortcode
add_shortcode('greeting', 'wpb_demo_shortcode');

Neste código, primeiro criamos uma função que executa algum código e retorna a saída. Depois disso, criamos um novo shortcode chamado ‘greeting’ e dissemos ao WordPress para executar a função que criamos.

Você pode adicionar este código ao arquivo functions.php do seu tema manualmente ou usar um plugin de trecho de código como o WPCode (recomendado).

Recomendamos a segunda opção porque o WPCode é a maneira mais segura e fácil de adicionar código ao seu site. Para saber mais, veja nossa análise do WPCode.

Para mais detalhes, você pode ver nosso guia sobre como adicionar código personalizado no WordPress sem quebrar nada.

Depois de fazer isso, você pode adicionar este shortcode às suas postagens, páginas e widgets usando o seguinte código:

[saudacao]

Ele executará a função que você criou e mostrará a saída desejada.

Embora este exemplo seja simples, o verdadeiro poder dos shortcodes é para reutilizar código complexo.

Ao encapsular um script longo em um shortcode, você mantém seu editor de conteúdo limpo e torna as atualizações em todo o site muito mais fáceis. Você só precisa editar o código em um lugar.

Exemplo Prático: Shortcode do Google AdSense

Agora, vamos ver um exemplo mais prático.

Você pode usar um shortcode para facilmente exibir um banner do Google AdSense em qualquer lugar do seu site.

// The shortcode function
function wpb_demo_shortcode_2() { 
 
// Advertisement code pasted inside a variable
$string .= '<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-format="fluid"
     data-ad-layout="in-article"
     data-ad-client="ca-pub-0123456789101112"
     data-ad-slot="9876543210"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>';
 
// Ad code returned
return $string; 
 
}
// Register shortcode
add_shortcode('my_ad_code', 'wpb_demo_shortcode_2'); 

Certifique-se de substituir o código de anúncio de exemplo pelo seu. Agora você pode usar o shortcode [my_ad_code] para exibir o anúncio em qualquer post, página ou área de widget.

Shortcodes vs. Blocos do Gutenberg

Blocos Gutenberg e shortcodes permitem adicionar conteúdo dinâmico ao seu site WordPress. A principal diferença é que os blocos oferecem uma interface visual, enquanto os shortcodes são trechos baseados em texto que você cola em um bloco específico.

Muitos plugins populares do WordPress começaram a usar blocos em vez de shortcodes. Isso ocorre porque os blocos são geralmente mais fáceis para iniciantes e permitem que você veja uma prévia do resultado final diretamente no editor.

Reunimos uma lista dos plugins de blocos Gutenberg mais úteis para WordPress que você pode querer experimentar.

Se você quiser criar seus próprios blocos Gutenberg personalizados, pode seguir nosso tutorial passo a passo sobre como criar blocos Gutenberg personalizados no WordPress.

Perguntas Frequentes Sobre Shortcodes

Aqui no WPBeginner, frequentemente recebemos perguntas sobre como os shortcodes funcionam. Abaixo estão as respostas para algumas das mais comuns.

Shortcodes ainda são relevantes com o editor de blocos?

Sim, absolutamente. Embora muitos plugins mais novos usem blocos dedicados, milhares de outros plugins ainda usam shortcodes para permitir que você adicione funcionalidades ao seu conteúdo. Você ainda os achará úteis por muito tempo, e é por isso que o WordPress inclui um bloco Shortcode dedicado.

Shortcodes podem deixar meu site lento?

Um shortcode é tão rápido quanto o código que ele executa. Um shortcode bem codificado de um plugin confiável terá um impacto mínimo no desempenho do seu site.

No entanto, usar muitos shortcodes que carregam muitos scripts em uma única página pode, às vezes, causar lentidão.

Como encontro o shortcode de um plugin?

A maioria dos plugins exibirá seu shortcode em sua página de configurações, documentação ou diretamente na interface do editor. Por exemplo, WPForms facilita a cópia do shortcode de um formulário assim que você o salva.

Posso usar shortcodes em page builders como o SeedProd?

Sim, todos os principais page builders como SeedProd possuem um bloco ou widget dedicado de 'Shortcode'. Você pode simplesmente arrastar o bloco para o seu layout e colar o shortcode que deseja exibir.

Esperamos que este artigo tenha ajudado você a aprender como adicionar um shortcode no WordPress. Você também pode querer ver nosso guia sobre como mostrar e ocultar texto em posts do WordPress com o efeito de alternância e nosso tutorial sobre como copiar e colar no WordPress sem problemas de formatação.

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.