Come collegare file jQuery / Javascript esterni con WordPress

Quindi sto usando Starkers per basare il mio prossimo tema WP e header.phpho riscontrato un piccolo problema, includevo la mia versione di jQuery nel file ma quando ispezionavo il mio sito usando Firebug ho notato che jquery veniva scaricato due volte, io ho fatto un po 'di ricerche e ho notato che non solo includevo il file, ma anche la wp_head()funzione.

Nel tentativo di risolvere il problema ho notato un commento nel file di intestazione, di cui proveniva dal tema Twenty Ten:

/* Always have wp_head() just before the closing </head>
 * tag of your theme, or you will break many plugins, which
 * generally use this hook to add elements to <head>, such 
 * as styles, scripts, and meta tags
 */

Quindi ecco il mio problema, ho l'impressione che il file jQuery debba essere impostato prima di qualsiasi altro file che voglia usarlo e che wp_head()dovrebbe essere l'ultima cosa <head>nell'elemento, sono un po 'confuso ora come mi chiedo dovrebbe Ho messo wp_head()in alto in modo che il file jQuery incluso nel WP verrà utilizzato per tutti i miei plugin, anche se dice di non farlo.

Ho commentato la riga jQuery nella wp_head()funzione ma è necessaria per la pagina di amministrazione, quindi ho dovuto rimetterla.

Mi piacerebbe anche usare (almeno sperimentare) con l'uso della versione CDN di Google di jQuery, ma non voglio includerla due volte!

Spero che tu capisca cosa sto cercando di spiegare, qualsiasi suggerimento su come posso risolvere questo problema sarebbe molto apprezzato. Apprezzerei anche qualsiasi consiglio su come gestire i file JavaScript con il file di intestazione.

Grazie!

— Ben Everard
fonte

Questo dovrebbe essere ridenominato in modo simile a "Come collegare file jQuery / Javascript esterni con WordPress".

— MikeSchinkel,

Sono d'accordo, non ero sicuro di come chiamarlo perché non avevo troppa familiarità con il problema che avevo :-)

— Ben Everard,

Risposte:

Dalla formulazione della domanda, è necessario aggiungere script scrivendo <script>tag nel modello. Aggiungi i tuoi script tramite quelli wp_enqueue_script()del tuo modello functions.php, impostando opportunamente le dipendenze su jQuery e wp_head()aggiungerai gli script per te.

function my_scripts() {
    wp_enqueue_script( 'my-sweet-script', get_bloginfo('template_directory') . '/script.js', array('jquery') );
}
add_action('template_redirect', 'my_scripts');

Vedi la pagina del codice per maggiori informazioni.

— Annika Backstrom
fonte

Hai ragione nel pensare che sto aggiungendo script usando il <script>tag, questa è l'alternativa che stavo cercando, molte grazie! :-)

— Ben Everard,

Se vuoi aggiungere il tuo script solo sul front-end, aggancia 'template_redirect'invece di 'init'.

— John P Bloch,

Roba buona, aggiornerò la mia risposta. Ho quasi suggerito di avvolgere l'interno is_admin().

— Annika Backstrom,

Generalmente accodamento degli script nel file modello sopra il get_header(), eseguendolo lo functions.phpaccoderò su ogni pagina che potrebbe non essere necessaria. Se ne ho uno globale, lo accoda header.phpprima che wp_head()venga chiamato. In questo modo gli accostamenti sono dove ti aspetteresti che si trovino nel<head>

— Joe Hoyle il

A volte è meglio aggiungere script nella parte inferiore della pagina. È l'ultimo parametro di codex.wordpress.org/Function_Reference/wp_enqueue_script (5th, $ in_footer), impostarlo su true. Poche informazioni per chi ha bisogno di più controllo.

— Hacre,

Suggerisco di dare un'occhiata a 5 suggerimenti per l'utilizzo di jQuery con WordPress . Tra le altre cose, mostra il codice necessario per caricare jQuery dalla libreria di Google:

function my_init() {
    if (!is_admin()) {
        // comment out the next two lines to load the local copy of jQuery
        wp_deregister_script('jquery');
        wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2');
        wp_enqueue_script('jquery');
    }
}
add_action('init', 'my_init');

Puoi anche consultare il plug-in Usa librerie di Google .

— Travis Northcutt
fonte

Questa è in realtà una risposta migliore, poiché mostra come mettere in coda la versione CDN di Google di jQuery. Tuttavia, come John ha suggerito altrove, se vuoi solo questo sul front-end, aggancia template_redirectinvece di init.

— EAMann,

Buon punto su dove carica. Anche se in realtà, anche l'area di amministrazione utilizza jQuery, giusto? Ad ogni modo, grazie per aver mostrato come controllarlo.

— Travis Northcutt,

Sì, ho appena trovato i 5 consigli per il post su jquery / wp, grazie per la risposta :-)

— Ben Everard,

5 suggerimenti per l'utilizzo di jQuery con WordPress: il collegamento non funziona più.

— Hakre,

NOTA: l'esempio include una versione "precedente" di jQuery, l'attuale versione di WP (3.0.1) esegue jQuery 1.4.2 ...

— t31os,

Sebbene @tnorthcutt abbia ragione a dichiarare che è necessario rimuovere correttamente il jquery nativo di WP se si desidera caricarne uno proprio, si è certi di riscontrare problemi durante il caricamento di una versione jquery diversa nel core di WP. Sia il core che i plugin si basano sul fatto che si trova lì. Quindi, se non aggiorni il tuo tema con il jquery più recente ogni volta che WP viene aggiornato, il tuo sito potrebbe rompersi.

Il codice seguente assicurerà che il tuo tema carichi sempre la versione corretta di jquery, cercando prima quale versione WP sta usando e quindi caricando quella da Google:

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

— cjbj
fonte