Deseja usar códigos de acesso em seu tema do WordPress?
Normalmente, você usará códigos de acesso dentro de áreas de conteúdo como posts, páginas ou widgets da barra lateral. No entanto, às vezes, você pode querer adicionar um shortcode dentro do tema do WordPress.
Neste artigo, mostraremos como adicionar facilmente qualquer shortcode ao seu tema do WordPress.
Por que usar códigos de acesso em seus temas do WordPress?
Os códigos curtos podem adicionar todos os tipos de recursos ao seu site, inclusive galerias de imagens, formulários, feeds de mídia social e muito mais.
O WordPress vem com alguns códigos de acesso incorporados, mas também há muitos plug-ins populares do WordPress que adicionam códigos de acesso ao seu site.
Por exemplo, o WPForms tem blocos fáceis de usar, mas também fornece códigos de acesso para que você possa adicionar formulários a outras áreas do seu site.
Na maioria das vezes, você adicionará códigos de acesso 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 nos arquivos do tema do WordPress.
Isso permite que você adicione elementos dinâmicos a áreas que não podem ser editadas usando o editor de postagens padrão do WordPress, como a 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 de postagem do seu tema.
Com isso em mente, vamos ver como você pode usar os códigos de acesso em seu tema do WordPress. Basta usar os links rápidos abaixo para ir direto ao método que você deseja usar:
Método 1: Usar o Full-Site Editor (somente temas de blocos)
A maneira mais fácil de usar códigos de acesso em seu tema do WordPress é usar o editor completo do site. Isso permite que você adicione um bloco de Shortcode a qualquer parte do seu site.
No entanto, esse método só funciona com temas baseados em blocos, como o Hestia Pro. Se não estiver usando um tema habilitado para blocos, será necessário usar um método diferente.
Para começar, vá para Appearance ” Editor no painel do WordPress.
Por padrão, o editor de site completo mostra o modelo inicial do seu tema, mas você pode adicionar códigos de acesso a qualquer modelo.
Para ver todas as opções disponíveis, selecione “Templates”.
Agora você pode clicar no modelo que deseja editar.
Como exemplo, adicionaremos um shortcode ao modelo de página 404, mas as etapas serão exatamente as mesmas, independentemente do modelo que você selecionar.
O WordPress agora mostrará uma visualização do modelo.
Para adicionar um shortcode, clique no ícone de lápis pequeno.
Feito isso, clique no ícone azul “+” no canto superior esquerdo.
Na barra de pesquisa, você precisa digitar “Shortcode”.
Quando o bloco certo aparecer, arraste-o 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 acessar seu blog do WordPress para ver o shortcode em ação.
Método 2: Edição dos arquivos do tema do WordPress (funciona com qualquer tema do WordPress)
Você também pode adicionar códigos de acesso ao seu tema do WordPress editando os arquivos do tema. Esse método é mais avançado, mas funciona com todos os temas do WordPress.
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 de temas individuais diretamente, mas isso dificulta a atualização do tema do WordPress sem perder a personalização. Por esse motivo, recomendamos substituir os arquivos de tema criando um tema filho.
Se você estiver criando um tema personalizado, poderá adicionar ou modificar o código nos arquivos de tema existentes.
Ao editar os arquivos do tema, não é possível adicionar o shortcode no mesmo formato usado com as á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 de arquivos de modelo de tema. Em vez disso, você precisará informar explicitamente ao WordPress para executar o shortcode usando a função do_shortcode.
Para obter mais informações, consulte nosso guia sobre como adicionar facilmente códigos personalizados.
Aqui está um exemplo do código que você adicionará aos arquivos de tema do WordPress:
echo do_shortcode('[gallery]');
Basta substituir “gallery” pelo shortcode que você deseja usar.
Se você não tiver certeza de onde adicionar o shortcode, consulte nosso guia para iniciantes sobre a hierarquia de modelos do WordPress.
Se estiver adicionando um shortcode com parâmetros extras, será necessário usar um trecho de código ligeiramente diferente.
Imagine que você tenha criado um formulário de contato usando o WPForms. Nesse 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 o 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 em seu site do WordPress. Isso geralmente significa que o shortcode depende de um plug-in do WordPress ou de algum outro código em seu site.
Se a função do_shortcode não estiver funcionando, verifique se o plug-in que fornece o shortcode está instalado e ativado acessando 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 snippet a seguir, estamos verificando se o snippet WPForms está disponível para uso em nosso site:
if ( shortcode_exists( 'wpforms' )) {
echo do_shortcode("[[wpforms id='147']]");
}
Se ainda assim não vir 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: Criar seu próprio tema do WordPress (totalmente personalizável)
Outra opção é criar um tema personalizado do WordPress. Esse é um método mais avançado, mas permite que você adicione quantos códigos de acesso quiser 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 precisava seguir um tutorial complicado ou escrever um código personalizado para criar um tema personalizado para o WordPress. No entanto, agora você pode criar um tema personalizado sem escrever uma única linha de código usando o SeedProd.
O SeedProd é o melhor construtor de páginas do WordPress e também vem com um construtor de temas, além de kits e modelos de sites completos. Isso permite que você crie seus próprios temas usando o recurso de arrastar e soltar.
Para obter instruções passo a passo, consulte nosso guia sobre como criar um tema personalizado do WordPress (sem nenhum código).
Depois de criar um tema, você pode adicionar códigos de acesso a qualquer parte do seu site WordPress acessando SeedProd ” Theme Builder.
Aqui, localize o modelo em que você deseja usar o shortcode.
Em seguida, passe o mouse sobre esse modelo e clique em “Edit Design” quando ele aparecer.
Isso abrirá o modelo no construtor de temas do SeedProd.
No menu do lado esquerdo, role até a seção “Advanced” (Avançado). Aqui, localize o bloco Shortcode e arraste-o para seu layout.
Na visualização ao vivo, basta clicar para selecionar o bloco Shortcode.
Agora você pode adicionar seu shortcode à caixa “Shortcode”.
Por padrão, o SeedProd não mostra a saída do shortcode na visualização ao vivo.
Para ver seu shortcode em ação, clique no botão de alternância “Show Shortcode Option”.
Depois disso, talvez você queira adicionar algum estilo à saída do shortcode selecionando a guia “Advanced” (Avançado).
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, basta clicar no botão “Salvar”.
Depois disso, selecione “Publish” (Publicar) para ativar o shortcode.
Agora você pode visitar seu site para ver o shortcode personalizado em ação.
Esperamos que este tutorial tenha ajudado você a aprender a usar códigos de acesso em seus temas do WordPress. Talvez você também queira conferir nosso guia sobre como criar uma página de destino no WordPress e nossas escolhas de especialistas dos widgets mais úteis para o seu site.
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.
Jiří Vaněk
Is there a way to create a shortcode myself, rather than just inserting one that’s already created by a plugin? Let me give an example. I create a piece of code that I don’t necessarily want to insert everywhere as PHP code. Can I turn that code into a shortcode, which I then simply insert in the desired location, and the entire PHP code hidden within that shortcode gets executed there?
WPBeginner Support
We have a guide on creating your own shortcode that you would want to take a look at below:
https://www.wpbeginner.com/wp-tutorials/how-to-add-a-shortcode-in-wordpress/
Administrador
Jiří Vaněk
Thank you very much for the link; I’ll go check out the article. I have several codes that I would like to turn into shortcodes to make my work easier. Thank you for the link to the article, and also for your work and assistance.
pankaj
I deleted contact form 7 and it is giving error like this [contact-form-7 404 “Not Found”] I don’t want to use the form again but want to remove this error I don’t know where to find that code or shortcode in template file
Sonik
hi,
I have written a shortcode of a gallery plugin in wordpress visual editor, but it is not executing the shortcode, instead it displays the shortcode as it is written.
like if I write [test attr=’hello’], it echoes the same on webpage, not executing.
Thanks.
Michael
This is a fantastic post, thank you, I am just exploring shortcuts now for a website I am doing
Art
It doesn’t work in customizr theme. Anyone facing this issue?
Art
Ok. managed to fix. Turned out the parentheses were breaking it.
Original:
Changed to:
DavidA
Hello, I have two wordpress blogs on multisite.
Do you know, how to use the shortcode on the website 1 from the website 2 ?
Thx
WPBeginner Support
You can create a Network Wide Plugin and then both blogs can use the shortcode.
Administrador
Riaz Kahn
Thanks, Its Working Well.
Dean
Sorry here is the code:
CODE: ——————————————————————————————
echo do_shortcode(“[tabset tab1=”tab 1 title” tab2=”tab 2 title”]
[tab]tab 1 content[/tab]
[tab]tab 2 content[/tab]
[/tabset]”);
—————————————————————————————————-
Michael Atkins
It may be more efficient to use the method outlined by Konstantin Kovshenin at http://kovshenin.com/2013/dont-do_shortcode/
Nate Rouch
That’s good information. I’ve been searching for a way to simply add these, I appreciate it.
Tim
Great info. Thanks! However, it’s not working for me in Wordpress 3.5.1 using the Avada theme.
Do you need to add anything to functions.php for the code above to work? Could this be a theme-specific issue? Thanks, just learning wordpress templating.
Editorial Staff
Sounds like a theme specific issue. do_shortcode works just fine.
http://codex.wordpress.org/Function_Reference/do_shortcode
Administrador
Anthony
thanks loads man! this saved me hours of internet searching
Tyron
This is a great little tip. How would this work if your content needs to be wrapped in a shortcode?
Like [shortcode-name]Content here[/shortcode-name].
Jonathon Harris
Tyron,
This a late answer as I’m just seeing it, but to include wrapped content, you could do the following:
echo do_shortcode(‘[example_shortcode]’.$text_to_be_wrapped_in_shortcode.'[/example_shortcode]’);
Cheers,
J
pratik.chourdia
Wow.. worked
thanks
Homepage Kasugai
sfg
Homepage Kasugai
This is exactly what I was looking for. Helpful. Thank you.
krushna
yes..i am also interested to know ..where to write the code. if there will be example that wud be great.
Editorial Staff
You add it anywhere you want to display the shortcode in your theme files. It can be in your sidebar, footer, or wherever you want.
Administrador
aminraisy
can we add it after product description in the page of a product in woocommerce ?
WPBeginner Support
Yes sure
Keith Davis
Hi boys
Where do you add the code…
What file do you add it to and where abouts in the file?
My theme already uses shortcodes but it would still be interesting to know.
Jim
I came across the need for this just the other day – to add a shortcode outside of the loop. Thanks!