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 é o framework JavaScript mais usado, mostraremos como adicioná-lo a um tema ou WordPress Plugin.

Mas antes, se você nunca instalou o WordPress, descubra Como instalar um blog WordPress em 7 etapas 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.

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:

(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 recebe cinco argumentos. O primeiro você pode usar para se referir ao script, o segundo é a localização do arquivo de script, o terceiro parâmetro é uma matriz de dependências.

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

Você 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.

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

Mapas Mundiais Interativos é um WordPress Plugin que o ajuda a criar quantos mapas quiser, com marcadores interativos e coloridos, continentes, países ou regiões.

É 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

Ce WordPress Plugin permite que você adicione facilmente formulários de contato ou comentários ao seu blog WordPress. Ele vem com um gerenciador de configurações que pode ser acessado diretamente através do painel do WordPress.

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

Descarregar | Demo | hospedagem 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. 

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

Outros recursos recomendados

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

• Como usar categorias e tags de forma eficaz no WordPress
• Como criar um menu sensível para WordPress móvel
• Como criar uma intranet do WordPress para sua organização
• Como instalar um plugin no WordPress

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.

...