Comment mettre des scripts en file d’attente dans WordPress à l’aide du crochet wp_enqueue_scripts ?

Lorsque vous personnalisez votre site WordPress, il est important de gérer vos scripts de manière efficace. Le crochet wp_enqueue_scripts est l’outil idéal pour mettre en file d’attente vos scripts et garantir leur chargement optimal. Dans cet article, nous vous guiderons à travers les étapes pour mettre des scripts en file d’attente dans WordPress en utilisant ce crochet. Vous apprendrez comment organiser votre code, spécifier les dépendances, et optimiser les performances de votre site grâce à cette approche. Améliorez dès maintenant la gestion des scripts dans WordPress et optimisez le chargement de votre site ! 🤫

Objectif

Dans cet article, nous allons vous expliquer étape par étape comment utiliser le crochet wp_enqueue_scripts et mettre vos scripts en file d’attente dans WordPress en toute simplicité et en vous assurant que tout fonctionne correctement.🤗

Une solution clés en main pour créer un site WordPress ?

LWS vous conseille sa formule d’hébergement WordPress en promotion à -20% (offre à partir de 3,99€ par mois au lieu de 4,99 €). Non seulement les performances sont au rendez-vous mais vous profitez en plus d’un support exceptionnel.

Découvrir l'offre

Prérequis

Avant d’envisager quoi que ce soit, vous devez avoir la possibilité d’accéder au fichier functions.php de votre thème actif. Vous pouvez, pour cela, utiliser le gestionnaire de fichiers (File Manager) intégré dans votre compte d’hébergement ou encore un logiciel client FTP tel que FileZilla.

Comment mettre des scripts en file d’attente dans WordPress à l’aide du crochet wp_enqueue_scripts ?

Le crochet wp_enqueue_scripts permet aux développeurs d’optimiser l’utilisation du code JavaScript sur WordPress. Grâce à la fonction wp_enqueue_script(), vous pouvez par exemple charger les scripts dans le pied de page au lieu de les charger dans l’en-tête. Ainsi, cette pratique peut considérablement accélérer la vitesse de rendu des pages.

Voici ci-dessous l’exemple de code que vous pouvez utiliser pour mettre en file d’attente les scripts sur WordPress.

function enqueue_custom_scripts() {
    // Ajoutez ici vos scripts à la file d'attente
    wp_enqueue_script('script-x', get_template_directory_uri() . '/js/mon-script.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');

Vous pouvez ajouter le code ci-dessus dans le fichier functions.php de votre site WordPress. La fonction enqueue_custom_scripts() utilise le crochet wp_enqueue_script pour mettre en file d’attente, un script nommé script-x. Vous pouvez remplacer cet identifiant par un identifiant personnalisé lorsque vous ajoutez le code à votre site WordPress.

Ensuite, voici comment interpréter les autres parties du code :

• get_template_directory_uri() : cette partie du code renvoie l’URL vers le répertoire du thème activé sur votre site et spécifie le chemin vers le script dans les fichiers d’installation WordPress.
• /js/mon-script.js : c’est le chemin vers le script. N’oubliez pas de le personnaliser en fonction de votre configuration. Vous devez également remplacer mon-script.js par le nom spécifique de votre script.
• array() est utilisé pour spécifier les dépendances dans le code. Ainsi, array('jquery') ajouté dans notre fonction indique simplement que le script défini dépend de jQuery.
• 1.0 : c’est la chaîne qui spécifie la version du script. Le numéro doit évoluer au fur et à mesure que vous modifiez votre script. Cela est utile pour permettre aux navigateurs de charger uniquement la dernière version du script.
• true : c’est le paramètre qui indique à WordPress de charger le script dans le pied de page.

Enfin, sur la partie add_action('wp_enqueue_scripts', 'enqueue_custom_scripts'), nous déclarons que la fonction enqueue_custom_scripts() doit être exécutée lorsque l’action wp_enqueue_scripts est déclenchée.

Charger des scripts dans le pied de page avec wp_enqueue_script

Le chargement de scripts dans le pied de page peut aider à améliorer la vitesse de chargement de votre site. En effet, WordPress affichera le contenu principal sans attendre que tous les scripts soient chargés.

Pour y arriver, vous pouvez utiliser le même code ci-dessus tout en spécifiant le dernier argument sur true.Par défaut, ce paramètre est fixé sur false, ce qui indique à WordPress de charger le script dans l’en-tête du site.

Au moment de l’utilisation, de l’extrait de code, n’hésitez pas à personnaliser le nom du script que vous voulez mettre à la file d’attente.

function enqueue_custom_scripts() {
    wp_enqueue_script('nom-du-script', get_template_directory_uri() . '/js/mon-script.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');

Comment utiliser wp_enqueue_scripts et spécifier le média pour les styles ?

Voici un exemple de code utilisant le crochet wp_enqueue_scripts pour spécifier le média pour les styles dans WordPress.

function enqueue_custom_styles() {
    wp_enqueue_style('nom-du-style', get_template_directory_uri() . '/css/mon-style.css', array(), '1.0', 'screen');
}
add_action('wp_enqueue_scripts', 'enqueue_custom_styles');

Dans le code, nous utilisons la fonction wp_enqueue_style() qui permet de spécifier le média auquel la feuille de style défini va s’appliquer. Ainsi, le style que nous avons nommé nom-du-style et que vous devez personnaliser lors de l’usage du code va s’appliquer aux écrans de bureau, des ordinateurs portables et les tablettes, car son paramètre est défini sur screen.

Cependant, vous pouvez également définir le paramètre sur :

• all pour appliquer la feuille style à tous les médias 
• handheld pour appliquer le style aux appareils mobiles
• print pour appliquer la feuille de style lors de l’impression

Conclusion

En résumé, le crochet wp_enqueue_scripts est un outil puissant pour la gestion de scripts dans WordPress. En l’utilisant correctement, vous pouvez optimiser les performances de votre site tout en simplifiant le processus de développement. 😇En suivant les étapes fournies dans cet article, vous pouvez facilement ajouter vos scripts à la file d’attente pour rendre compatible et efficace le chargement de votre code WordPress.

Si vous éprouvez des difficultés à utiliser la fonction wp_enqueue_scripts pour mettre en file d’attente des scripts dans WordPress, n’hésitez pas à nous écrire dans la section Commentaires.