Ajouter du code JavaScript facilement dans WordPress

Régulièrement on nous demande d’ajouter des bouts de code ou du JavaScript dans nos WordPress. Cela peut être un suivi analytics, tag manager, Google Ads ou encore pour configurer le pixel Facebook. Par défaut, WordPress ne nous permet pas d'ajouter du code directement dans les publications. Dans ce guide WordPress, nous allons vous montrer comment ajouter facilement du JavaScript dans les pages ou les articles de votre WordPress.  

C’est quoi le code Javascript ?

JavaScript (souvent abrégé en "JS") est un langage de script léger, orienté objet, principalement connu comme le langage de script des pages web. Mais il est aussi utilisé dans de nombreux environnements extérieurs aux navigateurs web tels que Node.js, Apache CouchDB voire Adobe Acrobat. Voici un exemple de JavaScript :

<script type="text/javascript"> 
// JavaScript code
</script>

<!-- Autre Exemple: --!> 
<script type="text/javascript" src="/chemin/vers/autre-script.js"></script>

On peut aussi avoir de besoin d’ajouter du script, toujours en JS pour nos Google Ads par exemple :

<!-- Global site tag (gtag.js) - Google Ads: 5568421-->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-5568421"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'AW-5568421');
</script>

Attention : ces scripts (Google Ads, Analytics, pixel Facebook) déposent des traceurs soumis au consentement préalable de vos visiteurs : ne les chargez qu’après leur accord, via votre outil de gestion du consentement.  

Ajouter du code JS sur tous vos contenus avec un plugin

Si vous avez besoin, par exemple, d’ajouter le code d'installation de Google Analytics qui doit être présent sur chaque page de votre WordPress afin de tracker les visiteurs de votre site, vous pourriez ajouter ce code directement aux fichiers header.php ou footer.php de votre thème WordPress. Toutefois, ces modifications seront remplacées lorsque vous mettrez à jour ou modifierez votre thème. Dans ce cas là, il vaut encore mieux créer un thème enfant. Nota : Certains plugins SEO ou thèmes premium permettent parfois l’ajout de script directement depuis leur configuration.

Insert Headers and Footers

Vous pouvez tout aussi bien utiliser un plugin pour cela. Pour plus de détails, consultez notre guide étape par étape sur la façon d'installer un plugin WordPress. Le plugin Insert Headers and Footers vous permet d'insérer simplement du code tel que celui de Google Analytics, du CSS personnalisé, le pixel de Facebook, et plus encore dans l’en-tête de site WordPress ou dans le pied de page. Plus besoin de modifier vos fichiers de thème pour cela !

LuckyWP Scripts Control

Le plugin LuckyWP Scripts Control est une autre alternative qui vous permet d'insérer et de gérer du code personnalisé dans WordPress. Vous pouvez insérer du code Google Analytics, une balise meta de vérification google search console, un pixel Facebook, un CSS/JS personnalisé et d'autres codes sans jamais modifier les fichiers de votre thème. En dehors d’une interface plus soignée pour le deuxième, ces 2 plugins sont en tous points similaires et offrent les mêmes fonctionnalités.  

Ajout de JavaScript pour un article ou une page WordPress spécifique

Supposons que vous ne vouliez charger ce JavaScript que sur un article ou sur une page WordPress spécifique et non pas sur tout le site. C’est par exemple nécessaire pour suivre des conversions Adwords, vous pourrez le faire simplement en suivant l’une des 2 méthodes ci-après.

Ajouter du code JavaScript manuellement

Pour ce faire, vous devrez ajouter une logique conditionnelle au code. Il faudra mettre le code suivant dans le fichier functions.php de votre thème enfant (ou dans une extension d’extraits de code comme WPCode), jamais dans celui du thème parent, qui est remplacé à chaque mise à jour. Jetez un coup d'œil à l'exemple ci-dessous :

function wpb_hook_javascript() {
if (is_single ('22')) { 
        ?>
<script type="text/javascript">
// votre code JavaScript ici
</script>
    <?php
    }
}
add_action('wp_head', 'wpb_hook_javascript');

Nota: Au lieu de is_single, utilisez is_page pour rechercher une ID de page spécifique. Vous pouvez utiliser le même code, avec une légère modification, pour ajouter du code JavaScript non pas dans l’entête mais dans le pied de page du site.

function wpb_hook_javascript_footer() {
?>
<script>
// votre code JavaScript ici
</script>
    <?php
  }
add_action('wp_footer', 'wpb_hook_javascript_footer');

Au lieu d'accrocher la fonction au wp_head, elle est maintenant attachée au wp_footer. Vous pouvez également l'utiliser avec des balises conditionnelles pour ajouter du JavaScript à des publications ou encore des pages spécifiques.

Ajouter du code JavaScript à l’aide d’un plugin WordPress

Le plugin Code Embed vous permet d'incorporer du code (JavaScript & HTML) dans une publication article ou page, sans que le contenu soit modifié par l'éditeur. L'intégration globale vous permet de configurer un code dans une publication ou une page, puis d'y accéder à partir d'une autre, de modifier les mots clés ou identificateurs utilisés pour intégrer le code, rechercher du code d'intégration via une option, d’ajouter un suffixe simple au code d'intégration pour convertir les vidéos ou encore pour incorporer un script externe directement à l'aide de l'URL. Lors de l'activation du plugin Code Embed, vous devrez modifier l’article ou la page où vous souhaitez ajouter le JavaScript. Activez d’abord les champs personnalisés : dans l’éditeur de blocs, menu Options (les trois points), puis Préférences > Général > Avancé > Champs personnalisés et Afficher et recharger la page ; dans l’éditeur classique, bouton Options de l’écran, option Champs personnalisés. Créez ensuite, dans la zone Champs personnalisés en bas de l’écran, un champ nommé CODEmoncodejs (le mot-clé CODE, réglage par défaut de l’extension, suivi d’un suffixe de votre choix) et collez votre code JavaScript dans sa valeur. Vous pouvez maintenant utiliser ce champ personnalisé pour incorporer le code JavaScript n'importe où dans votre publication. Il suffit d'ajouter le shortcode suivant dans le contenu, à l’endroit voulu : {{CODEmoncodejs}}. Depuis la version 2.4 de l’extension, seuls les comptes autorisés à publier du HTML non filtré (administrateurs et éditeurs d’un site simple, super-administrateur en multisite) peuvent utiliser ces champs ; pour un article rédigé par un autre compte, le script n’est pas inséré. Vous pouvez maintenant enregistrer votre article ou votre page et afficher le site. Assurez-vous de la présence du code JavaScript  en inspectant le code source de la page.  

Conclusion

J’espère que cet article vous a aidé à ajouter facilement du code JavaScript dans vos pages ou dans vos articles WordPress. Toutefois au moment même ou je rédige cet article, je me suis aperçu qu’il est possible d’ajouter du JavaScript dans une page ou un article sans aucune autre forme de procès que de poser ce code depuis l’éditeur WordPress en mode "Texte" avec mon Classic Editor. Ce qui me donne ceci : Ici le script est posé en fin de la page et fonctionne parfaitement. Sic ! Je me dois de préciser ici que mon plugin de sécurité WordFence a vu rouge et m’a immédiatement alerté de l’ajout de code dans le contenu tout en me demandant si je l’autorisais :p Toutefois cette manière de procéder n’est pas une bonne pratique, et elle ne fonctionne que pour les comptes autorisés à publier du HTML non filtré (administrateurs et éditeurs d’un site simple, super-administrateur en multisite) : pour les autres, WordPress retire les balises script à l’enregistrement. Dans l’éditeur de blocs, l’équivalent est le bloc HTML personnalisé. Pour un script durable, préférez une extension ou le thème enfant.