Ir para o conteúdo principal

Como carregar o JavaScript no WordPress

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 600.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

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

Saber usá-lo em seu site será um recurso considerável.

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 dar um passo atrás e dar uma primeira olhada em como o WordPress carrega seus scripts e estilos. Você aprendeu que, ao criar arquivos JavaScript, você pode adicioná-los à sua 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 soltar essas tags de script no arquivo de cabeçalho ou rodapé do seu tema WordPress. O 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 adicionar scripts à fila do seu tema WordPress ou plugin do WordPress. 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');

Primeiro, 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 o local do arquivo no seu tema WordPress ou no plugin WordPress.
  • O terceiro parâmetro contém uma matriz de dependências. No exemplo acima, eu disse que o jQuery é um vício. 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 preocupações. Existem muitos outros scripts e plugins jQuery que o WordPress oferece. Se o seu código depende de um deles, você não precisa usar uma de suas cópias, basta adicioná-lo como uma dependência. Aqui está um lista de scripts que o WordPress ofertas.

Se você incluir vários scripts independentes um do outro, poderá adicioná-los como dependências exatamente da mesma maneira. Veja o exemplo abaixo:

my_theme_scripts da função () {

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

wp_enqueue_script ("extensão do meu script", get_template_directory_uri (). '/js/my-script-extension.js', array ("minha base de scripts '),' 1.0.0 ', true);

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

}

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 geralmente deseja carregar um script em uma página específica. Isso é especialmente verdade quando se considera adicionar scripts ao painel. Um bom exemplo é o uso de códigos de acesso. Os códigos de acesso permitem que os usuários criem visualizações avançadas no editor de texto visual com algumas dicas 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.

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

Por exemplo, você pode criar um carrossel de imagens que os usuários também podem adicionar ao artigo: [IDs do carrossel = '42,124,123,331,90']. Um carrossel será criado na página do artigo usando as imagens designadas 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', matriz ('jquery'), '1.0.0', verdadeiro);

}

add_shortcode ('carrossel', 'meu_carousel');

Função my_carousel ($ args) {

$ atts = shortcode_atts (matriz (

'Ids' => ",

), $ Atts, 'carrossel');

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

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) causou problemas de compatibilidade. "Retirada" foi a melhor opção porque o erro desapareceu completamente.

Você também pode substituir o jQuery por uma versão mais nova se testar algo para garantir que seja 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', verdadeiro);

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

Esse método de carregamento no WordPress é ótimo porque permite adicionar seus scripts de forma modular. Isso ajudará a garantir que as dependências sejam adicionadas de maneira modular.

Descubra também alguns plugins premium do WordPress

Você pode usar outros plugins do WordPress para dar uma aparência moderna e otimizar a aderência 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

O Premium SEO Pack é um plug-in do WordPress que otimiza seu SEO e comprime CSS para melhorar a velocidade de carregamento do seu site.

O plug-in também pode gerenciar o design do seu site em apenas alguns cliques. Seus recursos incluem: compactação CSS e JS, integração de sitemap de vídeo e snippet, formatação de arquivo HTML e XML, redirecionamento de página 404 e 301, compartilhamento social, entrega de e-mail Etiqueta ALT, o layout é altamente personalizado

Descarregar | Demo | hospedagem na web

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

O WoCommerce Delivery Time Picker for Shipping é uma extensão do WooCommerce que permite aos clientes escolher a data e a hora da 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 personalizado do WordPress em algumas etapas fáceis. Ele permite que você crie fácil e intuitivamente um menu WordPress elegante e profissional.

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [FREE]

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 torna funcional 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

Aprenda sobre outros recursos recomendados que o ajudarão a resolver outros erros comuns no WordPress.

Conclusão

Voila! Isso é tudo para este tutorial, espero que tenha ajudado você a entender como carregar o JavaScript no WordPress. Sinta-se livre para compartilhá-lo com seus amigos em 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.

...

Este artigo contém comentários 0

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
12 ações
ação8
chilrear2
Enregistrer2