O WordPress tem sido em nossas vidas por mais de 16 anos, no entanto, o método de adição de scripts para temas e plugins ainda permanece um mistério para muitos desenvolvedores. Neste artigo, vamos, finalmente, colocar a confusão para descansar.
Já que é um dos mais comumente usados bibliotecas Javascript, hoje nós estamos discutindo como adicionar scripts em jQuery para o seu WordPress temas ou plugins.
Mas primeiro…
Sobre jQuery Modo de Compatibilidade
Antes de iniciar a instalação de scripts como WordPress, é importante compreender o jQuery em modo de compatibilidade.
Como você está provavelmente ciente que, o WordPress vem pré-carregado com jQuery, que você pode usar com o seu código.
WordPress’ jQuery também tem um “modo de compatibilidade”, que é um mecanismo para evitar conflitos com outras bibliotecas de idioma.
Parte deste mecanismo de defesa significa que você não pode usar o sinal$, diretamente como você pode em outros projetos.
Em vez disso, ao escrever jQuery para WordPress que você precisa para usar o jQuery.
Confira o código abaixo um exemplo:
Carregamento essência 1888a154b37133479e4049ee943e0fb7
O problema é, escrever o jQuery um zilhão de vezes leva mais tempo, torna mais difícil para ler, e pode inchar seu script.
A boa notícia?
Com algumas modificações, você pode voltar a utilizar o nosso adorável sinal de dólar novamente.
BTW, se você é novo para o jQuery, o sinal $ é apenas um alias para a jQuery(), em seguida, um alias para uma função.
A estrutura básica se parece com isso: $(selector).(ação). O sinal de dólar define o jQuery… o “(seletor)” consultas ou encontrar elementos HTML… e, finalmente, o “jQuery (ação)” é a ação a ser executada sobre os elementos.
Como podemos obter em torno de nosso problema de compatibilidade… aqui estão um par de opções viáveis:
1.Digite jQuery Modo Stealth
A primeira forma de contornar o modo de compatibilidade é obter furtivo com o seu código.
Por exemplo, se você está a carregar o script no rodapé, você pode quebrar seu código em uma função anônima, que irá mapear a galeria $.
Como no exemplo abaixo:
Carregamento essência 1888a154b37133479e4049ee943e0fb7
Se você deseja adicionar o script no cabeçalho (que você deve evitar, se possível, mais sobre isso abaixo), você pode juntar tudo em um documento pronto para a função, passando a $ ao longo do caminho.
Carregamento essência 1888a154b37133479e4049ee943e0fb7
2.Enter “Sem Conflito” Modo De
Outra forma simples de evitar soletrando jQuery para entrar “sem conflito” modo e usar um atalho diferente.
Neste caso: $j em vez do padrão de $.
Tudo que você tem a fazer é declarar isso no topo do seu script:var $j = jQuery.noConflict();
Tudo bem, agora você sabe mais sobre como escrever válido código jQuery para WordPress, vamos adicioná-lo ao nosso site.
Como Adicionar Scripts de jQuery Para WordPress
Uma das maneiras mais simples de adicionar scripts de jQuery para WordPress é através de um processo chamado de “enqueueing.”
Para um HTML comum website, iremos utilizar o elemento para adicionar scripts. WordPress acaba fazendo a mesma coisa, mas vamos usar o especial WP funções para alcançá-lo.
Desta forma, ele trata de todas as nossas dependências para nós (graças WP!).
Se você estiver trabalhando em um tema, você pode usar o wp_enqueue_script() função dentro de seu functions.php arquivo.
Aqui está o que ele se parece:
Carregamento essência 1888a154b37133479e4049ee943e0fb7
Esta função leva cinco argumentos:
- $handle – um identificador exclusivo que você pode usar para se referir ao script.
- $src – o local do arquivo de script.
- $deps – especifica uma matriz de dependências.
- $ver – o número da versão do seu script.
- $in_footer – WordPress permite saber onde colocar o script.
*Algo para observação de cerca de us $in_footer é que, por padrão, os scripts serão carregados no cabeçalho.
Isso é uma má prática e pode diminuir drasticamente para baixo seu site. Portanto, se você deseja colocar o script no rodapé, certifique-se de que este parâmetro é definido como true.
A Adição De Scripts Para A Administração Do WordPress
Você também pode adicionar scripts para a administração. As funções utilizadas são exactamente os mesmos, você só precisa usar um outro gancho.
Por exemplo:
Carregamento essência 1888a154b37133479e4049ee943e0fb7
Em vez de ligar para wp_enqueue_scripts precisamos usar admin_enqueue_scripts.
Que é isso!
Realmente.
Como De Registrar WordPress’ jQuery
Mas o que se pretende utilizar uma versão do jQuery para o WordPress pré-carrega?
Você pode enfileirar-lo… mas que deixa duas versões do JQ na página.
Para evitar isso, temos de registrar WP versão.
Aqui está o que acontece:
É tão simples como usar o wp_deregister_script() para cancelar o registro WP-jQuery e, em seguida, incluindo o jQuery script que você deseja adicionar.
No exemplo acima nós usamos o Google hospedado biblioteca jQuery, mas você obviamente vai substituí-lo com o URL de seu próprio script.
Que Você não deve se Registrar Scripts Antes de Colocar?
Se você deseja carregar seus scripts quando necessário, em vez de diretamente de carregá-los em suas páginas, que você pode registrar o script anterior.
Por exemplo, no wp_loaded:
Uma vez que você fez isso, você pode, em seguida, colocar os scripts quando você precisa deles:
Lembre-se de usar os mesmos nomes, para evitar colidir com outros scripts.
Usando Tags Condicionais
Use tags condicionais para carregar apenas os scripts quando necessário.
Isso é usado mais frequentemente em administração, onde você iria querer usar um script em uma página específica (e não de toda a administração). Isso também economiza largura de banda e tempo de processamento, o que significa tempo de carregamento mais rápido para o seu website.
Dê uma olhada na administração enqueue scripts documentação no WordPress Codex para obter mais informações.
Adicionar o jQuery Para WordPress Usando Plugins
O plugin WP directory também tem muitos plugins que você pode usar para inserir scripts para o seu WordPress posts, páginas, ou temas.
Alguns bem conhecidos JavaScript / jQuery plugin exemplos incluem: Avançado Campos Personalizados, Simples Custom CSS e JS, Scripts n Estilos, patrimonial e de Limpeza.
Script de Sua Própria História jQuery
Obter uma melhor compreensão do jQuery só vai fazer o trabalho que você faz mais impactante. Se é para o seu próprio website, o cliente ou projetos.
o jQuery é conhecido por sua simplicidade, e como você (espero) a aprendi neste artigo, a adição de simples scripts de jQuery para WordPress é muito fácil uma vez que você sabe como.
Sim, há um pouco de uma sobrecarga em comparação ao uso de baunilha HTML, mas há também a vantagem de gerenciamento de dependência e clareza.
Não só isso, através do emprego de pequenos truques, como ignorando blogs WP padrão de compatibilidade, você vai salvar um monte de tempo, esforço e inchado código.
