Comment ajouter facilement des scripts jQuery à WordPress

WordPress nous entoure depuis plus d'une décennie maintenant. Même si la plateforme est largement connue pour sa facilité d'accès, l'ajout de jQuery dans les thèmes et plugins WordPress est une préoccupation pour de nombreux développeurs.

Nous avons déjà rédigé des guides sur la résolution de problèmes tels que l'écran blanc de la mort WordPress et la mise en mode maintenance de votre site WordPress. Et dans cet article, nous allons vous expliquer comment ajouter jQuery à WordPress, mais avant de nous plonger là-dedans, voici un bref aperçu du mode de compatibilité de jQuery.

Mode de compatibilité de jQuery

Il est également important de comprendre quel est le mode de compatibilité de jQuery avant de commencer à utiliser jQuery dans WordPress.

jQuery dans WordPress est préchargé et vous pouvez l'utiliser dans votre code. Cependant, le point ici est qu'il est également livré avec le mode de compatibilité de jQuery, qui évite les conflits avec d'autres bibliothèques de différents langages de programmation.

Même si cela peut sembler tout à fait normal, il y a un léger problème avec ce mécanisme de défense. Lorsque vous utilisez jQuery dans WordPress, vous devrez utiliser le terme « jQuery » au lieu de notre bon vieux signe $ .

Jetez un oeil à cet exemple.

/* JQuery normal */

$('.hideable').on('clic', fonction() {

$(this).hide();

})

/* Le mode de compatibilité */

jQuery('.hideable').on('click', function() {

jQuery(this).hide();

})

Maintenant, le problème ici n'est pas si grave, mais plutôt ce n'est pas très agréable. Premièrement, vous devez écrire le " jQuery " à chaque fois, ce qui prend beaucoup de temps, et deuxièmement, cela rend votre script encombré et plus difficile à lire.

Mais ne vous inquiétez pas, avec quelques modifications, vous pouvez contourner le problème de compatibilité et pouvoir utiliser le bon vieux signe $.

Pour référence, $ est un alias pour jQuery() et un handle pour une fonction.

Voici à quoi ressemble une structure de base.

$(sélecteur).action()

Ici, le signe $ fait référence à jQuery, $(selector) trouve les éléments HTML et action() définit l'action à effectuer sur ces éléments.

Voici quelques techniques que vous pouvez utiliser pour contourner le problème de compatibilité de jQuery.

Comment surmonter le problème de compatibilité de jQuery ?

1. Entrez dans le mode "jQuery Stealth"
2. Entrer en mode "Pas de conflit"

Entrez dans le mode furtif de jQuery

Source de l'image : Podfeet

La première et la plus courante façon de contourner le problème de compatibilité est d'entrer en mode furtif (devenir furtif avec votre code).

Supposons que vous essayez de charger le script dans le pied de page. Enveloppez le code dans une fonction anonyme, qui mappera finalement jQuery sur $.

Reportez-vous à cet exemple

(fonction($) {

$('.hideable').on('clic', fonction() {

$(this).hide();

})

})( jQuery );

Maintenant, si vous souhaitez ajouter le script dans l'en-tête, encapsulez le tout dans une fonction prête pour le document et transmettez $ en cours de route.

Voici un exemple.

jQuery(document).ready(fonction( $ ) {

$('.hideable').on('clic', fonction() {

$(this).hide();

})

});

Entrer en mode sans conflit

Maintenant, celui-ci est un moyen assez simple de contourner les problèmes de compatibilité. Tout ce que vous avez à faire est de déclarer cette ligne de code au-dessus de votre script, et vous pouvez utiliser $j au lieu du signe $ par défaut.

var $j = jQuery.noConflict();

Maintenant que vous savez comment utiliser jQuery dans WordPress, passons à notre sujet principal : comment ajouter des scripts jQuery à votre site WordPress.

Comment ajouter jQuery aux sites WordPress

Source de l'image : fl1digital.com

L'ajout de jQuery à WordPress pourrait être fait facilement par un processus appelé Enqueueing .

Nous utilisons l'élément <link> pour ajouter des scripts dans les sites Web HTML réguliers. Nous pouvons également faire la même chose dans WordPress. Cependant, nous devons utiliser certaines des fonctions spéciales de WordPress pour y accéder. Notez que cela permettrait de gérer toutes les dépendances pour vous.

Disons que vous travaillez sur un thème WordPress. Utilisez cette fonction dans votre fichier functions.php .

wp_enqueue_script()

Voici à quoi ça ressemble.

function mon_theme_scripts() {

wp_enqueue_script( 'my-great-script', get_template_directory_uri() . '/js/my-great-script.js', array( 'jquery' ), '1.0.0', true );

}

add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Voici cinq arguments que cette fonction prendrait.

1. $handle : un handle unique qui pourrait être utilisé pour faire référence à un script
2. $src : emplacement de votre fichier de script
3. $deps : utilisé pour spécifier un tableau de dépendances
4. $ver : le numéro de version du script
5. $in_footer : pour indiquer à WordPress où placer le script

Par défaut, le script serait chargé sur l'en-tête de votre site Web, ce qui n'est pas recommandé car cela affecte considérablement la vitesse de votre site.

En relation: Votre guide ultime sur la façon d'éditer WordPress - HTML, CSS, PHP, JavaScript

Comment ajouter des scripts jQuery à l'administrateur WordPress

Vous pouvez ajouter jQuery à l'administrateur WordPress en utilisant les mêmes fonctions. Tout ce que vous avez à faire ici est d'utiliser un crochet différent.

Voici un 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' );

Maintenant, échangez simplement wp_enqueue_scripts avec admin_enqueue_scripts et vous êtes prêt à partir.

Comment désenregistrer jQuery dans WordPress

Vous devrez désenregistrer jQuery de WordPress si vous souhaitez utiliser une version différente de jQuery à partir des préchargements.

Voici un exemple de la façon dont vous pouvez désinscrire jQuery dans WordPress.

// inclure 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 simple. Tout ce que vous avez à faire est de désenregistrer le jQuery de WordPress en utilisant wp_deregister_script() et d'inclure le script que vous voulez.

Une chose à retenir ici est que nous avons ajouté la bibliothèque jQuery hébergée par Google dans cet exemple. Vous devez le changer avec l'URL de votre propre script.

Devriez-vous enregistrer les scripts avant la mise en file d'attente ?

Vous pouvez enregistrer le script plus tôt dans le processus si vous souhaitez qu'il ne se charge que lorsque cela est nécessaire dans vos pages.

Voici un exemple

add_action( 'wp_loaded', 'register_all_scripts' );

fonction register_all_scripts()

{

wp_register_script(…) ;

}

Une fois que vous avez terminé, mettez les scripts en file d'attente lorsque vous en avez besoin. Voici comment.

add_action( 'wp_enqueue_scripts', 'enqueue_front_scripts' );

add_action( 'admin_enqueue_scripts', 'enqueue_back_scripts' );

Utilisation de balises conditionnelles

Vous pouvez également utiliser des balises conditionnelles pour ne charger votre jQuery dans WordPress qu'en cas de besoin.

Même si cette méthode est généralement utilisée dans Admin où vous le souhaitez uniquement sur des pages spécifiques, elle permet d'économiser beaucoup de bande passante et de temps de traitement, améliorant ainsi les vitesses de chargement de votre site.

Reportez-vous à la documentation des scripts de mise en file d'attente d'administration de WordPress pour plus d'informations sur l'utilisation de balises supplémentaires.

Comment ajouter jQuery à WordPress à l'aide de plugins

WordPress s'enorgueillit de son répertoire de plugins de plus de 45 000 plugins. Vous pouvez trouver un plugin pour toutes les fonctionnalités que vous souhaitez sur votre site WordPress.

Il en va de même pour l'ajout de jQuery dans les pages, les thèmes et les publications du site WordPress, etc.

Voici quelques-uns des plugins les plus populaires pour ajouter jQuery à WordPress.

• Champs personnalisés avancés
• CSS et JS personnalisés simples
• Scripts N Styles
• Nettoyage des actifs

Conclusion

Alors voilà. Vous savez maintenant comment ajouter et utiliser WordPress jQuery.

L'application de ces connaissances à vos projets vous aiderait à créer de grands projets. Vous pouvez également lire nos guides définitifs sur des sujets tels que JPG vs JPEG et WordPress White Label pour approfondir vos connaissances.