Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Como usar códigos de acesso em seus temas do WordPress

Nota editorial: Ganhamos uma comissão de links de parceiros no WPBeginner. As comissões não afetam as opiniões ou avaliações de nossos editores. Saiba mais sobre Processo editorial.

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.

How to use shortcodes in your WordPress themes

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.

An example of a WordPress shortcode, provided by WPForms

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.

Adding a shortcode block to a WordPress page or post

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.

Opening the WordPress full-site editor (FSE)

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”.

Adding shortcode to a WordPress template using the full-site editor

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.

Adding a shortcode to a WordPress theme using a full-site editor (FSE)

O WordPress agora mostrará uma visualização do modelo.

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

Editing a WordPress theme's 404 template using the full-site editor (FSE)

Feito isso, clique no ícone azul “+” no canto superior esquerdo.

Na barra de pesquisa, você precisa digitar “Shortcode”.

Adding a shortcode block to a WordPress theme

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.

Adding Shortcode blocks to a WordPress theme

Depois disso, clique no botão “Salvar”.

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

An example of a shortcode, on a 404 page template

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á.

How to instal and activate a WordPress plugin

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.

SeedProd's advanced theme builder feature

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.

Custom WordPress theme templates

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.

Creating a custom theme using SeedProd

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.

Adding a Shortcode block to a theme using SeedProd

Na visualização ao vivo, basta clicar para selecionar o bloco Shortcode.

Agora você pode adicionar seu shortcode à caixa “Shortcode”.

Adding a contact form to a WordPress theme using 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”.

Previewing the shortcode output in SeedProd

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.

Styling shortcode output using the SeedProd theme builder

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.

Publishing a custom WordPress theme using SeedProd

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.

Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que, se você clicar em alguns de nossos links, poderemos receber uma comissão. Veja como o WPBeginner é financiado, por que isso é importante e como você pode nos apoiar. Aqui está nosso processo editorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

O kit de ferramentas definitivo WordPress

Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!

Reader Interactions

29 ComentáriosDeixe uma resposta

  1. 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!

  2. Jiří Vaněk says

    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?

  3. pankaj says

    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

  4. Sonik says

    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.

  5. DavidA says

    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

  6. Dean says

    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]”);

    —————————————————————————————————-

  7. Tim says

    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.

  8. Tyron says

    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 says

      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

  9. Keith Davis says

    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.

Deixe uma resposta

Obrigado por deixar um comentário. Lembre-se de que todos os comentários são moderados de acordo com nossos política de comentários, e seu endereço de e-mail NÃO será publicado. NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.