Astuce WordPress : charger les fichiers JS et CSS de Contact Form 7 uniquement si nécessaire

Contact Form 7 est devenu l’un des plugins de référence pour quiconque souhaite construire un formulaire entièrement personnalisable sur WordPress. Comme tout plugin, il tente de répondre à une problématique en englobant un maximum de contextes, aussi, les fichiers JS et CSS qu’il embarque sont insérés sur toutes les pages de votre site par défaut.

La problématique

Charger ces fichiers sur la totalité de vos pages web demande au visiteur des ressources inutiles.
L’impact est moindre sur un visiteur qui possède une bonne connexion internet, mais à l’ère du mobile (entendez par là, mobilité, donc tablette, mini-tablette, smartphone etc.) et des connexions souvent moins bonnes que notre bon vieux 56k, la moindre économie est bonne à prendre.

Je ne sais pas si le problème est commun, mais comme je vois beaucoup d’articles qui proposent de désactiver les fichiers JS et CSS de Contact Form 7 (merci pour l’astuce au passage !), j’en vois beaucoup moins qui proposent de les charger uniquement en cas de besoin, ce qui permettrait de continuer à bénéficier des fonctionnalités et styles de base du plugin.

Une solution ?

Il doit en exister des meilleures, mais pour le moment j’en ai trouvé une qui fonctionne plutôt bien.
Collez ce code à la fin de votre fichier functions.php.

/**
 * Contact Form 7 - Load files only if necessary
 */

if (!function_exists('juiz_wpcf7_dequeue_scripts_styles')) {
	function juiz_wpcf7_dequeue_scripts_styles() {
		if ( WPCF7_LOAD_JS && WPCF7_LOAD_CSS ) {
			global $post;
			if ( !strpos($post->post_content, '[contact-form-7') ) {
				wp_dequeue_script('contact-form-7');
				wp_dequeue_style('contact-form-7');
			}
		}
	}
	add_action( 'wp_enqueue_scripts', 'juiz_wpcf7_dequeue_scripts_styles' );
}

Quelques explications s’imposent peut-être.

Les constantes WPCF7_LOAD_JS et WPCF7_LOAD_CSS sont définies par le plugin lorsqu’il est activé. Elles retournent true lorsqu’elles existent, false si un réglage particulier est fait, et ne sont pas définies si le plugin n’est pas activé.
Du coup mon code propose d’intervenir uniquement si le plugin est activé, et si les fichiers demandent à être chargés.

Le reste du code vérifie si on trouve le shortcode de Contact Form 7 dans le contenu, si ce n’est pas le cas, alors on retire les fichiers du chargement grâce aux fonctions wp_dequeue_script() et wp_dequeue_style().

Il est possible d’être beaucoup plus précis en vérifiant si la constante CSS existe d’une part pour désactiver uniquement CSS en cas de besoin, d’autre part la JS pour ne désactiver que la JS.
Personnellement je ne désactive pas l’un sans l’autre en générale 🙂

Je n’ai pas encore trouvé de problème à cette manière de faire, mais j’ai encore le nez dedans, donc n’hésitez pas à commenter si vous trouvez à redire ! La seule limite c’est le preg_match() qui s’exécute sur chaque contenu, m’enfin on a rien sans rien.
Merci à jb pour l’optimisation