Ajouter Javascript aux thèmes WordPress de la bonne façon

Il existe un moyen spécifique d’ajouter 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 est une façon incorrecte de le faire.


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 peut ou s’il utilise la réduction / mise en cache 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 façon, 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 Javascript aux thèmes WordPress

Appeler le 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 souvent, cela provoque souvent des conflits avec d’autres plugins et faire les choses manuellement lorsque vous travaillez avec un CMS n’est jamais une bonne idée.

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 aidera à garder votre thème hors de problèmes.

Exemple

wp_enqueue_script ('mon-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 thème ou fichier de modèle de plugin mais si vous chargez des scripts globaux, vous voudrez la 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 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 s’il l’est, vous devez le charger plutôt que d’enregistrer votre propre.

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 connectée aux crochets WordPress appropriés, de cette façon, vos scripts obtiennent enregistré avec tous les autres scripts enregistrés par WordPress, des 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.

  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.

/ **
* Mettre en file d'attente un script
* /
fonction myprefix_enqueue_scripts () {
wp_enqueue_script ('mon-script', get_template_directory_uri (). '/js/my-script.js', array (), true);
}
add_action ('wp_enqueue_scripts', 'myprefix_enqueue_scripts');

Remarque: Voir 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 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 crochets WordPress pour ajouter votre code en ligne, en particulier lorsqu’il s’agit d’un plugin de base ou d’un code de thème. Voici un exemple d’ajout de scripts en ligne à votre site:

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

Ce que cela fera, c’est ajouter votre javascript en ligne après le script «my-script» précédemment enregistré. Lorsque vous utilisez wp_add_inline_script, vous pouvez uniquement ajouter du code en ligne 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 le raccorder vers 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 gens peuvent facilement supprimer vos scripts en ligne via un thème enfant ou un module d’extension, il conserve tous vos javascript personnalisés soigneusement organisés 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 crochets wp_head ou wp_footer tels que l’exemple ci-dessous:

add_action ('wp_footer', function () {?>  
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me