![\"\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/WordPress-Cheat-Sheet-BR.png\/public\")
<\/a><\/figure>O Que são os Shortcodes do WordPress?<\/strong><\/h2>Os shortcodes do WordPress atuam como atalhos que permitem incorporar elementos em um post ou página rapidamente. Eles geralmente consistem em uma única linha de código entre colchetes, como [exemplodeshortcode<\/em>]<\/code>, por exemplo. Esse código exibirá um recurso predeterminado no front-end do seu site.<\/p>O WordPress introduziu os shortcodes<\/strong><\/a> pela primeira vez com o lançamento da API Shortcode<\/strong><\/a>. Isso permite que os usuários adicionem facilmente elementos atraentes às suas postagens e páginas, como o botão “Curtir” do Google Maps<\/a><\/strong> ou do Facebook<\/a><\/strong>.<\/p>Existem seis shortcodes padrão<\/strong><\/a> no WordPress:<\/p>\n- caption<\/strong>: envolve as legendas ao redor do conteúdo<\/li>\n\n\n\n
- gallery<\/strong>: mostra galerias de imagens<\/li>\n\n\n\n
- audio<\/strong>: incorpora e reproduz arquivos de áudio<\/li>\n\n\n\n
- video<\/strong>: incorpora e reproduz arquivos de vídeo<\/li>\n\n\n\n
- playlist<\/strong>: exibe uma coleção de arquivos de áudio ou vídeo<\/li>\n\n\n\n
- embed<\/strong>: envolve itens incorporados<\/li>\n<\/ul>
Você também encontrará dois tipos básicos de formatação de shortcode – fechamento automático e fechamento. Os shortcodes de fechamento automático podem ser independentes e não precisam de uma tag de fechamento, como os shortcodes de gallery<\/code> ou video<\/code> acima.<\/p>Enquanto isso, os códigos<\/strong><\/a> de acesso anexados envolvem o conteúdo que você deseja modificar e exigem que você feche a tag manualmente. Por exemplo, você pode incorporar um vídeo do YouTube envolvendo o URL em tags embed e \/embed:<\/p>\n![\"exemplo](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/08\/image-2.png\/public\")
<\/figure><\/div>Por exemplo, isso criaria o seguinte resultado:<\/p>
\n![\"exemplo](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/08\/image-3.png\/public\")
<\/figure><\/div>Alguns dos melhores plugins do WordPress<\/strong><\/a> vêm com seus próprios shortcodes. Por exemplo, WP Forms<\/strong><\/a> e Contact Form 7<\/strong><\/a> têm shortcodes que permitem incorporar um formulário de contato<\/strong><\/a> em uma postagem ou página rapidamente. Você também pode usar um plugin como MaxButtons<\/strong><\/a> para adicionar um shortcode de botão WordPress<\/strong><\/a> onde quiser em seu site.<\/p>\n![\"\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/06\/BR-New-WP_in-text-banner.png\/public\")
<\/a><\/figure><\/div>Por Que Você Deve Considerar o Uso de Shortcodes no WordPress?<\/strong><\/h2>Há muitas razões pelas quais você pode querer usar shortcodes do WordPress. Por exemplo, é mais fácil e rápido do que aprender e escrever um longo código em HTML. Além disso, eles ajudam você a manter seu conteúdo limpo e acessível.<\/p>
Os shortcodes podem ser usados para automatizar alguns recursos que você usa repetidamente. Por exemplo, se você usar um botão de chamada para ação (CTA)<\/strong> em cada uma de suas postagens, ter um shortcode dedicado pronto pode ser uma solução rápida e prática.<\/p>Vale a pena mencionar que o Editor Gutenberg<\/strong><\/a> funciona de forma semelhante, contando com o uso de shortcodes. Ele permite que os usuários do WordPress adicionem vários recursos interativos através do uso de blocos.<\/p>![\"diferentes](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/wordpress-gutenberg-editor.webp\")
<\/figure>Como criar um shortcode WordPress (em 7 etapas)<\/strong><\/h2>Se você já tem algum conhecimento de codificação, convém criar seus próprios shortcodes personalizados. Isso lhe dá controle total sobre a aparência e a funcionalidade do seu site.<\/p>
Vamos ver como criar um shortcode WordPress personalizado. Neste tutorial, adicionaremos links de mídia social a uma postagem como nosso exemplo.<\/p>
Passo 1 – Crie um novo arquivo de tema<\/h3>
Antes de começar, é uma boa ideia fazer um backup completo do seu<\/strong><\/a> site WordPress. Você também precisará criar um arquivo separado para seu shortcode personalizado fora do arquivo functions.php do seu tema. <\/strong>Isso fornecerá um substituto caso algo dê errado.<\/p>Você pode usar um cliente File Transfer Protocol (FTP)<\/strong> como o FileZilla<\/strong><\/a> para acessar os arquivos do tema do seu site. Uma vez conectado ao seu site, navegue até wp-content > themes<\/strong> e localize a pasta do seu tema atual. Em nosso exemplo, será o rosa-lite<\/strong>:<\/p>\n![\"interface](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/08\/image-7.png\/public\")
<\/figure><\/div>bra a pasta do seu tema, clique com o botão direito do mouse e pressione o botão Criar novo arquivo<\/strong>.<\/p>\n![\"opção](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/08\/image-8.png\/public\")
<\/figure><\/div>Nomeie seu novo arquivo custom-shortcodes.php<\/strong> <\/em>e clique em OK<\/strong>. Você pode editá-lo clicando com o botão direito do mouse e selecionando a opção Visualizar\/Editar<\/strong>:<\/em><\/p>\n![\"opção](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/view-edit-filezilla.webp\")
<\/figure><\/div>Isso abrirá o arquivo em seu editor de texto padrão. Então, você simplesmente precisará adicionar o seguinte bloco de código:<\/p>
<?php \n?><\/pre>Isso garante que seu novo arquivo seja interpretado como PHP, que é a linguagem de script na qual o WordPress é construído.<\/p>
Você pode então salvar suas alterações e fechar o arquivo. Certifique-se de marcar a caixa a seguir para garantir que ela seja atualizada no servidor e aplicada ao seu site:<\/p>![marque a caixa \"Finish editing and delete local file\" na interface do FileZilla](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/08\/image-11.png\/public\")
<\/figure>Em seguida, abra o arquivo functions.php<\/strong> na mesma pasta do tema e adicione a seguinte linha de código na parte inferior do documento:<\/p>include('custom-shortcodes.php');<\/pre>Isso dirá ao sistema para incluir quaisquer alterações feitas no arquivo custom-shortcodes.php<\/strong> dentro de functions.php<\/strong>, permitindo que você as mantenha separadas. Quando estiver pronto, salve suas alterações e feche o arquivo.<\/p>Passo 2 – Crie a função Shortcode<\/strong><\/h3>Em seguida, você precisará criar a função do shortcode, ordenando o que fazer. Selecione a opção Visualizar\/Editar<\/strong> novamente para seu arquivo custom-shortcodes.php<\/strong>. Use o snippet de código a seguir para adicionar uma ação à qual conectar sua função:<\/p>function subscribe_link(){\nreturn 'Follow us on <a rel=\"nofollow\" href=\"https:\/\/twitter.com\/Hostinger?s=20\">Twitter<\/a>';\n}<\/pre>Em seguida, você precisará adicionar uma função de retorno de chamada, que será executada quando a ação do gancho for ativada. Adicionar a seguinte linha de código diretamente após a mencionada acima informará ao WordPress que sua função é um shortcode:<\/p>
add_shortcode('subscribe', 'subscribe_link');<\/pre>Quando você cria um shortcode usando a função add_shortcode<\/strong>, você atribui uma tag shortcode “($tag)” e um gancho de função correspondente “($func)” que será executado sempre que o atalho for usado.<\/p>Em outras palavras, se a tag shortcode para [subscribe]<\/code>, isso faz com que o gancho ‘subscribe_link’<\/strong> direcione o visitante para o URL fornecido.<\/p>Portanto, todo o código que você usará em seu arquivo custom-shortcodes.php<\/strong> terá a seguinte aparência:<\/p>\n![\"arquivo](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/08\/image-13.png\/public\")
<\/figure><\/div>Deve-se notar que quando você está nomeando tags, você deve usar apenas letras minúsculas, embora sublinhados possam ser usados. Também é crucial evitar o uso de hífens<\/strong><\/a>, pois isso pode interferir em outros shortcodes.<\/p>Passo 3 – Adicione o Shortcode de Fechamento Automático ao Site<\/strong><\/h3>Agora você pode testar seu código inicial como um shortcode de fechamento automático em seu site WordPress. Usando o WordPress Block Editor, você pode inserir a tag [subscribe] diretamente ao post.<\/p>
\n![\"tag](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/08\/image-15.png\/public\")
<\/figure><\/div>Isso exibirá o seguinte conteúdo para os visitantes do seu site:<\/p>
\n![\"exemplo](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/08\/image-1.jpeg\/public\")
<\/figure><\/div>Se você estiver satisfeito com este shortcode, não precisará fazer mais nada. No entanto, se você deseja personalizá-lo, pode passar para a próxima etapa.<\/p>
Etapa 4 – Adicionar parâmetros ao shortcode<\/strong><\/h3>Você pode adaptar o shortcode ‘subscribe’<\/strong> para funcionalidades adicionais para exibir outros links de mídia social. Você pode fazer isso adicionando um parâmetro para alterar a URL.<\/p>Para adicionar atributos de manipulação<\/strong><\/a>, você precisará abrir o arquivo custom-shortcodes.php<\/strong> e adicionar o seguinte código:<\/p>function subscribe_link_att($atts) {\n $default = array(\n 'link' => '#',\n );\n $a = shortcode_atts($default, $atts);\n return 'Follow us on '.$a['link'];\n}\nadd_shortcode('subscribe', 'subscribe_link_att');<\/pre>Isso permitirá que você personalize os links em sua tag de shortcode para adicioná-los ao Editor Gutenberg. Você pode colá-lo sobre o código anterior no arquivo custom-shortcodes.php<\/strong>. Deve ser algo assim:<\/p>\n![\"arquivo](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/08\/image-16.png\/public\")
<\/figure><\/div>A adição da função shortcode_atts()<\/strong><\/a> combinará os atributos do usuário com quaisquer atributos conhecidos e quaisquer dados ausentes serão alterados para seus valores padrão. Quando estiver pronto, salve suas alterações e feche o arquivo.<\/p>Etapa 5 – Teste os parâmetros<\/strong><\/h3>Agora você pode testar o shortcode atualizado no WordPress Block Editor. Em nosso exemplo, estamos testando nossos links do Twitter e do Facebook com os seguintes shortcodes:<\/p>
[subscribe link='https:\/\/www.facebook.com\/Hostinger\/']\n[subscribe link='https:\/\/twitter.com\/Hostinger?s=20\/']<\/pre>\n![\"o](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/08\/image-18.png\/public\")
<\/figure><\/div>Esse código de fechamento automático exibe os URLs diretos de seus perfis sociais para os visitantes. No entanto, você pode querer que esse recurso pareça um pouco polido.<\/p>
Por exemplo, você pode criar uma versão em anexo que permite personalizar totalmente o texto âncora exibido para os usuários quando eles estiverem prestes a clicar nele. Mostraremos como fazer isso na etapa a seguir.<\/p>
Passo 6 – Crie um Shortcode de Fechamento<\/strong><\/h3>O shortcode anexo será formatado de forma semelhante a um exemplo anterior de fechamento automático. No entanto, ele incluirá um parâmetro adicional para a função.<\/p>
Primeiro, você precisará adicionar $content = null<\/strong><\/a>, que identifica essa função como um shortcode delimitador. Você pode adicionar o WordPress do_shortcode<\/strong><\/a>, que pesquisará o conteúdo por shortcodes.<\/p>Dentro do arquivo custom-shortcodes.php<\/strong>, adicione o novo shortcode anexo:<\/p>function subscribe_link_att($atts, $content = null) {\n $default = array(\n 'link' => '#',\n );\n $a = shortcode_atts($default, $atts);\n $content = do_shortcode($content);\n return 'Follow us on <a href=\"'.($a['link']).'\" style=\"color: blue\">'.$content.'<\/a>';\n}\nadd_shortcode('subscribe', 'subscribe_link_att');<\/pre>Quando estiver pronto, seu arquivo custom-shortcode.php<\/strong> deve ficar assim<\/p>\n![\"arquivo](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/03\/enclosing-shortcode.webp\")
<\/figure><\/div>O código anterior também possui um atributo “style”<\/strong> de adição, que mudará o texto âncora para uma cor azul. Não se esqueça de salvar suas alterações quando terminar!<\/p>Passo 7 – Adicione um Shortcode de Fechamento ao Site<\/strong><\/h3>Agora você pode inserir seu shortcode WordPress Block Editor para ver o resultado final:<\/p>
\n![\"shortcode](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/08\/image-20.png\/public\")
<\/figure><\/div>Como você notou, você pode alterar facilmente os URLs de suas páginas de mídia social e o texto âncora exibido para o visitante usando este shortcode. Neste caso, escolhemos “Facebook”<\/strong> e “Twitter”<\/strong>:<\/p>\n![\"resultado](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/08\/image-21.png\/public\")
<\/figure><\/div>É isso! Você acabou de criar um shortcode personalizado para links de assinatura em suas páginas e postagens. Observe que todas as etapas mencionadas anteriormente podem ser ajustadas para criar todos os tipos de elementos diferentes usando a função Shortcodes<\/strong> do WordPress.<\/p>Conclusão<\/strong><\/h2>Adicionar funcionalidades extras ao seu site WordPress é muito mais simples com shortcodes. Você pode usá-los para personalizar seu conteúdo existente e adicionar recursos interativos, como formulários de contato, galerias de imagens ou links de assinatura.<\/p>
Neste post, aprendemos como criar seu próprio shortcode WordPress em sete etapas fáceis:<\/p>
\n- Criar um novo arquivo de tema<\/li>\n\n\n\n
- Criar a função de shortcode<\/li>\n\n\n\n
- Adicionar o shortcode de fechamento automático ao site<\/li>\n\n\n\n
- Adicionar parâmetros ao shortcode<\/li>\n\n\n\n
- Testar os parâmetros<\/li>\n\n\n\n
- Criar um shortcode de inclusão<\/li>\n\n\n\n
- Adicionar o shortcode anexo ao site<\/li>\n<\/ol>
Tem mais dúvidas sobre como criar seus próprios shortcodes do WordPress ou planeja otimizar o desempenho do seu site com a hospedagem do WordPress<\/strong><\/a>? Deixe-nos saber na seção de comentários abaixo!<\/p>\n","protected":false},"excerpt":{"rendered":"Aprender a criar um shortcode WordPress pode ser uma maneira eficiente de personalizar seus posts e páginas. No entanto, se você é novo no processo, pode ter dificuldade para entender como usar esse recurso em seu site. É por isso que preparamos um guia para ajudá-lo a começar. Ao observar como os shortcodes funcionam e como aplicá-los […]<\/p>\n
[exemplodeshortcode<\/em>]<\/code>, por exemplo. Esse código exibirá um recurso predeterminado no front-end do seu site.<\/p>O WordPress introduziu os shortcodes<\/strong><\/a> pela primeira vez com o lançamento da API Shortcode<\/strong><\/a>. Isso permite que os usuários adicionem facilmente elementos atraentes às suas postagens e páginas, como o botão “Curtir” do Google Maps<\/a><\/strong> ou do Facebook<\/a><\/strong>.<\/p>Existem seis shortcodes padrão<\/strong><\/a> no WordPress:<\/p>\n- caption<\/strong>: envolve as legendas ao redor do conteúdo<\/li>\n\n\n\n
- gallery<\/strong>: mostra galerias de imagens<\/li>\n\n\n\n
- audio<\/strong>: incorpora e reproduz arquivos de áudio<\/li>\n\n\n\n
- video<\/strong>: incorpora e reproduz arquivos de vídeo<\/li>\n\n\n\n
- playlist<\/strong>: exibe uma coleção de arquivos de áudio ou vídeo<\/li>\n\n\n\n
- embed<\/strong>: envolve itens incorporados<\/li>\n<\/ul>
Você também encontrará dois tipos básicos de formatação de shortcode – fechamento automático e fechamento. Os shortcodes de fechamento automático podem ser independentes e não precisam de uma tag de fechamento, como os shortcodes de gallery<\/code> ou video<\/code> acima.<\/p>Enquanto isso, os códigos<\/strong><\/a> de acesso anexados envolvem o conteúdo que você deseja modificar e exigem que você feche a tag manualmente. Por exemplo, você pode incorporar um vídeo do YouTube envolvendo o URL em tags embed e \/embed:<\/p>\n<\/figure><\/div>Por exemplo, isso criaria o seguinte resultado:<\/p>
\n<\/figure><\/div>Alguns dos melhores plugins do WordPress<\/strong><\/a> vêm com seus próprios shortcodes. Por exemplo, WP Forms<\/strong><\/a> e Contact Form 7<\/strong><\/a> têm shortcodes que permitem incorporar um formulário de contato<\/strong><\/a> em uma postagem ou página rapidamente. Você também pode usar um plugin como MaxButtons<\/strong><\/a> para adicionar um shortcode de botão WordPress<\/strong><\/a> onde quiser em seu site.<\/p>\n<\/a><\/figure><\/div>Por Que Você Deve Considerar o Uso de Shortcodes no WordPress?<\/strong><\/h2>Há muitas razões pelas quais você pode querer usar shortcodes do WordPress. Por exemplo, é mais fácil e rápido do que aprender e escrever um longo código em HTML. Além disso, eles ajudam você a manter seu conteúdo limpo e acessível.<\/p>
Os shortcodes podem ser usados para automatizar alguns recursos que você usa repetidamente. Por exemplo, se você usar um botão de chamada para ação (CTA)<\/strong> em cada uma de suas postagens, ter um shortcode dedicado pronto pode ser uma solução rápida e prática.<\/p>Vale a pena mencionar que o Editor Gutenberg<\/strong><\/a> funciona de forma semelhante, contando com o uso de shortcodes. Ele permite que os usuários do WordPress adicionem vários recursos interativos através do uso de blocos.<\/p><\/figure>Como criar um shortcode WordPress (em 7 etapas)<\/strong><\/h2>Se você já tem algum conhecimento de codificação, convém criar seus próprios shortcodes personalizados. Isso lhe dá controle total sobre a aparência e a funcionalidade do seu site.<\/p>
Vamos ver como criar um shortcode WordPress personalizado. Neste tutorial, adicionaremos links de mídia social a uma postagem como nosso exemplo.<\/p>
Passo 1 – Crie um novo arquivo de tema<\/h3>
Antes de começar, é uma boa ideia fazer um backup completo do seu<\/strong><\/a> site WordPress. Você também precisará criar um arquivo separado para seu shortcode personalizado fora do arquivo functions.php do seu tema. <\/strong>Isso fornecerá um substituto caso algo dê errado.<\/p>Você pode usar um cliente File Transfer Protocol (FTP)<\/strong> como o FileZilla<\/strong><\/a> para acessar os arquivos do tema do seu site. Uma vez conectado ao seu site, navegue até wp-content > themes<\/strong> e localize a pasta do seu tema atual. Em nosso exemplo, será o rosa-lite<\/strong>:<\/p>\n<\/figure><\/div>bra a pasta do seu tema, clique com o botão direito do mouse e pressione o botão Criar novo arquivo<\/strong>.<\/p>\n<\/figure><\/div>Nomeie seu novo arquivo custom-shortcodes.php<\/strong> <\/em>e clique em OK<\/strong>. Você pode editá-lo clicando com o botão direito do mouse e selecionando a opção Visualizar\/Editar<\/strong>:<\/em><\/p>\n<\/figure><\/div>Isso abrirá o arquivo em seu editor de texto padrão. Então, você simplesmente precisará adicionar o seguinte bloco de código:<\/p>
<?php \n?><\/pre>Isso garante que seu novo arquivo seja interpretado como PHP, que é a linguagem de script na qual o WordPress é construído.<\/p>
Você pode então salvar suas alterações e fechar o arquivo. Certifique-se de marcar a caixa a seguir para garantir que ela seja atualizada no servidor e aplicada ao seu site:<\/p><\/figure>Em seguida, abra o arquivo functions.php<\/strong> na mesma pasta do tema e adicione a seguinte linha de código na parte inferior do documento:<\/p>include('custom-shortcodes.php');<\/pre>Isso dirá ao sistema para incluir quaisquer alterações feitas no arquivo custom-shortcodes.php<\/strong> dentro de functions.php<\/strong>, permitindo que você as mantenha separadas. Quando estiver pronto, salve suas alterações e feche o arquivo.<\/p>Passo 2 – Crie a função Shortcode<\/strong><\/h3>Em seguida, você precisará criar a função do shortcode, ordenando o que fazer. Selecione a opção Visualizar\/Editar<\/strong> novamente para seu arquivo custom-shortcodes.php<\/strong>. Use o snippet de código a seguir para adicionar uma ação à qual conectar sua função:<\/p>function subscribe_link(){\nreturn 'Follow us on <a rel=\"nofollow\" href=\"https:\/\/twitter.com\/Hostinger?s=20\">Twitter<\/a>';\n}<\/pre>Em seguida, você precisará adicionar uma função de retorno de chamada, que será executada quando a ação do gancho for ativada. Adicionar a seguinte linha de código diretamente após a mencionada acima informará ao WordPress que sua função é um shortcode:<\/p>
add_shortcode('subscribe', 'subscribe_link');<\/pre>Quando você cria um shortcode usando a função add_shortcode<\/strong>, você atribui uma tag shortcode “($tag)” e um gancho de função correspondente “($func)” que será executado sempre que o atalho for usado.<\/p>Em outras palavras, se a tag shortcode para [subscribe]<\/code>, isso faz com que o gancho ‘subscribe_link’<\/strong> direcione o visitante para o URL fornecido.<\/p>Portanto, todo o código que você usará em seu arquivo custom-shortcodes.php<\/strong> terá a seguinte aparência:<\/p>\n<\/figure><\/div>Deve-se notar que quando você está nomeando tags, você deve usar apenas letras minúsculas, embora sublinhados possam ser usados. Também é crucial evitar o uso de hífens<\/strong><\/a>, pois isso pode interferir em outros shortcodes.<\/p>Passo 3 – Adicione o Shortcode de Fechamento Automático ao Site<\/strong><\/h3>Agora você pode testar seu código inicial como um shortcode de fechamento automático em seu site WordPress. Usando o WordPress Block Editor, você pode inserir a tag [subscribe] diretamente ao post.<\/p>
\n<\/figure><\/div>Isso exibirá o seguinte conteúdo para os visitantes do seu site:<\/p>
\n<\/figure><\/div>Se você estiver satisfeito com este shortcode, não precisará fazer mais nada. No entanto, se você deseja personalizá-lo, pode passar para a próxima etapa.<\/p>
Etapa 4 – Adicionar parâmetros ao shortcode<\/strong><\/h3>Você pode adaptar o shortcode ‘subscribe’<\/strong> para funcionalidades adicionais para exibir outros links de mídia social. Você pode fazer isso adicionando um parâmetro para alterar a URL.<\/p>Para adicionar atributos de manipulação<\/strong><\/a>, você precisará abrir o arquivo custom-shortcodes.php<\/strong> e adicionar o seguinte código:<\/p>function subscribe_link_att($atts) {\n $default = array(\n 'link' => '#',\n );\n $a = shortcode_atts($default, $atts);\n return 'Follow us on '.$a['link'];\n}\nadd_shortcode('subscribe', 'subscribe_link_att');<\/pre>Isso permitirá que você personalize os links em sua tag de shortcode para adicioná-los ao Editor Gutenberg. Você pode colá-lo sobre o código anterior no arquivo custom-shortcodes.php<\/strong>. Deve ser algo assim:<\/p>\n<\/figure><\/div>A adição da função shortcode_atts()<\/strong><\/a> combinará os atributos do usuário com quaisquer atributos conhecidos e quaisquer dados ausentes serão alterados para seus valores padrão. Quando estiver pronto, salve suas alterações e feche o arquivo.<\/p>Etapa 5 – Teste os parâmetros<\/strong><\/h3>Agora você pode testar o shortcode atualizado no WordPress Block Editor. Em nosso exemplo, estamos testando nossos links do Twitter e do Facebook com os seguintes shortcodes:<\/p>
[subscribe link='https:\/\/www.facebook.com\/Hostinger\/']\n[subscribe link='https:\/\/twitter.com\/Hostinger?s=20\/']<\/pre>\n<\/figure><\/div>Esse código de fechamento automático exibe os URLs diretos de seus perfis sociais para os visitantes. No entanto, você pode querer que esse recurso pareça um pouco polido.<\/p>
Por exemplo, você pode criar uma versão em anexo que permite personalizar totalmente o texto âncora exibido para os usuários quando eles estiverem prestes a clicar nele. Mostraremos como fazer isso na etapa a seguir.<\/p>
Passo 6 – Crie um Shortcode de Fechamento<\/strong><\/h3>O shortcode anexo será formatado de forma semelhante a um exemplo anterior de fechamento automático. No entanto, ele incluirá um parâmetro adicional para a função.<\/p>
Primeiro, você precisará adicionar $content = null<\/strong><\/a>, que identifica essa função como um shortcode delimitador. Você pode adicionar o WordPress do_shortcode<\/strong><\/a>, que pesquisará o conteúdo por shortcodes.<\/p>Dentro do arquivo custom-shortcodes.php<\/strong>, adicione o novo shortcode anexo:<\/p>function subscribe_link_att($atts, $content = null) {\n $default = array(\n 'link' => '#',\n );\n $a = shortcode_atts($default, $atts);\n $content = do_shortcode($content);\n return 'Follow us on <a href=\"'.($a['link']).'\" style=\"color: blue\">'.$content.'<\/a>';\n}\nadd_shortcode('subscribe', 'subscribe_link_att');<\/pre>Quando estiver pronto, seu arquivo custom-shortcode.php<\/strong> deve ficar assim<\/p>\n<\/figure><\/div>O código anterior também possui um atributo “style”<\/strong> de adição, que mudará o texto âncora para uma cor azul. Não se esqueça de salvar suas alterações quando terminar!<\/p>Passo 7 – Adicione um Shortcode de Fechamento ao Site<\/strong><\/h3>Agora você pode inserir seu shortcode WordPress Block Editor para ver o resultado final:<\/p>
\n<\/figure><\/div>Como você notou, você pode alterar facilmente os URLs de suas páginas de mídia social e o texto âncora exibido para o visitante usando este shortcode. Neste caso, escolhemos “Facebook”<\/strong> e “Twitter”<\/strong>:<\/p>\n<\/figure><\/div>É isso! Você acabou de criar um shortcode personalizado para links de assinatura em suas páginas e postagens. Observe que todas as etapas mencionadas anteriormente podem ser ajustadas para criar todos os tipos de elementos diferentes usando a função Shortcodes<\/strong> do WordPress.<\/p>Conclusão<\/strong><\/h2>Adicionar funcionalidades extras ao seu site WordPress é muito mais simples com shortcodes. Você pode usá-los para personalizar seu conteúdo existente e adicionar recursos interativos, como formulários de contato, galerias de imagens ou links de assinatura.<\/p>
Neste post, aprendemos como criar seu próprio shortcode WordPress em sete etapas fáceis:<\/p>
\n- Criar um novo arquivo de tema<\/li>\n\n\n\n
- Criar a função de shortcode<\/li>\n\n\n\n
- Adicionar o shortcode de fechamento automático ao site<\/li>\n\n\n\n
- Adicionar parâmetros ao shortcode<\/li>\n\n\n\n
- Testar os parâmetros<\/li>\n\n\n\n
- Criar um shortcode de inclusão<\/li>\n\n\n\n
- Adicionar o shortcode anexo ao site<\/li>\n<\/ol>
Tem mais dúvidas sobre como criar seus próprios shortcodes do WordPress ou planeja otimizar o desempenho do seu site com a hospedagem do WordPress<\/strong><\/a>? Deixe-nos saber na seção de comentários abaixo!<\/p>\n","protected":false},"excerpt":{"rendered":"Aprender a criar um shortcode WordPress pode ser uma maneira eficiente de personalizar seus posts e páginas. No entanto, se você é novo no processo, pode ter dificuldade para entender como usar esse recurso em seu site. É por isso que preparamos um guia para ajudá-lo a começar. Ao observar como os shortcodes funcionam e como aplicá-los […]<\/p>\n