Como adiciono um script jQuery simples ao WordPress?

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?

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 .

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!

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

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/

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>

** # 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.

Você pode adicionar javascript ou jquery personalizado usando este plugin.
https://wordpress.org/plugins/custom-javascript-editor/

Ao usar o jQuery, não se esqueça de usar o modo jquery noconflict

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);
  });
});

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:

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.

2. 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);'/>

3. 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();
});

4. 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>

5. 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');
}

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.

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.

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.

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' );

"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>

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').

function xyz_scripts() {
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'xyz_scripts');