Charger ses fichiers css et js en fonction des pages

Comment charger les fichiers de style ou js en fonction de la page

Afin d’améliorer la performance de son site wordpress, il est souvent recommandé de différer l’appel aux fichiers de style ou aux scripts « non essentiels » afin d’alléger ses pages. Sans aller jusqu’à faire du critical css, on peut déjà analyser son site web et se demander si l’appel de tous les scripts et fichiers de style est réellement nécessaire sur l’ensemble des pages.

En sélectionnant juste les fichiers nécessaires, on peut déjà réduire les ressources et éviter que certaines bloquent inutilement la première visualisation (first paint) de votre page. Si on appelle un script google pour afficher une carte sur une page single par exemple, il est inutile de l’appeler sur une page catégorie, et ainsi de suite.

Un appel au script sous condition

Grâce aux conditions, on va donc pouvoir décider d’appeler certains scripts sur les seules pages qui en ont besoin. Voici un exemple:

function my_scripts() {
    if( is_category() && !is_category('ressources') || is_category('custom-template') || is_front_page() ) {
        wp_enqueue_script( 'mapbox-js',"https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js");
        wp_enqueue_script( 'wow', get_template_directory_uri() . '/js/wow.js');
        wp_enqueue_style('animate', get_template_directory_uri() . '/css/animate.css');
        wp_enqueue_style('mapbox', "https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css");
    }
    if (is_single()){
         wp_register_script( 'google-map', 'https://maps.googleapis.com/maps/api/js?key=AIzaSyDvwDbIFpE3tWYk1zHTGxUcbZ_9HuyRkjo', array(), '3', true); 
        wp_enqueue_script(array('google-map'));
    }
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

function monsite_scripts() {
    wp_enqueue_style('font-awsome', get_template_directory_uri() . '/web-fonts-with-css/css/fontawesome-all.css');
    wp_enqueue_style('linear', get_template_directory_uri() . '/css/linear-icon.css');
    wp_enqueue_style( 'style', get_stylesheet_uri() );
    wp_enqueue_script( 'monsite-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );
    wp_enqueue_script( 'monsite-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );
    wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js',array('jquery'), true);

    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {

        wp_enqueue_script( 'comment-reply' );

    }

}
add_action( 'wp_enqueue_scripts', 'monsite_scripts' );

Pour les pages de catégories, sauf pour la catégorie « ressources » (slug), pour une catégorie que j’ai nommé « custom-template » et pour ma page d’accueil personnalisée j’appelle les scripts mapbox.js, wow.js, animate.css, mapbox.css.

Et si je suis dans une page article, j’appelle spécifiquement google.js.

En dessous, on retrouve une fonction wp_enqueue_scripts classique, pour toutes les ressources devant fonctionner sur l’ensemble du site.

Il est important de bien charger ses fichiers de style et ses scripts perso en dernier pour qu’ils soient appelés par dessus tous les autres fichiers. Si vous avez effectué des modifications sur le style de bootstrap par exemple, elles ne seront pas prises en compte si vous appelez votre fichier en premier.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.