skip to Main Content

Comment ajouter correctement du code jQuery sur WordPress

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

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:

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

( 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:

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

  1. $ handle – un handle unique que vous pouvez utiliser pour faire référence au script.
  2. $ src – l’emplacement du fichier de script.
  3. $ deps – spécifie un tableau de dépendances.
  4. $ ver – le numéro de version de votre script.
  5. $ 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.

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

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é.

Cet article comporte 0 commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
2 Partages
Partagez2
Tweetez
Enregistrer