web-dev-qa-db-fra.com

Enqueue jQuery dans WordPress

Construisant mon premier thème à partir de rien dans Wordpress 3.4.1, je sais que Wordpress dispose déjà de la dernière version de JQuery via Google. J'ai lu sur le problème si le script n'est pas appelé correctement, donc je veux essayer de garder autant que possible le code recommandé. Je veux m'assurer que le script est chargé, ce qui, à mon avis, est exécuté par le script ci-dessous PHP dans le fichier functions.php (tiré du Codex Wordpress).

<?php
function my_scripts_method() {
wp_enqueue_script( 'jquery' );
}

Je veux fondamentalement avoir un menu personnalisé utilisant JQuery, alors s'agit-il simplement de placer le script que je veux activer dans l'en-tête ou la section PHP?

De plus, si je voulais mettre en file d'attente un autre script qui n'est pas déjà inclus dans Wordpress, dois-je simplement ajouter le PHP ci-dessous au code ci-dessus dans le fichier functions.php?

wp_register_script( 'jqueryexample', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jqueryexample.min.js');

Je suis d'accord avec HTML et CSS mais PHP et Java sont relativement nouveaux pour moi, toute aide est grandement appréciée.

Merci,

Fourmi

jquerywp-enqueue-script
1
Ant

Vous êtes sur la bonne voie, mais il vous manque un élément:

add_action('wp_enqueue_scripts', 'my_scripts_method');

add_action vous permet d'exécuter du code à des moments spécifiques lors du chargement de pages/d'événements spécifiques. L'action ci-dessus indique à WP d'exécuter votre fonction lorsqu'elle ajoute les scripts à l'élément html head. Votre fonction demande à son tour à WP d'ajouter le script jQuery.

Il en va de même pour l'enregistrement d'un nouveau script, mais avec un hook différent:

add_action('wp_enqueue_scripts', 'my_register_script_method');

function my_register_script_method () {
    wp_register_script( 'jqueryexample', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jqueryexample.min.js');
}

Si vous substituez un script pré-enregistré, vous devez également d'abord désenregistrer ce script. J'utilise quelque chose comme le code suivant pour remplacer le script jQuery (note: lisez 2nd edit à la fin):

function my_register_script_method () {
    wp_deregister_script('jquery');
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jqueryexample.min.js');
}

Quant à savoir où vous devriez mettre ce code. Si le code est spécifique au thème, vous devez le placer dans functions.php dans votre dossier de thème. Si vous réutilisez le code sur plusieurs thèmes, il serait plus facile de maintenir un plugin avec tout le code partagé.

Éditer: Comme le note Stephen Harris ci-dessous, étant donné que WP 3.3, vous pouvez également utiliser wp_enqueue_scripts après le déclenchement de wp_head, par exemple dans des codes courts ou des widgets. Le js sera alors chargé dans le pied de page.

Edit 2: Pour jQuery et les autres bibliothèques hébergées par Google, il est recommandé d'utiliser http://wordpress.org/extend/plugins/use-google-libraries/ / Lire les commentaires pour une motivation de Otto.

2
W van Dam

Vous devez utiliser wp_enqueue_script pour charger le script pour votre thème. La fonction wp_register_script enregistre uniquement le script avec un mot clé.

wp_register_script( 'jqueryexample', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jqueryexample.min.js');

Cela va simplement enregistrer un nouveau script avec le nom jqueryexample et vous pouvez le charger si nécessaire en utilisant la fonction wp_enqueue_script.

Voici un exemple de code pour charger le script d’enregistrement déjà enregistré, à savoir jQuery, et un nouveau script propre, à savoir, jQuery Exmple

<?php
function wpse_60056_load_scripts() {
    wp_enqueue_script( 'jquery' );
    wp_register_script( 'jqueryexample', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jqueryexample.min.js');
    wp_enqueue_script( 'jqueryexample' );

}    
add_action('wp_enqueue_scripts', 'wpse_60056_load_scripts');
?>

Cependant, vous ne pouvez utiliser que la fonction wp_enqueue_scripts pour charger un code JavaScript distant. Voici un exemple -

wp_enqueue_script('jqueryexample','http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jqueryexample.min.js');
3
amit