Come includere correttamente i file jQuery e JavaScript?


16

Lo sto facendo ora con il seguente codice:

function uw_load_scripts() {
    // De-register the built in jQuery
    wp_deregister_script('jquery');
    // Register the CDN version
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), null, false); 
    // Load it in your theme
    wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'uw_load_scripts' );

Funziona, ma dovrei farlo per tutti, come questo, o per tutti tranne che per l'amministratore (in modo che il back-end utilizzi la versione di WordPress?):

if (function_exists('load_my_scripts')) {  
function load_my_scripts() {  
    if (!is_admin()) {  
    wp_deregister_script( 'jquery' );  
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), null, false); 
    wp_enqueue_script('jquery');   
    }  
}  
}  
add_action('init', 'load_my_scripts');

Questa versione non funziona affatto in realtà, ottengo la versione jQuery di WordPress e non quella di Google.

Pertanto, dovrei annullare la registrazione di jQuery incluso in WordPress?

Inoltre, come posso aggiungere i miei script (slider script, modernizr e my custom.js) nel modo corretto? Immagino che dovrei farlo anche tramite Functions.php e non nell'intestazione come sto facendo adesso, ma non sono sicuro di come lo farei.

Risposte:


20

Prima regola empirica: non annullare la registrazione degli script in bundle core e sostituirli con altre versioni , a meno che non si sia assolutamente certi che nessun tema, plugin o core stesso si rompa a causa della modifica della versione. Davvero, a meno che tu non abbia assolutamente bisogno di una versione alternativa di uno script in bundle core, usa semplicemente ciò che è in bundle con core.

In secondo luogo, consiglio vivamente di wp_enqueue_scriptscollegarsi per la registrazione e l'accodamento degli script, piuttosto che init. ( Funziona da init, ma dal punto di vista del gioco con gli altri , è meglio usare il gancio semanticamente corretto.)

Terzo, per accodare i tuoi script personalizzati, usi gli stessi metodi di cui sopra:

<?php
function wpse45437_enqueue_scripts() {
    if ( ! is_admin() ) {
        $script_path = get_template_directory_uri() . '/js/';
        // Enqueue slider script
        wp_enqueue_script( 'wpse45437_slider', $script_path . 'slider.js', array( 'jquery' ) );
        // Enqueue modernizr script
        wp_enqueue_script( 'wpse45437_modernizr', $script_path . 'modernizr.js', array( 'jquery' ) );
    }
}
add_action( 'wp_enqueue_scripts', 'wpse45437_enqueue_scripts' );
?>

Basta aggiungere qualsiasi script sia necessario accodare.


4
+1 sull'assoluto bisogno ! Troppi temi (di solito "premium") registrano una versione obsoleta di jQuery. Rompe i plug-in.
Stephen Harris,

Aggiungendo questo script nel mio file di funzioni (senza le dichiarazioni php poiché sono già lì) mi dà un "errore Http 500 (errore interno del server)". C'è un errore da qualche parte?
Johan Dahl,

Sì; si è verificato un errore di sintassi nelle wp_enqueue_script()chiamate.
Chip Bennett,

Grazie ora funziona! Tuttavia è ancora emesso nell'intestazione. Non è meglio se fosse nel piè di pagina? In tal caso, posso modificare il codice in modo che sia?
Johan Dahl,

Puoi sicuramente accodarti nel piè di pagina. Basta impostare il $in_footerparametro su true nella chiamata a wp_enqueue_script().
Chip Bennett,

4

Spero che questo ti aiuti, cerca il codice wp_enqueue_scriptsper ulteriori informazioni.

  1. Non usare initper accodare . Utilizzare wp_enqueue_scriptsper roba front-end e admin_enqueue_scriptslato amministratore. È possibile utilizzare initper registrare gli script però.
  2. L'hook wp_enqueue_scriptssi attiva solo sul front-end (e non sulla pagina di accesso), quindi non è necessario controllare is_admin().
  3. A meno che tu non abbia un motivo specifico per fare diversamente, suggerirei di registrare e mettere in coda gli script utilizzando functions.phpper i temi o in un plug-in altrimenti. Hai semplicemente messo:

     function myprefix_load_scripts() {
       // Load scripts here
     }
     add_action( 'wp_enqueue_scripts', 'myprefix_load_scripts' );
  4. Se lo scopo è accodare uno script quando viene utilizzato un shortcode, è possibile utilizzare wp_enqueue_scriptil callback shortcode per metterlo in coda solo quando necessario (questo verrà stampato nel piè di pagina dal 3.3 ).

  5. Non dovresti registrare nuovamente il jQuery esistente sul lato amministratore. Puoi rompere qualcosa: D.

  6. I plug-in non devono registrare nuovamente il jQuery esistente.

  7. Dovresti valutare i pro e i contro della ri-registrazione di jQuery. Ad esempio potrebbe rompere alcuni plug-in se registri una versione precedente (forse non ora, ma in futuro ...)


1
Ad 5) la nuova registrazione non ha importanza. Ecco perché abbiamo ottenuto le funzioni di accodamento e registrazione. :)
Kaiser

2

Avviso equo: la cancellazione della versione pacchetto di jQuery di WP a proprio vantaggio può causare problemi, soprattutto se non si è particolarmente attenti a assicurarsi di cambiare la versione a cui si punta ogni volta che WP aggiorna la sua versione. Questo vale doppiamente per i plugin, che spesso (o spesso dovrebbero, almeno) scrivere i propri plugin per la massima compatibilità con la versione WP di jQuery.

Detto questo, la tua prima versione è corretta - è agganciata a wp_enqueue_scripts. La tua seconda funzione è agganciata init, il che potrebbe essere il motivo per cui non funziona correttamente.

Aggiungi i tuoi script in modo simile:

function bbg_enqueue_scripts() {
    // You should probably do some checking to see what page you're on, so that your
    // script only loads when it needs to
    wp_enqueue_script( 'bbg-scripts', get_stylesheet_directory_url() . '/js/bbg-scripts.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'bbg_enqueue_scripts' );

Sto assumendo qui che stai caricando script da una jsdirectory nella tua directory dei temi corrente; cambia il parametro URI se non è vero. Il terzo parametro array( 'jquery' )dice che bbg-scriptsdipende da jquery, e quindi dovrebbe essere caricato in seguito. Vedi https://codex.wordpress.org/Function_Reference/wp_enqueue_script per maggiori dettagli.


1
if (function_exists('load_my_scripts')) {  
function load_my_scripts() {  
    if (!is_admin()) {  
    wp_deregister_script( 'jquery' );  
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), null, false); 
    wp_enqueue_script('jquery');   
    }  
}  
}  
add_action('init', 'load_my_scripts');

Questo non farà niente ... sospetto che tu intenda

if (!function_exists('load_my_scripts')) {

Il tuo esempio caricherà la funzione load_my_scripts solo se esiste già (cosa che non fa, non lo farà e se lo facesse creerebbe un errore)


0

Se, per motivi di prestazioni, vuoi caricare jquery e altri file js-core da un CDN, assicurati di caricare la stessa versione per evitare che accadano cose brutte con le funzioni core e plugin. Come questo:

$wp_jquery_version = $GLOBALS['wp_scripts']->registered['jquery-core']->ver;
$jquery_version = ( $wp_jquery_version == '' ) ? '1.8.3' : $wp_jquery_version; // fallback, just in case 
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/'. $jquery_version .'/jquery.min.js', $jquery_version, false );
wp_enqueue_script('jquery');

-2

Dopo aver controllato tutti i diversi metodi per caricare jquery (non solo su questo post), mi sono reso conto che nessuno di loro fa tutti questi:

  1. Registra (e forse accoda) jquery usando una funzione, quindi può essere usata dai plugin.
  2. Caricalo da Google CDN con l'URL relativo del protocollo.
  3. Fallback su copia locale se Google non è in linea.

Ci sono molte versioni alternative che fanno alcune di queste nell'elenco, ma non tutte, quindi ho scritto la mia versione combinando e modificando alcuni dei metodi già disponibili. Ecco qui:

function nautilus7_enqueue_scripts() {

    // Load jquery from Google CDN (protocol relative) with local fallback when not available
    if ( false === ( $url = get_transient('jquery_url') ) ) {

        // Check if Google CDN is working
        $url = ( is_ssl() ? 'https:' : 'http:' ) . '//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js';
        $resp = wp_remote_head($url);

        // Load local jquery if Google down
        if ( is_wp_error($resp) || 200 != $resp['response']['code'] ) {

            $url = get_template_directory_uri() . '/js/vendor/jquery-1.7.2.min.js';
        }

        // Cache the result for 5 minutes to save bandwidth
        set_transient('jquery_url', $url, 60*5);
    }

    // Deregister Wordpress' jquery and register theme's copy in the footer
    wp_deregister_script('jquery');
    wp_register_script('jquery', $url, array(), null, true);

    // Load other theme scripts here

}
add_action('wp_enqueue_scripts', 'nautilus7_enqueue_scripts');

Per risparmiare larghezza di banda e non eseguire il ping di Google ogni volta che la pagina viene ricaricata, ricorda se Google CDN è online o meno per 5 minuti utilizzando l'API Transient di Wordpress.


Non consigliato. Ora devi aggiornare lo script dopo ogni aggiornamento di WordPress in modo che corrisponda esattamente alla versione jQuery utilizzata da WordPress. Inoltre, Google non riesce a inviare la libreria compressa in alcuni casi, quindi la tua pagina si sta caricando più lentamente ora.
fuxia

Non sto usando WordPress 'jquery. Leggi il codice per favore. Sto usando la versione del tema. E se non ti piace google, puoi usare un altro cdn.
nautilus7,

Ma questo è il punto: dovresti usare il jQuery di WordPress per assicurarti che la versione sia corretta.
fuxia

Non ti seguo Prendo la versione di Google di cui ho bisogno e raggruppo la stessa versione con il mio tema. Ecco come lo fanno tutti. Wordpress può usare (nella sezione admin) qualunque versione venga fornita.
nautilus7,

1
Puoi usare qualunque versione di jQuery desideri, ma se lo stai raggruppando con un tema lo stai forzando sui tuoi utenti. Tra qualche anno, quando tutti useranno jQuery 1.8.2, i tuoi utenti rimarranno bloccati su una versione obsoleta, a meno che non mantengano aggiornato il tema.
Chris_O,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.