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 à l’aide de 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, il le peut ou s’il utilise minifying/caching ou d’autres plugins d’optimisation, il fonctionnera correctement. Et si vous travaillez avec un thème enfant, vos scripts sont ajoutés de la bonne manière, sans copier les fichiers header.php ou footer.php dans votre thème enfant qui ne devraient jamais être nécessaires (lorsque vous travaillez avec un thème bien codé)
Mauvaise façon d’ajouter du Javascript aux thèmes WordPress
Appeler le javascript dans votre fichier header.php ou footer.php tel qu’illustré ci-dessous, n’est PAS la bonne manière 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 les problèmes de votre thè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 si vous souhaitez le charger dans l’en-tête ou le pied de page (la valeur par défaut est l’en-tête).
La fonction wp_enqueue_script() peut techniquement être utilisée dans n’importe quel thème ou fichier de modèle 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 de modèle spécifique (par exemple sur les publications de la galerie), vous pouvez placer la fonction directement dans le fichier de modèle, cependant, personnellement, je recommande de conserver tous les scripts au même endroit et d’utiliser des conditions pour charger scripts au besoin.
Scripts hébergés 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 ne jamais être 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 charger celui-ci au lieu d’enregistrer le vôtre.
Utilisation du crochet de mise en file d’attente WordPress
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 devez ajouter cette fonction dans une autre fonction accrochée aux crochets 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 a deux crochets d’action différents que vous pouvez utiliser pour appeler vos scripts.
- wp_enqueue_scripts – action utilisée pour charger des scripts sur le front-end
- 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' );
Noter: Vous 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 utiliser « get_stylesheet_directory_uri » à la place afin 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 les crochets WordPress pour ajouter votre code en ligne, en particulier lorsqu’il s’agit d’un plugin principal ou d’un code de thème. Vous trouverez ci-dessous un exemple d’ajout de scripts intégrés à 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, ou si vous avez juste besoin d’ajouter du code personnalisé, vous pouvez accrocher le 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 WordPress de jQuery.
En utilisant cette méthode, les utilisateurs peuvent facilement supprimer vos scripts en ligne via un thème enfant ou un module complémentaire de plug-in, tout votre javascript personnalisé est soigneusement 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 déposer votre code dans votre en-tête en utilisant les crochets wp_head ou wp_footer comme dans l’exemple ci-dessous :
add_action( 'wp_footer', function() { ?>
<script>
( function( $ ) {
'use strict';
$( document ).on( 'ready', function() {
// Your custom code here
} );
} ( jQuery ) );
</script>
<?php } );