Comment ajouter du JavaScript personnalisé à WordPress (3 méthodes)

L’un des meilleurs moyens d’améliorer la fonctionnalité frontale de votre site Web consiste à ajouter du JavaScript personnalisé à WordPress. Cependant, comprendre comment le faire peut être délicat, surtout si vous avez l’habitude de travailler avec le Customizer pour insérer du CSS personnalisé.

Heureusement, vous pouvez utiliser différentes stratégies en fonction de votre niveau d’expérience et de ce que vous essayez d’accomplir. Une fois que vous aurez appris quelles sont vos options, vous pourrez choisir la solution JavaScript personnalisée qui vous convient le mieux.

Dans cet article, nous vous expliquerons trois méthodes que vous pouvez utiliser pour ajouter du JavaScript personnalisé à votre site WordPress, ainsi que discuter des avantages et des inconvénients de chaque option. Voici les trois méthodes que nous couvrirons – vous pouvez cliquer pour passer directement à une méthode spécifique :

1. Utiliser le plugin Head & Footer Code (l’option la plus simple pour les utilisateurs non techniques)
2. Ajouter du code au fichier functions.php
3. Ajouter du code à l’en-tête (en utilisant la fonction wp_enqueue_script ou le hook wp_head)

Allons-y !

1. Installez un plugin tel que Head & Footer Code

L’utilisation d’un plugin est l’un des moyens les plus simples d’ajouter du JavaScript personnalisé WordPress à votre site Web. Par exemple, Head & Footer Code est un bon outil :

Ce plugin gratuit vous permet d’insérer du code de différentes manières. Vous pouvez l’utiliser pour Facebook Pixel, Google Analytics, CSS personnalisé, etc.

Pour commencer, ajoutez le plug-in à votre site en accédant à Plugins → Ajouter un nouveau à partir de votre tableau de bord d’administration, puis recherchez “Head & Footer Code”.

Une fois que vous cliquez sur le Installer maintenant et Activer boutons, vous pouvez localiser les paramètres du plug-in en allant sur Outils → Code d’en-tête et de pied de page. Sur cet écran, il y a trois cases pour les sections d’en-tête, de pied de page et de corps :

Vous pouvez entrer votre JavaScript personnalisé WordPress dans l’une de ces cases. Lorsque vous avez terminé, sélectionnez le Sauvegarder les modifications bouton en bas de l’écran. Le code sera ensuite chargé sur chaque page de votre site.

Avantages et inconvénients de l’utilisation d’un plugin

Le principal avantage d’utiliser un plugin est qu’il s’agit d’une option conviviale pour les débutants. Vous n’avez pas à vous soucier de modifier les fichiers de votre thème. Le plug-in Head & Footer Code peut également s’avérer utile si vous recherchez un moyen transparent d’ajouter d’autres types de code et de CSS personnalisés.

Cependant, l’inconvénient de cette méthode est qu’elle implique l’installation d’un plugin tiers, ce que certains propriétaires de sites tentent d’éviter. Si vous souhaitez limiter vos extensions au minimum, vous feriez peut-être mieux d’utiliser l’une des autres méthodes. De plus, le plugin est conçu pour les modifications JavaScript à l’échelle du site plutôt que pour des pages ou des publications spécifiques.

2. Utilisez votre fichier functions.php

Une autre méthode pour ajouter du JavaScript personnalisé WordPress à votre site Web consiste à tirer parti des fonctions et des crochets intégrés pour modifier le fonctions.php dossier. Cette approche implique de télécharger manuellement les scripts sur votre serveur.

Avant de commencer, nous vous recommandons de créer un thème enfant. Cette étape permet de s’assurer que vous pourrez toujours mettre à jour le thème parent en toute sécurité. Vous devriez également faire une sauvegarde de votre site au cas où quelque chose tournerait mal.

Cette méthode consiste à utiliser les IS_PAGE une fonction. Vous pouvez ajouter une logique conditionnelle pour appliquer votre JavaScript personnalisé à une seule publication ou page.

Pour commencer, localisez et ouvrez votre fonctions.php fichier, puis copiez et collez l’extrait de code suivant :

function ti_custom_javascript() {
    ?>
        <script>
          // your javscript code goes here
        </script>
    <?php
}
add_action('wp_head', 'ti_custom_javascript');

Ce code ajoutera du JavaScript à votre en-tête. Pour l’appliquer à un seul poste, vous pouvez utiliser ce qui suit :

function ti_custom_javascript() {
  if (is_single ('3')) { 
    ?>
        <script type="text/javascript">
          // your javscript code goes here
        </script>
    <?php
  }
}
add_action('wp_head', 'ti_custom_javascript');

Notez que vous devrez remplacer le 3 dans l’exemple ci-dessus avec le numéro d’identification du poste auquel vous souhaitez ajouter le code. Pour localiser ce numéro, accédez à la publication depuis votre tableau de bord d’administration, puis cliquez sur Éditer. Dans l’URL de la barre du navigateur, le numéro d’identification est le nombre à côté de “post=” :

Enregistrez votre fichier une fois que vous avez remplacé le numéro d’identification et ajoutez votre JavaScript personnalisé à la zone désignée. Vous pouvez également répéter ce même processus pour une seule page WordPress.

Avantages et inconvénients de l’édition de votre fichier functions.php

Un avantage d’éditer votre fonctions.php fichier est que vous n’avez pas besoin d’installer un autre plugin. Vous pouvez également utiliser cette technique pour ajouter des fonctionnalités et des fonctionnalités à la fois à votre thème et à WordPress lui-même. Par exemple, cette méthode peut insérer du JavaScript dans un seul article ou une seule page ou dans toutes les pages.

Le seul inconvénient de cette méthode est qu’elle implique de travailler avec du code et de modifier les fichiers de votre site. Par conséquent, ce n’est peut-être pas la meilleure option si vous n’êtes pas expérimenté dans ce département.

Il existe un moyen d’ajouter du JavaScript WordPress personnalisé en insérant le <script> tag directement dans votre header.php dossier. Cependant, cette méthode n’est pas recommandée. Cela peut interférer avec la séquence de chargement de WordPress et provoquer des conflits avec d’autres thèmes et plugins.

Si vous souhaitez ajouter du JavaScript personnalisé à toutes vos pages via l’en-tête de votre site, vous pouvez procéder de deux manières. Vous pouvez modifier le fonctions.php fichier et utiliser le wp_enqueue_script fonction, qui crée une fonction générique. Alternativement, vous pouvez utiliser le wp_head crochet d’action.

Examinons les deux options…

Ajoutez JavaScript à votre en-tête à l’aide de la fonction wp_enqueue_script

Tout d’abord, vous souhaiterez télécharger votre fichier JavaScript personnalisé dans le répertoire de votre modèle. Vous pouvez le faire via un client FTP (File Transfer Protocol) ou un gestionnaire de fichiers.

Accédez au dossier de modèles de votre site (wp_content → thèmes → [yourtheme]). Ensuite, sélectionnez Télécharger:

Notez le chemin d’accès exact de ce fichier. Par exemple, ce devrait être quelque chose comme “

Ensuite, localisez et ouvrez votre fonctions.php fichier, puis copiez et collez l’extrait de code suivant :

function ti_custom_javascript() {
wp_enqueue_script( 'example-script', get_template_directory_uri() . '/js/examplescript.js');
}
add_action('wp_enqueue_scripts', 'ti_custom_javascript');

Assurez-vous de remplacer l’URL du modèle par la vôtre. Enfin, enregistrez votre fichier.

Ajoutez du JavaScript personnalisé à l’aide du crochet wp_head

Vous pouvez également utiliser le wp_head crochet d’action pour ajouter du JavaScript personnalisé à votre en-tête via un script en ligne. Encore une fois, cette méthode n’est pas préférable car elle peut créer trop de scripts. Cependant, c’est mieux que d’insérer directement les scripts dans votre header.php dossier.

Cette méthode, que vous pouvez également utiliser pour le pied de page, utilise le(s) crochet(s) d’action pour ajouter des scripts en ligne à votre site. Tandis que le wp_enqueue_script fonction met en file d’attente les scripts personnalisés, la wp_head approche imprime les scripts dans votre modèle d’en-tête (et pied de page, si vous utilisez le wp_footer crochet).

Pour commencer, accédez à votre fonctions.php fichier, puis copiez et collez ce qui suit :

function ti_custom_javascript() {
?>
<script>
// your javascript code goes here
</script>
<?php
}
add_action('wp_head', 'ti_custom_javascript');

Notez que le wp_head hook ne se déclenche que sur le front-end de votre site Web. Cela signifie que tout code JavaScript personnalisé que vous ajoutez à l’aide de cette méthode n’apparaîtra pas dans les zones d’administration ou de connexion. Cependant, si vous souhaitez ajouter JavaScript à ces zones, vous pouvez utiliser le admin_head et login_head crochets d’action, respectivement.

Avantages et inconvénients de l’ajout de JavaScript à votre en-tête

Les wp_enqueue_script est préférée des développeurs car elle évite les conflits pouvant survenir avec d’autres options, telles que l’ajout direct de scripts à votre header.php dossier. De plus, l’utilisation de cette méthode ne crée aucun script dépendant.

Le principal problème avec l’ajout de JavaScript WordPress personnalisé à l’en-tête de votre site est qu’il peut causer des problèmes avec d’autres plugins qui chargent leurs propres scripts. Cette configuration peut également entraîner le chargement de plusieurs scripts plusieurs fois, ce qui peut entraver la vitesse et les performances globales de votre site Web.

Démarrer avec WordPress personnalisé JavaScript

Comme nous en avons discuté dans cet article, il existe trois façons d’ajouter du JavaScript personnalisé WordPress à votre site Web :

1. Installez un plugin tel que Head & Footer Code.
2. Utilise ton fonctions.php fichier pour ajouter du JavaScript personnalisé à une seule page ou publication.
3. Ajoutez JavaScript à votre en-tête en utilisant soit le wp_enqueue_script fonction ou wp_head crochet.

Maintenant que vous savez comment ajouter du JavaScript personnalisé à WordPress, vous pourriez être intéressé par notre autre guide sur l’ajout de CSS personnalisé à WordPress.