Voulez-vous découvrir comment charger du JavaScript sur WordPress ?

Tout thème WordPress est généralement composé de fichiers PHP, HTML, CSS et JavaScript. Le JavaScript est un langage de programmation très célèbre chez les développeurs de thème WordPress. C’est un langage qui rend une page HTML interactive et peut également vous permettre d’interagir avec le serveur.

Savoir l’utiliser sur votre site web sera un atout considérable.

Afin de réellement utiliser JavaScript, vous devez savoir comment le charger sur votre site web.

Mais avant, si vous n’avez jamais installé WordPress découvrez Comment installer un blog WordPress en 7 étapes et Comment rechercher, installer et activer un thème WordPress sur votre blog 

Ensuite revenons vers ce pourquoi nous sommes là.

Comment charger des scripts JavaScript sur WordPress

Prenons un peu de recul et jetons un premier regard sur la façon dont WordPress charge les scripts et styles. Vous avez appris que lors de la création des fichiers JavaScript, vous pouvez les ajouter à votre page dans la section header ou au pied de page.

Découvrez aussi notre tutoriel sur Comment compresser vos fichiers CSS, HTML et Javascript

WordPress fait exactement la même chose, mais vous ne pouvez pas juste déposer ces balises de script dans le fichier d’en-tête ou le pied (footer) de votre thème WordPress. WordPress utilise un mécanisme de chargement intelligent appelé « enqueueing ».

Ce mécanisme est nécessaire pour donner un sens aux dépendances. Si vous écrivez du code jQuery pour votre thème WordPress, alors jQuery lui-même doit être chargé en premier.

Vous écrivez du code qui repose sur un plugin jQuery. Dans ce cas, jQuery doit être chargé en premier, puis le plugin jQuery, puis votre code.

Comment « Enqueueing » des scripts (Ajouter à la file d’attente)

Vous pouvez ajouter à la file d’attente des scripts dans le dossier de votre thème WordPress ou de votre plugin WordPress. Voici le code complet pour inclure un script qui repose sur jQuery:

my_theme_scripts de fonction () {

 wp_enqueue_script ( ‘my-script », get_template_directory_uri () . ‘ /js/my-script.js ‘, array (‘ jquery ‘),’ 1.0.0 ‘, true);

}

add_action ( ‘wp_enqueue_scripts’, ‘my_theme_scripts’);

Tout d’abord, une fonction doit être « hooké » sur WordPress (Utilisation des Hooks WordPress). Le premier argument de la fonction add_action() indique à WordPress où ces scripts doivent être placés:

• Sur l’espace public
• Sur le tableau de bord

Si vous utilisez « wp_enqueue_scripts » ils seront chargés sur l’espace publique, si vous utilisez « admin_enqueue_scripts » ils seront chargés sur le tableau de bord.

Dans la fonction « add_action », vous pouvez utiliser « wp_enqueue_script » pour ajouter les scripts dont vous avez besoin. La fonction prend un paramètre requis et quatre paramètres optionnels:

• Le premier paramètre est le nom de votre script. Vous pouvez choisir ce que vous voulez, mais assurez-vous d’utiliser un nom unique.
• Le deuxième paramètre doit contenir l'emplacement du fichier sur votre thème WordPress ou plugin WordPress.
• Le troisième paramètre contient un tableau de dépendances. Dans l’exemple ci-dessus, j’ai dit que jQuery est une dépendance. Toutes les dépendances sont chargées avant le script en question.
• Le quatrième paramètre est un numéro de version
• Le cinquième et dernier paramètre indique si vous voulez charger le script sur l’en-tête ou au pied de page. Utilisez « true » pour charger au pied de page, ou « false » pour charger le script sur l’en-tête (vous pouvez aussi ne pas remplir ce paramètre).

Les Dépendances

WordPress propose une copie de jQuery, c’est ce qui explique pourquoi vous pouvez l’ajouter en tant que dépendance sans aucun souci. Il existe un grand nombre d’autres scripts et plugins jQuery que WordPress propose. Si votre code dépend de l’un d’eux, vous n’êtes pas obligé d’utiliser une de vos copies, mais de simplement l’ajouter comme une dépendance. Voici une liste des scripts que WordPress propose.

Si vous incluez plusieurs scripts indépendants l’un de l’autre, vous pouvez les ajouter en tant que dépendances exactement de la même façon. Jetez un œil à l’exemple ci-dessous:

my_theme_scripts de fonction () {

 wp_enqueue_script ( « my-base script », get_template_directory_uri () . ‘ /js/my-base-script.js ‘, array (‘ jquery ‘),’ 1.0.0 ‘, true);

 wp_enqueue_script ( « mon-script-extension », get_template_directory_uri () . ‘ /js/my-script-extension.js ‘, array ( «my-base de script’), ‘1.0.0’, true );

}

add_action ( ‘wp_enqueue_scripts’, ‘my_theme_scripts’);

Etant donné que le premier script dépend de jQuery, alors le script suivant en dépend aussi. Vous n’avez donc pas besoin d’ajouter jQuery comme dépendance pour les deux. Cela rend la gestion des dépendances plus facile.

Chargement conditionnel

Parfois, vous aurez envie d’utiliser votre script sur chaque page, mais souvent vous souhaiterez charger un script sur une page spécifique. Cela est particulièrement vrai lorsque l’on envisage d’ajouter des scripts sur le tableau de bord. Un bon exemple est l’utilisation de shortcodes. Les shortcodes permettent aux utilisateurs de créer des affichages avancés sur l’éditeur visuel de texte à l’aide de quelques astuces simples.

my_theme_scripts de fonction () {

 wp_register_script ( ‘my-script’, get_template_directory_uri () . ‘ /js/my-script.js ‘, array (‘ jquery ‘),’ 1.0.0 ‘, true );

 wp_enqueue_script ( ‘my-script ‘);

}

add_action ( ‘wp_enqueue_scripts’, ‘my_theme_scripts’);

Nous avons enregistré le script afin que WordPress prenne connaissance du script en question, mais nous utilisons la fonctionnalité « enqueue ». De cette façon, le script est seulement ajouté à la page si le shortcode est utilisé sur cette page.

Une autre méthode pour charger des scripts sous condition est l’utilisation des fonctions conditionnelles. Si vous voulez charger un script sur toutes les pages d’archives de la catégorie, vous pouvez utiliser la fonction is_category().

Par exemple, vous pourriez créer un carrousel d’images que les utilisateurs peuvent ajouter à l’article ainsi : [carrousel ids=’42,124,123,331,90′]. Un carrousel sera créé sur la page de l’article en utilisant les images désignées par leurs ID.

Pour ce faire, vous devez créer un fichier « carousel.js » qui repose sur jQuery. Voici un code pour y arriver (Il ne permet pas de créer un carrousel, mais vous permet de voir comment le processus de chargement se déroule):

add_action ( ‘wp_enqueue_scripts’, ‘my_theme_scripts’);

my_theme_scripts de fonction () {

 wp_register_script ( ‘my-carrousel’, get_template_directory_uri () . ‘/js/my-carousel.js’, array ( ‘jquery’), ‘1.0.0’, true );

}

add_shortcode ( ‘carrousel’, ‘my_carousel’);

fonction my_carousel ($ args) {

 $ atts = shortcode_atts (array (

 ‘Ids’ =>  »,

 ), $ Atts, ‘carrousel’);

 wp_enqueue_script ( ‘my-carrousel’);

 // Code pour afficher le carrousel ici

}

Retrait et remplacement de scripts

C’est de loin un scénario commun, mais parfois vous devrez peut-être supprimer ou remplacer un script. Je suis tombé dans des situations où un script ajouté par un plugin (mais pas utilisé par le thème) causait des problèmes de compatibilité. « Le retrait » a été la meilleure option, car l’erreur à complètement disparu.

Vous pouvez également remplacer jQuery avec une version plus récente si vous testez quelque chose pour vous assurer qu’il sera compatible avec les versions plus récentes.

Dans ces situations les fonctions « wp_deregister_script() » et « wp_dequeue_script() » sont utiles. Voici comment modifier un code déjà ajouté sur WordPress.

my_theme_scripts de fonction () {

 wp_deregister_script ( ‘jquery’);

 wp_enqueue_script ( ‘jquery’, get_template_directory_uri () . ‘/js/jquery3.0.0.js’, array (), ‘3.0.0’, true );

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

}

add_action ( ‘wp_enqueue_scripts’, ‘my_theme_scripts’);

Pensées finales

Cette méthode de chargement sur WordPress est géniale, car elle vous permet d’ajouter vos scripts de façon modulaire. Ceci vous permettra de vous assurer que les dépendances sont ajoutées de façon modulaire.

Découvrez aussi quelques plugins WordPress premium  

Vous pouvez utiliser d’autres plugins WordPress pour donner une apparence moderne et pour optimiser la prise en main de votre blog ou site web.

Nous vous proposons donc ici quelques plugins WordPress premium qui vous aideront à le faire.

1. Premium SEO Pack

Premium SEO Pack est un plugin WordPress qui optimise votre référencement et compresse le CSS afin d’améliorer la vitesse de chargement de votre site web.

Le plugin permet également de gérer le design de votre site web en quelques clics. Ses fonctionnalités sont entre autres : la compression de CSS et JS, l’intégration de sitemap vidéo et snippet, la mise en forme des fichiers HTML et XML, la redirection des pages 404 et 301, le partage sur réseaux sociaux, la fourniture de l’étiquette ALT, la mise en page hautement personnalisation

Télécharger | Démo | Hébergement Web

2. Woocommerce Delivery Time Picker for Shipping

Woocommerce Delivery Time Picker for Shipping est une extension WooCommerce qui permet aux clients de choisir la date et l’heure de livraison sur la page de paiement. 

Les clients seront en mesure de sélectionner le délai de livraison du colis chez eux. Le délai de livraison sera visible pour les administrateurs du site web et il sera également envoyé par e-mail aux administrateurs du site internet ou de la boutique en ligne.

Télécharger | Démo | Hébergement Web

3. Hero Menu

Ce plugin vous permet de créer votre propre menu WordPress personnalisé en quelques étapes assez faciles. Il vous permet notamment de créer facilement et intuitivement un menu WordPress élégant et professionnel. 

Du plus complexe méga menu riche en fonctionnalités, au plus simple menu avec menu déroulant, le plugin WordPress HeroMenu met en place n’importe quel type de menu et le rend fonctionnel en quelques minutes.

En termes de fonctionnalités il propose entre autres : un fonctionnement parfait sur PC, tablette et smartphone, du CSS personnalisé pour ajouter vos propres styles au menu, un constructeur de megamenu, plusieurs navigateurs pris en charge : Chrome, Firefox, Safari, Opera, IE9 et plus.

Télécharger | Démo | Hébergement Web

Ressources recommandées

Découvrez d’autres ressources recommandées qui vous aideront à résoudre d’autres erreurs régulièrement rencontrées sur WordPress. 

• Comment corriger les erreurs de redirection sur WordPress
• Comment créer une mise en page personnalisée avec Elementor
• Comment créer un réseau intranet WordPress pour votre organisation
• Comment créer une page de connexion sur WordPress

Conclusion

Voila ! C’est tout pour ce tutoriel, j’espère qu’il vous aura permis de comprendre comment charger du JavaScript sur WordPress. N’hésitez pas à le partager avec vos amis sur vos réseaux sociaux préférés. 

Cependant, vous pourrez aussi consulter nos ressources, si vous avez besoin de plus d’éléments pour mener à bien vos projets de création de sites internet, en consultant notre guide sur la création de blog WordPress.

Mais, en attendant, faites-nous part de vos commentaires et suggestions dans la section dédiée.

…