Voulez-vous apprendre à ajouter correctement du JavaScript et des feuilles de style CSS dans WordPress? Beaucoup d’utilisateurs d’outils font souvent l’erreur d’appeler directement leurs scripts et leurs feuilles de style dans des plugins et des thèmes. Dans cet article, nous allons vous montrer comment ajouter correctement du JavaScript et du CSS dans WordPress. Cela sera particulièrement utile pour ceux qui commencent juste à apprendre le développement de thèmes et de plugins pour WordPress.
L’erreur commune dans WordPress
les développeurs font souvent l’erreur d’ajouter directement leurs scripts ou de mettre en ligne des CSS dans leurs plugins et leurs thèmes.
Certains utilisent par erreur la fonction wp_head pour charger leurs scripts et leurs feuilles de style.
Bien que le code ci-dessus puisse sembler plus simple, il est erroné d’ajouter des scripts dans WordPress, cela entraîne plus de conflits dans le futur.
Par exemple, si vous chargez jQuery manuellement, un autre plugin charge jQuery via la méthode correcte, alors vous avez jQuery chargé deux fois. S’il est chargé sur chaque page, cela affectera négativement la vitesse et les performances de WordPress.
Il est également possible que les deux soient des versions différentes, ce qui peut aussi causer des conflits.
Cela étant dit, voyons la bonne façon d’ajouter des scripts et des feuilles de style.
Pourquoi mettre en file d’attente?
WordPress a une communauté de développeurs forte. Des milliers de personnes du monde entier développent des thèmes et des plugins pour WordPress.
Pour s’assurer que tout fonctionne correctement, et que personne ne marche sur les pieds d’un autre, WordPress a un système de mise en file d’attente. Ce système fournit une manière programmable de charger des feuilles de style.
En utilisant les fonctions wp_enqueue_script et wp_enqueue_style, vous indiquez à WordPress quand charger un fichier, où le charger, et quelles sont ses dépendances.
Ce système permet également aux développeurs d’utiliser les bibliothèques JavaScript intégrées qui sont livrées avec WordPress plutôt que de charger le même script tiers plusieurs fois. Cela réduit le temps de chargement des pages et permet d’éviter les conflits avec d’autres thèmes et plugins.
Comment mettre en file d’attente?
Le chargement correct de scripts dans WordPress est très facile. Voici un exemple de code que vous collez dans votre fichier plugins ou dans le fichier functions.php de votre thème pour charger correctement les scripts dans WordPress.
<?Php
function wpb_adding_scripts () {
wp_register_script ('my_amazing_script', plugins_url ('amazing_script.js', __FILE__), array ('jquery'), '1.1', true);
wp_enqueue_script ('my_amazing_script');
}
add_action ('wp_enqueue_scripts', 'wpb_adding_scripts');
?>
Explication:
Nous avons commencé par enregistrer notre script via la fonction wp_register_script (). Cette fonction accepte 5 paramètres:
- $ handle – Handle est le nom unique de votre script. Le nôtre s’appelle « my_amazing_script »
- $ src – src est l’emplacement de votre script. Nous utilisons la fonction plugins_url pour obtenir l’URL correcte de notre dossier plugins. Une fois que WordPress aura trouvé cela, il cherchera notre nom de fichier amazing_script.js dans ce dossier.
- $ deps – deps est pour la dépendance. Puisque notre script utilise jQuery, nous avons ajouté jQuery dans la zone de dépendance. WordPress chargera automatiquement jQuery s’il n’est pas déjà chargé sur le site.
- $ ver – Ceci est le numéro de version de notre script. Ce paramètre n’est pas obligatoire
- $ in_footer – Nous voulons charger notre script dans le pied de page, nous avons donc défini la valeur true. Si vous voulez charger le script dans l’en-tête, alors vous le faîtes.
Après avoir fourni tous les paramètres dans wp_register_script nous pouvons juste appeler le script dans wp_enqueue_script() qui fait tout arriver.
La dernière étape consiste à utiliser le hook d’action wp_enqueue_scripts pour charger le script. Comme il s’agit d’un exemple de code, nous l’avons ajouté juste en dessous de tout le reste.
Si vous ajoutez ceci à votre thème ou à votre plugin, vous pouvez placer ce hook d’action là où le script est réellement requis. Cela vous permet de réduire l’empreinte mémoire de votre plugin.
Maintenant, certains pourraient se demander pourquoi allons-nous l’étape supplémentaire pour enregistrer le script d’abord, puis le mettre en file d’attente? Eh bien, cela permet à d’autres propriétaires de désinscrire votre script sans modifier le code de base de votre plugin.
Mettre en file les styles CSS
Tout comme les scripts, vous pouvez également mettre en file d’attente vos feuilles de style. Regardez l’exemple ci-dessous.
Au lieu d’utiliser wp_enqueue_script nous utilisons maintenant wp_enqueue_style pour ajouter notre feuille de style.
Notez que nous avons utilisé le hook d’action wp_enqueue_scripts pour les styles et les scripts. Malgré le nom, cette fonction fonctionne pour les deux.
Dans les exemples ci-dessus, nous avons utilisé la fonction plugins_url pour pointer vers l’emplacement du script ou du style que nous voulions mettre en file d’attente.
Cependant, si vous utilisez la fonction des scripts de mise en file d’attente dans votre thème, utilisez simplement get_template_directory_uri () à la place. Si vous travaillez avec un thème enfant, utilisez get_stylesheet_directory_uri () .
