Comment ajouter du Javascript (fichiers ou scripts) sans casser votre site WordPress (functions.php, template ou plugin)

Ajouter Javascript à WordPress

Il existe généralement de nombreuses raisons pour lesquelles vous souhaitez ajouter Javascript à WordPress, que ce soit un petit ajustement à une fonctionnalité ou peut-être que vous cherchez à ajouter un script tiers. Qui concerneless de la raison pour laquelle vous voulez le faire, vous voulez vous assurer de ne pas vous tromper - car vous pourriez ruiner votre site Web.

Il existe un bon moyen d'ajouter du Javascript à WordPress. Et puis il y a les mauvaises manières, qui pourraient soit casser votre site Web, soit créer un impact négatif sur les performances.

Dans cet article, nous vous proposerons un certain nombre de façons différentes d'ajouter du code Javascript aux sites Web et celles qui devraient être utilisées dans les différentes circonstances que vous pourriez rencontrer.

 

 

WordPress est si extensible qu'il vous permet d'ajouter facilement de nouvelles fonctionnalités et fonctionnalités à votre site Web sans avoir à redéfinir ou à remplacer l'ensemble de votre thème. Plutôt que de recréer le thème WordPress à partir de zéro, vous pouvez ajouter la fonctionnalité en ajoutant simplement des plugins.

Et si la fonctionnalité que vous souhaitez ajouter est plutôt petite et qu'il n'est pas nécessaire de créer ou d'installer un plugin, vous pouvez utiliser le fichier functions.php ou de diverses autres façons d'ajouter Javascript à WordPress sans avoir à créer un plugin séparé.

(Note spéciale: Cherchez-vous une liste de réglages / astuces que vous pouvez facilement faire sur votre site WordPress sans utiliser de plugin? Vous pouvez consulter notre guide ici: 101 astuces WordPress que tout blogueur sérieux doit connaître.)

La meilleure chose à propos de la fichier de fonctions est qu'il agit comme un plugin, qui peut être utilisé pour ajouter des fonctionnalités et étendre les fonctionnalités du thème ainsi que de WordPress lui-même.

Bien que vous puissiez facilement ajouter Code Javascript directement à votre fichier header.php, il y a un problème avec cette méthode.

Cela peut en fait provoquer des conflits avec d'autres plugins lorsqu'ils chargent leurs propres scripts JS.

Dans cet article de CollectiveRay, nous examinons la bonne façon d'ajouter du javascript aux thèmes WordPress. En tant que développeurs WordPress, c'est l'une des choses que nous devrons faire très souvent.

Si vous n'êtes pas sûr de peaufiner le code vous-même, vous voudrez peut-être consulter cet article pour apprendre à recruter le meilleur développeur WordPress pour votre entreprise: https://www.collectiveray.com/wordpress-developers-for-hire, ou découvrez les options de développement bon marché suivantes. 

Si vous n'êtes pas sûr de savoir si cela vous convient et de ce qu'il faut faire rapidement, découvrez quelques concerts Fiverr qui peuvent le faire rapidement pour vous.

logo fiverr

Cliquez ici pour trouver des experts bon marché sur les correctifs WordPress

 

Comment ajouter JavaScript à WordPress

Il existe plusieurs façons d'ajouter du code Javascript personnalisé à votre site WordPress, chacune avec ses propres utilisations:

  1. Ajoutez le script à une page spécifique ou unique de votre choix, ou à plusieurs pages à l'aide de functions.php
  2. Ajouter un script dans certaines pages à l'aide de plugins tels que les en-têtes et les pieds de page
  3. Ajouter un fichier Javascript à votre en-tête de thème

1. Utilisation de functions.php

Une seule page ou un message

Ce tweak de code utilisera le fonctions fichier trouvé dans votre dossier de modèles pour ajouter un fichier .JS de votre choix à une seule page de votre choix uniquement.

Cela utilise la fonction IS_PAGE que vous pouvez trouver ici: https://developer.wordpress.org/themes/basics/conditional-tags/. Vous pouvez en fait utiliser diverses autres options si vous souhaitez ajouter le script uniquement dans des conditions spécifiques telles que:

  • is_single(),
  • is_front_page(),
  • is_home,
  • is_admin et ainsi de suite 

Si vous préférez regarder une vidéo sur YouTube sur la façon de procéder, cette courte vidéo est assez bonne, sur la façon d'ajouter du Javascript à une seule page:

Fw6VDOZYqrM

Nous avons des instructions détaillées sur la page, donc une fois que vous avez vu la vidéo, vous pouvez utiliser cet article comme référence.

Si vous devez ajouter le fichier à toutes les pages, continuez à faire défiler pour trouver d'autres alternatives à cette méthode ci-dessous.

  • Tout d'abord, vous devez identifier l'ID de la page à laquelle vous souhaitez ajouter le script. Pour ce faire, accédez à la page à laquelle vous souhaitez ajouter le fichier, cliquez sur Modifier puis récupérez l'ID de la page à partir de l'URL comme vous pouvez le voir ci-dessous. L'ID est le numéro trouvé dans l'URL de la barre du navigateur.
  • identifiant de la page wordpress

  • Maintenant que vous avez l'ID de la page, vous devrez télécharger le fichier .js vers un emplacement. Nous vous recommandons de télécharger le fichier .js dans votre dossier de modèles, peut-être dans le répertoire enfant.
  • Une fois que vous avez téléchargé cela, vous devez prendre note exactement du répertoire et du nom du fichier .JS, que nous utilisons à la place de PATH_TO_JS_FILE ci-dessous. À titre d'exemple, votre fichier peut se trouver dans: https://www.yourwebsite.com/wp-content/themes/twentynineteen/js/myjsfile.js
  • Prenez note de cette URL complète et remplacez le PATH_T_JS_FILE ci-dessous. Vous devrez également remplacer l'ID que vous avez trouvé ci-dessus.
  • Ajoutez le code complet ci-dessous à la fin du fonctions fichier de votre modèle.

fonction collectiveray_load_js_script() {
  if (is_page (ID)) {
    wp_enqueue_script ('js-file', 'PATH_TO_JS_FILE', array ('jquery'), '', false);
    // ou utilisez la version ci-dessous si vous savez exactement où se trouve le fichier
    // wp_enqueue_script ('js-file', get_template_directory_uri (). '/js/myscript.js');
  }
}

add_action('wp_enqueue_scripts', 'collectiveray_load_js_script');

Si vous savez exactement où vous avez placé le fichier JS, vous pouvez utiliser une légère variation du wp_enqueue_script: 

wp_enqueue_script ('fichier-js', get_template_directory_uri (). '/js/myscript.js');

Dans ce cas, le fichier /js/mysript.js est l'emplacement du fichier que vous souhaitez ajouter.

Une fois que vous rechargez la page, vous constaterez que le fichier a été ajouté. Vous pouvez le confirmer en cliquant sur Afficher la source de la page.

Si au lieu d'ajouter le fichier Javascript à une page, vous souhaitez l'ajouter à une seule page, nous pouvons utiliser un léger ajustement de cette fonction, pour la faire appliquer à un seul article. Vous pouvez utiliser n'importe quelle variante des éléments suivants:

  • is_single ('17') - utilise l'identifiant de publication
  • is_single ('Titre de mon message') - utilise le titre de l'article pour vérifier s'il s'agit de l'article auquel ajouter le fichier
  • is_single ('mon-titre-post') - contre le limace du poteau
  • is_single (array (17, 'mon-titre-article', 'Mon titre d'article')) - ceci vérifie si l'une des conditions ID de publication est "17", le slug est "mon-titre-post", ou le titre est "Mon titre de poste"
  • is_single () - d'autres variations de la fonction is_single utilisant un tableau de valeurs à vérifier

Le code, dans ce cas, serait le suivant ou une légère variation en fonction des paramètres de la fonction is_single. 

fonction collectiveray_load_js_script() {
  if (is_single ('17 ')) {
    wp_enqueue_script ('js-file', 'PATH_TO_JS_FILE', array ('jquery'), '', false);
    // ou utilisez la version ci-dessous si vous savez exactement où se trouve le fichier
    // wp_enqueue_script ('js-file', get_template_directory_uri (). '/js/myscript.js');
  } 
}

add_action('wp_enqueue_scripts', 'collectiveray_load_js_script');

Si vous avez le titre de l'article, vous pouvez l'utiliser au lieu du paramètre "17". Une fois de plus, le wp_enqueue_script peut également être modifié pour:

wp_enqueue_script ('fichier-js', get_template_directory_uri (). '/js/myscript.js');

Ajouter Javascript à toutes les pages 

Comme nous l'avons vu, la méthode la plus simple et la plus propre pour ajouter un fichier javascript à votre thème WordPress consiste à utiliser functions.php fichier avec wp_enqueue_script. Dans ce cas, au lieu de créer une condition pour ajouter le contenu à des pages spécifiques, nous allons ajouter une fonction générique.

Voici comment le faire:

Ouvrez votre functions.php et copiez-y l'extrait de code ci-dessous. Assurez-vous de remplacer l'URL du modèle par la vôtre avant d'enregistrer.

fonction collectiveray_theme_scripts_function() {
  wp_enqueue_script ('fichier-js', get_template_directory_uri (). '/js/myscript.js');
}
add_action('wp_enqueue_scripts','collectiveray_theme_scripts_function');

Si vous êtes en utilisant un thème enfant, vous devrez utiliser get_stylesheet_directory_uri () au lieu de get_template_directory_uri () 

2. Utilisation de plugins

Si vous souhaitez simplement utiliser un plugin pour intégrer une référence javascript au fichier d'en-tête ou de pied de page du thème WordPress, le plugin 'Insert Headers and Footers' est une option simple.

Comme son nom l'indique, il vous permet d'ajouter des scripts aux fichiers d'en-tête et de pied de page en vous connectant à wp_head reçues par les enchanteurs et permettent aussi wp_footer fonctions de WordPress. 

Ce plugin est une bonne option car il vous permet d'ajouter n'importe quel script sans courir aucun risque de casser des trucs. De plus, vous n'avez pas besoin de modifier ou d'ajuster vous-même le code (si vous n'êtes pas à l'aise de le faire), comme nous avons dû le faire dans l'exemple précédent.

La modification directe du code est généralement une meilleure option pour les concepteurs Web. La méthode utilisant ce plugin est plus simple.

Au lieu de modifier les fichiers du thème directement avec le code Javascript personnalisé, le plugin vous permet d'insérer le code, qui sera ensuite ajouté à l'en-tête ou au pied de page de votre site, selon les options que vous avez choisies. 

Ce plugin prend en charge deux options:

  1. Ajout du chemin vers un fichier Javascript spécifique que vous téléchargez
  2. Ajouter le script directement (par exemple pour Analytics ou d'autres scripts tiers)

Commençons: 

Vous pouvez télécharger Insérer des en-têtes et des pieds de page ici.

Installez le plugin:

  • Connectez-vous au backend ou à l'administrateur de votre site.
  • Allez dans Plugins> Ajouter un nouveau
  • Recherchez le plugin "Headers and Footers" et cliquez sur Installer maintenant.
  • Une fois installé, cliquez sur Activer
En-têtes et pieds de page
Selon votre scénario, vous devez maintenant suivre l'option 1 ou 2. Par exemple, pour ajouter Google Analytics, vous devez suivre l'option 2.

Option 1: télécharger un fichier Javascript personnalisé

  • Tout d'abord, vous devez préparer le fichier pour l'inclusion
  • Enregistrez votre code ou fichier JavaScript dans un nouveau fichier de test avec le js extension.
  • Téléchargez-le sur votre site dans le dossier suivant: wp-content / themes / / js /
  • Accédez à Paramètres> Insérer des en-têtes et des pieds de page.

Nous avons maintenant quelques choix pour charger notre fichier:

  1. Scripts dans l'en-tête (charger à l'intérieur étiqueter)
  2. Scripts en pied de page (charger avant la fermeture étiqueter)

Utilisez l'emplacement qui correspond le mieux à vos besoins spécifiques en utilisant l'exemple suivant. Notez que doit être remplacé par le nom du répertoire du thème que vous utilisez, par exemple vingt-vingt

/js/file.js">
 
Insérer un script dans la tête
  • Cliquez sur le bouton "Enregistrer" pour terminer et enregistrer.

Option 2: charger un script personnalisé sans fichier

La 2ème option que vous pouvez utiliser avec ce plugin, est l'option pour ajouter le code directement dans WordPress sans avoir besoin d'utiliser un fichier spécifique.

Cela peut être utilisé lorsque vous utilisez un service tiers, tel que Google Analytics, Drip ou un autre outil qui nécessite l'ajout d'un script à votre site. Prenez simplement le script et déposez-le dans le Scripts dans l'en-tête fenêtre:

ajouter directement un script / code
 
Encore une fois, cliquez sur "Enregistrer" pour terminer.

 

Rechargez le front-end et vérifiez la source de votre site Web pour vous assurer que le code s'affiche maintenant. C'est aussi une bonne idée de parcourir quelques pages pour confirmer que tout fonctionne toujours bien.

 

Même si cela semble assez simple, cela peut être hors de votre zone de confort, donc si vous voulez faire cela rapidement, consultez certains développeurs sur Fiverr qui peuvent le faire pour vous.

logo fiverr

Cliquez ici pour trouver des experts bon marché sur les correctifs WordPress

 

Si vous avez trouvé cette astuce utile, vous voudrez peut-être consulter d'autres de nos astuces WordPress dans le menu correspondant en haut de la page.

3. Ajoutez JavaScript à votre en-tête de thème

Dans certains cas, vous voudrez peut-être que le fichier JavaScript soit utilisé dans tout votre site, mais vous ne voulez pas utiliser de plugin pour ce faire.

Par exemple, si vous souhaitez ajouter un script tiers dans toutes vos pages, (par exemple, le script instantpage.js pour rendre votre site Web plus rapide), vous pouvez insérer le script, ou ajouter le fichier de script référencé lui-même, dans le head de votre header.php fichier modèle. 

CE N'EST PAS IDÉAL. Si vous mettez à jour votre thème, vous risquez de perdre ces modifications. Si vous souhaitez toujours le faire directement, il est fortement recommandé de créer un thème enfant.

Pour ce scénario, où vous souhaitez que ce script soit ajouté partout, vous pouvez ajouter le fichier directement au modèle selon les instructions ci-dessous:

Cet appel au fichier (ou au script) doit être ajouté entre les balises méta et le lien de la feuille de style. C'est exactement la même chose que si vous ajoutiez du code Javascript dans n'importe quelle page HTML. 

Pour "ajouter" le fichier Javascript dans votre site, dans le head, vous utilisez le code suivant:


Assurez-vous que vous avez défini le type correctement, sinon votre site ne sera pas valide. Assurez-vous également que le répertoire / scripts existe dans le thème et que vous y avez ajouté le myscript.js.

Vous pouvez ensuite ajouter toute référence aux fonctions utilisées dans le fichier que vous venez d'ajouter au HTML où vous devez l'utiliser. 

Par exemple, voici un exemple d'utilisation de la fonction que vous venez d'ajouter.

" >La tête va ici

 

Téléchargez la liste des 101 astuces WordPress que tout blogueur devrait connaître

101 astuces WordPress

Cliquez ici pour télécharger maintenant
 

Foire aux questions

Comment ajouter un fichier Javascript sur WordPress?

Le moyen le plus simple d'ajouter un fichier Javascript à WordPress consiste à utiliser le plugin Insérer des en-têtes et des pieds de page. 

  • Connectez-vous à votre site et installez le plugin Headers and Footers.
  • Une fois installé, cliquez sur Activer
  • Enregistrez votre code ou fichier JavaScript dans un nouveau fichier avec le js extension.
  • Téléchargez-le sur votre site dans le dossier suivant: wp-content / themes / / js /
  • Accédez à Paramètres> Insérer des en-têtes et des pieds de page.
  • Ajoutez ce qui suit aux scripts dans l'en-tête:  <script src="https://www.website.com/wp-content/themes/<theme-you-are-using>/js/file.js"></script>

 

Puis-je utiliser Javascript dans WordPress?

Oui, il existe de nombreuses façons d'utiliser Javascript dans WordPress. Si vous souhaitez ajouter un script simple, vous pouvez utiliser le plugin Insérer des en-têtes et des pieds de page pour ajouter le script à l'en-tête, puis appeler le script à partir de la partie du thème, de l'article ou du plugin dont vous avez besoin pour l'utiliser.

Comment ajouter mon propre code à WordPress?

La meilleure façon d'ajouter votre propre code à WordPress consiste à utiliser le fichier functions.php. Il est recommandé de créer un thème enfant, puis d'ajouter vos propres modifications au thème enfant afin de ne pas interrompre la possibilité de mise à niveau de votre thème.

Comment modifier Javascript dans WordPress?

La meilleure façon de modifier Javascript dans WordPress est de créer un thème enfant, puis d'ajouter vos modifications de Javascript ou la personnalisation d'autres fonctions dans le thème enfant. Cela vous permet de modifier Javascript si nécessaire sans casser le reste de votre thème ou la possibilité de mise à niveau du thème.

Conclusion

Les trois méthodes ci-dessus sont le moyen le plus propre d'ajouter du Javascript à WordPress. En général, la modification directe du code doit être effectuée par des utilisateurs avancés qui ont une expérience significative du code et peuvent être sûrs de savoir comment annuler les modifications qu'ils ont apportées. Sinon, il est préférable de s'en tenir aux plugins. Si vous n'êtes pas à l'aise pour peaufiner le code vous-même, ce serait formidable de contacter nos partenaires sur Fiverr qui peuvent le faire pour votre aujourd'hui.

logo fiverr

Cliquez ici pour trouver des experts bon marché sur les correctifs WordPress

 

A propos de l'auteur
David Attard
Auteur: David AttardSite Web : https://www.linkedin.com/in/dattard/
David travaille dans ou autour de l'industrie en ligne / numérique depuis 18 ans. Il possède une vaste expérience dans les industries du logiciel et de la conception Web utilisant WordPress, Joomla et les niches qui les entourent. En tant que consultant numérique, son objectif est d'aider les entreprises à obtenir un avantage concurrentiel en utilisant une combinaison de leur site Web et des plates-formes numériques disponibles aujourd'hui.

Encore une chose ... Saviez-vous que les personnes qui partagent des informations utiles comme cet article ont l'air géniales aussi? ;-)
Si vous voulez, vous pouvez laisser un incontournable commentez vos pensées, puis partagez-les sur votre ou vos groupes Facebook qui trouveraient cela utile et récoltons ensemble les avantages. Merci d'avoir partagé et d'être gentil!

Divulgation: Cette page peut contenir des liens vers des sites externes pour des produits que nous aimons et que nous recommandons sans réserve. Si vous achetez des produits que nous suggérons, nous pouvons percevoir des frais de parrainage. Ces frais n'influencent pas nos recommandations et nous n'acceptons pas les paiements pour les avis positifs.

Auteur (s) présenté sur:  Logo du magazine Inc   Logo Sitepoint   Logo CSS Tricks    logo webdesignerdepot   Logo WPMU DEV   et beaucoup plus ...