WordPress fait partie de nos vies depuis plus de 16 ans, mais la méthode d’ajout de scripts aux thèmes et plugins reste un mystère pour de nombreux développeurs. Dans cet article, nous avons enfin mis fin à la confusion.
Puisqu’il s’agit de l’une des bibliothèques Javascript les plus utilisées, nous discutons aujourd’hui de la façon d’ajouter des scripts jQuery à vos thèmes ou plugins WordPress.
À propos du mode de compatibilité de jQuery
Avant de commencer à ajouter des scripts à WordPress, il est important de comprendre le mode de compatibilité de jQuery.
Comme vous le savez probablement, WordPress est proposé avec jQuery déjà inclus.
La version de jQuery sur WordPress dispose également d’un « mode de compatibilité », qui est un mécanisme permettant d’éviter les conflits avec d’autres bibliothèques javascript.
Une partie de ce mécanisme de défense signifie que vous ne pouvez pas utiliser le $signe directement comme vous le feriez dans d’autres projets.
Au lieu de cela, lors de l’écriture de code jQuery pour WordPress, vous devez utiliser jQuery.
Voici un exemple que de code :
/ * JQuery régulier * /
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
/ * Mode de compatibilité * /
jQuery ( '.hideable' ).on( 'click' , function () {
jQuery( this ).hide();
})
Le problème est que l’écriture de jQuery un million de fois prend plus de temps, rend la lecture plus difficile et peut alourdir votre script.
La bonne nouvelle?
Avec quelques modifications, vous pouvez à nouveau utiliser notre joli petit symbole du dollar.
En passant, si vous êtes nouveau sur jQuery , le signe $ est juste un alias pour jQuery (), puis un alias pour une fonction.
La structure de base ressemble à ceci: $(selector).action(). Le signe dollar définit jQuery… le «(sélecteur)» interroge ou trouve des éléments HTML… et enfin «l’action jQuery ()» est l’action à effectuer sur les éléments.
Retour à la façon dont nous pouvons contourner notre problème de compatibilité… voici quelques options viables:
1.Entrez en mode furtif jQuery
La première façon de contourner le mode de compatibilité est de se faufiler dans le code.
Par exemple, si vous chargez votre script dans le pied de page, vous pouvez envelopper votre code dans une fonction anonyme, qui mappera jQuery $.
Comme dans l’exemple ci-dessous:
( fonction ( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
}) (jQuery);
Si vous souhaitez ajouter votre script dans l’en-tête (ce que vous devriez éviter si possible, plus sur cela ci-dessous), vous pouvez tout envelopper dans une fonction prête pour le document, en passant le $long du chemin.
jQuery( document ).ready( function( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
});
2.Entrez en mode «No Conflict»
Un autre moyen simple d’éviter d’énoncer jQuery consiste à passer en mode «sans conflit» et à utiliser un raccourci différent.
Dans ce cas: $jau lieu de la valeur par défaut $.
Tout ce que vous avez à faire est de le déclarer en haut de votre script:var $j = jQuery.noConflict();
Bon, maintenant vous en savez plus sur l’écriture de code jQuery valide pour WordPress, ajoutons-le à notre site Web.
Comment ajouter des scripts jQuery à WordPress
L’une des façons les plus simples d’ajouter des scripts jQuery à WordPress est via un processus appelé «mise en file d’attente ».
Pour un site Web HTML classique, nous utiliserions l’ <link> élément pour ajouter des scripts. WordPress finit par faire la même chose, mais nous utiliserons des fonctions WP spéciales pour y parvenir.
De cette façon, il gère toutes nos dépendances pour nous (merci WP!).
Si vous travaillez sur un thème, vous pouvez utiliser la fonction wp_enqueue_script() dans votre functions.php fichier.
Voici à quoi ça ressemble:
function my_theme_scripts () {
wp_enqueue_script('mon-grand-script', get_template_directory_uri(). '/js/my-great-script.js', array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');
Cette fonction prend cinq arguments:
- $ handle – un handle unique que vous pouvez utiliser pour faire référence au script.
- $ src – l'emplacement du fichier de script.
- $ deps – spécifie un tableau de dépendances.
- $ ver – le numéro de version de votre script.
- $ in_footer – permet à WordPress de savoir où placer le script.
* Une chose à noter $in_footer signifie que que par défaut, les scripts seront chargés dans l’en-tête.
Ceci est une mauvaise pratique et peut considérablement ralentir votre site. Par conséquent, si vous souhaitez placer votre script dans le pied de page, assurez-vous que ce paramètre est défini sur true.
Ajout de scripts à l’administrateur WordPress
Vous pouvez également ajouter des scripts à l’administrateur. Les fonctions utilisées sont exactement les mêmes, il vous suffit d’utiliser un crochet différent.
Par exemple:
function my_admin_scripts () {
wp_enqueue_script (‘my-great-script’, plugin_dir_url (__FILE__). ‘/js/my-great-script.js’, array (‘jquery’), ‘1.0.0’, true);
}
add_action (‘admin_enqueue_scripts’, ‘my_admin_scripts’);
Au lieu de nous connecter, wp_enqueue_scriptsnous devons utiliser admin_enqueue_scripts.
Comment désinscrire jQuery de WordPress
Mais que faire si vous souhaitez utiliser une version de jQuery différente de celle préchargée par WordPress?
Vous pouvez le mettre en file d’attente… mais cela signifie qu’il y aura deux versions de jQuery sur la page.
Pour éviter cela, nous devons annuler l’enregistrement de la version de WP.
Voici à quoi cela ressemble:
// inclut jQuery personnalisé
fonction shapeSpace_include_custom_jquery () {
wp_deregister_script ('jquery');
wp_enqueue_script(
'jquery',
'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js',
array(),
null,
true);
}
add_action ('wp_enqueue_scripts', 'shapeSpace_include_custom_jquery');C’est aussi simple que d’utiliser le wp_deregister_script() pour désenregistrer jQuery de WP, puis en incluant le script jQuery que vous souhaitez ajouter.
Dans l’exemple ci-dessus, nous avons utilisé la bibliothèque jQuery hébergée par Google , mais vous la remplacerez évidemment par l’URL de votre propre script.
Ne devriez-vous pas enregistrer des scripts avant de les mettre en file d’attente?
Si vous souhaitez charger vos scripts au besoin au lieu de les charger directement dans vos pages – vous pouvez enregistrer le script plus tôt.
Par exemple, sur wp_loaded:
add_action ('wp_loaded', 'register_all_scripts');
fonction register_all_scripts () {
wp_register_script (…);
}
Une fois que vous avez fait cela, vous pouvez ensuite mettre les scripts en file d’attente lorsque vous en avez besoin:
| add_action (‘wp_enqueue_scripts’, ‘enqueue_front_scripts’); |
| add_action (‘admin_enqueue_scripts’, ‘enqueue_back_scripts’); |
N’oubliez pas d’utiliser les mêmes noms pour éviter d’entrer en collision avec d’autres scripts.
Utilisation de balises conditionnelles
Utilisez des balises conditionnelles pour charger vos scripts uniquement lorsque cela est nécessaire.
Ceci est utilisé plus souvent dans l’administration, où vous souhaitez utiliser un script sur une page spécifique uniquement (et non dans l’ensemble de l’administration). Cela économise également de la bande passante et du temps de traitement, ce qui signifie des temps de chargement plus rapides pour votre site Web.
Jetez un œil à la documentation des scripts de mise en file d’attente dans le Codex WordPress pour plus d’informations.
Ajouter jQuery à WordPress à l’aide de plugins
Le répertoire des plugins WP contient également de nombreux plugins intéressants que vous pouvez utiliser pour insérer des scripts dans vos publications, pages ou thèmes WordPress.
Voici quelques exemples de plugins JavaScript / jQuery bien connus : champs personnalisés avancés , CSS et JS personnalisés simples , styles de scripts n et nettoyage des ressources.
Créez votre propre project jQuery
Une meilleure compréhension de jQuery ne fera que rendre votre travail plus percutant. Que ce soit pour votre propre site Web ou pour des projets clients.
jQuery est bien connu pour sa simplicité, et comme vous l’avez (espérons-le) apprit dans cet article, ajouter des scripts jQuery simples à WordPress est facile comme bonjour une fois que vous savez comment.
Oui, il y a un peu de surcharge par rapport à l’utilisation de vanilla HTML, mais il y a aussi l’avantage supplémentaire de la gestion des dépendances et de la clarté.
Non seulement cela, en utilisant de petites astuces comme contourner la compatibilité par défaut de jQuery WP, vous allez vous faire gagner beaucoup de temps, d’efforts et de code gonflé.
