Come aggiungere un semplice script jQuery a WordPress?

Question

Ho letto il codice e alcuni post sul blog sull'utilizzo di jQuery in WordPress ed è molto frustrante. Ho finito di caricare jQuery nel file functions.php, ma tutte le guide là fuori sono schifose perché presuppongono che tu abbia già un sacco di esperienza con WordPress. Per esempio, dicono che ora sto caricando jQuery attraverso il file functions.php, ora tutto ciò che devo fare è caricare il mio jQuery.

Come esattamente faccio questo? In quali file, in particolare, aggiungo il codice? Quanto esattamente lo aggiungo per una singola pagina di WordPress?

Answer 1

So cosa intendi per le esercitazioni. Ecco come faccio:

Per prima cosa devi scrivere il tuo script. Nella cartella del tema crea una cartella chiamata qualcosa come "js". Crea un file in quella cartella per il tuo javascript. Per esempio. your-script.js. Aggiungi il tuo script jQuery a quel file (non hai bisogno dei tag <script> in un file .js).

Ecco un esempio di come lo script jQuery (in wp-content/themes/il-tuo-tema/js/your-scrript.js) potrebbe apparire:

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

Si noti che io uso jQuery e non $ all'inizio della funzione.

Ok, ora apri il file functions.php del tuo tema. Ti consigliamo di utilizzare la funzione wp_enqueue_script() in modo da poter aggiungere il tuo script e dire anche a WordPress che si basa su jQuery. Ecco come fare:

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

Supponendo che il tema è wp_head e wp_footer nei posti giusti, questo dovrebbe funzionare. Fammi sapere se hai bisogno di ulteriore aiuto.

Le domande WordPress possono essere richieste a WordPress Answers.

Answer 2

Hai solo bisogno di caricare jquery?

1) Come le altre guide dicono, registrare lo script nel file functions.php in questo modo:

// 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) Si noti che non abbiamo bisogno di registrarsi jQuery, perché è già nel nucleo. Assicurati che wp_footer() sia chiamato nel tuo footer.php e wp_head() sia chiamato nel tuo header.php (questo è dove verrà emesso il tag dello script), e jQuery verrà caricato su ogni pagina. Quando accodasti jQuery con WordPress sarà in modalità "nessun conflitto", quindi devi usare jQuery invece di $. Puoi annullare la registrazione di jQuery se vuoi e registrarla di nuovo eseguendo wp_deregister_script ('jquery').

Answer 3

Dopo molte ricerche, I , infine, trovato qualcosa che funziona con l'ultimo WordPress. Ecco i passi da seguire:

1. Trova directory del vostro tema, creare una cartella nella directory per i vostri js personalizzati (custom_js in questo esempio).
2. Inserisci la tua jQuery personalizzata in un file .js in questa directory (jquery_test.js in questo esempio).

3. Assicurati che il tuo jQuery personalizzato.js assomiglia a questo:

   (function($) { 
   $(document).ready(function() { 
   $('.your-class').addClass('do-my-bidding'); 
   }) 
   })(jQuery); 
   

4. Vai alla cartella del tema, aprire functions.php

5. Aggiungere un po 'di codice nella parte superiore che assomiglia a questo:

   //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. Controllare il tuo sito per assicurarti che funzioni!

Answer 4

Accanto a mettere lo script attraverso funzioni è possibile "solo" includere un link (un tag link rel che è) nell'intestazione, il piè di pagina, in qualsiasi modello, dove mai. Devi solo assicurarti che il percorso sia corretto. Ti suggerisco di usare qualcosa di simile (assumendo che tu sia nella directory del tema).

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

Una buona pratica è includere questo diritto prima del tag di chiusura del corpo o almeno appena prima del piè di pagina. È inoltre possibile utilizzare php include, o molti altri metodi di tirare il file in.

<script type="javascript"><?php include('your-file.js');?></script> 

Answer 5

È possibile utilizzare la funzione predefinita di WordPress per aggiungere file di script per WordPress plugin.

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

sguardo al post che vi aiuta a capire che come facilmente si può implementare jQuery e CSS in WordPress plugin.

Answer 6

** # Metodo 1: ** Prova a inserire il codice jquery in un file js separato.

Ora registra lo script nel file 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'); 

Ora che hai finito.

La registrazione di script nelle funzioni ha i suoi vantaggi come nella sezione <head> quando la pagina viene caricata, quindi è sempre una parte di header.php. Quindi non devi ripetere il codice ogni volta che scrivi un nuovo contenuto html.

#Metodo 2: inserire il codice di script all'interno del corpo della pagina sotto il tag <script>. Quindi non è necessario registrarlo nelle funzioni.

Answer 7

Se si utilizza wordpress child theme per aggiungere script per il vostro tema, si dovrebbe cambiare la funzione get_template_directory_uri a get_stylesheet_directory_uri, ad esempio:

Parent Tema:

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

bambini Tema:

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:/il-tuo-sito/wp-content/themes/genitore-tema

get_stylesheet_directory_uri:/il-tuo-sito/wp-content/themes/bambino tema

Answer 8

potete aggiungere JavaScript personalizzato o jquery usando questo plugin.
https://wordpress.org/plugins/custom-javascript-editor/

Quando si utilizza jQuery non dimenticate utilizzare jQuery modalità noConflict

Answer 9

È possibile aggiungere jQuery o javascript in file di function.php del tema. Il codice è il seguente:

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

Per maggiori dettagli visitare questo tutorial: http://www.codecanal.com/add-simple-jquery-script-wordpress/

Answer 10

"Abbiamo Google" cit. Per utilizzare correttamente lo script all'interno wordpress basta aggiungere librerie ospitati. Come Google

Dopo libreria selezionata che è necessario collegare prima lo script personalizzato: exmpl

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

e dopo il proprio script

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

Answer 11

Beside putting the script in through functions you can "just" include a link (a link rel tag that is) in the header, the footer, in any template, where ever.

No. Non si dovrebbe mai sufficiente aggiungere un link a uno script esterno come questo in WordPress. li accodamento tramite il file functions.php assicura che gli script vengono caricati nell'ordine corretto.

mancata accodare li può comportare lo script non funziona, anche se è scritto correttamente.

Answer 12

è possibile scrivere lo script in un altro file. E accodare il file in questo modo supponiamo che il nome dello script sia image-ticker.js.

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

al posto di /js/image-ticker.js si dovrebbe mettere il percorso del file js.

Answer 13

Risposta da qui

https://premium.wpmudev.org/blog/adding-jquery-scripts-wordpress/?mksi=b&utm_expid=3606929-94.SWGkQ9hyQQGxJNtgEiBgWA.1&utm_referrer=https%3A%2F%2Fwww.google.com.eg%2F

Nonostante il fatto WordPress è stato intorno per un po ', e il metodo di aggiungere script per temi e plugin è stato lo stesso per anni, c'è ancora una certa confusione in giro come esattamente dovresti aggiungere script. Quindi chiariamolo.

Poiché jQuery è ancora il framework Javascript più comunemente utilizzato, diamo un'occhiata a come è possibile aggiungere un semplice script al tema o al plug-in.

di jQuery modalità di compatibilità

Prima di iniziare il collegamento script per WordPress, diamo un'occhiata a modalità di compatibilità di jQuery. WordPress viene fornito con una copia di jQuery, che dovresti usare con il tuo codice. Quando jQuery di WordPress viene caricato, utilizza la modalità di compatibilità, che è un meccanismo per evitare conflitti con altre librerie di lingue.

Ciò che si riduce a è che non è possibile utilizzare il simbolo del dollaro direttamente come si farebbe in altri progetti. Quando scrivi jQuery per WordPress devi invece usare jQuery. Date un'occhiata al codice qui sotto per vedere cosa intendo:

Answer 14

Qui ci sono molti tutorial e le risposte su come aggiungere lo script da includere nella pagina. Ma quello che non ho potuto trovare è come strutturare quel codice in modo che funzioni correttamente. Questo è dovuto al fatto che $ non viene usato in questa forma di JQuery.

Quindi, ecco il mio codice e puoi utilizzarlo come modello.

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