Comment ajouter correctement des JavaScripts et des styles dans WordPress

Dans cet article, nous verrons comment ajouter correctement des JavaScripts et des Styles dans WordPress .

Il existe de nombreux nouveaux développeurs WordPress qui aiment écrire du code et développer des plugins exclusivement pour leurs propres sites Web ou pour les vendre sur divers marchés et obtenir un beau retour.

Il existe différentes manières d'écrire un code, mais il n'y a que quelques manières sélectionnées d'écrire du code efficacement.

Si vous pouvez écrire un code en deux lignes au lieu de dix, vous économisez beaucoup de traitement ainsi que de mémoire.

Cela n'a peut-être pas d'importance pour un site Web petit et léger, mais pour un site Web lourd, cela peut signifier beaucoup.

Si vous n'écrivez pas de code clair et n'utilisez pas efficacement les ressources disponibles, vous allez créer de nombreux conflits pour d'autres programmes.

Par exemple, il existe différentes façons de charger du Javascript externe prêt à l'emploi dans WordPress pour votre plugin.

Mais si vous ne suivez pas la norme appropriée, tous les plugins activés peuvent être gravement bloqués.

Cet article est principalement destiné aux nouveaux développeurs WordPress qui souhaitent développer des thèmes et des plugins WordPress.

À moins que vous ne codiez correctement, votre code ne sera pas professionnel et tout produit que vous avez créé, quelle que soit la qualité du concept, vous ne serez jamais accepté.

Ainsi, mieux vaut savoir comment ajouter correctement des JavaScripts et des Styles dans WordPress .

Les erreurs de l'ajout de JavaScript

Certains d'entre vous savent peut-être que WordPress a une fonction appelée wp_head qui vous aide à charger n'importe quoi dans la section d'en-tête du site Web.

Tout ce que vous avez à faire est d'ajouter les lignes de code suivantes dans votre fichier de script, et tout et n'importe quoi apparaîtra dans l'en-tête.

add_action('wp_head', 'wpb_bad_script');
fonction wpb_bad_script() {
echo 'jQuery va ici';
}

C'est plutôt un raccourci pour ajouter des choses, mais ce n'est pas la meilleure façon. Vous devez suivre les raccourcis standard appropriés, et c'est tout l'intérêt de cette illustration.

Par exemple, vous chargez JQuery manuellement dans votre plugin, et un autre développeur charge également le même JQuery manuellement ou via la norme appropriée. Si une personne a activé vos deux plugins, alors JQuery sera chargé deux fois dans la mémoire, ce qui est un gaspillage.

De plus, si JQuery chargé diffère en version, il y aurait beaucoup de problèmes dans les plugins en raison de conflits. Vous devez savoir comment ajouter correctement des JavaScripts et des styles dans WordPress avant d'écrire du code.

Comment éviter de telles erreurs - Le concept de la fonction de mise en file d'attente ?

Comme vous le savez peut-être, la communauté des développeurs WordPress est grande et forte. Il y a littéralement des milliers et des milliers de développeurs développant chaque jour de nouveaux thèmes et plugins.

Mais ce qu'ils font pour s'assurer qu'il n'y a jamais de conflit avec la méthode de codage de l'autre, c'est par la fonction de script de mise en file d'attente.

Il s'agit de la fonction chargée d' ajouter correctement des JavaScripts et des styles dans WordPress afin qu'il n'y ait jamais de conflit et de blocage inutile de la mémoire.

Il assure une manière systématique de charger les JavaScripts et les Styles. La fonction qp_enquque_function indique à Wordless quand charger ces JavaScripts et Styles, où les charger et surtout dans quelles conditions.

Avec l'aide de ceux-ci, vous n'avez pas à charger manuellement JQuery et des choses comme ça et, par conséquent, il n'y aura jamais de condition de blocage de la mémoire en raison du chargement répété des mêmes fichiers.

La raison en est que la fonction Enqueue vous permet d'utiliser les bibliothèques intégrées fournies avec WordPress lui-même. Cela réduira également le fardeau du temps de chargement lent des pages en raison de l'absence de chargement manuel des JavaScripts.

Étapes pour ajouter correctement des JavaScripts et des styles dans WordPress-

1. Scripts de mise en file d'attente dans WordPress

Les lignes de code suivantes chargent le bundle JavaScript intégré fourni avec WordPress. Vous devez placer ces lignes dans le fichier plugins lorsque vous créez des plugins ou vous devez les placer dans functions.php si vous créez un thème.

fonction 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 du code

Le script est enregistré via la fonction wp_register_script() qui a cinq paramètres différents.

1. $handle - C'est un nom unique pour le script. Ici, c'est 'my_amazing_script'.

2. $src - Il définit l'emplacement de votre script. La fonction de bibliothèque plugins_url récupère l'URL appropriée de votre dossier de plugin. Une fois récupéré, il commencera à rechercher le fichier amazing_script.js à l'intérieur.

3. $deps - Il définit la dépendance. Vous devez l'ajouter lorsque vous demandez à WordPress de charger un script de bibliothèque comme Jquery.

Si les scripts sont déjà chargés en mémoire, il ne sera pas rechargé et un nouveau chargement aura lieu. Cela garantit aucun conflit, aucun blocage de la mémoire et aucune perte de temps.

4. $ver - Il définit le numéro de version du script. Ce n'est pas obligatoire.

5. $in_footer – Il est utilisé pour charger le script dans le pied de page. Si vous souhaitez charger le script dans l'en-tête, vous devez le conserver sur false.

Une fois que tout est défini, il vous suffit d'appeler le script avec wp_enqueue_script().

2. Styles de mise en file d'attente dans WordPress

Tout comme JavaScript, vous devez mettre les feuilles de style en file d'attente. Utilisez le morceau de code suivant dans votre fichier de plugin ou fichier functions.php pour la création de thème.

fonction wpb_adding_styles() {
wp_register_script('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_script('ma_feuille de style');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' ); 

Les codes ci-dessus conviennent pendant que vous créez un plugin. Lorsque vous créez un thème, vous devez remplacer plugins_url() par get_template_directory_uri(). Le reste des choses restera exactement le même.

fonction wpb_adding_scripts() {
wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); 

Si vous créez un thème enfant, vous devez utiliser get_stylesheet_direcroy_uri() au lieu de get_template_directory_uri().

C'est la méthode standard pour ajouter correctement des JavaScripts et des styles dans WordPress.

Si votre plugin ou votre thème rencontre des problèmes, vous devez en modifier le code avec les lignes de code mentionnées ci-dessus, et peut-être que les problèmes seront résolus.

Suivez toujours les normes de codage suivies à travers le monde pour être sur la même longueur d'onde que d'autres développeurs à succès.