L'ajout de JavaScript à vos pages ou articles WordPress peut améliorer les fonctionnalités et l'engagement des utilisateurs. Cependant, WordPress ne vous permet pas d'insérer du JavaScript directement dans votre contenu par défaut.
Nous comprenons que cette limitation puisse être frustrante, surtout si vous souhaitez personnaliser votre site avec des fonctionnalités interactives ou des scripts de suivi.
Heureusement, il existe des moyens simples d'ajouter du JavaScript à votre site WordPress. Vous pouvez l'appliquer à des pages ou des articles spécifiques, ou même à l'ensemble de votre site Web. De plus, vous pouvez utiliser un plugin d'extraits de code tel que WPCode, comme nous le faisons chez WPBeginner, pour tout simplifier.
Dans cet article, nous vous présenterons deux méthodes simples pour implémenter du JavaScript dans vos pages ou articles WordPress.
Qu'est-ce que JavaScript ?
JavaScript est un langage de programmation qui s'exécute dans le navigateur de l'utilisateur, pas sur votre serveur. Cette programmation côté client permet aux développeurs de faire beaucoup de choses intéressantes sans ralentir votre site Web.
Si vous souhaitez intégrer un lecteur vidéo, ajouter des calculatrices, ou un autre service tiers, on vous demandera souvent de copier et coller un extrait de code JavaScript dans votre site Web WordPress.
Un extrait de code JavaScript typique peut ressembler à ceci :
<script type="text/javascript"> // Some JavaScript code </script> <!-- Another Example: --!> <script type="text/javascript" src="/path/to/some-script.js"></script> Mais, si vous ajoutez un extrait de code JavaScript à un article ou une page, WordPress le supprimera lorsque vous essaierez de l'enregistrer.
Dans cet esprit, nous vous montrerons comment ajouter facilement du JavaScript aux pages ou articles WordPress sans casser votre site Web. Vous pouvez utiliser les liens rapides ci-dessous pour accéder directement à la méthode que vous souhaitez utiliser.
- Méthode 1. Ajouter du JavaScript n'importe où sur votre site WordPress avec WPCode (Recommandé)
- Méthode 2. Ajouter manuellement du code JavaScript à WordPress avec le code (Avancé)
- Astuce bonus : Plus de guides de snippets de code
Plongeons dans le vif du sujet !
Méthode 1. Ajouter du JavaScript n'importe où sur votre site WordPress avec WPCode (Recommandé)
Parfois, un plugin ou un outil vous demandera de copier et coller un extrait de code JavaScript sur votre site web pour fonctionner correctement.
Généralement, ces scripts vont dans la section d'en-tête ou de pied de page de votre blog WordPress, afin que le code soit chargé à chaque visite de page.
Par exemple, lorsque vous installez Google Analytics, le code doit s'exécuter sur chaque page de votre site web afin de pouvoir suivre vos visiteurs.
Vous pouvez ajouter manuellement le code à vos fichiers header.php ou footer.php, mais ces modifications seront écrasées lors de la mise à jour ou du changement de votre thème.
C'est pourquoi nous vous recommandons d'utiliser WPCode pour ajouter du JavaScript n'importe où sur l'ensemble de votre site WordPress.
WPCode est le plugin de snippets de code le plus puissant disponible pour WordPress. Il vous permet d'ajouter facilement du code personnalisé à n'importe quelle zone de votre site, et le meilleur de tout, il est gratuit.
Tout d'abord, vous devez installer et activer le plugin gratuit WPCode. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.
Une fois activé, vous devez aller dans Snippets de code » En-têtes et Pieds de page.
Ici, vous verrez trois champs distincts intitulés « En-tête », « Corps » et « Pied de page ».
Vous pouvez maintenant ajouter votre code JavaScript dans l'une de ces zones, puis simplement cliquer sur le bouton « Enregistrer ». WPCode chargera automatiquement le code que vous avez ajouté sur chaque page de votre site web.
Vous pouvez également ajouter des extraits de code à tout autre endroit de votre site, par exemple à l'intérieur d'articles ou de pages.
Pour ce faire, allez simplement dans Extraits de code » + Ajouter un extrait, puis cliquez sur « Créer le vôtre ».
Ensuite, sélectionnez « Extrait JavaScript » comme type de code dans la liste des options qui apparaissent à l'écran.
Vous verrez maintenant une page « Créer un extrait personnalisé » où vous pourrez ajouter un titre pour votre code. Cela peut être n'importe quoi pour vous aider à vous souvenir de l'utilité du code.
Après cela, collez votre code dans la zone « Aperçu du code ».
Ensuite, vous devrez faire défiler jusqu'à trouver la section « Insertion ».
Maintenant, il ne vous reste plus qu'à sélectionner un « Emplacement » pour le code dans le menu déroulant. Trouvez « Page, Article, Type d'article personnalisé » et choisissez où vous voulez que le code apparaisse dans la page ou l'article.
Si vous choisissez de faire insérer le snippet par WPCode avant ou après un paragraphe, vous pourrez choisir le paragraphe spécifique de l'article avant ou après lequel il apparaîtra.
Par exemple, si vous mettez 1 dans le champ « Numéro d'insertion », le snippet de code apparaîtra avant ou après le premier paragraphe. Utilisez 2 pour le deuxième paragraphe, et ainsi de suite.
Après cela, il vous suffit de cliquer sur le bouton bascule en haut de l'écran pour passer à « Actif », puis de cliquer sur le bouton « Enregistrer le snippet » à côté.
C'est tout ce qu'il faut pour rendre votre snippet de code actif sur votre site !
Méthode 2. Ajouter manuellement du code JavaScript à WordPress avec le code (Avancé)
Note : Les méthodes suivantes sont destinées aux débutants et aux propriétaires de sites Web. Si vous apprenez le développement de thèmes ou de plugins WordPress, vous devez mettre correctement en file d'attente JavaScript et feuilles de style dans vos projets.
Avec cette méthode, vous devez ajouter du code à vos fichiers WordPress. Si vous ne l'avez jamais fait auparavant, consultez notre guide sur comment copier et coller du code dans WordPress.
Tout d'abord, nous allons vous montrer comment ajouter du code à l'en-tête de votre site WordPress. Vous devez copier le code suivant et l'ajouter à votre functions.php.
function wpb_hook_javascript() { ?> <script> // your javscript code goes </script> <?php } add_action('wp_head', 'wpb_hook_javascript'); Ajout de JavaScript à un article WordPress spécifique à l'aide de code
Si vous souhaitez ajouter du JavaScript à un seul article WordPress, vous devrez ajouter une logique conditionnelle au code.
Examinons d'abord l'extrait de code suivant :
function wpb_hook_javascript() { if (is_single ('5')) { ?> <script type="text/javascript"> // your javscript code goes here </script> <?php } } add_action('wp_head', 'wpb_hook_javascript'); Le code ci-dessus n'exécutera le JavaScript que si l'ID de l'article correspond à '5'. Assurez-vous de remplacer '5' par votre propre ID d'article.
Pour trouver l'ID de l'article, ouvrez simplement l'article où vous souhaitez que le JavaScript s'exécute. Ensuite, dans l'URL de la page, vous trouverez l'ID de l'article.
Ajouter du JavaScript à une page WordPress spécifique à l'aide de code
Si vous souhaitez ajouter du JavaScript à une seule page WordPress, vous devrez ajouter une logique conditionnelle au code, comme ci-dessus.
Jetez un œil à l'exemple suivant :
function wpb_hook_javascript() { if (is_page ('10')) { ?> <script type="text/javascript"> // your javscript code goes here </script> <?php } } add_action('wp_head', 'wpb_hook_javascript'); Le code ci-dessus n'exécutera le JavaScript que si l'ID de la page est '10'. Assurez-vous de remplacer '10' par votre propre ID de page.
Vous pouvez trouver l'ID de la page en utilisant la même méthode que ci-dessus. Ouvrez simplement la page où vous souhaitez que le JavaScript s'exécute et notez l'ID de la page dans l'URL.
Ajouter du JavaScript à un article ou une page WordPress spécifique à l'aide de code dans le pied de page
Si vous souhaitez que le JavaScript s'exécute dans le pied de page de votre site au lieu de l'en-tête, vous pouvez ajouter l'extrait de code suivant à votre site Web.
function wpb_hook_javascript_footer() { ?> <script> // your javscript code goes </script> <?php } add_action('wp_footer', 'wpb_hook_javascript_footer'); Cet extrait de code s'accroche à wp_footer au lieu de wp_head. Vous pouvez également ajouter des balises conditionnelles pour ajouter du JavaScript à des articles et des pages spécifiques, comme dans les exemples ci-dessus.
Astuce bonus : Plus de guides de snippets de code
Maintenant que vous avez appris à ajouter facilement du JavaScript aux pages ou aux articles WordPress, voyons quelques extraits de code personnalisés supplémentaires pour étendre encore plus les fonctionnalités de votre site !
Ajout d'un accordéon FAQ jQuery dans WordPress
jQuery, une bibliothèque JavaScript pratique, ajoute des fonctionnalités interactives à votre site.
L'utilisation d'un accordéon FAQ jQuery dans WordPress permet de garder votre contenu organisé. Il affiche les questions et les réponses dans un format rétractable, ce qui permet aux visiteurs de trouver plus facilement des informations sans avoir à faire défiler un long texte.
Mais ce n'est pas tout.
Un accordéon FAQ peut améliorer votre classement dans les moteurs de recherche en structurant le contenu d'une manière que les moteurs de recherche apprécient. Chez WPBeginner, nous avons également trouvé les accordéons FAQ jQuery utiles pour répondre aux questions courantes, attirer plus de visiteurs et améliorer le SEO.
Pour plus d'informations, vous pouvez consulter notre article sur comment ajouter un accordéon FAQ jQuery dans WordPress.
Intégrer du code iFrame dans WordPress
Un iFrame, ou cadre intégré, vous permet d'intégrer des vidéos ou d'autres contenus sur votre site Web sans avoir à héberger vous-même les fichiers. Cela permet d'économiser de la bande passante et de l'espace de stockage, ce qui en fait un meilleur choix que de télécharger des vidéos directement sur WordPress, ce que vous ne devriez jamais faire en premier lieu.
L'utilisation d'un iFrame peut également améliorer la vitesse et les performances de votre site, car il récupère le contenu d'une source externe.
Pour en savoir plus, vous pouvez consulter notre guide sur comment intégrer facilement du code iFrame dans WordPress.
Créer un flux RSS séparé pour chaque type de publication personnalisé dans WordPress
WordPress vous permet de créer des types de publication personnalisés adaptés à vos besoins de contenu spécifiques, tels que les critiques de films, les produits ou les témoignages. Cette fonctionnalité vous aide à mieux organiser votre site et améliore l'expérience utilisateur.
Notez que vous pouvez configurer des flux RSS pour chaque type de publication personnalisé, offrant aux visiteurs des flux spécialisés qui permettent un engagement plus personnalisé avec votre contenu.
Si vous souhaitez plus d'informations, vous pouvez lire notre guide sur comment créer un flux RSS séparé pour chaque type de publication personnalisé dans WordPress.
Pour plus d'idées de snippets personnalisés, n'hésitez pas à consulter notre sélection d'experts des snippets de code WordPress les plus utiles pour les débutants.
Nous espérons que cet article vous a aidé à apprendre comment ajouter facilement du JavaScript aux pages ou aux articles WordPress. Vous voudrez peut-être aussi consulter notre guide sur comment ajouter correctement des JavaScripts et des styles dans WordPress et notre sélection d'experts des trucs extrêmement utiles pour le fichier functions de WordPress.
Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.
Mesht
Avec la première méthode (Wpcode), puis-je ajouter un script à une seule page ?
Support WPBeginner
You can use the first method to add it to multiple pages not just one
Admin
Dennis Muthomi
Je gère de nombreux sites clients, et WPCode est devenu mon outil de prédilection. Il est super fiable lorsque j'ai besoin d'ajouter des scripts de suivi ou des fonctionnalités personnalisées aux sites web des clients.
Une chose que je dois toujours faire lorsque j'ajoute du code est de sauvegarder votre site avant d'utiliser WPCode. Je teste tout d'abord sur un environnement de staging. Faites-moi confiance, cela m'a évité bien des maux de tête ! Surtout lorsque les scripts entrent en conflit avec les fonctionnalités du thème.
Et le meilleur, c'est que si quelque chose tourne mal, vous pouvez simplement désactiver l'extrait de code problématique. C'est si simple !
Jiří Vaněk
WPCode a sauvé mon site entier comme ceci, que j'avais déjà terminé, mais nous avons fini par découvrir que le menu fonctionnait très mal sur les appareils mobiles. J'ai trouvé une solution sous forme de JavaScript, mais je ne savais pas où ni comment l'insérer sur le site. Cela m'a épargné tout ce travail et a résolu le problème de fermeture du menu sur les appareils mobiles.
Support WPBeginner
Heureux d'apprendre que le plugin a été utile !
Admin
wing
Je me demande pourquoi ne pas utiliser la méthode la plus simple, utiliser directement le bloc « HTML personnalisé » de WordPress pour insérer du code Javascript dans un article ou une page. Je l'ai essayé et testé. Aucun problème. Méthode très très très simple.
Support WPBeginner
Cela dépendrait du code spécifique, les méthodes que nous montrons dans ce guide servent à ajouter le code à la section head car la plupart des JavaScript veulent être exécutés dans la section head.
Admin
Rejane
J'ai un thème enfant actif et j'ai utilisé le plugin « Insert Headers and Footer » pour ajouter un code JavaScript pour un service de marketing par e-mail. Ça a fonctionné ! Mais malheureusement, j'ai dû annuler mon compte auprès de ce service et maintenant je voudrais supprimer le code JavaScript. Comment faire lorsque j'utilise un thème enfant ? Existe-t-il un moyen facile ou un autre plugin pour cela ?
Support WPBeginner
You would remove the code from the Insert Headers and Footers plugin and it would remove the code from your site
Admin
Paul Liles
Je ne trouve pas le menu à trois points. J'ai besoin d'aide.
Support WPBeginner
Il devrait se trouver en haut de la page d'édition. si vous utilisez l'éditeur classique, il se trouvera sous Options de l'écran.
Admin
Eleni
Je n'ai pas l'option Champs personnalisés dans l'onglet Options de l'écran. J'utilise un site web auto-hébergé et j'ai installé et activé le plugin Code Embed
Support WPBeginner
Si vous utilisez l'éditeur de blocs, le paramètre a été déplacé dans la zone des préférences.
Admin
Ashley
Ce site est INCROYABLE !!! C'est le troisième article d'affilée où j'ai trouvé exactement ce dont j'avais besoin et de la manière la plus simple possible. Merci !!
Support WPBeginner
Glad our guides were helpful
Admin
Mec
Salut, super boulot WPbeginners ! La deuxième méthode a fonctionné à merveille. J'avais une question cependant. Si je voulais ajouter un autre code js pour un autre objectif, comment le code devrait-il commencer. Parce que tout ce que j'ajoute après le code est grisé. Je suis perdu ici. Je veux que cela fasse la même chose mais pour une autre page. Des idées seront appréciées.
Support WPBeginner
Cela dépendrait fortement du code que vous utilisez, mais vous voudriez vous assurer que le code est avant la balise
/scriptAdmin
Jonathan
Merci. Cet article a été extrêmement utile. J'ai opté pour l'option functions.php. A bien fonctionné.
Support WPBeginner
Glad our guide was helpful
Admin
Elise
Ça a marché. Merci beaucoup !
Support WPBeginner
You’re welcome
Admin
Martin
Question sur la méthode 3 :
Après avoir saisi la valeur et cliqué sur « ajouter un champ personnalisé », comment faire pour que le code s'affiche sur le frontend de mon site web ?
Dois-je insérer « {{CODEmyjscode}} » en utilisant un widget shortcode ou un éditeur de texte sur la page ?
Support WPBeginner
pour le moment, vous voudriez utiliser l'éditeur de texte ou de code.
Admin
Bret Bernhoft
Quand j'ai commencé à travailler avec WordPress, JavaScript me semblait impossible. Mais aujourd'hui, j'écris ce langage tous les jours ; souvent en association avec WordPress.
J'aurais aimé qu'il me soit plus clairement apparu à quel point il aurait été facile d'écrire du JavaScript, lorsque j'ai commencé ce parcours. Merci pour les outils et les conseils. Je vais devoir essayer.
Support WPBeginner
Glad we could share some easy methods for adding JavaScript to your site!
Admin
ibrahim
Ça a fonctionné et ça m'a beaucoup aidé. Merci !
Support WPBeginner
You’re welcome
Admin
Kat
J'ai essayé d'ajouter du JS personnalisé dans mon article, mais rien ne se passe. J'ai suivi vos instructions exactes pour la méthode 3, mais lorsque je prévisualise la page, il n'y a qu'un espace vide là où le JS est censé être. Une idée pourquoi ?
Support WPBeginner
Vous devriez consulter la FAQ du plugin pour connaître les raisons les plus courantes de ce problème et comment le résoudre.
Admin
Samuel
Comment cela fonctionne-t-il avec le nouveau système de blocs de WordPress ?
J'essaie d'intégrer ceci dans une page, mais cela s'affiche simplement comme {{code1}} dans l'aperçu
Support WPBeginner
Cela dépendrait de la méthode que vous utilisez sur votre site pour le plugin, ils ont une mise à jour dans leur section FAQ sur la façon de l'utiliser actuellement.
Admin
Akash
Merci pour cette information. Article vraiment incroyable et utile.
Support WPBeginner
You’re welcome, glad our article was helpful
Admin
Alex
Salut, super guide ! Le problème est que je n'ai pas "Champs personnalisés" sous les options d'écran... Une idée pourquoi ?
Support WPBeginner
Votre site est-il sur WordPress.com ?
Admin
James
Bonjour. J'ai engagé un programmeur pour créer un outil, ce qu'il a fait en Javascript. J'utilisais Weebly mais Weebly est devenu peu réactif aux demandes d'aide, ce dont des centaines de blogs témoignent. Je cherche donc des alternatives à Weebly. WordPress pourrait-il gérer un outil Javascript de 2 Mo ?
Merci,
Support WPBeginner
Votre hébergement déterminerait si un outil comme celui-ci pouvait être utilisé, pas la plateforme de votre site Web, et la façon dont l'outil a été configuré déterminerait si vous pouvez transférer l'outil.
Admin
Matt
Et si j'ai besoin d'ajouter le script uniquement sur une seule page mais dans la tête et non dans le corps ? J'essaie d'ajouter un pixel de conversion Google uniquement sur ma page de remerciement après soumission du formulaire.
Support WPBeginner
You would want to take a look at the section of the article called: Adding JavaScript to a Specific WordPress Post or Page Using Code
Admin
quy
ça marche comme par magie. Merci beaucoup
Support WPBeginner
You’re welcome, glad our article could help
Admin
Manjeet Chhillar
Merci pour cette publication très utile.
Ma question est : Comment puis-je implémenter la « Méthode 2 » sur plusieurs publications. Dois-je ajouter l'ID de chaque publication séparément par une virgule ?
Support WPBeginner
oui, vous devrez placer les virgules à l'extérieur des guillemets simples et commencer un nouvel ensemble de guillemets pour cette méthode
Admin
Deborah
Merci d'avoir partagé les trois méthodes que les utilisateurs de WordPress peuvent utiliser pour ajouter du JavaScript aux publications ou aux pages. D'après ce que j'ai lu sur la page du plugin Insert Headers and Footers dans le répertoire, le plugin n'utilise pas la méthode enqueue pour ajouter les scripts. Ce qui est la méthode recommandée pour ajouter des scripts dans WordPress.
Ai-je mal compris ? Ou Insert Headers and Footers utilise-t-il enqueue pour ajouter des scripts ? S'il n'utilise pas enqueue, savez-vous quand le plugin sera mis à jour pour utiliser enqueue ?
Support WPBeginner
Le plugin n'enqueue pas les scripts qui lui sont ajoutés pour le moment, car tout ce qui est ajouté avec notre plugin peut ne pas vouloir être enqueued. Si vous souhaitez enqueuer le code ajouté, vous devriez utiliser une autre méthode.
Admin
Dave G
Bien, merci pour cela. Il se trouve que l'ID de publication exact sur lequel j'avais besoin d'exécuter du javascript était le numéro 16. « `if (is_single (’16’)) { “`
Es-tu venu du futur ?
Support WPBeginner
Not yet at least
Admin
Golu Arjun
Merci pour cette publication. C'est très utile. Il est possible de personnaliser
Support WPBeginner
You’re welcome
Admin
Thomas
Je dois ajouter un script à toutes les publications de mon blog. J'ai le plugin pour chaque publication individuelle. Le problème, c'est qu'il y a des milliers de publications et nous devons ajouter le script à toutes. Des suggestions ? Merci d'avance.
Support WPBeginner
L'option Insert Headers and footers ajoutera un code sur chaque publication et page pour vous si elles utilisent le même code.
Admin
Thomas
Merci pour votre réponse rapide.
Nous voulons que le script s'exécute uniquement sur les Publications. Nous ne voulons pas qu'il s'exécute sur toutes les pages.
Support WPBeginner
Si vous aviez un widget qui n'est ajouté qu'aux publications, vous pourriez essayer d'ajouter le code dans un widget.
Ann
J’ai essayé d’utiliser les scripts d’en-têtes et de pieds de page et le jQuery ne semble tout simplement pas fonctionner correctement.
Support WPBeginner
Cela dépendrait du code spécifique que vous ajoutez au site pour les raisons possibles pour lesquelles il pourrait ne pas fonctionner. Vous voudrez peut-être vous assurer auprès de la personne qui vous a fourni le code que le code lui-même fonctionne.
Admin
Andrew Golay
Veuillez corriger votre plugin d’en-têtes/pieds de page ou modifier cet article, merci.
Support WPBeginner
Notre plugin fonctionne actuellement en phase de test, mais nous y jetterons certainement un autre regard.
Admin
lynn
merci !! C'était très utile.
Support WPBeginner
Glad it was helpful
Admin
Remco
Merci pour cet excellent article !
Est-il possible d'implémenter des données structurées sur les pages Woocommerce avec cette méthode (JSON-LD) ?
Support WPBeginner
Vous le pourriez probablement, mais si vous utilisez actuellement un plugin SEO, vous devriez vérifier auprès de ce plugin pour voir s'il le fait déjà.
Admin
graham
Un résumé bien présenté des options les plus connues pour ce qui devient un besoin courant. Cependant, de nombreux utilisateurs de WordPress ne sont pas (et ne veulent pas être) des programmeurs. Pour eux, JavaScript sous quelque forme que ce soit est trop effrayant ; c'est pourquoi ils utilisent WordPress avec sa promesse de « pas de programmation requise ».
Il existe une autre possibilité : utiliser des scripts personnalisés au lieu de JavaScript, et les intégrer directement dans la page. Vous pouvez les placer dans n'importe quel composant, bien que je préfère .
Tout ce dont vous avez besoin ensuite, c'est de quelque chose qui peut compiler et exécuter le script. Il est difficile de trouver des plugins qui peuvent faire cela ; mes propres recherches ne m'ont pas encore permis d'en trouver. Cependant, en tant que programmeur JavaScript moi-même, j'ai pu en écrire un et le mettre dans la bibliothèque sous le nom d'EasyCoder. Les scripts ressemblent à l'anglais, ont à peu près la même complexité que SQL et peuvent faire la plupart des choses couramment requises pour gérer le contenu et l'interactivité d'une page Web. EasyCoder est également entièrement extensible, de sorte que d'autres programmeurs peuvent ajouter eux-mêmes des modules.