Como criar shortcodes no WordPress: Guia Completo

O que é Shortcode no WordPress?

AShortcode do WordPressé uma ferramenta poderosa, fácil de usar que simplifica a execução de tarefas complexas no seu site. É um pequeno trecho de código entre colchetes, como

, que executa uma função específica. Em vez de escrever HTML, CSS ou PHP extensos manualmente, shortcodes permitem acionar recursos de forma rápida e fácil.

Quando você insere um shortcode em um post, página ou widget, o WordPress processa-o e substitui pelo output correspondente de uma função, como exibir uma galeria de imagens, formulário ou vídeo incorporado.

Algumas características-chave de shortcodes incluem:

Eficiência. Realize tarefas avançadas com pouco código.

Flexibilidade. Adicione conteúdo ou recursos onde quiser – em posts, páginas ou widgets.

Fácil para iniciantes. Não é necessário conhecimento técnico. Qualquer pessoa pode usar shortcodes.

Reutilizável. Uma vez criado, o shortcode pode ser usado repetidamente em várias áreas do seu site.

Gestão de Conteúdo Limpa. Mantenha seus posts e páginas livres de bagunça evitando código inline.

Por exemplo, se você quiser incorporar uma galeria ou adicionar um formulário de contato, basta inserir o shortcode do WordPress correspondente, e o WordPress cuida de tudo nos bastidores. Isso torna os shortcodes valiosos tanto para iniciantes quanto para desenvolvedores experientes, simplificando a criação de conteúdo e permitindo funcionalidade dinâmica sem comprometer a facilidade de uso. Ao usar shortcodes, você pode integrar tudo, desde botões até widgets personalizados, mantendo seu conteúdo limpo e fácil de gerenciar.

Como criar um Shortcode no WordPress

Criar um shortcode no WordPress é uma forma simples e poderosa de adicionar recursos dinâmicos ao seu site. Se você quer simplificar seu conteúdo ou desenvolver funcionalidades personalizadas, shortcodes permitem inserir código facilmente em posts e páginas. Abaixo, vamos mostrar as etapas para criar um shortcode do WordPress do zero.

Instruções passo a passo para criar um shortcode básico

1. Acesse o arquivo functions.php do seu tema. Para começar, acesse o painel do WordPress e vá para Aparência > Editor de Tema. Abra o arquivo functions.php do seu tema. É nele que você criará seu shortcode personalizado.
2. Defina a função do shortcode. Em seguida, crie uma função que defina o conteúdo ou recurso que você quer exibir. Por exemplo, se quiser uma mensagem simples como “Hello, World!” aparecer onde quer que utilize o shortcode, você pode escrever:

function hello_world_shortcode() {
    return 'Hello, World!';
}

3. Adicione o shortcode ao WordPress. Depois de definir a função, use a função add_shortcode() para registrar seu shortcode. Isso informa ao WordPress qual texto procurar no seu conteúdo e qual função chamar:

add_shortcode('hello_world', 'hello_world_shortcode');

Agora, sempre que você inserir [hello_world] em um post ou página, o WordPress o substituirá por “Olá, Mundo!”

4. Teste o shortcode. Adicione o shortcode [hello_world] a qualquer post ou página para garantir que funcione como esperado.

Isso é tudo! Você acabou de criar um shortcode básico. Agora você pode personalizar essa funcionalidade para atender às suas necessidades. Se quiser algo mais avançado, também pode criar shortcodes personalizados do WordPress para recursos específicos, como botões, formulários ou até integrar APIs externas.

Exemplo de Shortcode do WordPress: Um Botão Básico

Botões são peças-chave para o engajamento do usuário, seja para uma chamada para ação (CTA) ou navegação. Vamos ver um exemplo de como criar um shortcode de Botão do WordPress.

Como criar um shortcode de Botão:

1. Defina o HTML e o CSS do Botão. No arquivo functions.php do seu tema, defina uma função que gere o HTML do botão. Você pode personalizar o estilo do botão com CSS inline ou vincular a uma folha de estilo externa. Abaixo está um exemplo de como criar um botão simples:

function custom_button_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'text' => 'Click Me',
            'url' => '#',
        ), $atts
    );

    return '<a href="' . esc_url($atts['url']) . '" class="custom-button" style="padding: 10px 20px; background-color: #0073aa; color: white; text-decoration: none;">' . esc_html($atts['text']) . '</a>';
}

add_shortcode('custom_button', 'custom_button_shortcode');

2. Adicione o shortcode ao WordPress. Neste exemplo, criamos um botão que recebe dois parâmetros: texto e URL. Agora você pode adicionar o shortcode [custom_button] em qualquer lugar do seu conteúdo, como mostrado:

[custom_button text=”Saiba Mais” url=”https://example.com”]

Isso gerará um botão clicável com o texto “Saiba Mais” apontando para a URL fornecida.

3. Integre o Botão em Postagens e Páginas. Você pode usar este exemplo de shortcode do WordPress em posts, páginas ou até mesmo em widgets. Basta inserir o shortcode [custom_button] onde precisar de um botão, e o WordPress gerará o botão com o estilo na interface pública.

Ao criar botões personalizados como estes, você pode aumentar a interatividade do seu site e melhorar a experiência do usuário, sem precisar modificar páginas individuais sempre que precisar de um novo botão.

Como inserir Shortcode em Páginas e Posts do WordPress

Depois de criar um shortcode, o próximo passo é incorporá-lo ao conteúdo do WordPress. Shortcodes podem ser inseridos em posts, páginas e até mesmo em tipos de post personalizados usando o editor do WordPress, proporcionando flexibilidade sobre como você gerencia o seu conteúdo. Existem diferentes métodos para adicionar shortcodes ao WordPress. Vamos dar uma olhada neles e explorar como eles interagem com vários blocos e temas.

Método 1: Usando o Editor Clássico do WordPress

Se estiver usando o Editor Clássico, incorporar um shortcode é simples: digite-o diretamente no editor. Veja como:

1. Abra o post ou a página onde deseja inserir o shortcode.
2. No editor, basta digitar o shortcode entre colchetes. Por exemplo, se estiver adicionando um shortcode de botão, digite

[custom_button text="Buy Now" url="https://yourlink.com"]

3. Atualize ou publique a página, e o WordPress substituirá o shortcode pela função correspondente quando a página for carregada.

Método 2: Usando o Editor de Blocos (Gutenberg)

Com o editor de blocos Gutenberg, adicionar shortcodes é igualmente simples, graças ao Bloco Shortcode. Veja como adicionar um shortcode ao WordPress usando o editor de blocos:

1. Abra a postagem ou página no editor de blocos.
2. Clique no botão de adicionar (+) para adicionar um novo bloco, e pesquise por “Shortcode”.
3. Selecione o Bloco Shortcode e, no campo de texto, cole ou digite seu shortcode. Por exemplo, .

[custom_button text="Sign Up" url="https://yourlink.com"]

4. Salve ou atualize seu conteúdo, e o bloco exibirá a saída do shortcode no frontend.

Método 3: Adicionando Shortcodes com Construtores de Páginas

Muitos construtores de páginas WordPress populares, como Elementor ou WPBakery, permitem inserir shortcodes diretamente em seções personalizadas. Normalmente, esses construtores possuem widgets dedicados de shortcodes onde você pode colar o shortcode e visualizar o resultado dentro do construtor.

Não importa qual editor ou construtor você utilize, saber como usar shortcodes no WordPress permite adicionar funcionalidades com facilidade, mesmo ao alternar entre temas e layouts diferentes.

Como usar shortcodes em widgets do WordPress

Shortcodes não estão limitados apenas a posts e páginas — também podem ser usados em áreas de widgets, como sidebars, rodapés e cabeçalhos, para adicionar conteúdo dinâmico em todo o seu site WordPress. Veja como utilizar shortcodes no WordPress em áreas de widget de forma eficaz.

Como adicionar Shortcodes em widgets:

1. Navegue até as configurações dos seus widgets. No painel do WordPress, vá para Aparência > Widgets. Isso abrirá as áreas de widgets disponíveis para o seu tema (geralmente, sidebars ou rodapés).
2. Adicione um widget de texto: Uma vez na seção de Widgets, arraste e solte um widget Texto na área de widgets onde você gostaria de adicionar seu shortcode. O widget de Texto suporta HTML e shortcodes, tornando-o ideal para esse propósito.
3. Insira o shortcode: No campo de texto do widget, basta colar o seu shortcode. Por exemplo, para adicionar um botão personalizado à barra lateral, você pode usar:

[custom_button text="Contact Us" url="https://yourlink.com"]

4. <strong>Salvar e visualizar a prévia:</strong> Depois de inserir o shortcode, salve as configurações do widget e visualize o seu site. O shortcode será executado e o botão (ou outra funcionalidade) aparecerá na área do widget.

Potencialize seus widgets com shortcodes:

Shortcodes são uma excelente forma de aprimorar as áreas de widgets do seu site sem editar o código do tema manualmente. Você pode adicionar desde formulários de contato até galerias, sliders ou botões personalizados. Essa flexibilidade permite adaptar rapidamente a funcionalidade do seu site conforme necessário, até mesmo em barras laterais ou rodapés.

Se você estiver trabalhando com um tema ou com um construtor de páginas, dominar como usar shortcodes em WordPress widgets vão permitir que seu site seja mais dinâmico e fácil de usar.

Lista de Shortcodes do WordPress: Shortcodes úteis para aprimorar seu site

O WordPress vem com um conjunto integrado de shortcodes, criados para simplificar o processo de adicionar conteúdo dinâmico ao seu site. Esses shortcodes pré-construídos permitem incorporar multimídia, galerias e muito mais sem escrever nem uma linha de código. Abaixo está uma lista selecionada de shortcodes do WordPress para ajudar a ampliar a funcionalidade do seu site com facilidade.

Shortcodes do WordPress comumente usados:

Galeria.Exiba facilmente galerias de imagens em qualquer página ou postagem usando o

shortcode. Você pode especificar quais imagens exibir usando o atributo ids.

Exemplo:

Vídeo. Para incorporar um vídeo a partir de uma URL, basta usar o shortcode. Isso permite incluir vídeos sem precisar de plugins de terceiros.



Exemplo:

Áudio. Injetar arquivos de áudio é tão fácil. Use o shortcode para incluir músicas ou podcasts em suas publicações.

Exemplo:

Incorporar. Quer incorporar rapidamente conteúdo do YouTube, Twitter ou de outras plataformas? Use o shortcode com a URL relevante.



Exemplo:

https://www.youtube.com/watch?v=abc123

Legenda. Exiba uma imagem com uma legenda usando o shortcode. Isso é especialmente útil para conteúdos multimídia, como blogs ou sites de notícias.



Exemplo:

<img src="image.jpg" alt="Sample"/> Caption Text

Estes são apenas alguns shortcodes prontos disponíveis no WordPress. Eles tornam a adição de elementos multimídia e outros recursos rápida e intuitiva, mesmo para quem não tem conhecimento de código. Ao usar esses shortcodes, você pode elevar muito a experiência do usuário no seu site, mantendo um fluxo de trabalho enxuto.

Como Simplificar Seu Fluxo de Trabalho com um Gerador de Shortcodes para WordPress

Para usuários que não se sentem confortáveis em escrever ou personalizar código, um gerador de shortcodes do WordPress pode ser muito útil. Essas ferramentas simplificam o processo criando automaticamente o shortcode com base nas suas preferências, economizando tempo e reduzindo a possibilidade de erros. Se estiver adicionando botões personalizados, formulários ou galerias, esses geradores oferecem uma interface amigável para concluir o trabalho rapidamente.

O que é um Gerador de Shortcode do WordPress?

Um gerador de shortcodes para WordPress é uma ferramenta ou plugin que ajuda você a criar shortcodes sem precisar entender o código subjacente. Essas ferramentas geralmente oferecem um formulário simples onde você escolhe as opções desejadas — como textos, URLs ou estilos — e, em seguida, geram o shortcode para inserir em um post, página ou widget. Isso facilita muito para iniciantes adicionar recursos avançados ao site, sem ter que escrever o shortcode manualmente.

Plugins e Ferramentas Populares de Geradores de Shortcodes para WordPress:

1. Shortcodes Ultimate:
   
   Este plugin oferece uma biblioteca abrangente de shortcodes pré-construídos para várias funções, desde sliders até accordions. Ele inclui um gerador de shortcodes com uma interface visual, tornando-o ideal para usuários que desejam melhorar o site sem mexer em código personalizado.
2. WP Shortcode by MyThemeShop:
   
   Outra ferramenta muito bem avaliada, este plugin oferece uma ampla seleção de shortcodes personalizáveis para botões, colunas, abas e muito mais. Inclui um gerador de shortcodes fácil de usar que permite criar e inserir rapidamente shortcodes no seu conteúdo.
3. Plugin de Shortcodes para WordPress – Shortcoder:
   
   Para usuários avançados, o Shortcoder permite criar shortcodes personalizados do zero ou com base em HTML, JavaScript e outros códigos. Este plugin também oferece um gerador de shortcodes para tarefas mais simples, como incorporar vídeos ou criar botões.

Usar um gerador de shortcodes do WordPress é uma ótima maneira de acelerar seu fluxo de trabalho, especialmente se você gerencia vários sites ou atualiza conteúdo com frequência. Ao usar essas ferramentas, você garante que seu site permaneça dinâmico e funcional, mesmo sem experiência em programação.

Boas Práticas e Dicas para Usar Shortcodes do WordPress

Embora os shortcodes tornem mais simples a adição de conteúdo dinâmico ao seu site, existem várias práticas recomendadas que podem ajudá-lo a otimizá-los. Abaixo, estão algumas dicas para garantir que você aproveite ao máximo os shortcodes:

1. Mantenha seus shortcodes organizados
   
   À medida que o seu site cresce, sua biblioteca de shortcodes também cresce. Certifique-se de documentar e rotular claramente os shortcodes personalizados. Isso ajudará você a rastreá-los e atualizá-los sem confusão no futuro. Além disso, criar uma seção dedicada no arquivo functions.php do seu tema para shortcodes pode manter tudo arrumado e de fácil manutenção.
2. Otimize para desempenho
   
   Shortcodes são convenientes, mas incorporar muitos shortcodes complexos em uma única página pode impactar o tempo de carregamento. Priorize adicionar apenas funcionalidades essenciais e monitore o desempenho do seu site para garantir que os shortcodes não estejam deixando as coisas lentas.
3. Use plugins visuais para incorporar com facilidade
   
   Você nem sempre precisa escrever shortcodes personalizados do zero. Para quem quer adicionar elementos altamente personalizáveis e interativos ao seu site WordPress sem escrever código, ferramentas como plugins da Elfsight para WordPress podem ser muito úteis. Elfsight oferece uma extensa coleção de widgets compatíveis com shortcodes, permitindo aprimorar seu site sem qualquer complicação técnica. Basta gerar um shortcode pelo plugin e incorporá-lo às suas páginas ou posts.
   
   

Alguns plugins populares da Elfsight para WordPress incluem:

• Plugin de Feed do Instagram: Mostre suas postagens mais recentes do Instagram de forma visualmente atraente. A integração de shortcode permite posicionar conteúdo dinâmico em qualquer lugar do seu site, seja na barra lateral, no rodapé ou dentro de um post.
• Plugin de Avaliações do Google: Construa confiança imediatamente com clientes novos exibindo avaliações reais do Google. Basta adicionar o shortcode fornecido pelo plugin para destacar avaliações em qualquer área de widget ou bloco de conteúdo.
• Plugin de Formulário de Contato: Com o widget de formulário de contato da Elfsight, você pode facilmente integrar um formulário ao seu site usando um shortcode. Ele vem com templates personalizáveis, permitindo que você crie formulários que combinem com o design do seu site.
• Plugin de chat do WhatsApp facilita a comunicação ao adicionar um botão de chat do WhatsApp ao seu site. Esse recurso permite que seus visitantes entrem em contato com você diretamente via WhatsApp, melhorando o suporte ao cliente com uma plataforma de mensagens familiar e prática.
• O plugin Event Calendar oferece uma forma organizada de exibir eventos futuros no seu site. Com shortcodes, você pode adicionar rapidamente um calendário dinâmico que inclua detalhes dos eventos, datas e opções de RSVP, tornando-o ideal para empresas e organizações que promovem eventos regulares.

4. Teste shortcodes em diferentes dispositivos
   
   Garanta que os shortcodes que você usa sejam responsivos e se adaptem bem a diferentes tamanhos de tela. Isso é especialmente importante ao incorporar elementos visuais, como o Feed do Instagram da Elfsight ou plugins de Avaliações do Google, que devem ficar ótimos tanto em desktop quanto em mobile.
5. Aproveite bibliotecas de shortcodes de terceiros
   
   Se criar shortcodes personalizados não for o seu forte, aproveite plugins de terceiros que oferecem bibliotecas de shortcodes. Por exemplo, os plugins da Elfsight oferecem uma forma intuitiva de adicionar feeds sociais, avaliações, formulários e muito mais, tudo com um shortcode simples que você pode personalizar de acordo com suas necessidades.

Ao seguir estas dicas e usar ferramentas poderosas como os plugins Elfsight, você pode simplificar seu fluxo de trabalho, reduzir a codificação manual e adicionar recursos com acabamento profissional ao seu site em apenas alguns cliques.

Conclusão

Shortcodes do WordPress são uma ferramenta valiosa para adicionar recursos dinâmicos ao seu site sem conhecimentos de codificação. Seja ao incorporar galerias, criar botões personalizados ou integrar widgets da Elfsight, os shortcodes oferecem uma solução flexível e eficiente para a gestão do site. Dominar os shortcodes permite ampliar a funcionalidade do seu site e melhorar a experiência do usuário com o mínimo esforço.

Para quem quer levar seu site WordPress a um patamar superior, shortcodes personalizados oferecem possibilidades ilimitadas, especialmente quando combinados com ferramentas como plugins da Elfsight. Ao simplificar o processo de adicionar formulários, feeds sociais, avaliações e muito mais, você terá controle total sobre o conteúdo e a funcionalidade do seu site.

FAQ