Práticas recomendadas para usar snippets JavaScript externos com Divi

WordPress e Divi fazem muitas coisas maravilhosas fora da caixa para facilitar a construção de um site. Mas às vezes precisamos de funcionalidades mais avançadas que só podem ser realizadas com JavaScript.

Com o Divi, você pode adicionar facilmente fragmentos de JavaScript ou jQuery (pedaços de código) ao seu tema ou página da web sem um plug-in, mesmo se você não tiver um tema filho configurado. Neste tutorial, examinaremos algumas das melhores práticas para o uso de snippets JavaScript externos com Divi.

Uma palavra rápida sobre JavaScript e jQuery

JavaScript é a mágica por trás da funcionalidade dinâmica que você vê em um site. É uma linguagem de codificação do lado do cliente construída para a web que pode acessar todos os seus arquivos de tema e executar todos os tipos de funções por meio do navegador que não seriam possíveis apenas com HTML ou CSS.

JQuery (uma das bibliotecas JavaScript mais populares) tornou muito fácil adicionar fragmentos de JavaScript aos seus sites que funcionarão em diferentes tipos de navegadores. É por isso que vemos muito jQuery sendo usado em sites hoje. JQuery também é integrado ao WordPress, portanto, qualquer código jQuery que você adicionar ao Divi funcionará se estiver formatado corretamente.

Formatação adequada de snippet JQuery em Divi / WordPress

Usando a função de documento pronto

Na maioria dos casos, eu sugeriria usar $(document).ready() em seus snippets jQuery. Qualquer JavaScript adicionado em $(document).ready() garantirá que o documento (ou DOM) esteja carregado e pronto antes de executar o JavaScript. Isso evita certas situações em que o JavaScript pode ser executado quando a página não está pronta para ser manipulada com segurança.

Em Divi, a função deve ser assim ...

jQuery( document ).ready(function() {

    // Add jQuery code here to be loaded once the DOM is ready

});

Usando “jQuery” em vez de “$” ao usar jQuery no WordPress

Como o WordPress já vem com uma versão do jQuery em modo de compatibilidade, o $ padrão para jQuery não funciona. Isso evita que ele entre em conflito com outras bibliotecas JavaScript que você pode ou não usar no WordPress. Em vez disso, você precisará usar jQuery no lugar do atalho $ .

Então, é isso…

$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});

Precisaria ser transformado nisso ...

jQuery(document).ready(function(){
  jQuery("p").click(function(){
    jQuery(this).hide();
  });
});

No entanto, se quiser manter o código menos inchado e aqueles $ atalhos, você pode usar $ vez de jQuery se adicionar $ como um argumento passado para a função de documento pronto. Isso permitirá que você mantenha o $ no snippet jQuery contido nessa função.

Aqui está como seria ...

jQuery( document ).ready(function( $ ) {
    // Add jQuery code here, using $ to refer to jQuery.
    $( "div" ).hide();
});

Ou você pode passar o $ para o jQuery com uma função simples como esta junto com a função de documento pronto ...

(function($) {
    
    // Add jQuery code here, using $ to refer to jQuery.
    $(document).ready(function(){

      $( "div" ).hide();

    });
    
})( jQuery );

Agora que entendemos algumas das melhores práticas sobre como formatar snippets de JavaScript, vamos explorar como adicioná-los adequadamente ao seu site Divi.

Adicionando trechos de JavaScript a uma única página usando o módulo de código

Se você deseja adicionar um snippet javascript (ou jquery) a uma única página no Divi, pode usar o Módulo de código. Isso garantirá que o JS não seja carregado em todas as páginas desnecessariamente, causando um pequeno aumento no tempo de carregamento da página em páginas que nem precisam dele.

Veja como fazer. Primeiro, ative o construtor divi ao editar a página que precisa do snippet JS. Em seguida, adicione um módulo de código à sua página.

O código funcionará em qualquer lugar da página, portanto, você decide onde colocá-lo.

Depois de adicionar o módulo de código, cole o snippet de JavaScript. Certifique-se de envolver o código em uma tag <script> para que o código seja reconhecido como JavaScript.

Não se esqueça de certificar-se de que seu snippet está codificado corretamente formatado, envolvendo-o com a tag <script> para que o código seja reconhecido como JavaScript. E se você estiver usando jQuery, inclua a função documento pronto para que seja carregada sempre que o documento estiver pronto para isso. Além disso, você precisará usar jQuery em seu snippet em vez da abreviação $ .

É isso! Seu snippet deve ser executado na página conforme o esperado.

Observação: a tag <script> geralmente requer que você especifique o tipo de mídia do script da seguinte maneira ...

<script type="text/javascript">
</script>

No entanto, como “text / javascript” é o tipo padrão, não há problema em deixá-lo de fora ao usá-lo para trechos de código JavaScript.

Adicionar trechos de JavaScript a todas as páginas / postagens usando opções de tema Divi (nenhum tema filho necessário)

Trechos de JavaScript também podem ser adicionados ao Divi usando a guia de integração de código do Divi em Opções de tema. Este método funciona bem para snippets JS que você deseja carregar em todas as páginas / postagens do seu site. Essa também é uma boa opção se você não tiver um tema filho ou se tiver apenas alguns trechos de JS que precisam ser adicionados ao seu site Divi e não quiser incluí-los em um arquivo JS externo.

Para localizar a seção de integração de código, navegue até Divi> Opções de tema e clique na guia Integração.

Descobrindo onde colocar seu snippet de JavaScript

Lá você verá quatro áreas em que pode adicionar código personalizado ao seu site Divi. Na maioria dos casos, seria melhor adicionar trechos de JS ao corpo. Na verdade, isso colocará seu snippet na parte inferior da página para que seja carregado depois de tudo, o que é ótimo para a velocidade de carregamento da página. Em alguns casos, você pode querer adicionar o código ao cabeçalho para que o código possa carregar mais cedo (ou se o seu documento depender da execução do JavaScript mais cedo). Portanto, você terá que testar e decidir a melhor opção que oferece o melhor equilíbrio entre desempenho, tempo e funcionalidade.

Por exemplo, você pode ter um snippet jQuery que adiciona estilo ao seu cabeçalho. Nesse caso, você não gostaria de carregá-lo no corpo (no final da página) porque o cabeçalho carregaria inicialmente sem esse estilo até que o snippet fosse lido. Isso deixaria sua parte superior com uma aparência feia para os visitantes por um breve momento. No entanto, se você carregasse na cabeça, você não teria esse atraso no estilo.

Você também pode optar por adicionar o snippet JS na parte inferior de suas postagens se tiver um código que se aplica apenas a postagens de blog. Isso evitará que o código carregue em outras páginas desnecessariamente.

As áreas de integração de código adicionarão o código diretamente à sua página, portanto, você precisará envolver seus snippets de código com a tag <script> .

Adicionando snippets JS ao Divi de um arquivo JS separado (usando um tema filho)

É sempre recomendável usar um tema filho para o seu site Divi. E uma vez que você tenha o tema filho configurado corretamente, você também pode incorporar um arquivo JS que pode ser usado para manter seus snippets JS personalizados.
Esta é definitivamente a forma preferida de lidar com javascript em sites WordPress e funciona bem com Divi também.

Criação do arquivo JS em seu tema filho

É sempre uma ótima idéia configurar um tema filho Divi, especialmente se você planeja fazer alterações nos arquivos de tema. Depois de criar um tema filho Divi, você pode criar facilmente um arquivo JavaScript onde pode colocar todos os seus snippets JS em um só lugar.

Veja como fazer.

Crie um arquivo JavaScript e adicione-o à pasta do tema filho

Usando um editor de código, crie um novo arquivo e salve-o como um arquivo JavaScript. Por exemplo, se você salvou o arquivo como um tipo “js” com o nome “scripts”, o nome completo do arquivo seria “scripts.js”. É aqui que você adicionaria todos os trechos js que deseja adicionar ao Divi. Você não precisa envolver os snippets em uma tag <script> pois o arquivo é salvo como um arquivo js.

Uma vez que o arquivo foi criado, você precisa adicioná-lo à sua pasta de tema filho. Gosto de criar uma pasta js para armazenar meus arquivos js personalizados para uma melhor organização. Para fazer isso, basta criar uma nova pasta chamada “js” na raiz da pasta do tema filho e adicionar o arquivo “scripts.js” a essa pasta.

Enfileirando scripts no arquivo Functions.php do seu tema filho

Agora precisamos enfileirar o arquivo js para que seja carregado no Divi. Se você já tem um tema filho criado, você deve ter um arquivo functions.php já criado onde você já enfileirou o arquivo style.css para o tema filho, que deve ser parecido com isto ...

function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

Agora você precisará fazer o mesmo para seu novo arquivo js. Para fazer isso, você precisará adicionar o seguinte trecho à função.

    wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/js/scripts.js', array( 'jquery' ), '1.0.0' , true );

O código final necessário para enfileirar o style.css e o arquivo scripts.js ficaria assim ...

function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/js/scripts.js', array( 'jquery' ), '1.0.0' , true );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

Pensamentos finais

Se você é novo em web design ou está apenas começando a usar o Divi, pode não estar familiarizado com JavaScript ou como adicioná-lo ao seu site. Esperançosamente, esta postagem foi útil para apontar você na direção certa e fornecer algumas práticas recomendadas que até desenvolvedores da web experientes podem apreciar.

Estou ansioso para ouvir de você nos comentários.

Saúde!