Depuis quelque temps, je me bats avec mes fenêtres modales. Il y a en effet un conflit avec les plugins de cache qui empêchent les fenêtres modales de s’afficher lors de clic sur les boutons, par exemple.

Comment fonctionnent les fenêtres modales sous Elementor ?

Avec Elementor, vous pouvez créer des mega-menus, des menus mobiles plus attractifs, ou tout simplement des fonctions marketing plus poussées.

Vous ne savez pas ce qu’est Elementor ? Pas de soucis, vous trouverez une présentation ici ou une présentation de mes prestations sous Elementor ici.

Les fenêtres modales (ou popup en anglais), sont un outil puissant et très utile, mais quand elles fonctionnent. Vous les trouverez dans Modèles > Fenêtres modales.

Vous avez WP-Rocket ? Moi aussi.

WP-Rocket permet d’optimiser le temps de chargement de son site en optimisant plusieurs leviers : cache, optimisation des fichiers, affichage des médias, etc.

Cependant, couplé avec Elementor il génère aussi beaucoup de bugs et de problèmes de conflits. Je vous propose un exemple de configuration qui permet l’affichage des modales, testé sur plusieurs sites.

Exemple de configuration WP-Rocket

Dans cet article, nous ne parlerons que la partie « Optimisation des fichiers » (sujet abordé aussi par WP-Rocket). Sachez aussi que cas par cas, il peut y avoir d’autres conflits, donc vous trouverez une liste sur le site de WP-Rocket.

Rendez-vous donc dans Réglages > WP-Rocket > Optimisation des fichiers.

Gestion du CSS

Ici vous trouverez plusieurs options pour optimiser les fichiers CSS de votre site. Le CSS, c’est le code qui permet de rendre votre site beau. Le CSS va définir les couleurs, les typographies, l’espacement, la mise en page, etc. Cependant, vous pouvez vous retrouver avec des fichiers plus que volumineux…

La suppression des ressources inutilisées, au moment où j’écris (janvier 2022) bloque complétement l’affichage des popups. Vous pouvez essayer de déboguer modale par modale jusqu’à ce que cela fonctionne, mais je préfère ne pas l’utiliser.

Gestion du JavaScript

Le JavaScript, c’est du code qui permet d’interagir avec le site. Avec le JavaScript, un développeur peut créer des actions et des interactions selon votre comportement sur le site (comme, afficher une modale lors d’un clic spécifique).

Cependant, WP-Rocket, lors de ses optimisations, casse complétement certains fichiers essentiels au bon fonctionnement du site, et surtout des fenêtres modales.

Pour la minification, j’ajoute certains fichiers JavaScript qui, lorsqu’ils sont minifiés, sont complétement cassés et ne fonctionnent plus :

/wp-content/plugins/elementor/assets/lib/dialog/(.*).js
/wp-content/plugins/elementor-pro/assets/js/(.*).js
/wp-content/plugins/elementor/assets/js/(.*).js

Pour le chargement en différé, j’utilise un mélange des recommandations de WP-Rocket et de fichiers que j’ai pu noter comme problématiques lorsqu’ils sont différés :

/wp-includes/js/jquery/jquery.min.js
/wp-includes/js/jquery/jquery-migrate.min.js
/elementor-pro/assets/js/webpack-pro.runtime.min.js
/elementor-pro/assets/lib/smartmenus/jquery.smartmenus.min.js
/elementor/assets/js/webpack.runtime.min.js
/elementor/assets/js/frontend-modules.min.js
/wp-includes/js/imagesloaded.min.js
/elementor-pro/assets/js/frontend.min.js
/elementor/assets/lib/waypoints/waypoints.min.js
/elementor/assets/js/frontend.min.js
/elementor-pro/assets/js/elements-handlers.min.js
/elementor/assets/lib/dialog/dialog.min.js
elementorFrontendConfig
ElementorProFrontendConfig
/jquery-?0-9.(.min|.slim|.slim.min)?.js
/jquery-migrate(.min)?.js
/elementor-pro/assets/js/preloaded-elements-handlers.min.js
/elementor/
/elementor-pro/

Vous pouvez utiliser la même liste pour « reporter l’exécution du JavaScript » :

Pour notre cas, à savoir les fenêtres modales, cette solution vous permettra d’avoir des modales fonctionnelles. Si vous avez d’autres soucis avec WP-Rocket, il faudra enquêter et trouver les fichiers qui vous posent soucis.