Quer aprender a criar um shortcode no WordPress?
Aprender a criar um shortcode no WordPress pode ser uma maneira eficaz de personalizar seus posts e páginas. No entanto, se você é novo no processo, pode achar difícil descobrir como usar esse recurso em seu site.
É por isso que preparamos um guia para ajudá-lo a começar. Ao observar como os códigos de acesso funcionam e como aplicá-los de forma eficaz, você pode começar a personalizar seu conteúdo ao seu gosto sem a necessidade de plug-ins adicionais.
Neste artigo, discutiremos o que são códigos de acesso do WordPress e por que você pode considerar usá-los. Em seguida, mostraremos como criar o seu próprio.
Mas antes, se você nunca instalou o WordPress, descubra Como instalar um blog WordPress passos 7 et Como encontrar, instalar e ativar um tema WordPress em seu blog
Então, voltemos ao porquê de estarmos aqui.
O que são códigos de acesso do WordPress?
Os shortcodes do WordPress atuam como atalhos que permitem incorporar rapidamente elementos em um post ou página. Geralmente, são uma única linha de código entre colchetes. Por exemplo :
[exemplecodehortcode]Esse código exibirá um recurso pré-determinado no front-end do seu site.
WordPress códigos de acesso introduzidos pela primeira vez com o lançamento de API de código de acesso. Isso tornou mais fácil para os usuários adicionarem elementos atraentes às suas postagens e páginas, como Google Maps ou o botão "Curtir" do Facebook.
Existe no WordPress predefiniçãot seis códigos de acesso :
- subtítulo: Envolva as legendas ao redor do conteúdo
- galeria : exibe galerias de imagens
- em áudio: incorpora e reproduz arquivos de áudio
- vidéo : incorpora e reproduz arquivos de vídeo
- lista : exibe uma coleção de arquivos de áudio ou vídeo
- embutir : Envolve elementos embutidos
Você também encontrará dois tipos básicos de formatação de shortcode: self-closing et enclosing.
Códigos de acesso self-closing podem ficar por conta própria e não precisam de uma etiqueta de fechamento.
Enquanto isso, enclosing cercam o conteúdo que você deseja editar e forçam você a fechar a tag manualmente. Por exemplo, você pode incorporar um vídeo do YouTube envolvendo o URL entre as tags embed et /embed :
Por exemplo, isso criaria o seguinte resultado:
Alguns dos melhores plugins WordPress vêm com seus próprios códigos de acesso. Por exemplo, Formulários WP et Formulário de Contato 7 têm códigos de acesso que permitem incorporar rapidamente um formulário de contato em uma postagem ou página. Você também pode usar um plugin como MaxButtons para adicionar um shortcode de botão onde quiser em seu site.
Por que você deve considerar o uso de códigos de acesso do WordPress?
Existem muitas razões pelas quais você pode usar códigos de acesso 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.
Os códigos de acesso podem ser usados para automatizar determinados recursos que você usa repetidamente. Por exemplo, se você usar um botão chamada para ação (CTA) em cada um de seus artigos, ter um código de acesso dedicado pronto pode ser uma solução rápida e conveniente.
Deve ser mencionado que Editor de gutenberg funciona da mesma forma, 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.
Esse método é muito mais amigável para iniciantes porque você pode adicionar conteúdo diretamente na interface do usuário. No entanto, o editor de blocos do WordPress ainda é limitado no que oferece. Felizmente, ele vem com um bloco Código curto, que permite adicionar conteúdo personalizado às suas páginas.
Como criar um shortcode no WordPress
Se você já tem conhecimento de codificação, pode criar seus próprios códigos de acesso personalizados. Isso lhe dá controle total sobre a aparência e a funcionalidade do seu site.
Vamos ver como criar um shortcode WordPress personalizado. Neste tutorial, adicionaremos links de mídia social a um artigo como exemplo.
Passo 1 – Crie um novo arquivo de tema
Antes de começar, é uma boa ideia faça backup completo do seu site WordPress. Você também precisará criar um arquivo separado para seu código de acesso personalizado fora do arquivo functions.php seu tema WordPress. Isso fornecerá uma solução de fallback caso algo dê errado.
Você pode usar um cliente FTP (protocolo de transferência de arquivos) tal como FileZilla para acessar os arquivos de tema do seu site. Uma vez logado em seu site, vá para wp-content> temas e localize sua pasta de tema atual. No nosso exemplo, isso será imprensa coruja:
Abra sua pasta tema WordPress, clique com o botão direito nele e pressione Criar novo arquivo.
Dê um nome ao seu novo arquivo custom-shortcodes.php em seguida, clique OK. Você pode editá-lo clicando com o botão direito do mouse e selecionando a opção Visualizar edição :
Isso abrirá o arquivo em seu editor de texto padrão. Então você só precisa adicionar o seguinte bloco de código:
<?php ?>
Isso garante que seu novo arquivo seja interpretado como PHP, que é a linguagem de script na qual o WordPress é construído.
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:
Em seguida, abra o arquivo functions.php na mesma pasta do tema e adicione a seguinte linha de código na parte inferior do documento:
include('shortcodes-personnalises.php');
Isso dirá ao sistema para incluir quaisquer alterações que você fizer no arquivo custom-shortcodes.php dentro functions.php permitindo que você os separe. Quando estiver pronto, salve suas alterações e feche o arquivo.
Etapa 2 - Criar a função de código de acesso
Em seguida, você precisará criar o código de acesso da função, instruindo-o sobre o que fazer. Selecione a opção novamente Visualizar edição do seu arquivo custom-shortcodes.php. Use o snippet de código a seguir para adicionar uma ação à qual conectar sua função:
function subscribe_link(){
return 'Follow us on <a rel="nofollow" href="https://twitter.com/BlogPasCher">Twitter</a>';
}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:
add_shortcode('sabonner', 'subscribe_link');Quando você cria um shortcode usando a função add_shortcode, você atribui uma tag de código de acesso “ ($tag) " e um gancho de função correspondente " ($func) que será executado sempre que o atalho for usado.
Em outras palavras, se a tag shortcode for [subscribe], então o gancho 'subscribe_link' redireciona o visitante para o URL fornecido.
Portanto, todo o código que você usa em seu arquivo shortcodes-personnalises.php ficará assim:
Deve-se notar que ao nomear as tags, você deve usar apenas letras minúsculas, embora os sublinhados possam ser usados. Também é fundamental evite usar hífens, pois pode interferir com outros códigos de acesso.
Passo 3 – Adicione o Shortcode de Auto-Fechamento ao Site
Agora você pode testar seu código inicial como um shortcode de fechamento automático em seu site WordPress. Usando o editor de blocos do WordPress, você pode inserir a tag [subscribe] diretamente na postagem:
Isso exibirá o seguinte conteúdo para os visitantes do seu site:
Se você estiver satisfeito com este código de acesso, não precisará fazer mais nada. No entanto, se você quiser personalizá-lo, pode pular para a próxima etapa.
Etapa 4 - Adicionar parâmetros ao código de acesso
Você pode adaptar o shortcode "se inscrever" para funcionalidade adicional para exibir outros links de mídia social. Você pode fazer isso adicionando um parâmetro para modificar a URL.
Por adicionar atributos de gerenciamento, você precisa abrir o arquivo custom-shortcodes.php e adicione o seguinte código:
function subscribe_link_att($atts) {
$default = array(
'link' => '#',
);
$a = shortcode_atts($default, $atts);
return 'Follow us on '.$a['link'];
}
add_shortcode('sabonner', 'subscribe_link_att');Isso permitirá que você personalize os links em sua tag de código de acesso para adicioná-los ao editor Gutenberg. Você pode colá-lo sobre o código anterior no arquivo códigos de acesso personalizados.php. Deve ser algo assim:
Adicionando o função shortcode_atts() combinará os atributos do usuário com todos os atributos conhecidos e quaisquer dados ausentes serão substituídos por seus valores padrão. Quando estiver pronto, salve suas alterações e feche o arquivo.
Passo 5 - Teste as configurações
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 códigos de acesso:
[subscribe link='https://www.facebook.com/live.blogpascher']Facebook[/subscribe]
[subscribe link='https://twitter.com/BlogPasCher']Twitter[/subscribe]
Isso produzirá o seguinte resultado no front-end:
Este shortcode 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.
Por exemplo, você poderá criar uma versão anexada que permite personalizar totalmente o texto âncora exibido aos usuários quando eles estiverem prestes a clicar nele. Mostraremos como fazer isso na próxima etapa.
Passo 6 – Criar Shortcode de Inclusão
O shortcode anexo será formatado da mesma forma que o exemplo anterior de fechamento automático. No entanto, ele incluirá um parâmetro adicional para a função.
Primeiro, você precisará adicionar $content = null, que identifica essa função como um código de acesso delimitador. Você pode então adicionar o do_shortcode do WordPress, que pesquisará o conteúdo por códigos de acesso.
No arquivo custom-shortcodes.php, adicione o novo shortcode anexo:
function subscribe_link_att($atts, $content = null) {
$default = array(
'link' => '#',
);
$a = shortcode_atts($default, $atts);
$content = do_shortcode($content);
return 'Suivez nous sur <a href="'.($a['link']).'" style="color: blue">'.$content.'</a>';
}
add_shortcode('sabonner', 'subscribe_link_att');Quando estiver pronto, seu arquivo custom-shortcodes.php deve ficar assim:
O código anterior tem um atributo " estilo " adicional, que mudará o texto âncora para uma cor azul. Não se esqueça de salvar suas alterações quando terminar.
Passo 7 – Adicione o Shortcode ao Site
Agora você pode inserir seu shortcode no editor de blocos do WordPress para ver o resultado final:
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 wrapper. Neste caso, escolhemos " Facebook " et Twitter :
Lá ! Agora você criou um código de acesso personalizado para os links de assinatura em suas páginas e postagens. Observe que todas as etapas mencionadas acima podem ser modificadas para criar todos os tipos de elementos diferentes usando o recurso WordPress Shortcodes.
Adicionar funcionalidades adicionais ao seu site WordPress é muito mais fácil com códigos de acesso. 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.
Outros recursos recomendados
Também convidamos você a consultar os recursos abaixo para aprofundar o controle e controle do seu site e blog.
- Como criar um botão flutuante com índice Z com Elementor
- Quando e como instalar o WordPress em um subdiretório
- Como criar um plug-in WordPress de bloco simples do Gutenberg
- Como adicionar fontes personalizadas a um site WordPress
Conclusão
Neste artigo, aprendemos como criar seu próprio shortcode no WordPress. Se você tiver alguma dúvida ou sugestão, informe-nos dentro de Comentários.
No entanto, você também poderá consultar nossos Ressources, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.
En attendant, compartilhe este artigo em suas diferentes redes sociais.
...
