Business
Actus
Événements
Savoir Faire
Tutos
Thèmes
Plugins
E-commerce
SEO
Tutos 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]
Article écrit par Jonathan B.
Youtube
Twitter
Facebook
11 Commentaires
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 ?
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.
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
@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 ?
“wp_enqueue_srcipts” est prévu pour le front, son équivalent pour l’admin est “admin_enqueue_scripts”.
Merci pour les explications, j’ajoute ces hooks dans ma liste ^^
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
@Cyril : Il faut insérer le code dans le fichier functions.php de votre thème.
Merci Jonathan
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
Excellent article merci