Il existe un moyen spécifique d’ajouter du Javascript à votre thème WordPress afin d’éviter tout conflit avec les plugins ou les thèmes WordPress parents. Le problème est que de nombreux «développeurs» appellent leurs fichiers javascript directement dans le fichier header.php ou footer.php, ce qui n’est pas la bonne façon de procéder.

Dans ce guide, je vais vous montrer comment appeler correctement vos fichiers javascript en utilisant votre fichier functions.php afin qu’ils se chargent directement dans la balise head ou footer de votre site. De cette façon, si vous développez un thème pour la distribution et que votre utilisateur final souhaite modifier les scripts via un thème enfant, ils le peuvent ou s’ils utilisent la minification / la mise en cache ou d’autres plugins d’optimisation, ils fonctionneront correctement. Et si vous travaillez avec un thème enfant, vos scripts sont ajoutés de la bonne façon, sans copier les fichiers header.php ou footer.php dans votre thème enfant, ce qui ne devrait jamais être nécessaire (lorsque vous travaillez avec un thème bien codé)

Mauvaise façon d’ajouter du Javascript aux thèmes WordPress

L’appel du javascript dans votre fichier header.php ou footer.php tel que montré ci-dessous, n’est PAS la bonne façon et je le déconseille fortement, souvent cela provoque des conflits avec d’autres plugins et faire les choses manuellement lorsque vous travaillez avec un CMS n’est jamais une bonne idée.

<script src="https://site.com/wp-content/themes/mytheme/js/my-script.js"></script>

La bonne façon d’ajouter du Javascript aux thèmes WordPress

Le mieux pour ajouter du javascript à votre thème WordPress est de le faire via le fichier functions.php en utilisant wp_enqueue_script. L’utilisation de l’action wp_enqueue_scripts pour charger votre javascript vous aidera à éviter que votre thème ne pose problème.

Exemple

wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/my-script.js', array(), true );

Le code ci-dessus chargera le fichier my-script.js sur votre site. Comme vous pouvez le voir, je n’ai inclus que le handle $, mais vous pouvez également ajouter des dépendances pour votre script, le numéro de version et s’il faut le charger dans l’en-tête ou le pied de page (par défaut, c’est l’en-tête).

La fonction wp_enqueue_script () peut techniquement être utilisée dans n’importe quel fichier de modèle de thème ou de plugin, mais si vous chargez des scripts globaux, vous voudrez le placer soit dans le fichier function.php de votre thème, soit dans un fichier séparé spécifiquement destiné à charger des scripts sur le site. Mais si vous cherchez uniquement à charger un script sur un fichier modèle spécifique (par exemple sur les publications de la galerie), vous pouvez placer la fonction directement dans le fichier modèle, cependant, personnellement, je recommande de garder tous les scripts au même endroit et d’utiliser des conditions pour charger scripts selon les besoins.

Scripts hébergés par WordPress

Une chose intéressante à propos de WordPress est qu’il existe déjà un tas de scripts hébergés et enregistrés que vous pouvez utiliser dans le développement de votre thème. Par exemple, jQuery qui est utilisé dans presque tous les projets doit TOUJOURS être chargé à partir de WordPress et jamais hébergé sur un site tiers tel que Google. Donc, avant d’ajouter un script personnalisé à votre projet, vérifiez la liste des scripts enregistrés pour vous assurer qu’il n’est pas déjà inclus dans WordPress et si c’est le cas, vous devez le charger plutôt que d’enregistrer le vôtre.

Utilisation du hook WordPress Enqueue

Auparavant, nous avons mentionné la fonction nécessaire pour charger un script sur votre site, cependant, lorsque vous travaillez avec des fichiers non modèles tels que votre fichier functions.php, vous devriez ajouter cette fonction dans une autre fonction accrochée aux hooks WordPress appropriés, de cette façon vos scripts obtiennent enregistré avec tous les autres scripts enregistrés par WordPress, les plugins tiers et votre thème parent lors de l’utilisation d’un thème enfant.

WordPress dispose de deux hooks d’action différents que vous pouvez utiliser pour appeler vos scripts.

  1. wp_enqueue_scripts – action utilisée pour charger des scripts sur le front-end
  2. admin_enqueue_scripts – action utilisée pour charger des scripts dans l’admin WP

Voici un exemple (qui serait ajouté à votre fichier functions.php) de la façon de créer une fonction puis d’utiliser le hook WordPress pour appeler vos scripts.

/**
 * Enqueue a script
 */
function myprefix_enqueue_scripts() {
    wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/my-script.js', array(), true );
}
add_action( 'wp_enqueue_scripts', 'myprefix_enqueue_scripts' );

Remarque: Voyez comment nous utilisons la fonction «get_template_directory_uri» lors de la définition de l’emplacement de votre script? Cette fonction crée une URL vers votre dossier de thème. Si vous travaillez avec un thème enfant, vous voudrez plutôt utiliser «get_stylesheet_directory_uri» pour qu’il pointe vers votre thème enfant et non vers le thème parent.

Ajout de code Javascript en ligne

Bien que vous puissiez facilement coller du javascript en ligne dans n’importe quel fichier de modèle via la balise de script, il peut être judicieux d’utiliser également des hooks WordPress pour ajouter votre code en ligne, en particulier lorsqu’il s’agit d’un plugin principal ou d’un code de thème. Voici un exemple d’ajout de scripts en ligne à votre site:

function myprefix_add_inline_script() {
    wp_add_inline_script( 'my-script', 'alert("hello world");', 'after' );
}
add_action( 'wp_enqueue_scripts', 'myprefix_add_inline_script' );

Ce que cela fera est d’ajouter votre javascript en ligne après le script «my-script» précédemment enregistré. Lorsque vous utilisez wp_add_inline_script, vous ne pouvez ajouter du code en ligne qu’avant ou après un script déjà enregistré, donc si vous essayez de modifier le code d’un script particulier, assurez-vous qu’il est chargé après lui, ou si vous avez juste besoin d’ajouter du code personnalisé, vous pouvez accrocher il au script jquery qui est généralement chargé par la plupart des thèmes WordPress et sinon vous pouvez utiliser le wp_enqueue_script pour charger la version hébergée par WordPress de jQuery.

En utilisant cette méthode, les gens peuvent facilement supprimer vos scripts en ligne via un thème enfant ou un module complémentaire, cela garde tout votre javascript personnalisé bien organisé et il est analysé par WordPress, ce qui peut être plus sûr. Et si vous utilisez un thème enfant, vous pouvez charger vos scripts via votre fichier functions.php au lieu de copier les fichiers header.php ou footer.php sur votre thème enfant.

Cela dit, si vous travaillez dans un thème enfant, vous n’avez pas besoin de le faire, vous pouvez simplement vider votre code dans votre en-tête en utilisant les hooks wp_head ou wp_footer tels que l’exemple ci-dessous:

add_action( 'wp_footer', function() { ?>
    <script>
        ( function( $ ) {
            'use strict';
            $( document ).on( 'ready', function() {
                // Your custom code here
            } );
        } ( jQuery ) );
    </script>
<?php } );

Share: