Ajoutez facilement du code JavaScript à WordPress

Ils nous demandent régulièrement ajouter du code ou des extraits de code JavaScript à notre WordPress. Cela peut être des analyses, un gestionnaire de balises, un suivi Google Ads ou même pour configurer le pixel Facebook.

Par défaut, WordPress ne nous permet pas d’ajouter du code directement aux publications. Dans cet article, nous allons vous montrer comment ajouter facilement du JavaScript aux pages ou aux articles de votre WordPress.

Qu’est-ce que le code JavaScript ?

JavaScript (souvent abrégé en « JS ») est un langage de script simple et orienté objet, connu principalement sous le nom de langage de script pour les sites Web. Mais il est également utilisé dans de nombreux environnements en dehors des navigateurs Web comme Node.js, Apache CouchDB ou même Adobe Acrobat.

Voici un exemple de JavaScript :

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

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

Nous pouvons également avoir besoin d’ajouter un script, toujours en JS, pour nos annonces Google, 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>

Ajoutez du code JS à tout votre contenu avec un plugin

Si vous devez par exemple ajouter le code d’installation de Google Analytics qui doit être présent sur chaque page de votre WordPress afin de suivre les visiteurs de votre site, vous pouvez ajouter ce code directement dans les fichiers. en-tête.php où pied de page.php de votre thème WordPress.

Cependant, ces modifications seront écrasées lorsque vous mettez à jour ou modifiez votre thème. Dans ce cas, il est encore mieux de créer un thème pour les enfants.

Remarque : Certains plugins SEO ou thèmes premium permettent parfois d’ajouter du script directement depuis leur configuration.

Insérer des titres et des fins

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 Google Analytics, CSS personnalisé, pixels Facebook et plus encore dans l’en-tête ou le pied de page de votre page WordPress. Plus besoin de modifier les fichiers de thème pour cela ! sans oublier de vérifier l’impact sur la métrique INP

Contrôle de script LuckyWP

Une autre option qui vous permet de saisir et de gérer du code personnel dans WordPress est le plugin LuckyWP Scripts Control.

Vous pouvez saisir le code Google Analytics, la balise méta de vérification de la console de recherche Google, le pixel Facebook, le CSS / JS personnalisé et d’autres codes sans jamais modifier les fichiers de thème.

Hormis une interface plus fluide pour le second, ces 2 plugins sont en tous points similaires et proposent les mêmes fonctions.

Ajouter JavaScript à un article ou à une page WordPress spécifique

Supposons que vous souhaitiez télécharger ce JavaScript sur un seul article ou page WordPress spécifique, pas sur la page entière. Ceci est par exemple nécessaire pour suivre les conversions AdWords, vous pouvez le faire simplement en suivant l’une des 2 méthodes ci-dessous.

Ajouter du code JavaScript manuellement

Pour ce faire, vous devrez ajouter une logique conditionnelle au code. Vous devrez mettre le code suivant dans votre fichier fonctions.php du sujet. Jetez un œ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');

Remarque: À la place de est célibataire, utilisation is_page pour rechercher un 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 en haut, mais en bas de la page.

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

Au lieu de suspendre la fonction wp_head, il est désormais associé à wp_footer. Vous pouvez également l’utiliser avec des balises conditionnelles pour ajouter du JavaScript à des articles ou des pages spécifiques.

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

Le plugin Code Embed permet d’insérer du code (JavaScript & HTML) dans un article ou une page web, sans modifier le contenu par l’éditeur.

L’intégration globale vous permet de configurer le code dans un article ou une page, puis d’y accéder à partir d’un autre, de modifier les mots-clés ou les identifiants utilisés pour saisir le code, de rechercher le code intégré via une option, d’ajouter une simple extension au code intégré pour convertir des vidéos ou insérer un script externe directement en utilisant l’URL.

Lorsque vous activez le plugin Code Embed, vous devez modifier la publication ou la page où vous souhaitez ajouter JavaScript. Sur la page de publication, cliquez sur le « Bouton »Options d’écrann « et cochez l’option » Champs personnalisés « .

Vous pouvez désormais utiliser ce champ personnalisé pour insérer du code JavaScript n’importe où dans votre publication. Ajoutez simplement le shortcode suivant au contenu : {{CODEmoncodejs} {

Vous pouvez maintenant enregistrer votre publication ou votre page et afficher la page. Assurez-vous que le code JavaScript est présent en inspectant le code source du site.

Conclusion

J’espère que cet article vous a aidé à ajouter facilement du code JavaScript à vos pages ou articles WordPress.

Cependant, en même temps que j’écrivais cet article, je me suis rendu compte qu’il était possible d’ajouter du JavaScript à une page ou un article sans autre forme de processus que de mettre ce code de l’éditeur WordPress en mode « Texte » avec mon éditeur classique .

Donne moi ça :

Ici le script est placé en bas de la page et fonctionne parfaitement. comme !

Je dois préciser ici que mon plugin de sécurité WordFence est rouge et m’a notifié immédiatement de l’ajout de code au contenu en me demandant si je l’ai autorisé :p

Cependant, cette procédure n’est pas une bonne pratique et reste à (re)vérifier ^^