Comment ajouter correctement des scripts et des styles Java dans WordPress

Voulez-vous apprendre à ajouter correctement des scripts JavaScripts et des feuilles de style CSS dans WordPress? De nombreux utilisateurs de bricolage commettent 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 des scripts Java et une feuille de style dans WordPress. Cela sera particulièrement utile pour ceux qui commencent tout juste à apprendre le développement de thèmes et de plugins WordPress.

Erreur commune lors de l'ajout de scripts et de feuilles de style dans WordPress

Beaucoup de nouveaux plugins et développeurs de thèmes WordPress font l'erreur d'ajouter directement leurs scripts ou CSS en ligne à leurs plugins et thèmes..

Certains utilisent à tort le wp_head fonction pour charger leurs scripts et leurs feuilles de style.

Bien que le code ci-dessus puisse sembler plus facile, c'est la mauvaise façon d'ajouter des scripts dans WordPress et cela entraîne davantage de conflits à l'avenir..

Par exemple, si vous chargez jQuery manuellement et qu'un autre plug-in charge jQuery avec la méthode appropriée, jQuery est 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 versions soient différentes, ce qui peut également causer des conflits.

Cela étant dit, examinons la bonne façon d’ajouter des scripts et des feuilles de style..

Pourquoi mettre des scripts et des styles en file d'attente dans WordPress?

WordPress a une forte communauté de développeurs. Des milliers de personnes du monde entier développent des thèmes et des plugins pour WordPress.

Pour que tout fonctionne correctement et que personne ne marche sur les pieds, WordPress dispose d'un système de mise en file d'attente. Ce système fournit un moyen programmable de charger des scripts Java et des feuilles de style CSS..

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 à WordPress, plutôt que de charger le même script tiers plusieurs fois. Cela réduit le temps de chargement des pages et évite les conflits avec d'autres thèmes et plugins.

Comment placer correctement les scripts dans WordPress?

Charger des scripts correctement dans WordPress est très facile. Vous trouverez ci-dessous un exemple de code que vous voudriez coller dans votre fichier de plugins ou dans le fichier functions.php de votre thème pour charger correctement les scripts dans WordPress..

 ?fonction php 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 le wp_register_script () une fonction. Cette fonction accepte 5 paramètres:

• $ handle - Handle est le nom unique de votre script. Le nôtre s'appelle «mon_amazing_script»
• $ src - src est l'emplacement de votre script. Nous utilisons la fonction plugins_url pour obtenir l’URL appropriée de notre dossier de plugins. Une fois que WordPress le trouvera, il recherchera notre nom de fichier amazing_script.js dans ce dossier..
• $ deps - Deps est pour la dépendance. Comme 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 sur true. Si vous voulez charger le script dans l'en-tête, vous devez le rendre faux.

Après avoir fourni tous les paramètres dans wp_register_script, nous pouvons simplement appeler le script wp_enqueue_script () ce qui fait que tout se passe.

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 avons ajouté cela juste en dessous de tout le reste.

Si vous ajoutiez ceci à votre thème ou à votre plug-in, vous pouvez alors placer ce crochet d'action là où le script est réellement requis. Cela vous permet de réduire l'encombrement de la mémoire de votre plugin..

Maintenant, certains pourraient se demander pourquoi allons-nous dans l'étape supplémentaire pour enregistrer le script en premier et le mettre ensuite en file d'attente? Cela permet aux autres propriétaires de sites de désenregistrer votre script sans modifier le code principal de votre plugin..

Styles correctement en file d'attente dans WordPress

Tout comme les scripts, vous pouvez également mettre en file d'attente vos feuilles de style. Regardez l'exemple ci-dessous:

À la place d'utiliser wp_enqueue_script, nous utilisons maintenant wp_enqueue_style ajouter notre feuille de style.

Notez que nous avons utilisé wp_enqueue_scripts crochet d’action pour les styles et les scripts. Malgré son nom, cette fonction fonctionne à la fois.

Dans les exemples ci-dessus, nous avons utilisé plugins_url fonction pour pointer sur l'emplacement du script ou du style que nous voulions mettre en file d'attente.

Cependant, si vous utilisez la fonction de scripts de mise en file d'attente dans votre thème, utilisez simplement get_template_directory_uri () au lieu. Si vous travaillez avec un thème enfant, utilisez get_stylesheet_directory_uri ().

Voici un exemple de code:

Nous espérons que cet article vous a aidé à apprendre à ajouter correctement jacvascript et les styles dans WordPress. Vous voudrez peut-être aussi étudier le code source des principaux plugins WordPress pour des exemples de code de la vie réelle.

Si vous avez aimé cet article, abonnez-vous à nos tutoriels vidéo sur la chaîne YouTube pour WordPress. Vous pouvez aussi nous trouver sur Twitter et Facebook.