Como adiciono um script jQuery simples ao WordPress?

121

Eu li o Codex e alguns posts sobre o uso do jQuery no WordPress, e é muito frustrante. Eu tenho o máximo de carregamento do jQuery em functions.phparquivo, mas todos os guias são ruins porque eles assumem que você já tem uma tonelada de experiência no WordPress. Por exemplo, eles dizem que agora que estou carregando o jQuery através do functions.phparquivo, agora tudo o que preciso fazer é carregar meu jQuery.

Como exatamente eu faço isso? Em quais arquivos, especificamente, eu adiciono código? Como exatamente eu o adiciono para uma única página do WordPress?

Cidadão
fonte
3
o que você tentou que faz você pensar que todos os guias são ruins?
undefined
1
Em que guia em que etapa se você tiver que problema?
22812 pixelistik
Você pode ser específico? O que você tentou e não funcionou?
Ahmed Fouad
4
Concordo com o @Citizen, é um campo minado para entender o que fazer com o wordpress, pois as instruções não são muito completas para iniciantes em alguns guias encontrados online.
Harry

Respostas:

192

Eu sei o que você quer dizer sobre os tutoriais. Aqui está como eu faço:

Primeiro você precisa escrever seu script. Na pasta do seu tema, crie uma pasta chamada algo como 'js'. Crie um arquivo nessa pasta para o seu javascript. Por exemplo, your-script.js. Adicione seu script jQuery a esse arquivo (você não precisa de <script>tags em um arquivo .js).

Aqui está um exemplo de como o script jQuery (em wp-content / themes / your-theme / js / your-scrript.js) pode parecer:

jQuery(document).ready(function($) {
  $('#nav a').last().addClass('last');
})

Observe que eu uso jQuery e não $ no início da função.

Ok, agora abra o arquivo functions.php do seu tema. Você desejará usar a wp_enqueue_script()função para poder adicionar seu script e também informar ao WordPress que ele se baseia no jQuery. Veja como fazer isso:

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_enqueue_script(
        'your-script', // name your script so that you can attach other scripts and de-register, etc.
        get_template_directory_uri() . '/js/your-script.js', // this is the location of your script file
        array('jquery') // this array lists the scripts upon which your script depends
    );
}

Supondo que seu tema tenha wp_head e wp_footer nos lugares certos, isso deve funcionar. Entre em contato se precisar de mais ajuda.

Perguntas do WordPress podem ser feitas no WordPress Answers .

kdev
fonte
15
Eu tive que adicionar add_action ('wp_enqueue_scripts', 'add_my_script'); para carregar isso, mas ainda é a resposta mais clara.
27613 Ele Munjeli
em qual arquivo você o adicionou? @EleMunjeli
Francisco Corrales Morales
10
Obrigado, Ele Munjeli, pela dica de add_action. TAMBÉM: se você estiver trabalhando com um tema filho, use get_stylesheet_directory_uri.
Screenack
obrigado cara. você salvar meu dia você cortou está funcionando perfeitamente para mim
A EasyLearn Academy
Mesmo após isso, eu ainda estou recebendo Uncaught TypeError: Cannot read property 'fn' of undefinede Uncaught TypeError: undefined is not a functionerros, mesmo quando outro script está sendo enfileirado no arquivo de funções, e que funciona bem
Lee
44

Depois de muita pesquisa, finalmente encontrei algo que funciona com o WordPress mais recente. Aqui estão as etapas a seguir:

  1. Encontre o diretório do seu tema, crie uma pasta no diretório para seus js personalizados ( custom_js neste exemplo ).
  2. Coloque sua jQuery personalizada em um arquivo .js neste diretório ( jquery_test.js neste exemplo ).
  3. Certifique-se de que seu jQuery .js personalizado tenha a seguinte aparência:

    (function($) {
    $(document).ready(function() {
    $('.your-class').addClass('do-my-bidding');
    })
    })(jQuery);
  4. Vá para o diretório do tema, abra o functions.php

  5. Adicione um código próximo à parte superior que se parece com isso:

    //this goes in functions.php near the top
    function my_scripts_method() {
    // register your script location, dependencies and version
       wp_register_script('custom_script',
       get_template_directory_uri() . '/custom_js/jquery_test.js',
       array('jquery'),
       '1.0' );
     // enqueue the script
      wp_enqueue_script('custom_script');
      }
    add_action('wp_enqueue_scripts', 'my_scripts_method');
  6. Confira seu site para garantir que ele funcione!
Stan
fonte
8
Obrigado, isso me ajudou muito! Para qualquer pessoa que trabalhe com um tema filho, use get_stylesheet_directory_uri () no lugar de get_template_directory_uri ()
David Taiaroa
Obrigado por esta explicação passo a passo, Stan! (e a nota sobre a utilização desta com temas criança, @DavidTaiaroa)
Marky
Isso está funcionando de maneira brilhante, mas eu só preciso que ele seja acionado em uma página específica. Existe uma maneira de modificar isso para que ele seja acionado apenas na página? Ou é necessária uma função WP totalmente diferente para esse comportamento?
HPWD 23/07/19
Quando faço isso, posso obter o jquery na minha página, mas também recebo um erro no console que parece não estar causando nenhum problema sério: GET australiana.auspro.com.au/wp-content/themes/twentytwenty/assets/… net :: ERR_ABORTED 404 (Não encontrado) Como me livrar dele?
Rez.Net 16/03
8

Se você usar o tema filho do wordpress para adicionar scripts ao seu tema, altere a função get_template_directory_uri para get_stylesheet_directory_uri, por exemplo:

Tema principal:

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_register_script(
        'parent-theme-script', 
        get_template_directory_uri() . '/js/your-script.js', 
        array('jquery') 
    );

    wp_enqueue_script('parent-theme-script');
}

Tema Criança:

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_register_script(
       'child-theme-script', 
       get_stylesheet_directory_uri() . '/js/your-script.js', 
       array('jquery') 
    );

    wp_enqueue_script('child-theme-script');
}

get_template_directory_uri: / seu-site / wp-content / themes / parent-theme

get_stylesheet_directory_uri: / seu-site / wp-content / themes / child-theme

DibaCode
fonte
6

Você pode adicionar jQuery ou javascript no arquivo function.php do tema. O código é o seguinte:

add_action( 'wp_enqueue_scripts', 'add_my_script' );

function add_my_script() {
wp_enqueue_script(
    'your_script_name', // your script unique name 
    get_template_directory_uri().'/js/your-script.js', //script file location
    array('jquery') //lists the scripts upon which your script depends
);
}

Para mais detalhes, visite este tutorial: http://www.codecanal.com/add-simple-jquery-script-wordpress/

Jitendra Damor
fonte
4

Além de colocar o script nas funções, você pode "apenas" incluir um link (uma tag de rela de link) no cabeçalho, rodapé, em qualquer modelo, sempre. Você só precisa ter certeza de que o caminho está correto. Sugiro usar algo assim (supondo que você esteja no diretório do seu tema).

<script type="javascript" href="<?php echo get_template_directory_uri();?>/your-file.js"></script>

Uma boa prática é incluir isso antes da etiqueta do corpo de fechamento ou pelo menos antes do rodapé. Você também pode usar o php includes ou vários outros métodos para extrair esse arquivo.

<script type="javascript"><?php include('your-file.js');?></script>
josh.chavanne
fonte
Isso é tudo ruim em 2019.
Phill Healey
Concordo, mas isso foi escrito há 5 anos. Enfileiramento e o que não é, obviamente, a melhor prática.
precisa saber é o seguinte
1
Vale ressaltar, já que este post é bastante destacado no Google. Eu odiaria que alguém viesse aqui e começasse a usar más práticas, porque elas se depararam com um antigo questionário.
21719 Phillip Healey
3

** # Método 1: ** Tente colocar seu código jquery em um arquivo js separado.

Agora registre esse script no arquivo functions.php.

function add_my_script() {
    wp_enqueue_script(
      'custom-script', get_template_directory_uri() . '/js/your-script-name.js', 
        array('jquery') 
    );
}
add_action( 'wp_enqueue_scripts', 'add_my_script' );

Agora você está pronto.

O registro de scripts em funções traz benefícios, pois <head> seção quando a página é carregada, portanto, ele faz parte do header.php sempre. Portanto, você não precisa repetir seu código sempre que escrever um novo conteúdo html.

#Método 2: coloque o código do script dentro do corpo da página sob a <script>tag. Então você não precisa registrá-lo nas funções.

Rajan471
fonte
O método 2 está brincando com fogo.
John Hascall
3

Existem muitos tutoriais e respostas aqui sobre como adicionar seu script a ser incluído na página. Mas o que eu não consegui encontrar é como estruturar esse código para que funcione corretamente. Isso ocorre porque o $ não está sendo usado neste formato de JQuery.

Então, aqui está o meu código e você pode usá-lo como modelo.

jQuery(document).ready(function( $ ){
  $("#btnCalculate").click(function () {
        var val1 = $(".visits").val();
        var val2 = $(".collection").val();
        var val3 = $(".percent").val();
        var val4 = $(".expired").val();
        var val5 = $(".payer").val();
        var val6 = $(".deductible").val(); 
        var result = val1 * (val3 / 100) * 10 * 0.25;
        var result2 = val1 * val2 * (val4 / 100) * 0.2;
        var result3 = val1 * val2 * (val5 / 100) * 0.2;
        var result4 = val1 * val2 * (val6 / 100) * 0.1;
        var val7 = $(".pverify").val();
        var result5 = result + result2 + result3 + result4 - val7;
        var result6 = result5 * 12;
        $("#result").val("$" + result);
        $("#result2").val("$" + result2);
        $("#result3").val("$" + result3);
        $("#result4").val("$" + result4);
        $("#result5").val("$" + result5);
        $("#result6").val("$" + result6);
  });
});
Roubar
fonte
3

Responda aqui: https://premium.wpmudev.org/blog/adding-jquery-scripts-wordpress/

Apesar do WordPress existir há algum tempo, e o método de adicionar scripts a temas e plugins ser o mesmo há anos, ainda há alguma confusão sobre como exatamente você deve adicionar scripts. Então, vamos esclarecer.

Como o jQuery ainda é a estrutura Javascript mais usada, vamos dar uma olhada em como você pode adicionar um script simples ao seu tema ou plugin.

Modo de compatibilidade do jQuery

Antes de começarmos a anexar scripts ao WordPress, vejamos o modo de compatibilidade do jQuery. O WordPress vem pré-empacotado com uma cópia do jQuery, que você deve usar com o seu código. Quando o jQuery do WordPress é carregado, ele usa o modo de compatibilidade, que é um mecanismo para evitar conflitos com outras bibliotecas de idiomas.

O que isso se resume é que você não pode usar o cifrão diretamente como faria em outros projetos. Ao escrever o jQuery para WordPress, você precisa usar o jQuery. Dê uma olhada no código abaixo para ver o que quero dizer:

Ahmed Elcheikh
fonte
2

As soluções que eu vi são da perspectiva de adicionar recursos javascript a um tema. No entanto, o OP perguntou, especificamente: "Como exatamente o adiciono para uma única página do WordPress?" Parece que pode ser assim que eu uso javascript no meu blog Wordpress, onde posts individuais podem ter "widgets" diferentes baseados em javascript. Por exemplo, uma postagem pode permitir que o usuário altere variáveis ​​(controles deslizantes, caixas de seleção, campos de entrada de texto) e plota ou lista os resultados.

A partir da perspectiva do JavaScript:

  1. Escreva suas funções JavaScript em um arquivo “.js” separado

Nem pense em incluir JavaScript significativo no html da sua postagem - crie um ou mais arquivos JavaScript com seu código.

  1. Faça a interface do seu JavaScript com o html da sua postagem

Se o seu widget JavaScript interage com os controles e campos html, você precisará entender como consultar e definir esses elementos do JavaScript e também como permitir que os elementos da interface do usuário chamem suas funções JavaScript. Aqui estão alguns exemplos; primeiro, do JavaScript:

var val = document.getElementById(“AM_Freq_A_3”).value;

E do html:

<input type="range" id="AM_Freq_A_3" class="freqSlider" min="0" max="1000" value="0" oninput='sliderChanged_AM_widget(this);'/>
  1. Use o jQuery para chamar a função de inicialização do seu widget JavaScript

Adicione isso ao seu arquivo .js, usando o nome da sua função que configura e desenha o widget JavaScript quando a página estiver pronta para isso:

jQuery(document).ready(function( $ ) {
    your_init_function();
});
  1. No código html da sua postagem, carregue os scripts necessários para a sua postagem

No editor de código do Wordpress, normalmente especifico os scripts no final do post. Por exemplo, eu tenho uma pasta de scripts no meu diretório principal. Dentro, tenho um diretório de utilitários com JavaScript comum que algumas das minhas postagens podem compartilhar - nesse caso, algumas das minhas próprias funções de utilitário matemático e a biblioteca de plotagem flotr2. Acho mais conveniente agrupar o JavaScript pós-específico em outro diretório, com subdiretórios com base na data, em vez de usar o gerenciador de mídia, por exemplo.

<script type="text/javascript" src="/scripts/utils/flotr2.min.js"></script>
<script type="text/javascript" src="/scripts/utils/math.min.js"></script>
<script type="text/javascript" src="/scripts/widgets/20161207/FreqRes.js"></script>
  1. Enfileirar jQuery

O Wordpress registra o jQuery, mas ele não está disponível, a menos que você diga ao Wordpress que precisa, enfileirando-o. Caso contrário, o comando jQuery falhará. Muitas fontes dizem como adicionar esse comando ao seu functions.php, mas suponha que você conheça outros detalhes importantes.

Primeiro, é uma má ideia editar um tema - qualquer atualização futura do tema apagará suas alterações. Faça um tema infantil. Aqui está como:

https://developer.wordpress.org/themes/advanced-topics/child-themes/

O arquivo functions.php da criança não substitui o arquivo do tema pai com o mesmo nome, é adicionado a ele. O tutorial de temas filho sugere como enfileirar o arquivo style.css pai e filho. Podemos simplesmente adicionar outra linha a essa função para também enfileirar o jQuery. Aqui está o meu arquivo functions.php inteiro para o tema filho:

<?php
add_action( 'wp_enqueue_scripts', 'earlevel_scripts_enqueue' );
function earlevel_scripts_enqueue() {
    // styles
    $parent_style = 'parent-style';
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );

    // posts with js widgets need jquery
    wp_enqueue_script('jquery');
}
Nigel Redmon
fonte
Outra alternativa é usar um plugin do gerenciador de javascript. Essa pode ser uma boa maneira para alguns, mas prefiro não depender de muitos plugins e atualizações.
Nigel Redmon
1

Você pode usar a função predefinida do WordPress para adicionar um arquivo de script ao plugin do WordPress.

wp_enqueue_script( 'script', plugins_url('js/demo_script.js', __FILE__), array('jquery'));

Veja a postagem que ajuda você a entender como é fácil implementar o jQuery e CSS no plugin WordPress.

user64745
fonte
1

Além de colocar o script nas funções, você pode "apenas" incluir um link (uma tag de rela de link) no cabeçalho, rodapé, em qualquer modelo, sempre.

Não. Você nunca deve adicionar um link a um script externo como este no WordPress. Enfileirá-los através do arquivo functions.php garante que os scripts sejam carregados na ordem correta.

Falha em enfileirá-los pode resultar em seu script não funcionar, embora esteja gravado corretamente.

Kenneth Odle
fonte
1

você pode escrever seu script em outro arquivo. E enfileirá-lo dessa maneira, suponha que seu nome seja image-ticker.js.

wp_enqueue_script( 'image-ticker-1', plugins_url('/js/image-ticker.js', __FILE__), array('jquery', 'image-ticker'), '1.0.0', true ); 

no lugar de /js/image-ticker.jsvocê deve colocar o caminho do arquivo js.

upendra tiwari
fonte
1

No WordPress, a maneira correta de incluir os scripts no seu site é usando as seguintes funções.

wp_register_script( $handle, $src )
wp_enqueue_script( $handle, $src )

Essas funções são chamadas dentro do gancho wp_enqueue_script.

Para mais detalhes e exemplos, você pode verificar Adicionando arquivos JS no Wordpress usando wp_register_script & wp_enqueue_script

Exemplo:

function webolute_theme_scripts() {
    wp_register_script( 'script-name', get_template_directory_uri() . '/js/example.js', array('jquery'), '1.0.0', true );
    wp_enqueue_script( 'script-name' );
}
add_action( 'wp_enqueue_scripts', 'webolute_theme_scripts' );
Aman Dhanda
fonte
1

"Temos o Google" cit. Para usar corretamente o script dentro do wordpress, basta adicionar bibliotecas hospedadas. Como o Google

Após a biblioteca selecionada, é necessário vinculá-la antes do script personalizado: exmpl

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

e depois do seu próprio script

<script type="text/javascript">
    $(document).ready(function () {
        $('.text_container').addClass("hidden");
    });
</script>
Vlad
fonte
0

Você só precisa carregar o jquery?

1) Como os outros guias dizem, registre seu script no arquivo functions.php da seguinte maneira:

// register scripts
if (!is_admin()) {
    // here is an example of loading a custom script in a /scripts/ folder in your theme:
    wp_register_script('sandbox.common', get_bloginfo('template_url').'/scripts/common.js', array('jquery'), '1.0', true);
    // enqueue these scripts everywhere
    wp_enqueue_script('jquery');
    wp_enqueue_script('sandbox.common');
}

2) Observe que não precisamos registrar o jQuery porque ele já está no núcleo. Certifique-se de que wp_footer () seja chamado em seu footer.php e wp_head () seja chamado em seu header.php (este é o local onde será gerada a tag de script) e o jQuery será carregado em todas as páginas. Quando você enfileira o jQuery com o WordPress, ele fica no modo "sem conflito", então você precisa usar o jQuery em vez de $. Você pode cancelar o registro do jQuery se desejar e registrar novamente o seu, executando wp_deregister_script ('jquery').

Eli Cole
fonte
Não, eu entendi essa parte. Carregar jquery é fácil. O que eu preciso saber é em qual arquivo adicionar meu código jquery e como.
Citizen
Coloque wp_enqueue_script ('nome do script'); antes do get_header () do modelo em que você deseja enfileirar esse script.
Eli Cole
0
function xyz_scripts() {
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'xyz_scripts');
Deepak K. sah
fonte