Optimiser l’ajout des javascripts des plugins dans votre wordpress

Souvent lorsque vous ajoutez des plugins dans votre wordpress vous allez automatiquement ajouter des bouts de codes JS sur toutes vos pages afin de faire fonctionner les dits plugins mais ces derniers ne sont pas forcément utilisés sur toutes vos pages. Ainsi vous surchargez bêtement vos pages et on le sait tous le temps de chargement d’une page est très important pour l’expérience utilisateur.

Par exemple si vous utilisez un plugin pour un formulaire de contact ce dernier ne sera nécessaire que sur la page contenant ce formulaire mais malheureusement le plugin va ajouter automatiquement le code javascript sur toutes les pages de votre blog wordpress… Afin de remédier à ce problème il faut ajouter un bout de code dans votre page functions.php de votre thème, celui-ci va annuler l’ajout automatique et faire l’insertion uniquement sur la page désirée, voici comment faire pour le plugin contact form 7 :

/* Ajout manuel des scripts contact form 7 */
    remove_action('wp_enqueue_scripts', 'wpcf7_enqueue_scripts' ); // Annule l'ajout automatique
    add_action('wp_enqueue_scripts','cf7_scripts'); // Ajoute les scripts sur la page désirée
 
function cf7_scripts() {
    if (is_page(array('1049'))) { // Ajouter les ID des pages sur lesquelles vous utilisez le plugin ?>
    <script src="<?php bloginfo('home'); ?>/wp-content/plugins/contact-form-7/jquery.form.js" type="text/javascript"></script>
    <script src="<?php bloginfo('home'); ?>/wp-content/plugins/contact-form-7/scripts.js" type="text/javascript"></script>
<?php } }

L’idée pour d’autres plugins est donc d’identifier le « handle » utilisé par le plugin dans les fichiers du plugin, pour contact form 7 c’est wpcf7 et ensuite d’ajouter ce code dans le fichier functions.php de votre thème.

Si vous souhaitez aussi n’ajouter la feuille de style associée que sur la bonne page c’est tout aussi simple il suffit d’utiliser la fonction wordpress wp_deregister_style comme ceci :

/* Ajout manuel des scripts contact form 7 */
    remove_action('wp_enqueue_scripts', 'wpcf7_enqueue_scripts' ); // Annule l'ajout automatique
    add_action('wp_enqueue_scripts','cf7_scripts'); // Ajoute les scripts sur la page désirée
 
function cf7_scripts() {
    if (is_page(array('1049'))) { // Ajouter les ID des pages sur lesquelles vous utilisez le plugin ?>
    <script src="<?php bloginfo('home'); ?>/wp-content/plugins/contact-form-7/jquery.form.js" type="text/javascript"></script>
    <script src="<?php bloginfo('home'); ?>/wp-content/plugins/contact-form-7/scripts.js" type="text/javascript"></script>
<?php }

else {
wp_deregister_style( 'contact-form-7' );
} }

Et voilà vous pouvez faire un peu d’optimisation maintenant!