Ir para o conteúdo principal

Como adicionar corretamente o código jQuery no WordPress

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

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

Você quer dominar como adicionar código jQuery no WordPress? Portanto, continue lendo para aprender mais.

Apesar do WordPress estar disponível há algum tempo, e a adição de scripts e plugins de tema já existir há algum tempo, ainda há alguma confusão sobre qual método usar. use para adicionar scripts no WordPress.

Então, tentaremos esclarecer as coisas.

Como jQuery é a estrutura JavaScript mais usada, mostraremos como adicioná-la a um tema ou plugin do WordPress.

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.

Modo de compatibilidade JQuery

Antes de começarmos a adicionar scripts no WordPress, vamos explorar o modo de compatibilidade do jQuery. O WordPress vem com uma cópia do jQuery, que você pode usar com o seu código. Quando o WordPress jQuery é carregado, ele usa o modo de compatibilidade, que é um mecanismo para evitar conflitos com outras bibliotecas. como adicionar código jQuery no WordPress

Descubra se ele O jQuery deve ser removido dos seus temas e plugins WordPress ?

Isso significa que você não pode usar o cifrão diretamente, como faria em outros projetos. Ao escrever o jQuery no WordPress, você deve usar o jQuery.

Dê uma olhada no código abaixo para ver o que quero dizer:

/ * Modo normal * / $ ('. Hideable'). On ('click', function () {$ (this) .hide ();}) / * Modo de compatibilidade * / jQuery ('. Hideable'). On ('click', function () {jQuery (this) .hide ();})

O que você precisa saber é que, com algumas modificações, você pode usar o cifrão novamente. Usar cada vez que "jQuery" em todo o seu código complicará muita escrita.

Verifique editores de código 10 para desenvolvedores do WordPress

Apenas para recapitular, se você conhece jQuery, o sinal $ é apenas um alias para jQuery () e, em seguida, um alias para uma função. A sintaxe básica é: $ (Selector) .ação () :

  • Um cifrão para definir o jQuery
  • Um (seletor) para "encontrar" elementos HTML
  • Uma ação jQuery () a ser executada nesses elementos

Se você carregar seu script no rodapé, poderá agrupar seu código em uma função anônima. Veja como fazer:

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]

(function ($) {$ ('. hideable'). on ('click', function () {$ (this) .hide ();})}) (jQuery);

Se você deseja adicionar o seu script no cabeçalho (o que você deve evitar se possívelVocê pode envolvê-lo em uma função que é executada quando o documento está pronto.

Descubra também a propósito como facilmente código no WordPress sem quebrar seu site

jQuery (document) .ready (function ($) {$ ('. hideable'). on ('click', function () {$ (this) .hide ();})});

Como vincular seus scripts ao jQuery

Agora que você pode escrever um código jQuery válido no WordPress, vincularemos nosso trabalho ao nosso site. No WordPress, o processo é chamado ' enqueueing "(sistema de cauda) Para um site HTML normal, devemos usar a tagescrita> para adicionar scripts.

O WordPress pode fazer a mesma coisa, mas usaremos os recursos especiais do WordPress para conseguir isso. Dessa forma, o WordPress gerencia todas as nossas dependências para nós.

Se você estiver trabalhando em um tema, poderá usar a função wp_enqueue_script () dentro do seu arquivo functions.php Arquivo. Veja como você pode fazer isso:

function my_theme_scripts () {wp_enqueue_script ('my-great-script', get_template_directory_uri (). '/js/my-great-script.js', array ('jquery'), '1.0.0', true); } add_action ('wp_enqueue_scripts', 'my_theme_scripts');

A função leva cinco argumentos. O primeiro você pode usar para denotar o script, o segundo é a localização do arquivo de script, o terceiro parâmetro é uma matriz de dependência.

Eu adicionei jQuery como uma dependência porque o script o usa. Se você criar um script que depende de "my-grande-script Você precisa adicioná-lo à lista de dependências para que o WordPress saiba quais arquivos ele precisa carregar primeiro.

Descubra também Como carregar o JavaScript no WordPress

O quarto parâmetro é um número de versão e o quinto permite que o WordPress saiba onde colocar o script. Por padrão, os scripts serão carregados no cabeçalho, o que é uma prática ruim, pois retarda o carregamento da página do seu site (navegadores interrompem o carregamento de todas as páginas, sempre que um bloqueio est rencontré). Você deve carregar todos os seus scripts no rodapé, se possível, criando o quinto parâmetro " verdadeiro ".

Como adicionar um script no painel de instrumentos

adicionar código jQuery corretamente no WordPressVocê também pode adicionar scripts no painel de instrumentos. As funções usadas são exatamente as mesmas, você só precisa usar um " gancho " diferente. Dê uma olhada no exemplo abaixo:

função my_admin_scripts () {wp_enqueue_script ('my-great-script', plugin_dir_url (__FILE__). '/js/my-great-script.js', array ('jquery'), '1.0.0', true); } add_action ('admin_enqueue_scripts', 'my_admin_scripts');

Em vez de usar wp_enqueue_scripts devemos usar admin_enqueue_scripts, e isso é tudo !

O uso de tags condicionais

Use tags condicionais para carregar seus scripts apenas quando necessário. Isso é mais frequentemente usado no painel, onde você gostaria de usar um script apenas em uma página específica. Isso economiza largura de banda e tempo de processamento, o que significa tempos de carregamento mais rápidos para o seu site.

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]

Descubra também o nosso Plugins 10 WordPress para melhorar a velocidade de carregamento do seu blog

Dê uma olhada os admin_enqueue_scripts documentação no WordPress Codex para mais informações.

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. Mapas Interativos do Mundo

Interactive World Maps é um plugin para WordPress que ajuda a criar quantos mapas você quiser, com marcadores interativos e coloridos, continentes, países ou regiões.

Mapas mundiais interativos

É totalmente compatível com a nova versão do WordPress e para Visual Composer. Graças a este plugin, você pode exibir vários tipos de regiões, como: um mapa do mundo inteiro, um continente ou um subcontinente (África, Europa, Américas, Ásia, Oceania e todos os seus subcontinentes), um país, um país dividido por suas regiões, um estado dos Estados Unidos, os Estados Unidos divididos por áreas metropolitanas, um estado dos Estados Unidos dividido por áreas metropolitanas.

Descarregar | Demo | hospedagem na web

2. Formulário de Contato AJAX com Acompanhamento

Este plugin do WordPress permite adicionar facilmente formulários de contato ou comentário ao seu blog do WordPress. Ele vem com um gerenciador de configurações que pode ser acessado diretamente através do painel do WordPress.wp-ajax-contact-form-tracking-plugin-wordpress-to-segurança

Suas principais características são, entre outras: a fpara email, o suporte de Matemática CAPTCHA em formulários, customização e configuração via painel do WordPress, a possibilidade de ddefina um autoresponder personalizado, suporte para CSS personalizado e muito mais

DescarregarDemohospedagem na web 

3. Gateway de pagamento padrão do PayPal para formulários Ninja

O gateway padrão do PayPal para formulários Ninja permite que você crie formulários que se integram perfeitamente ao gateway de pagamento do PayPal. 

Gateway de pagamento padrão Paypal para formulários ninja

Você poderá criar formulários de pedido personalizados e receber pagamentos usando contas padrão do Paypal. Suas principais características são: integração fácil e rápida, integração IPN, capacidade de ativar / desativar o gateway do PayPal em formulários individuais, suporte para pagamentos regulares, etc.

Descarregar | Demo |  hospedagem na web

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. [Recomendado]

Outros recursos recomendados

Também convidamos você a consultar os recursos abaixo para aprofundar o controle e controle do seu site e blog.

Conclusão

Aqui ! É isso neste tutorial. Espero que agora você saiba como adicionar script ao WordPress. sinta-se livre para compartilhe a dica com seus amigos em suas redes sociais.

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 seu Comentários e sugestões na seção dedicada.

... 

Este artigo contém 1 comentário

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
2 ações
ação2
chilrear
Enregistrer