Tout site internet (ou presque) a besoin d'un formulaire de contact. Pour mes clients de projets WordPress, afin de leur faciliter la vie, j'aime assez utiliser Contact Form 7. En effet, il est pour eux très simple à personnaliser.
Seulement voilà, comme c'est le cas pour beaucoup de plugins, celui-ci charge la librairie jQuery inclue dans WordPress. Le problème c'est qu'à l'heure actuelle on utilise bien bien souvent son propre jQuery pour avoir accès à la dernière version disponible. Ça peut créer des soucis de compatibilité avec d'autres scripts JavaScript.
Dernier exemple en date : un calendrier pour sélectionner une date en JS qui ne fonctionne plus après avoir installé Contact Form 7. Etant donné que je ne fait pas mon scripting JS sur base de Contact Form 7 (c'est plutôt l'inverse qui doit se produire), je ne change pas tout mon code pour le fait d'un plugin.
Note : quand un plugin charge une des librairies fournies avec WordPress, vous avez une ligne de code ressemblant à ceci dans le code source de la page :
<script src="http://www.votre-site.com/wp-includes/js/jquery/jquery.js?ver=1.3.2" type="text/javascript"></script>
Seulement voilà, pas envie de changer Contact Form 7 car il fonctionne quand même plutôt bien, il faut le dire (et on est très loin de l'usine à gaz de cForms, que je n'aime pas du tout).
Deux solutions sont possibles pour remédier aux incompatibilités JavaScript dues à Contact Form 7 :
- Se passer totalement d'AJAX
- Ne charger le JS que quand il est nécessaire
Très honnêtement, je me fiche pas mal de la petite flèche qui tourne pendant l'envoi du formulaire, idem pour le « fading » lors de l'apparition des messages de validation. Ça n'apporte ni plus-value ni ergonomie au formulaire. D'autant plus que supprimer ces fonctionnalités du formulaire permet d'alléger les pages. Dans mon cas, je désactive donc totalement l'appel du JavaScript et du CSS. Libre à vous de choisir la solution qui vous convient le mieux.
Désactivation
La première chose à faire est donc de faire en sorte que tout ce qui est chargé pour Contact Form 7 ne le soit pas, sur l'ensemble du site : JS et CSS. Pour ce faire, dans le fichier wp-config.php on ajoute les deux lignes suivantes :
define('WPCF7_LOAD_JS', false); // désactivation du JavaScript
define('WPCF7_LOAD_CSS', false); // désactivation du CSS
Activation sélective
Ensuite vient le moment de les charger uniquement sur les pages qui en ont besoin. Imaginons que vous n'ayez besoin du formulaire que sur la page « Contact » de votre site, insérez le code suivant dans votre header.php :
if (is_page('contact')) {
if (function_exists('wpcf7_enqueue_scripts')) {
wpcf7_enqueue_scripts();
wpcf7_enqueue_styles();
}
}
Vous pouvez également inclure ce code dans le modèle de page contenant le formulaire de contact mais sans la condition php if. La chose importante à noter ici est que peu importe la page sur laquelle vous placez ce code, il doit être inséré avant l'appel de wp_head().