Formation WordPress – Devenez un expert WordPress

Partager sur facebook
Partager sur twitter
Partager sur pinterest

Lister les scripts CSS / JS chargés par WordPress

Comment obtenir une liste complète des feuilles de styles CSS et des scripts JavaScript chargés par le thème et les extensions d’un site sous WordPress ? Obtenir une telle liste présente un intérêt évident lorsque vous cherchez à optimiser les performances de votre site.

En effet, il n’est pas rare que certains scripts soient chargés sur l’ensemble des pages de votre site alors même que vous pourriez en limiter le chargement à un modèle de page, un type de contenu ou tout autre élément de votre architecture WordPress.

Les développeurs ont recours aux fonctions wp_enqueue_script et wp_enqueue_stylepour charger respectivement des JavaScript et des CSS. La plupart du temps ils ne sont pas conditionnés car il est bien souvent impossible de savoir sur quel contenu vous allez avoir besoin de la fonctionnalité proposée.

Cependant, lorsque vous développez un thème sur-mesure et que vous maitrisez de fait l’intégralité du projet de développement, il est beaucoup plus facile de poser de telles conditions. Par exemple, vous pouvez limiter le chargement des CSS de WooCommerce sur les pages qui affichent des produits, le panier et la page de commande.

Pour créer rien de plus simple car WordPress met à disposition des globales que sont $wp_scripts et $wp_styles. Il nous faut créer une boucle sur ces variables afin d’en extraire les informations.

La fonction ci-dessous peut être placée le fichier functions.php de votre thème ou dans un mu-plugins. Elle est conditionnée pour n’afficher les données qu’aux seuls administrateurs du site.

function wpc_list_css_js() {
	if (! is_admin() && is_user_logged_in() && current_user_can('manage_options')) {
		// Liste des JavaScript
		global $wp_scripts;
		foreach($wp_scripts->queue as $handle) :
			echo "Handle: " . $handle . '<br />';
		endforeach;
	 
		// Liste des CSS
		global $wp_styles;
		foreach($wp_styles->queue as $handle) :
			echo "Handle: " . $handle . '<br />';
		endforeach;
	}
}
add_action('wp_print_scripts', 'wpc_list_css_js');

Il est possible de récupérer de nombreuses informations sur chaque élément chargé. Dans le cas présent, seul le nom du script nous intéresse car c’est lui que nous passons dans les fonctions wp_dequeue_script et wp_dequeue_style qui ont pour effet de désactiver le chargement des scripts spécifiés.

La quête du meilleur de temps chargement est un long chemin qui vous fera apprendre de nouvelles choses en matière de développement. Empruntez-le avec curiosité pour comprendre comment fonctionnent les thèmes et les extensions sous WordPress.

webinaire agence webmarketing

Profitez maintenant du meilleur Webinaire composé des secrets et stratégies que personne ne vous dévoilera, rejoignez maintenant plus de 24.500 entreprises qui ont profité des secrets.

Partagez cet article avec vos amis

Partager sur facebook
Partager sur google
Partager sur twitter
Partager sur linkedin