Vous souhaitez ajouter du JavaScript dans vos pages ou vos articles WordPress ? Parfois, il peut être nécessaire d’ajouter un code JavaScript à l’ensemble du site ou à des pages spécifiques.
Par défaut, WordPress ne vous permet pas d’ajouter du code directement dans vos pages. Dans cet article, nous vous montrerons comment ajouter facilement du JavaScript sur votre site WordPress.
Qu’est-ce que JavaScript ?
JavaScript est un langage de programmation qui ne s’exécute pas sur votre serveur mais sur le navigateur de l’utilisateur. Cette programmation côté client permet aux développeurs de faire beaucoup de choses sympas sans ralentir votre site web.
Si vous souhaitez intégrer un lecteur vidéo, ajouter une calculatrice ou un autre service tiers, il vous sera souvent demandé de copier et de coller un extrait de code JavaScript sur votre site web.
Un extrait de code JavaScript typique peut ressembler à ceci :
Maintenant, si vous ajoutez un extrait de code javascript à un article ou une page de WordPress, il sera supprimé par WordPress lorsque vous essaierez de l’enregistrer.
Cela étant dit, voyons comment vous pouvez facilement ajouter du JavaScript sur WordPress sans casser votre site web.
Méthode 1. Ajouter du JavaScript en utilisant les en-têtes et les pieds de page
Il vous sera parfois demandé de copier et de coller un extrait de code JavaScript dans votre site web pour ajouter un outil tiers. Ces scripts vont généralement dans la section de tête ou en bas avant la balise </body> de votre site web. De cette façon, le code est chargé à chaque consultation de la page.
Par exemple, le code d’installation de Google Analytics doit être présent sur chaque page de votre site web, afin qu’il puisse suivre les visiteurs de votre site.
Vous pouvez ajouter un tel code aux fichiers header.php ou footer.php de votre thème WordPress. Toutefois, ces changements seront écrasés lorsque vous mettrez à jour ou modifierez votre thème.
C’est pourquoi nous vous recommandons d’utiliser un plugin pour charger le javascript sur votre site.
Tout d’abord, vous devez installer et activer le plugin Insert Headers and Footers. Pour plus de détails, consultez notre guide étape par étape sur la façon d’installer un plugin WordPress.
Lors de l’activation, vous devez vous rendre à la page Paramètres >> Insert Headers and Footers. Vous verrez deux cases, une pour l’en-tête et l’autre pour le pied de page.
Vous pouvez maintenant coller le code JavaScript que vous avez copié dans l’une de ces cases, puis cliquer sur le bouton d’enregistrement.
Ce plugin chargera désormais automatiquement le code que vous avez ajouté sur chaque page de votre site web.
Méthode 2. Ajout de code JavaScript manuellement
Cette méthode exige que vous ajoutiez du code à vos fichiers WordPress.
Tout d’abord, voyons comment ajouter du code à l’en-tête de votre site WordPress. Vous devrez ajouter le code suivant au fichier functions.php de votre thème ou à un plugin spécifique au site.
Supposons que vous vouliez seulement charger ce javascript sur un poste spécifique de WordPress. Pour ce faire, vous devrez ajouter une logique conditionnelle au code. Regardez l’exemple suivant :
Si vous regardez de plus près le code ci-dessus, vous verrez que nous avons enroulé le code javascript autour d’une logique conditionnelle pour qu’il corresponde à un identifiant de poste spécifique. Vous pouvez l’utiliser en remplaçant le 16 par votre propre numéro de poste.
Maintenant, ce code fonctionnerait pour tout type de poste sauf pour les pages. Examinons un autre exemple, sauf que celui-ci vérifiera un identifiant de page spécifique avant d’ajouter le code javascript à la section d’en-tête.
Nous pouvons utiliser le même code avec une légère modification pour ajouter du code javascript au pied de page de votre site. Regardez l’exemple suivant.
Au lieu d’accrocher notre fonction à wp_head, nous l’avons maintenant accrochée à wp_footer. Vous pouvez également l’utiliser avec des balises conditionnelles pour ajouter du Javascript à des articles ou des pages spécifiques.
Méthode 3. Ajout de code Javascript à l’intérieur d’un article ou d’une page à l’aide d’un plugin
Cette méthode vous permettra d’ajouter du code n’importe où dans vos articles et pages WordPress. Vous pourrez également sélectionner l’endroit du contenu où vous souhaitez intégrer le code javascript.
Tout d’abord, vous devez installer et activer le plugin Code Embed.
Lors de l’activation, vous devez modifier un article ou une page où vous souhaitez ajouter le javascript. Sur la page d’édition de l’article, cliquez sur le bouton Options de l’écran et cochez l’option Champs personnalisés.
Faites défiler la page vers le bas et, en dessous de l’éditeur de messages, vous verrez la métabox Customs Fields où vous devez cliquer sur le lien Enter new.
Le nom du champ personnalisé et les champs de valeur apparaîtront désormais.
Vous devez fournir un nom pour le champ personnalisé avec un préfixe CODE (par exemple, CODEmyjscode) et ensuite coller le code javascript dans le champ de valeur.
Vous pouvez maintenant utiliser ce champ personnalisé pour intégrer le code JavaScript n’importe où dans cet article ou cette page. Il suffit d’ajouter ce code d’intégration n’importe où dans le contenu de votre message.
{{{CODEmyjscode}}
Vous pouvez maintenant enregistrer votre message ou votre page et consulter votre site. Vous pourrez voir le code javascript en utilisant l’outil Inspecter ou en consultant le source de la page.
Si vous avez aimé cet article, veuillez vous abonner à notre chaîne YouTube pour les tutoriels vidéo WordPress.
