Comment lier des fichiers jQuery / Javascript externes avec WordPress

15

J'utilise donc Starkers pour baser mon prochain thème WP et j'ai rencontré un petit problème.J'incluais ma propre version de jQuery dans le header.phpfichier, mais lors de l'inspection de mon site à l'aide de Firebug, j'ai remarqué que jquery était téléchargé deux fois, je a creusé un peu et a remarqué que non seulement j'incluais le fichier, mais la wp_head()fonction aussi.

En essayant de résoudre le problème, j'ai remarqué un commentaire dans le fichier d'en-tête, dont l'origine provenait du thème 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
 */

Voici donc mon problème, j'ai l'impression que le fichier jQuery doit être défini avant tout autre fichier qui veut l'utiliser et que cela wp_head()devrait être la dernière chose dans l' <head>élément, je suis un peu confus maintenant car je me demande Je mets wp_head()en haut pour que le fichier jQuery inclus dans WP soit utilisé pour tous mes plugins, même s'il dit de ne pas le faire.

J'ai commenté la ligne jQuery dans la wp_head()fonction, mais elle est requise pour la page d'administration, j'ai donc dû la remettre.

Je voudrais également utiliser (au moins expérimenter) avec la version Google CDN de jQuery, mais je ne veux pas l'inclure deux fois!

J'espère que vous comprenez ce que j'essaie d'expliquer, toute suggestion sur la façon dont je peux résoudre ce problème serait très appréciée. J'apprécierais également tout conseil sur la façon dont vous gérez vos fichiers JavaScript avec le fichier d'en-tête.

Merci!

themes customization theme-development jquery wp-head Ben Everard
la source
Cela devrait être renommé quelque chose comme "Comment lier des fichiers jQuery / Javascript externes avec WordPress."
MikeSchinkel
Je suis d'accord, je ne savais pas comment l'appeler car je ne connaissais pas trop le problème que j'avais :-)
Ben Everard

Réponses:

9

D'après le libellé de votre question, vous devez ajouter des scripts en écrivant des <script>balises dans votre modèle. Ajoutez vos propres scripts via wp_enqueue_script()dans votre modèle functions.php, en définissant les dépendances de manière appropriée sur jQuery, et wp_head()ajoutez les scripts pour vous.

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

Voir la page du codex pour plus d'informations.

Annika Backstrom
la source
Vous avez raison de penser que j'ajoute des scripts à l'aide de la <script>balise, c'est l'alternative que je cherchais, merci beaucoup! :-)
Ben Everard
3
Si vous souhaitez ajouter votre script uniquement sur le front-end, connectez-vous au 'template_redirect'lieu de 'init'.
John P Bloch
Bon, je mettrai ma réponse à jour. J'ai presque suggéré d'envelopper la file d'attente is_admin().
Annika Backstrom
Je place généralement les scripts dans le fichier de modèle au-dessus de get_header(), le faire dans le functions.phpmettra en file d'attente sur chaque page qui peut ne pas être requise. Si j'en ai un global, je le mets en file d'attente header.phpavant que wp_head()soit appelé. De cette façon, les files d'attente sont là où vous vous attendez à ce qu'elles soient dans le<head>
Joe Hoyle
Parfois, il vaut mieux ajouter des scripts en bas de la page. C'est le dernier paramètre de codex.wordpress.org/Function_Reference/wp_enqueue_script (5th, $ in_footer), définissez-le sur true. Peu d'informations pour ceux qui ont besoin de plus de contrôle.
hakre
7

Je suggère de jeter un œil à 5 conseils pour utiliser jQuery avec WordPress . Entre autres choses, il montre le code nécessaire pour charger jQuery à partir de la bibliothèque de 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');

Vous pouvez également consulter le plugin Utiliser les bibliothèques Google .

Travis Northcutt
la source
1
C'est en fait une meilleure réponse, car elle montre comment mettre en file d'attente la version Google CDN de jQuery. Cependant, comme John l'a suggéré ailleurs, si vous ne voulez que cela sur le front-end, connectez-vous à la template_redirectplace de init.
EAMann
Bon point sur l'endroit où il se charge. Bien que vraiment, la zone d'administration utilise également jQuery, non? Quoi qu'il en soit, merci d'avoir montré comment le contrôler.
Travis Northcutt
Oui, je viens de trouver les 5 astuces pour jquery / wp post, merci pour votre réponse :-)
Ben Everard
5 conseils pour utiliser jQuery avec WordPress - le lien ne fonctionne plus.
hakre
REMARQUE: l'exemple inclut une version "plus ancienne" de jQuery, la version WP actuelle (3.0.1) exécute jQuery 1.4.2 ...
t31os
1

Bien que @tnorthcutt ait raison de supprimer correctement la jquery native de WP si vous souhaitez charger la vôtre, vous êtes certain de rencontrer des problèmes lorsque vous chargez une version jquery différente de ce noyau WP. Le noyau et les plugins dépendent de sa présence. Donc, si vous ne mettez pas à jour votre thème avec la dernière jquery à chaque fois que WP est mis à jour, votre site peut se casser.

Le code suivant s'assurera que votre thème charge toujours la bonne version de jquery, en recherchant d'abord la version utilisée par WP, puis en chargeant celle-ci à partir de 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
la source