Como adicionar um código curto no WordPress (guia para iniciantes)

Imagine poder adicionar coisas novas ao seu site WordPress, como apresentações de slides, formulários de contato ou até mesmo listas especiais, apenas digitando um código simples. Esse é o poder dos códigos de acesso.

Você verá que muitos plug-ins e temas do WordPress podem usar códigos de acesso para adicionar recursos extras ao seu site. Muitos de nossos leitores nos perguntam qual é a melhor maneira de adicioná-los a seus posts, páginas e barra lateral.

Neste artigo, mostraremos como usar códigos de acesso em seu site WordPress, passo a passo. Mostraremos até mesmo como criar códigos de acesso personalizados se você quiser ser realmente criativo.

O que são códigos curtos?

Os códigos de acesso no WordPress são atalhos de código que ajudam você a adicionar conteúdo dinâmico a posts, páginas e widgets da barra lateral do WordPress. Eles são exibidos dentro de colchetes como este:

[myshortcode]

Para entender melhor os códigos de acesso, vamos dar uma olhada no histórico do motivo pelo qual eles foram adicionados em primeiro lugar.

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

Mas e se você quisesse executar algum código personalizado dentro das suas postagens para exibir postagens relacionadas, anúncios em banner, formulários de contato, galerias ou qualquer outra coisa?

É aqui que entra a API Shortcode.

Basicamente, ele 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 encontrar o shortcode, ele executará automaticamente o código associado a ele.

Vamos ver como adicionar facilmente códigos de acesso às suas postagens e páginas do WordPress. Você pode usar os links abaixo para ir para o método de sua preferência.

Adição de um código curto em posts e páginas do WordPress

Primeiro, você precisa editar o post e a página em que deseja adicionar o shortcode.

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

Depois de adicionar o bloco Shortcode, basta inserir seu shortcode nas configurações do bloco.

O shortcode será fornecido por vários plug-ins do WordPress que você pode estar usando, como o WPForms para formulários de contato ou o OptinMonster para marketing por e-mail.

Para saber mais sobre como usar blocos, consulte nosso tutorial do Gutenberg para obter mais detalhes.

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

Adição de um código curto nos widgets da barra lateral do WordPress

Você também pode usar códigos de acesso nos widgets da barra lateral do WordPress.

Basta acessar a página Appearance ” Widgets e adicionar um bloco de widget “Shortcode” a uma barra lateral.

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

Não se esqueça de clicar no botão “Update” (Atualizar) para armazenar as configurações do widget.

Depois disso, você pode visitar seu site do WordPress para ver a visualização ao vivo do shortcode no widget da barra lateral.

Adição de um código curto no antigo editor clássico do WordPress

Se você ainda estiver usando o antigo editor clássico do WordPress, veja como adicionar códigos de acesso às suas postagens e páginas do WordPress.

Basta editar o post e a página em que você deseja adicionar o shortcode. Você pode colar o shortcode em qualquer lugar dentro do editor de conteúdo onde deseja que ele seja exibido. Apenas certifique-se de que o shortcode esteja em sua própria linha.

Não se esqueça de salvar suas alterações. Depois disso, você pode visualizar sua postagem e página para ver o shortcode em ação.

Adição de um código curto nos arquivos de tema do WordPress

Os códigos de acesso devem ser usados em posts, páginas e widgets do WordPress. No entanto, às vezes, você pode querer usar um shortcode em um arquivo de tema do WordPress.

O WordPress facilita essa tarefa, mas você precisará editar os arquivos de 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 modelo do tema.

Adição de um código curto em arquivos de tema de bloco com o Full-Site Editor

Se estiver usando um tema de bloco, será mais fácil adicionar códigos de acesso nos arquivos de tema do WordPress usando o editor de site completo.

Você pode acessar essa ferramenta selecionando Appearance ” 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 “Templates”.

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 de inserção de bloco “+” e procurar o 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 “Save” (Salvar) na parte superior da tela para armazenar suas alterações.

Criando seu próprio código de acesso personalizado no WordPress

Os códigos de acesso podem ser muito úteis quando você deseja adicionar conteúdo dinâmico ou código personalizado dentro das postagens e páginas do WordPress. No entanto, se você quiser criar um shortcode personalizado, será necessário ter alguma experiência em codificação.

Se você se sente à vontade para escrever código PHP, aqui está um exemplo de código que pode ser usado 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');

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

Você pode adicionar esse código ao arquivo functions.php do seu tema manualmente ou usar um plug-in de snippet de código como o WPCode.

Para obter mais detalhes, consulte nosso guia para adicionar código personalizado no WordPress sem quebrar nada.

Depois de fazer isso, você pode adicionar esse shortcode a seus posts, páginas e widgets usando o seguinte código:

[saudação]

Ele executará a função que você criou e mostrará o resultado desejado.

Agora, vamos dar uma olhada em um uso mais prático de um shortcode.

Neste exemplo, exibiremos um banner do Google AdSense em um shortcode:

// 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'); 

Não se esqueça de substituir o código do anúncio por seu próprio código de anúncio.

Agora você pode usar o shortcode [my_ad_code] em seus posts, páginas e widgets da barra lateral do WordPress. O WordPress executará automaticamente a função associada ao shortcode e exibirá o código do anúncio.

Shortcodes vs. Blocos do Gutenberg

Os usuários nos perguntam com frequência sobre as diferenças entre os códigos de acesso e os blocos do Gutenberg.

Basicamente, os blocos permitem que você faça o mesmo que os códigos de acesso, mas de uma forma mais fácil de usar.

Em vez de exigir que os usuários adicionem um shortcode para exibir conteúdo dinâmico, os blocos permitem que os usuários adicionem conteúdo dinâmico dentro de posts/páginas com uma interface de usuário mais intuitiva. Muitos plug-ins populares do WordPress passaram a usar blocos em vez de códigos de acesso porque são mais fáceis de usar para iniciantes.

Reunimos uma lista dos plug-ins de bloco Gutenberg mais úteis para o WordPress que você pode querer experimentar.

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

Esperamos que este artigo tenha ajudado você a aprender como adicionar um shortcode no WordPress. Talvez você também queira ver nosso guia sobre como criar um tema personalizado do WordPress sem escrever nenhum código e nossa seleção de especialistas dos melhores plug-ins de arrastar e soltar do construtor de páginas do WordPress.

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