Como criar uma biblioteca de snippets de postagem para usar em suas postagens e páginas

Muitos sites WordPress usam código personalizado ou funções em algum lugar de suas postagens e páginas. A plataforma torna mais fácil adicionar esse código, mas se você for reutilizar snippets em todo o seu site, pode ser difícil adicionar o código manualmente sempre que precisar.

Em vez de inserir seus trechos de código manualmente sempre que forem necessários, faz mais sentido organizá-los e salvá-los usando plug-ins. Neste artigo, falaremos sobre os benefícios de manter seus snippets de código organizados e, em seguida, mostraremos como fazer isso usando o plug-in Code Snippets Extended em duas etapas. Vamos ao trabalho!

Por que você deve organizar seus snippets de código

Mesmo que você não seja um desenvolvedor, é provável que tenha que adicionar algum código ao seu site manualmente.

Muitos usuários do WordPress adicionam trechos de código personalizados a seus posts e páginas. Independentemente do seu nicho e tamanho, existem muitas situações em que você precisará adicionar um pequeno código ao seu site. Veja o Google Adsense ou o Facebook Pixel, por exemplo, que exigem que você adicione algumas linhas de JavaScript ao seu site para que funcionem. Muitos plug-ins do WordPress também exigem o uso de códigos de acesso, portanto, as chances de adicionar código personalizado ao seu site são altas.

Diante disso, é uma excelente ideia encontrar uma maneira de salvar todos os trechos de código que você está usando em seu site. Aqui está o porquê:

• Você pode consultar seu código sempre que necessário. Às vezes, você pode esquecer quais linhas de código personalizado adicionou aos seus arquivos, então vale a pena organizar seus snippets usando uma biblioteca.
• Você poderá reutilizar seus snippets de código com mais facilidade. Se você precisar usar o mesmo código várias vezes, faz sentido armazená-lo para uso posterior.

Você pode, é claro, apenas salvar esses trechos de código usando arquivos de texto normais em seu computador ou na nuvem. No entanto, usar o plug-in WordPress correto pode fornecer uma maneira mais adequada de armazená-los em seu site. Dessa forma, você saberá qual código adicionou a cada site específico com o qual trabalha.

Apresentando o plug-in estendido de snippets de código

O plugin Code Snippets Extended é uma ferramenta interessante que permite configurar uma biblioteca de código simples dentro do WordPress. Ele permite que você salve o código personalizado, identifique-o usando qualquer nome que desejar e, em seguida, adicione-o a qualquer uma de suas postagens e páginas com apenas alguns cliques.

Além disso, o plug-in também permite que você visualize os efeitos de seus trechos de código, desde que sejam JavaScript ou CSS simples. Ele também suporta PHP, mas esses snippets geralmente não são exibidos tão bem usando a funcionalidade de visualização da ferramenta.

Embora o plug-in funcione bem com o Divi Builder como um todo, há um problema que requer uma solução alternativa. Por padrão, a ferramenta adiciona um novo botão ao editor, que permite adicionar qualquer um dos fragmentos de sua biblioteca à sua postagem ou página. No entanto, o botão desaparece ao alternar para o Divi Builder. A correção é simples, porém, vamos explorá-la mais em um minuto.

Características principais:

• Salve todos os seus trechos de código personalizados em uma biblioteca centralizada em seu painel.
• Identifique cada fragmento usando um nome exclusivo.
• Atribua códigos de acesso fáceis de usar para cada item em sua biblioteca.
• Adicione snippets às suas postagens e páginas usando uma nova opção no editor do WordPress, sem ter que tocar no código.

Preço: GRÁTIS | Mais Informações

Como criar uma biblioteca de snippets de postagem para usar em suas postagens e páginas (em 2 etapas)

Antes de começarmos, você precisará instalar e ativar o plugin. Quando estiver pronto, pule para a etapa número um!

Etapa 1: Adicionar novos snippets à sua biblioteca

Depois de instalar o plug-in, você verá uma nova guia chamada Snippets no painel do WordPress. Clique nele e procure a opção Adicionar trechos . Na próxima tela, você poderá definir um nome para identificar seu código na biblioteca, bem como fazer upload de quaisquer arquivos de mídia necessários para a execução do código:

Lembre-se de que o código ainda funcionará mesmo que você não carregue a mídia necessária desta página, contanto que ela esteja em sua biblioteca. Esse recurso existe apenas para que você possa visualizar os efeitos do seu código usando o botão Testar na parte inferior da página.

Continuando, você também verá um editor no qual digitará seu código CSS, JavaScript, PHP e jQuery. No entanto, ele precisará ser empacotado em tags específicas para cada idioma. Aqui estão alguns exemplos rápidos para referência:

<style>CSS goes between these tags.</style>

<?php PHP tags, on the other hand, are different, so keep that in mind. ?>
<script type="text/javascript"> Same goes for JavaScript, which uses this tag type. </script>
<script type="text/javascript"> jQuery(function($) {
$(document).ready(function(){
// jQuery uses the most complex tags – they need to be set up exactly as shown, and any code should go within this section.
});
});
</script>

Você pode fazer referência a todas essas tags abaixo do editor sempre que adicionar um novo snippet e, desde que se lembre de que cada idioma requer um diferente, não é necessário memorizá-los. Além disso, você pode usar vários idiomas no mesmo trecho - apenas certifique-se de envolvê-los usando suas respectivas tags.

Assim que terminar de digitar ou colar o código, use o botão Salvar trecho na parte inferior da página e ele aparecerá na guia Trechos> Trechos no painel do WordPress:

Agora, tudo o que resta é testar seu novo snippet usando o editor WordPress e o Divi Builder.

Etapa 2: insira seus trechos em suas postagens e páginas Divi

Se você não estiver usando o Divi Builder, basta abrir qualquer uma das suas postagens ou páginas usando o editor normal do WordPress. No topo, você verá um novo botão Inserir Snippet :

Clicar nele irá abrir uma sobreposição exibindo todos os itens em sua biblioteca, e você pode selecionar o que desejar:

Agora, o plug-in adicionará o código ao editor e pronto - é simples assim. No entanto, se estiver usando o Divi Builder, você não conseguirá acessar esta opção. A maneira mais fácil de contornar esse problema é abrir a guia Snippets do painel em uma nova janela e copiar o código de acesso correspondente para o código que deseja adicionar. Depois de obtê-lo, volte ao Divi Builder e adicione um módulo de código à página em que está trabalhando:

Depois de entrar, cole seu código de acesso no campo Conteúdo e salve as alterações:

Agora, seu snippet funcionará normalmente. Usar o Divi Builder adiciona uma etapa ao processo, mas você ainda pode armazenar todos os seus trechos de código em uma biblioteca interna de fácil acesso.

Conclusão

Se você for como nós, você valoriza a eficiência em todos os seus projetos. Adicionar o mesmo código a várias páginas ou postagens manualmente é possível, mas não é um bom uso do seu tempo. Em vez disso, é muito melhor testar o código uma vez, salvá-lo em sua biblioteca e, em seguida, mantê-lo em seu bolso virtual de trás para quando você precisar.

O plugin Code Snippets Extended permite que você faça exatamente isso. Basta instalá-lo e seguir estas duas etapas:

1. Adicione novos trechos à sua biblioteca.
2. Insira seus trechos em seus posts e páginas Divi.

Você tem alguma dúvida sobre como adicionar trechos de código ao seu site Divi? Pergunte na seção de comentários abaixo!

Imagem em miniatura do artigo por Andrii Bezvershenko / shutterstock.com.