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. En sélectionnant juste les fichiers nécessaires, on peut réduire les ressources et éviter que certaines bloquent inutilement la première visualisation (first paint) de votre page. Si on appelle un script 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, à partir d’un thème parent.

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=maCleGoogleMapApi', 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' );

Dans cet exemple je souhaite appeler les scripts mapbox.js, wow.js, animate.css, et mapbox.css. J’applique donc une condition pour que les scripts soient appelés seulement dans certains cas. Si on se trouve dans une catégorie, sauf la catégorie « Ressources », ou que je suis dans la catégorie « custom-template », ou sur la page d’accueil, j’appelle les scripts cités.

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.

Voici d’autres exemples.

Charger ses scripts pour une page donnée

Ici on cible la page dont l’ID est ‘2525’, dans un thème enfant.

add_action( 'wp_enqueue_scripts', 'cc_enqueue_styles', 11);
function cc_enqueue_styles() { 
   if(is_page(2525)){       wp_enqueue_script('script', get_stylesheet_directory_uri().'/js/script.js');
    } 
}

Charger ses scripts pour un article spécifique

Pour limiter le chargement du script à un article spécifique :

Et pour finir, ici on cible l’article dont l’ID est ‘2880’, dans un thème enfant.

add_action( 'wp_enqueue_scripts', 'cc_enqueue_styles', 11);
function cc_enqueue_styles() { 
if( is_single( 2880 ) ){
    wp_enqueue_script('script', get_stylesheet_directory_uri(). '/js/script.js');
  }
}

Mis à jour le Par Copier coller | Dans wordpress