Comment ajouter du code JavaScript ou jQuery dans WordPress ?

En dehors de son langage de programmation de base qui est le PHP, WordPress utilise HTML, CSS et bien sûr le code JavaScript. Ces codes interagissent pour afficher une page web et son contenu. Sur WordPress, vous pouvez ajouter du code JavaScript ou jQuery manuellement ou avec un plugin. 😇

Le code JavaScript joue des fonctions importantes pour une page web, à tel point qu’il est devenu irremplaçable pour le contrôle du dynamisme et l’interactivité de pages web. Le code JavaScript est également indispensable pour l’ajout d’un code de suivi de données tel que Google Analytics.

Objectif

Cet article donne des détails nécessaires dont vous avez besoin pour ajouter du code JavaScript ou jQuery dans WordPress sans faire appel à un développeur🤠.

Prérequis

• Avoir un site WordPress ;
• Avoir l’accès à l’espace d’administration de votre site WordPress ;
• Savoir installer un plugin WordPress.

Besoin d’un hébergement WordPress rapide et de qualité ?

LWS vous conseille sa formule d’hébergement WordPress en promotion à -20% (offre à partir de 3,99€ par mois au lieu de 4,99 €). Non seulement les performances sont au rendez-vous mais vous profitez en plus d’un support exceptionnel.

Découvrir l’offre

JavaScript en quelques mots

Avant d’entrer dans le vif du sujet, vous devez connaître les avantages d’utiliser JavaScript ou jQuery sur WordPress. JavaScript permet de créer des pages web dynamiques. Il permet par exemple l’actualisation d’une page web sans que le visiteur la charge à nouveau.

L’arrivée de JavaScript a permis également d’améliorer l’expérience utilisateur des visiteurs. Il intervient dans le caractère interactif d’une page web. Par exemple, pour valider les données d’un formulaire de contact, JavaScript doit être activé.

Mais le code JavaScript permet aussi de faire le suivi du trafic d’un site. Ou encore, vous aurez besoin du JavaScript pour créer des effets spéciaux tel que le basculement et l’animation de pages web.

Comment ajouter du code JavaScript ou jQuery dans WordPress ?

Sur WordPress, vous pouvez insérer du code JavaScript sur l’ensemble du site ou seulement à un contenu spécifique.

Ajouter du code JavaScript sur l’ensemble du site

Tout d’abord, Gardez à l’esprit que pour ajouter du code JavaScript, vous pouvez procéder manuellement ou avec un plugin. Cependant, la méthode manuelle sera trop longue, surtout si vous avez moins des compétences dans WordPress. Et il ne s’agit pas non plus d’un geste anodin.

De plus, après ajout manuel du Code JavaScript à un thème, vous pouvez facilement perdre vos modifications la prochaine fois que vous mettez à jour votre thème, sauf si vous utilisez un thème enfant. Pour cela, l’utilisation d’un plugin s’impose comme la solution idéale.

Ainsi, il existe un plugin tout particulièrement intéressant et facile à utiliser pour insérer du JavaScript dans WordPress.

Pour ce faire, connectez-vous à votre espace d’administration. Ensuite, rendez-vous dans la section « Extensions › ajouter ». Dans le référentiel des extensions WordPress, recherchez le plugin Insert Headers and Footers by WP Beginner, à l’aide de la zone de recherche.👇Cliquez sur le bouton « Installer maintenant ». Après installation, vous devez accéder au plugin depuis la section « Réglages › Insert Headers and Footers ». Dans la nouvelle interface, vous avez trois zones pour ajouter les codes dans les différentes sections de votre site. 👇

Comme vous le voyez sur l’image ci-dessus, vous pouvez ajouter du code JS, dans l’en-tête, le corps ou le pied de votre site. Vous devez terminer en cliquant sur le bouton « Enregistrer ».

Ajouter du code JavaScript à un contenu spécifique

Pour ajouter du JavaScript à un contenu spécifique, vous devez passer par un éditeur de contenus.

Si vous utilisez l’éditeur de contenus par défaut (Gutenberg), suivez ces étapes :

1. Ouvrez le contenu dans lequel vous souhaitez ajouter le code JavaScript dans l’éditeur Gutenberg. Puis cliquez sur le bouton « + ».2. Cliquez sur l’option « HTML Personnalisé ».

3. Un bloc s’ajoute à votre interface d’ajout de contenus.4. Ajoutez du code JavaScript et publiez votre contenu lorsque vous avez terminé.Si vous utilisez plutôt l’éditeur classique, suivez également ces étapes :

1. Ouvrez le contenu spécifique concerné dans l’éditeur classique. Puis cliquez sur le bouton « Texte » au coin supérieur droit.👇2. Ajoutez du code JavaScript dans la zone de création de contenus.

Ajouter du code jQuery dans WordPress

Avant d’utiliser le code jQuery sur votre site WordPress, vous devez tout d’abord l’intégrer à votre site. La manière la plus simple reste celle qui utilise le jQuery CDN pour une installation automatique.

1. Rendez-vous sur le site jQuery pour télécharger la toute dernière version de jQuery.2. Un tableau contextuel s’ouvre, vous devez copier le code d’intégration en cliquant sur le bouton de copie.

3. Insérez le code jQuery dans le fichier header.php de votre thème.

Pour cela, vous pouvez utiliser un client FTP de type FileZilla ou le gestionnaire de fichiers (nous utiliserons le gestionnaire cPanel dans ce tutoriel).

Pour commencer, accédez au gestionnaire de fichiers dans votre compte d’hébergement. Ensuite, trouvez le fichier header.php en suivant le chemin « public_html › wp-content › thèmes › thème actif ». Faites un clic droit sur le fichier header.php et choisissez l’option « Éditer ». Lorsque le fichier header.php est ouvert dans l’interface d’édition, ajoutez le code précédemment copié juste après la balise d’ouverture ‹head›. Après avoir terminé, cliquez sur le bouton « Enregistrer les modifications ».

Après avoir terminé la configuration, vous pouvez maintenant commencer à ajouter du code jQuery à n’importe quelle section de votre site comme pour le code JavaScript.

Conclusion

🥳Toutes nos félicitations, vous savez à présent comment ajouter du code JavaScript ou jQuery dans WordPress. Il ne vous reste plus qu’à lancer 🚀votre site avec nos offres d’hébergement WordPress.

Si vous avez des questions, utilisez la section commentaire pour nous écrire✍️.