Você deseja adicionar códigos de acesso no WordPress, mas não sabe como começar?
Os códigos de acesso são uma maneira fácil de adicionar conteúdo dinâmico a seus posts, páginas e barras laterais do WordPress. Muitos plugins e temas do WordPress usam códigos de acesso para adicionar conteúdo especializado, como formulários de contato, galerias de imagens, controles deslizantes e muito mais.
Neste artigo, mostraremos a você como adicionar facilmente um shortcode no WordPress. Também mostraremos como criar seus próprios códigos de acesso personalizados no WordPress.
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.
- Adding a Shortcode in WordPress Posts and Pages
- Adding a Shortcode in WordPress Sidebar Widgets
- Adding a Shortcode in Old WordPress Classic Editor
- Adding a Shortcode in WordPress Theme Files
- Adding a Shortcode in Block Theme Files With the Full-Site Editor
- Creating Your Own Custom Shortcode in WordPress
- Shortcodes vs. Gutenberg Blocks
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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Andrew Wilson says
Hi Guys,
Is it possible with this plugin to create a unique QR Code for users that sign up to your website?
i.e. a person registers on the website, and as part of that process the back-end creates a unique QR Code for that user which if scanned by a third party takes them to their profile on the website?
WPBeginner Comments says
You can create QR codes using this guide:
https://www.wpbeginner.com/plugins/how-to-generate-and-add-qr-codes-in-wordpress/
To create it automatically in the way you mentioned may require custom code.
Moinuddin Waheed says
This is very helpful for making our own custom short codes.
I have been using short codes for a while and have thought of making my own short codes to use but was not aware about the process.
I have a bit of coding knowledge and can easily make shortcodes through php functions.
Thanks for the guide.
WPBeginner Support says
You’re welcome, glad our guide was helpful
Administrador
Jiří Vaněk says
Thank you for the detailed instructions. I was able to add the shortcode to Gutenberg but could not use it as a php code. At the same time, it is evidently that simple. A bit smarter again thanks to wpbeginner.
Mohammed says
In Example2 How did you define this shortcode ‘my_ad_code’ thought you didn’t define it as a function?
WPBeginner Support says
That is added with the code add_shortcode at the bottom of the example
Administrador
Mohammed says
❤️❤️
Appreciate for the best Article
Josh says
One picture says “greatings” instead of “greetings”
WPBeginner Support says
Thank you for pointing that out, it works as a good reminder to make sure you spell your shortcodes correctly
Administrador
Maya says
Thanks for sharing such a detailed article keep up the good work!
WPBeginner Support says
You’re welcome, glad you found our guide helpful!
Administrador
abuzar says
your guidence is very easy to learn. thanks you
WPBeginner Support says
You’re welcome!
Administrador
Hugh says
Thanks for the great article. Works like a charm. However, although it is explained on the page link provided in the article, it may have been helpful to many readers if you had reiterated that to create shortcodes yourself (‘How to Create Your Own Custom Shortcode’ section of the article), you simply add the example code provided or your own code to the theme’s (or child theme’s) ‘functions.php’ file. Thanks again!
WPBeginner Support says
Thank you for that feedback!
Administrador
Hafed benchellali says
Thank you for this great article!
WPBeginner Support says
You’re welcome!
Administrador
Susan Benfatto says
Thank you for your tutorial, it was very useful
WPBeginner Support says
Glad it was helpful
Administrador
Rohmah Azim says
Hi
Can you tell me how I can add shortcode to my header?
WPBeginner Support says
You would need to use the method for the theme files from this article and add it to your theme’s header file.
Administrador