Quer saber como carregar JavaScript no WordPress?

Todos tema WordPress geralmente é composto por arquivos PHP, HTML, CSS e JavaScript. JavaScript é uma linguagem de programação popular entre os desenvolvedores. tema WordPress. É uma linguagem que torna uma página HTML interativa e também permite que você interaja com o servidor.

Saber como usá-lo em seu site será uma grande vantagem.

Para realmente usar o JavaScript, você precisa saber como carregá-lo no seu site.

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.

Como carregar JavaScript WordPress

Vamos voltar um pouco e dar uma primeira olhada em como o WordPress carrega scripts e estilos. Você aprendeu que, ao criar os arquivos JavaScript, pode adicioná-los à página na seção de cabeçalho ou rodapé.

Descubra também nosso tutorial sobre Como comprimir seus arquivos CSS, HTML e Javascript

O WordPress faz exatamente a mesma coisa, mas você não pode simplesmente colocar essas tags de script no arquivo de cabeçalho ou rodapé do seu tema WordPress. WordPress usa um mecanismo de carregamento inteligente chamado “ enqueueing ".

Esse mecanismo é necessário para dar sentido às dependências. Se você estiver escrevendo o código jQuery para o seu tema WordPress, o próprio jQuery deverá ser carregado primeiro.

Você escreve um código que se baseia em um plugin jQuery. Nesse caso, o jQuery deve ser carregado primeiro, depois o plug-in do jQuery e, em seguida, o seu código.

Como "Enfileirar" scripts (Adicionar à fila)

Você pode enfileirar scripts em sua pasta de temas do WordPress ou em seu WordPress Plugin. Aqui está o código completo para incluir um script que depende do jQuery:

my_theme_scripts da função () {

 wp_enqueue_script ('meu-script ", get_template_directory_uri ().' /js/my-script.js ', array (' jquery '),' 1.0.0 ', verdadeiro);

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Em primeiro lugar, uma função deve ser " curvo No WordPress (Usando Hooks WordPress). O primeiro argumento da função Add_action () informa ao WordPress onde esses scripts devem ser colocados:

• No espaço público
• No painel de instrumentos

Se você usar " wp_enqueue_scripts Eles serão carregados no espaço público, se você usar " admin_enqueue_scripts Eles serão carregados no painel.

Na função « add_action Você pode usar " wp_enqueue_script Para adicionar os scripts que você precisa. A função usa um parâmetro necessário e quatro parâmetros opcionais:

• O primeiro parâmetro é o nome do seu script. Você pode escolher o que deseja, mas não deixe de usar um nome exclusivo.
• O segundo parâmetro deve conter a localização do arquivo no seu tema WordPress ou WordPress Plugin.
• O terceiro parâmetro contém uma série de dependências. No exemplo acima, eu disse que jQuery é uma dependência. Todas as dependências são carregadas antes do script em questão.
• O quarto parâmetro é um número de versão
• O quinto e último parâmetro indica se você deseja carregar o script no cabeçalho ou rodapé. Use "true" para carregar no rodapé ou "false" para carregar o script no cabeçalho (você também não pode preencher este parâmetro).

Dependências

O WordPress oferece uma cópia do jQuery, e é por isso que você pode adicioná-lo como uma dependência sem complicações. Há um grande número de outros scripts e plug-ins jQuery que o WordPress oferece. Se o seu código depende de um deles, você não precisa usar uma de suas cópias, apenas adicione-a como uma dependência. aqui está um lista de scripts que o WordPress ofertas.

Se você incluir vários scripts independentes, poderá adicioná-los como dependências exatamente da mesma maneira. Dê uma olhada no exemplo abaixo:

my_theme_scripts da função () {

 wp_enqueue_script ("script my-base", get_template_directory_uri (). '/js/my-base-script.js', array ('jquery'), '1.0.0', true);

 wp_enqueue_script ("my-script-extension", get_template_directory_uri (). '/js/my-script-extension.js', array ("my-script-base '),' 1.0.0 ', true);

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Como o primeiro script depende do jQuery, o próximo script também depende dele. Portanto, você não precisa adicionar o jQuery como uma dependência para ambos. Isso facilita o gerenciamento de dependências.

condicional Carregando

Às vezes, você deseja usar seu script em todas as páginas, mas muitas vezes você deseja carregar um script em uma página específica. Isso é especialmente verdadeiro ao considerar a adição de scripts ao painel. Um bom exemplo é o uso de códigos de acesso. Os códigos de acesso permitem que os usuários criem exibições avançadas no editor de texto visual usando alguns truques simples.

my_theme_scripts da função () {

 wp_register_script ('meu-script', get_template_directory_uri (). '/js/my-script.js', array ('jquery'), '1.0.0', verdadeiro);

 wp_enqueue_script ('meu-script');

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Salvamos o script para que o WordPress aprenda sobre o script, mas usamos o " enqueue ". Dessa maneira, o script será adicionado apenas à página se o código de acesso for usado nessa página.

Outro método de carregar scripts com condições é usar funções condicionais. Se você deseja carregar um script em todas as páginas de arquivo da categoria, você pode usar a função is_category ().

Por exemplo, você pode criar um carrossel de imagens que os usuários podem adicionar ao artigo como este: [ids do carrossel = '42,124,123,331,90, XNUMX ′]. Um carrossel será criado na página do artigo usando as imagens indicadas por seus IDs.

Para fazer isso, você deve criar um arquivo " carousel.js Que é baseado no jQuery. Aqui está um código para chegar lá (ele não cria um carrossel, mas permite que você veja como o processo de carregamento acontece):

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

my_theme_scripts da função () {

 wp_register_script ('meu-carrossel', get_template_directory_uri (). '/js/my-carousel.js', array ('jquery'), '1.0.0', verdadeiro);

}

add_shortcode ('carrossel', 'meu_carossel');

Função my_carousel ($ args) {

 $ atts = shortcode_atts (matriz (

 'Ids' => ",

 ), $ Atts, 'carrossel');

 wp_enqueue_script ('meu-carrossel');

 // Código para exibir o carrossel aqui

}

Remoção e substituição de scripts

Esse é de longe um cenário comum, mas às vezes você pode precisar remover ou substituir um script. Caí em situações em que um script adicionado por um plugin (mas não usado pelo tema) estava causando problemas de compatibilidade. “Retirar” foi a melhor opção, pois o erro desapareceu completamente.

Você também pode substituir o jQuery por uma versão mais recente se estiver testando algo para ter certeza de que será compatível com as versões mais recentes.

Nessas situações, as funções wp_deregister_script () "E" wp_dequeue_script () São úteis. Veja como editar o código já adicionado no WordPress.

my_theme_scripts da função () {

 wp_deregister_script ('jquery');

 wp_enqueue_script ('jquery', get_template_directory_uri (). '/js/jquery3.0.0.js', array (), '3.0.0', true);

 wp_enqueue_script ('meu-script', get_template_directory_uri (). '/js/my-script.js', array ('jquery'), '1.0.0', verdadeiro);

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Pensamentos finais

Este método de upload para o WordPress é ótimo porque permite que você adicione seus scripts de forma modular. Isso permitirá que você garanta que as dependências sejam adicionadas de maneira modular.

Descubra também alguns plugins premium do WordPress  

Você pode usar outro WordPress plugins para dar uma aparência moderna e otimizar o manuseio do seu blog ou site.

Oferecemos a você aqui alguns plugins premium do WordPress que ajudarão você a fazer isso.

1. Pacote Premium de SEO

Premium SEO Pack é um WordPress Plugin que otimiza seu SEO e compacta CSS para melhorar a velocidade de carregamento do seu site.

O plugin também permite que você gerencie o design do seu site em apenas alguns cliques. Seus recursos incluem: compressão CSS e JS, integração de mapa de site de vídeo e snippet, formatação de arquivo HTML e XML, redirecionamento de página 404 e 301, compartilhamento de mídia social, fornecimento de 'Etiqueta ALT, layout altamente personalizável

Descarregar | Demo | hospedagem na web

2. Selecionador de horário de entrega do Woocommerce para envio

Woocommerce Delivery Time Picker for Shipping é uma extensão WooCommerce que permite aos clientes escolher a data e hora de entrega na página de checkout. 

Os clientes poderão selecionar o tempo de entrega do pacote em casa. O prazo de entrega será visível para os administradores do site e também será enviado por e-mail aos administradores do site ou da loja online.

Descarregar | Demo | hospedagem na web

3. herói do menu

Este plugin permite que você crie seu próprio menu WordPress personalizado em algumas etapas bastante fáceis. Em particular, permite que você crie de forma fácil e intuitiva um menu WordPress elegante e profissional. 

Do mega menu mais complexo e cheio de recursos, ao menu mais simples com o menu suspenso, o plug-in WordPress HeroMenu configura qualquer tipo de menu e o coloca em funcionamento em minutos.

Em termos de recursos, oferece, entre outros: operação perfeita no PC, tablet e smartphone, desde CSS personalizado para adicionar seus próprios estilos ao menu, um construtor megamenu, vários navegadores suportados: Chrome, Firefox, Safari, Opera, IE9 e mais.

Descarregar | Demo | hospedagem na web

Recursos Recomendados

Confira outros recursos recomendados que o ajudarão a resolver outros erros comuns do WordPress. 

• Como Fix redirecionamento erros no WordPress
• Como criar um layout personalizado com Elementor
• Como criar uma intranet do WordPress para sua organização
• Como criar uma página de login em WordPress

Conclusão

Aqui está ! É isso neste tutorial, espero que tenha ajudado a entender como carregar JavaScript no WordPress. Não hesite em compartilhar com seus amigos no seu redes sociais preferido. 

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.

Mas enquanto isso, conte-nos sobre o seu Comentários e sugestões na seção dedicada.

...