WordPress : comment obtenir le handle d’un fichier javascript ou CSS ?

WordPress comment obtenir le handle d’un fichier javascript ou CSS

Dans un projet WordPress, obtenir le handle d’un fichier CSS ou javascript est souvent essentiel pour gérer le chargement et optimiser la performance de votre site. Cela peut inclure la désactivation ou le préchargement (Preload) des fichiers JavaScript ou CSS, et pour cela, il est crucial d’obtenir le handle du fichier en question.

Dans cet article, nous vous guiderons étape par étape pour obtenir facilement le handle d’un fichier JavaScript ou CSS dans WordPress et ajuster son chargement selon vos besoins.

Qu’est-ce que le « handle » d’un fichier dans WordPress ?

Un « handle » est une étiquette unique attribuée à chaque fichier JavaScript ou CSS que WordPress charge en file d’attente. Ce handle permet aux développeurs d’ajouter, de retirer ou de modifier le comportement d’un fichier spécifique via des fonctions PHP comme wp_enqueue_script ou wp_enqueue_style.

Obtenir le handle d’un fichier JavaScript ou CSS vous donne donc un contrôle précis sur sa gestion.

Méthode 1 : utiliser le code source pour obtenir le handle d’un fichier javascript ou CSS

La première méthode consiste à consulter le code source de votre page pour repérer le handle. Voici comment procéder :

  1. Activer le mode de débogage dans WordPress : Ouvrez le fichier wp-config.php dans votre répertoire WordPress, et ajoutez ou modifier la ligne suivante pour activer le mode de débogage :
   define('SCRIPT_DEBUG', true);

Définir le mode débogage avec define(‘SCRIPT_DEBUG’, true); dans WordPress permet d’activer les versions non minifiées des fichiers JavaScript et CSS. Ce qui facilite le repérage et l’identification des handles des fichiers JavaScript et CSS. Pour cette opération, il est néanmoins possible de s’en passer.

  1. Vérifier le code source de la page : Une fois le débogage activé, chargez la page et inspectez le code source (clic droit > « Afficher le code source de la page », « Inspecter l’élément » dans votre navigateur ou encore utiliser les outils de développement dans Chrome). Recherchez les balises <link> pour les fichiers CSS et les balises <script> pour les fichiers JavaScript.
  2. Repérer les handles : Les handles apparaissent dans l’attribut id des balises <link> (pour les CSS) ou <script> (pour les javascripts). Par exemple :
   <link rel='stylesheet' id='handle_css_du_plugin' href='https://votresite.com/wp-content/plugins/nom-plugin/style.css' type='text/css' media='all' />

Dans cet exemple, le handle du fichier CSS est handle_css_du_plugin. Pour un fichier JavaScript, vous verrez un attribut id similaire dans la balise <script>.

Méthode 2 : utiliser le plugin Query Monitor

Query Monitor est un plugin puissant pour WordPress qui permet de visualiser les fichiers CSS et JavaScript en file d’attente ainsi que leurs handles respectifs.

  1. Installer Query Monitor : Dans votre tableau de bord WordPress, accédez à « Plugins » > « Ajouter » et recherchez Query Monitor. Installez et activez-le.
  2. Analyser les fichiers : Chargez la page où vous souhaitez repérer les fichiers. Dans la barre d’administration WordPress, cliquez sur « Query Monitor » et sélectionnez « Scripts » ou « Styles ».
  3. Identifier les handles : Vous y trouverez une liste complète des fichiers CSS et JavaScript avec leurs handles. Cela facilite la gestion de chaque fichier en fonction de vos besoins.
WordPress Query Monitor identifier les handle des fichiers javascript ou css
Cliquez sur l’image pour plus de détails

Méthode 3 : vérifier dans le code du plugin ou du thème

Si vous connaissez déjà le plugin ou le thème responsable du chargement d’un fichier, vous pouvez accéder directement à son code source pour repérer le handle.

  1. Accéder aux fichiers du plugin ou du thème : Naviguez dans /wp-content/plugins/nom-du-plugin/ ou /wp-content/themes/nom-du-theme/ pour trouver les fichiers PHP du plugin ou thème en question.
  2. Chercher wp_enqueue_style ou wp_enqueue_script : Ouvrez le fichier pertinent et cherchez les fonctions wp_enqueue_style ou wp_enqueue_script. Le premier argument de chacune de ces fonctions est le handle :
   wp_enqueue_script('handle_js_du_plugin', 'url_du_fichier_js');
   wp_enqueue_style('handle_css_du_plugin', 'url_du_fichier_css');

Ici, les handles sont handle_js_du_plugin pour le fichier JavaScript et handle_css_du_plugin pour le fichier CSS.

Utiliser le handle pour gérer le chargement d’un fichier javascript ou CSS

Une fois que vous avez le handle, vous pouvez le manipuler pour gérer le chargement ou le préchargement du fichier :

  • Désactiver un fichier : Si vous souhaitez complètement désactiver le chargement d’un fichier, utilisez wp_dequeue_script pour un fichier JavaScript ou wp_dequeue_style pour un fichier CSS :
   function dequeue_unnecessary_files() {
       wp_dequeue_script('handle_js_du_plugin'); // Désactive le fichier JS
       wp_dequeue_style('handle_css_du_plugin'); // Désactive le fichier CSS
   }
   add_action('wp_enqueue_scripts', 'dequeue_unnecessary_files', 100);
  • Retirer un fichier du préchargement uniquement : Si un fichier CSS est automatiquement préchargé, vous pouvez utiliser wp_deregister_script et wp_register_script pour désenregistrer et réenregistrer le fichier sans l’attribut preload.
function remove_preload_from_script() {
    // Désenregistrer le script actuel
    wp_deregister_script('handle_css');

    // Réenregistrer le script sans préchargement
    wp_register_script('handle_css', 'URL_DU_CSS', array(), null, true);
    wp_enqueue_script('handle_css');
}
add_action('wp_enqueue_scripts', 'remove_preload_from_script', 100);

Pour retirer l’attribut Preload d’un fichier javascript, le fonctionnement est différent. Nous en parlons sur notre page plus précisément : WordPress : ajouter ou retirer l’attribut Preload à un fichier JavaScript ou CSS.

Les plugins pour gérer le chargement d’un fichier javascript ou CSS

Les plugins WP Rocket, Autoptimize, Asset CleanUp ou Perfmatters proposent tous des options d’optimisation avancées, mais leur prise en charge pour ajouter directement l’attribut preload aux fichiers JavaScript et CSS varie de manière significative.

  1. Perfmatters : Perfmatters permet de précharger sélectivement des ressources critiques, comme des fichiers CSS/JS et des images au-dessus de la ligne de flottaison, pour améliorer le temps de chargement des éléments clés d’une page. Contrairement aux autres plugins, cette fonctionnalité est intégrée et offre un contrôle sélectif sans nécessiter de configuration supplémentaire, ce qui le rend adapté aux utilisateurs ayant besoin d’un contrôle plus précis.
  2. Asset CleanUp : Ce plugin propose un contrôle plus précis, en particulier dans sa version Pro, qui permet d’ajouter des attributs preload directement à des fichiers CSS et JavaScript spécifiques. Cette fonctionnalité est destinée aux utilisateurs avancés, car un préchargement incorrect peut causer des problèmes, surtout avec des fichiers JavaScript.
  3. WP Rocket : Ce plugin est particulièrement performant pour le cache et l’optimisation générale, mais il ne prend pas en charge l’ajout direct de l’attribut preload pour des fichiers CSS ou JavaScript spécifiques. Il offre plutôt des fonctionnalités comme la génération de CSS critiques et le chargement différé pour améliorer le temps de chargement perçu sans précharger réellement les ressources individuelles.
  4. Autoptimize : Conçu pour l’optimisation des fichiers, Autoptimize offre un bon contrôle sur le CSS et JavaScript, mais il ne supporte pas nativement l’attribut preload pour ces fichiers. Les utilisateurs peuvent ajouter manuellement des preloads pour les fichiers optimisés, mais cela nécessite du codage personnalisé au lieu d’une option intégrée.

En résumé, bien que WP Rocket et Autoptimize ne prennent pas en charge la gestion directe des attributs preload, Asset CleanUp Pro et Perfmatters offrent cette fonctionnalité avec des niveaux de contrôle variables.

Conclusion

Obtenir le handle d’un fichier JavaScript ou CSS dans WordPress est une compétence essentielle pour gérer le chargement de fichiers de manière précise et améliorer la performance du site. Que ce soit en analysant le code source, en utilisant des plugins comme Query Monitor, ou en accédant au code du plugin ou thème, ces techniques vous offrent une grande flexibilité pour optimiser votre site.


Si vous appréciez nos articles, ne manquez les prochains en vous abonnant à Cosmo Games sur Google News, vous pouvez également nous suivre sur X (ex Twitter). N'hésitez pas à partager vos réactions, commentaires ou remarques dans les commentaires, afin d'enrichir le contenu, de mieux vous comprendre et intégrer les différents points de vue. Un partage sur les réseaux sociaux nous aide également beaucoup, merci pour votre soutien !

Publications similaires

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *