Tout savoir sur WordPress
Tutoriel WordPress

Ajouter automatiquement les fichiers CSS dans le header

Après avoir découvert comment modifier l’appel de la fonction bloginfo, nous allons voir l’astuce qui permet d’insérer automatiquement nos fichiers CSS dans le header.

Il y a quelques jours, nous avons découvert l’astuce pour modifier le chemin du fichier CSS WordPress appelé par la fonction bloginfo('stylesheet_url').

Dans ce tuto, nous allons voir comment insérer nos fichiers CSS et notre favicon en passant par le fichier functions.php et sans toucher au fichier header.php

Tout comme l’insertion des fichiers javascript dans le footer, il existe deux fonctions WordPress permettant d’enregistrer et insérer des fichiers de style. Il s’agit de wp_register_style() et wp_enqueue_style().

[pastacode lang=”php” message=”” highlight=”” provider=”manual”]


add_action('wp_enqueue_scripts', 'gkp_insert_css_in_head');
function gkp_insert_css_in_head() {
    // On ajoute le css general du theme
    wp_register_style('style', get_bloginfo( 'stylesheet_url' ),'',false,'screen');
    wp_enqueue_style( 'style' );
}

[/pastacode]

Votre fichier CSS sera automatiquement ajouté lors de l’appel à la fonction wp_head() qui se trouve dans le fichier header.php.
Vous pouvez enregistrer plusieurs fichiers CSS dans la fonction insert_css_in_head().

Afin d’avoir un fichier header.php le plus propre possible, nous allons en profiter pour ajouter notre favicon via le fichier functions.php.

Au contraire des fichiers CSS, le favicon n’est pas un script et le hook wp_print_styles ne permet pas d’insérer ce genre de fichier.

Pour insérer automatiquement notre favicon dans les header, on utilise le hook wp_head.

[pastacode lang=”php” message=”” highlight=”” provider=”manual”]


add_action('wp_head','gkp_custom_favicon', 1);
function gkp_custom_favicon() {
    echo '<link rel="shortcut icon" type="image/x-icon" href="'. get_bloginfo('template_directory') .'/design/favicon.ico" />'."n";
    echo '<link rel="icon" type="image/x-icon" href="'. get_bloginfo('template_directory') .'/design/favicon.ico" />'."n";
}

[/pastacode]

Après ces modifications, comparons notre fichier header.php avant et après l’insertion automatique.

Avant :
[pastacode lang=”php” message=”” highlight=”” provider=”manual”]


<!DOCTYPE html>
<html lang="fr-FR">
<head>
    <title><?php wp_title();?>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/x-icon" href="https://www.geekpress.fr/wp-content/themes/geekpress/design/favicon.ico" /> 
    <link rel="icon" type="image/x-icon" href="https://www.geekpress.fr/wp-content/themes/geekpress/design/favicon.ico" />
    <link rel='stylesheet' href='https://www.geekpress.fr/wp-content/themes/geekpress/design/style.css' type='text/css' media='screen' /> 
    <?php wp_head(); ?>
</p>
</head>

[/pastacode]

Après :
[pastacode lang=”php” message=”” highlight=”” provider=”manual”]


<!DOCTYPE html>
<html lang="fr-FR">
<head>
    <title><?php wp_title(); ?>
    <meta charset="utf-8">
    <?php wp_head(); ?>
</p>
</head>

[/pastacode]

Cet article a été mis à jour il y a 4896 jours - Il n'est peut être plus à jour !

Article écrit par Jonathan B.

Jonathan est le co-fondateur de WP Media, startup connue pour être l’auteur de WP Rocket et Imagify. Il est aussi co-organisateur du WordCamp Lyon et Paris.

11 Commentaires

  1. Plutôt que :
    add_action(‘wp_print_styles’,’mes_css’);

    J’ai utilisé :
    add_action(‘wp_head’,’mes_css’, 6);

    Ce qui me permet de définir la priorité d’insertion.

    Quel est l’avantage de wp_print_styles sur wp_head ?

  2. Alors la différence entre les deux hook est que wp_print_styles sert uniquement à déclarer des fichiers CSS. C’est-à-dire qu’on ne peut pas insérer du CSS entre dans balises style, mais uniquement des fichiers déclarer. Si vous faîtes un echo dans la fonction appelé avec le hook wp_print_styles, il se passera rien du tout.

    Au contraire de wp_head qui peut servir au deux ! A déclarer un fichier avec wp_register_style et comme dans l’exemple suivant, faire des déclaration avec les balises link.

  3. Salut Jonathan,

    Je viens de découvrir ton article par hasard en faisant une recherche sur Google. Bien que cet article date de plusieurs mois maintenant je voudrais apporter une précision qui pourra aider les prochains lecteurs si ils tombent à leur tour sur ton article.

    Depuis la sortie de WP 3.3, il est recommandé de ne plus utiliser le hook wp_print_styles pour styler le front-end de ses themes car il y a risque d’interference avec les styles de l’admin.

    Il est donc recommandé de passer par le hook wp_enqueue_scripts pour incorporer ses scripts js ET ses css.

    La version WP 3.4 devrait fournir un hook wp_enqueue_styles pour différencier l’ajout des js et des css dans deux hook distinct.

    Source: http://ow.ly/9y8MP

  4. @KATTAGAMI : Merci pour les informations !

    Par contre, ça implique de faire une vérification !is_admin() pour afficher que sur le front. Où est-ce qu’il existe un hook uniquement pour le front ?

  5. “wp_enqueue_srcipts” est prévu pour le front, son équivalent pour l’admin est “admin_enqueue_scripts”.

  6. Bonjour,

    Je voudrais savoir où doit-on insérer ce “add_action” ?

    Merci d’avance et beaucoup pour votre élément de réponse.

    Cordialement,

    Cyril

  7. Bonjour Jonathan,
    je débute sous WordPress et suis donc tombé sur ton tuto pour ma recherche.Je cherche à ajouter un fichier reset.css en plus de mon fichier style.css mais je ne sais pas quel code exactement ajouter.
    J’ai mis:

    mais bien sûr çà ne marche pas et je n’arrive pas à trouver l’info…
    Si tu as le temps de me renseigner,merci à toi.
    Pascal