Come aggiungo un semplice script jQuery a WordPress?

Ho letto il Codex e alcuni post sul blog sull'utilizzo di jQuery in WordPress, ed è molto frustrante. Sono arrivato fino al caricamento di jQuery in functions.phpfile, ma tutte le guide là fuori sono scadenti perché presumono che tu abbia già un sacco di esperienza con WordPress. Ad esempio, dicono che ora che sto caricando jQuery attraverso il functions.phpfile, ora tutto quello che devo fare è caricare il mio jQuery.

Come lo faccio esattamente? A quali file, in particolare, aggiungo codice? Come lo aggiungo esattamente per una singola pagina WordPress?

So cosa intendi per i tutorial. Ecco come lo 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. Ad esempio your-script.js. Aggiungi il tuo script jQuery a quel file (non hai bisogno di <script>tag in un file .js).

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

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

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

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

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 tuo tema abbia wp_head e wp_footer nei posti giusti, dovrebbe funzionare. Fammi sapere se hai bisogno di ulteriore aiuto.

Le domande su WordPress possono essere poste su WordPress Answers .

Dopo molte ricerche, ho finalmente trovato qualcosa che funziona con l'ultimo WordPress. Ecco i passaggi da seguire:

1. Trova la directory del tuo tema, crea una cartella nella directory per il tuo js personalizzato ( custom_js in questo esempio ).
2. Metti il ​​tuo jQuery personalizzato in un file .js in questa directory ( jquery_test.js in questo esempio ).

3. Assicurati che il tuo jQuery .js personalizzato abbia questo aspetto:

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

4. Vai alla directory del tema, apri functions.php

5. Aggiungi un codice vicino alla 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. Controlla il tuo sito per assicurarti che funzioni!

Se usi il child theme di wordpress per aggiungere script al tuo tema, dovresti cambiare la funzione get_template_directory_uri in get_stylesheet_directory_uri, ad esempio:

Tema genitore:

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 bambino:

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: / your-site / wp-content / themes / parent-theme

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

Puoi aggiungere jQuery o javascript nel file 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, visita questo tutorial: http://www.codecanal.com/add-simple-jquery-script-wordpress/

Oltre a inserire lo script attraverso le funzioni, puoi "semplicemente" includere un link (un link rel tag che è) nell'intestazione, nel piè di pagina, in qualsiasi modello, ovunque. Devi solo assicurarti che il percorso sia corretto. Suggerisco di usare qualcosa di simile (supponendo che tu sia nella directory del tuo tema).

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

Una buona pratica è includerlo subito prima del tag di chiusura del corpo o almeno appena prima del tuo piè di pagina. Puoi anche usare php include o molti altri metodi per estrarre questo file.

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

** # Metodo 1: ** Prova a mettere il tuo 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' );

Adesso hai finito.

La registrazione dello script in functions ha dei vantaggi in quanto viene fornito nella <head>sezione quando la pagina viene caricata, quindi fa sempre parte di header.php. Quindi non devi ripetere il codice ogni volta che scrivi un nuovo contenuto html.

#Metodo 2: inserisci il codice dello script all'interno del corpo della pagina sotto il <script>tag. Quindi non è necessario registrarlo in functions.

Puoi aggiungere javascript o jquery personalizzati usando questo plugin.
https://wordpress.org/plugins/custom-javascript-editor/

Quando usi jQuery non dimenticare di usare la modalità jquery noconflict

Ci sono molti tutorial e risposte qui su come aggiungere il tuo script da includere nella pagina. Ma quello che non sono riuscito a trovare è come strutturare quel codice in modo che funzioni correttamente. Ciò è dovuto al fatto che $ non viene utilizzato in questa forma di JQuery.

Quindi ecco il mio codice e puoi usarlo 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);
  });
});

Rispondi da qui: https://premium.wpmudev.org/blog/adding-jquery-scripts-wordpress/

Nonostante WordPress sia in circolazione da un po 'di tempo e il metodo per aggiungere script a temi e plug-in sia lo stesso da anni, c'è ancora un po' di confusione su come esattamente dovresti aggiungere script. Quindi chiariamolo.

Poiché jQuery è ancora il framework Javascript più comunemente usato, diamo un'occhiata a come puoi aggiungere un semplice script al tuo tema o plugin.

Modalità di compatibilità di jQuery

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

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

Le soluzioni che ho visto provengono dal punto di vista dell'aggiunta di funzionalità JavaScript a un tema. Tuttavia, l'OP ha chiesto, in particolare, "Come posso aggiungerlo esattamente per una singola pagina WordPress?" Questo potrebbe essere il modo in cui utilizzo javascript nel mio blog Wordpress, dove i singoli post possono avere diversi "widget" basati su javascript. Ad esempio, un post potrebbe consentire all'utente di modificare le variabili (cursori, caselle di controllo, campi di input di testo) e tracciare o elencare i risultati.

Partendo dalla prospettiva JavaScript:

1. Scrivi le tue funzioni JavaScript in un file ".js" separato

Non pensare nemmeno di includere JavaScript significativo nell'html del tuo post: crea uno o più file JavaScript con il tuo codice.

2. Interfaccia il tuo JavaScript con l'html del tuo post

Se il tuo widget JavaScript interagisce con i controlli e i campi html, dovrai capire come eseguire query e impostare tali elementi da JavaScript e anche come consentire agli elementi dell'interfaccia utente di chiamare le tue funzioni JavaScript. Qui ci sono un paio di esempi; in primo luogo, da JavaScript:

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

E da html:

<input type="range" id="AM_Freq_A_3" class="freqSlider" min="0" max="1000" value="0" oninput='sliderChanged_AM_widget(this);'/>

3. Usa jQuery per chiamare la funzione di inizializzazione del tuo widget JavaScript

Aggiungilo al tuo file .js, usando il nome della tua funzione che configura e disegna il tuo widget JavaScript quando la pagina è pronta per questo:

jQuery(document).ready(function( $ ) {
    your_init_function();
});

4. Nel codice html del tuo post, carica gli script necessari per il tuo post

Nell'editor di codice di Wordpress, in genere specifico gli script alla fine del post. Ad esempio, ho una cartella degli script nella mia directory principale. All'interno ho una directory di utilità con JavaScript comune che alcuni dei miei post potrebbero condividere, in questo caso alcune delle mie funzioni di utilità matematica e la libreria di plottaggio flotr2. Trovo più conveniente raggruppare il JavaScript post-specifico in un'altra directory, con sottodirectory basate sulla data invece di utilizzare il gestore multimediale, ad esempio.

<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. Enqueue jQuery

Wordpress registra jQuery, ma non è disponibile a meno che tu non dica a Wordpress che ne hai bisogno, accodandolo. In caso contrario, il comando jQuery fallirà. Molte fonti ti dicono come aggiungere questo comando al tuo functions.php, ma presumi di conoscere altri dettagli importanti.

Innanzitutto, è una cattiva idea modificare un tema: qualsiasi aggiornamento futuro del tema cancellerà le modifiche. Crea un tema figlio. Ecco come:

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

Il file functions.php del bambino non sovrascrive il file del tema principale con lo stesso nome, si aggiunge ad esso. Il tutorial sui temi figlio suggerisce come accodare il file style.css genitore e figlio. Possiamo semplicemente aggiungere un'altra riga a quella funzione per accodare anche jQuery. Ecco il mio intero file functions.php per il tema figlio:

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

È possibile utilizzare la funzione predefinita di WordPress per aggiungere file di script al plug-in di WordPress.

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

Guarda il post che ti aiuta a capire quanto facilmente puoi implementare jQuery e CSS nel plugin di WordPress.

Oltre a inserire lo script attraverso le funzioni, puoi "semplicemente" includere un link (un link rel tag che è) nell'intestazione, nel piè di pagina, in qualsiasi modello, ovunque.

No. Non dovresti mai semplicemente aggiungere un collegamento a uno script esterno come questo in WordPress. Accodandoli tramite il file functions.php si garantisce che gli script vengano caricati nell'ordine corretto.

L'impossibilità di accodarli potrebbe comportare il mancato funzionamento dello script, sebbene sia scritto correttamente.

puoi scrivere il tuo script in un altro file e accodare il tuo file in questo modo supponendo che il nome del tuo 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.jste dovresti mettere il tuo percorso del file js.

In WordPress, il modo corretto per includere gli script nel tuo sito web è utilizzare le seguenti funzioni.

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

Queste funzioni sono chiamate all'interno dell'hook wp_enqueue_script.

Per maggiori dettagli ed esempi, puoi controllare Aggiunta di file JS in Wordpress usando wp_register_script & wp_enqueue_script

Esempio:

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

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

Dopo aver selezionato la libreria che è necessario collegarla prima del tuo script personalizzato: exmpl

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

e dopo il tuo script

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

Hai solo bisogno di caricare jquery?

1) Come dicono le altre guide, registra il tuo script nel tuo 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) Notare che non è necessario registrare jQuery perché è già nel core. Assicurati che wp_footer () sia chiamato nel tuo footer.php e che wp_head () sia chiamato nel tuo header.php (qui è dove verrà emesso il tag dello script), e jQuery verrà caricato su ogni pagina. Quando accodi jQuery con WordPress, sarà in modalità "nessun conflitto", quindi devi usare jQuery invece di $. Puoi annullare la registrazione di jQuery se lo desideri e registrare nuovamente il tuo eseguendo wp_deregister_script ('jquery').

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