Como adicionar JavaScripts e estilos corretamente no WordPress

Neste artigo veremos como adicionar corretamente JavaScripts e Estilos no WordPress .

Existem muitos novos desenvolvedores do WordPress que gostam de escrever código e desenvolver plugins exclusivamente para seus próprios sites ou vendê-los em vários mercados e obter um bom retorno.

Existem várias maneiras de escrever um código, mas existem apenas algumas maneiras selecionadas de escrever código de forma eficiente.

Se você puder escrever um código em duas linhas em vez de dez, estará economizando muito processamento e memória.

Se isso não importa para um site pequeno e leve, mas para um site pesado, pode significar muito.

Se você não escrever código nítido e usar os recursos disponíveis com eficiência, criará muitos conflitos para outros programas.

Por exemplo, existem várias maneiras de carregar Javascript externo pronto no WordPress para o seu plugin.

Mas se você não seguir o padrão adequado, todos os plugins ativados podem ficar bloqueados.

Este artigo é principalmente para novos desenvolvedores do WordPress que desejam desenvolver temas e plugins do WordPress.

A menos que você codifique corretamente, seu código não será profissional e qualquer produto que você fizer, não importa quão bom seja o conceito, você nunca será aceito.

Portanto, é melhor saber como adicionar JavaScripts e Estilos corretamente no WordPress .

Os erros de adicionar JavaScript

Alguns de vocês podem estar cientes do fato de que o WordPress tem uma função chamada wp_head que ajuda você a carregar qualquer coisa na seção de cabeçalho do site.

Tudo o que você precisa fazer é adicionar as seguintes linhas de código em seu arquivo de script e tudo e qualquer coisa aparecerá no cabeçalho.

add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo 'jQuery vai aqui';
}

Este é um atalho para adicionar coisas, mas não é o melhor caminho. Você tem que seguir o padrão adequado abandonando os atalhos, e esse é o ponto principal desta ilustração.

Por exemplo, você carrega o JQuery manualmente em seu plugin e outro desenvolvedor também carrega o mesmo JQuery manualmente ou por meio do padrão adequado. Se uma pessoa ativou os dois plugins, o JQuery será carregado duas vezes na memória, o que é um desperdício.

Além disso, se o JQuery carregado for diferente na versão, haveria muitas falhas nos plugins devido a conflitos. Você precisa saber como adicionar JavaScripts e Estilos corretamente no WordPress antes de escrever qualquer código.

Como evitar tais erros – o conceito de função de enfileiramento?

Como você deve saber, a comunidade de desenvolvedores do WordPress é grande e forte. Existem literalmente milhares e milhares de desenvolvedores desenvolvendo novos temas e plugins todos os dias.

Mas o que eles estão fazendo para garantir que nunca haja conflito com o método de codificação um do outro é pela função de script de enfileiramento.

Esta é a função responsável por adicionar corretamente JavaScripts e Styles no WordPress para que nunca haja conflito e bloqueio desnecessário de memória.

Ele garante uma maneira sistemática de carregar JavaScripts e Estilos. A função qp_enquque_function diz ao Wordless quando carregar esses JavaScripts e Styles, onde carregá-los e especialmente sob quais condições.

Com a ajuda deles, você não precisa carregar JQuery e coisas assim manualmente e, portanto, nunca haverá uma condição de bloqueio de memória devido ao carregamento dos mesmos arquivos repetidamente.

A razão para isso é o fato de que a função Enqueue permite que você use as bibliotecas internas que vêm com o próprio WordPress. Também reduzirá a carga do tempo de carregamento lento da página devido à ausência de carregamento manual de JavaScripts.

Etapas para adicionar corretamente JavaScripts e Estilos no WordPress-

1. Enfileirar scripts no WordPress

As linhas de código a seguir carregam o pacote JavaScript integrado que vem com o WordPress. Você tem que colocar essas linhas no arquivo de plugins quando estiver criando plugins ou tem que colocá-las em functions.php se estiver criando um tema.

function wpb_adding_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts'); 

Explicação do Código

O script é registrado através da função wp_register_script() que possui cinco parâmetros diferentes.

1. $handle – É um nome exclusivo para o script. Aqui está 'my_amazing_script'.

2. $src – Define a localização do seu script. A função de biblioteca plugins_url busca a URL apropriada da sua pasta de plugins. Uma vez obtido, ele começará a procurar o arquivo amazing_script.js dentro dele.

3. $deps – Define dependência. Você precisa adicioná-lo quando estiver pedindo ao WordPress para carregar o script da biblioteca como o Jquery.

Se os scripts já estiverem carregados na memória, eles não serão carregados novamente e ocorrerá um novo carregamento. Isso garante que não haja conflito, bloqueio de memória e perda de tempo.

4. $ver – Define o número da versão do script. Não é obrigatório.

5. $in_footer – É usado para carregar o script no rodapé. Se você deseja carregar o script no cabeçalho, deve mantê-lo como false.

Depois que tudo estiver definido, basta chamar o script com wp_enqueue_script().

2. Enfileirar estilos no WordPress

Assim como o JavaScript, você precisa enfileirar folhas de estilo. Use o seguinte trecho de código em seu arquivo de plug-in ou arquivo functions.php para a criação do tema.

function wpb_adding_styles() {
wp_register_script('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_script('my_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_styles'); 

Os códigos acima são adequados enquanto você está criando um plugin. Quando você está criando um tema, você tem que mudar plugins_url() para get_template_directory_uri(). O resto das coisas permanecerá exatamente o mesmo.

function wpb_adding_scripts() {
wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts'); 

Se você está criando um tema filho, então você tem que usar get_stylesheet_direcroy_uri() ao invés de get_template_directory_uri().

Esta é a maneira padrão de adicionar JavaScripts e Estilos corretamente no WordPress.

Se o seu plugin ou tema estiver enfrentando alguma falha, você deve modificar o código deles com as linhas de código mencionadas acima, e talvez as falhas sejam resolvidas.

Sempre siga os padrões de codificação seguidos em todo o mundo para estar na mesma página com outros desenvolvedores de sucesso.