Business
Actus
Événements
Savoir Faire
Tutos
Thèmes
Plugins
E-commerce
SEO
Tutos Modifier le dossier du css principal de votre thème WordPress
Par défaut, le css principal d’un thème WordPress se trouve à la racine de son dossier et se nomme style.css. Il est possible de modifier le nom et le dossier parent de cette feuille de style.
Lors du développement d’un thème, WordPress impose la création d’une feuille de style à sa racine et elle doit être nommée style.css. Heureusement pour nous, il est possible de modifier l’appel de la fonction bloginfo('stylesheet_url') si on désire récupérer l’url de notre feuille de style après l’avoir renommée ou déplacée dans un nouveau dossier.
Un développeur maniaque comme moi crée toujours un dossier “design” à la racine de son thème. Ce dossier contient la feuille de style principale du thème et le dossier “images”.
Modifier le dossier parent de la feuille de style
Cette organisation pose problème si on souhaite appeler sa feuille de style grâce à bloginfo('stylesheet_url'). La fonction va renvoyer un lien du type http://www.mon-site.com/wp-content/themes/nom-theme/style.css
Le code suivant permet de modifier le chemin du dossier contenant le fichier style.css
[pastacode lang=”php” message=”” highlight=”” provider=”manual”]
add_filter('stylesheet_directory_uri','gkp_stylesheet_directory_uri', 10, 2);
function gkp_stylesheet_directory_uri($stylesheet_dir_uri, $stylesheet) {
// On ajoute notre dossier
return $stylesheet_dir_uri.'/design';
}
[/pastacode]
A partir de maintenant, bloginfo('stylesheet_url') va renvoyer l’adresse suivante : http://www.mon-site.com/wp-content/themes/nom-theme/design/style.css
Modifier le nom du style principal
Si vous préférez nommer votre feuille de style autrement que style.css, nous avons la possibilité de modifier son nom grâce à quelques lignes de code supplémentaires.
[pastacode lang=”php” message=”” highlight=”” provider=”manual”]
add_filter('stylesheet_uri', 'gkp_stylesheet_uri', 10, 2);
function gkp_stylesheet_uri($stylesheet_uri, $stylesheet_dir_uri) {
// On change le nom du fichier
return $stylesheet_dir_uri.'/montheme.css';
}
[/pastacode]
La fonction bloginfo('stylesheet_url') va renvoyer l’adresse suivante : http://www.mon-site.com/wp-content/themes/nom-theme/design/montheme.css
Article écrit par Jonathan B.
Youtube
Twitter
Facebook
18 Commentaires
Malheureusement ça ne fonctionne pas…
bloginfo(‘stylesheet_url’) renvoi bien la bonne url mais dans l’administration du theme, il ne supporte pas l’absence du fichier style.css à la racine.
Si quelqu’un à une idée…
Je n’ai pas dit que le fichier style.css de la racine devait être supprimé :)
Il faut toujours garder un style.css avec les commentaires de déclaration du thème.
Je n’ai pas encore trouver la solution pour palier ce détail.
Ce script permet de faire appel à notre fichier css qui contient notre code si on souhaite le mettre dans un autre dossier autre que la racine du thème.
Excellent travail merci pour le partage
C’est dommage, ce filtre perd son intérêt s’il ne permet pas de changer de place aussi le style.css.
@Adrien : Pas forcément, il suffit de laisser le style.css à la racine du thème uniquement pour la déclaration du thème et sans rien d’autres dedans.
Comme ça, on peut mettre le css de notre thème où l’on souhaite grâce à l’astuce ^^
Oui mais même en mettant nos css dans un dossier à part, on ne fait finalement que l’économie d’un niveau dans la déclaration de la stylesheet non ?
Au lieu de :
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/reset.css" type="text/css" media="screen" />On a :
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/reset.css" type="text/css" media="screen" />Est-ce que ça vaut tant le coup que ça d’écrire un filtre ?
Chacun peut y voir son intérêt ou non. Pour ma part, je suis content d’économiser un dossier :)
@Jonathan: “Je n’ai pas encore trouver la solution pour palier ce détail.”
Tu ne peux tout simplement pas, c’est en dur dans le core de WP, “style.css” DOIT être présent à la racine.
Bonjour, je pensais qu’il était plus simple et fluide de créer un thème enfant (en css). Ce qui préserve le core de wp, et les mises à jour n’interfèrent pas sur le fichier ‘parent’ css du thème utulisé. Existe t il une solution ‘ideale’? Un compromis entre requête et script qui alourdit (encore) le temps de chargement d’une page web ???
Merci pour vos réponses :)
Sophie
@Sophie : Je ne vois pas trop le rapport avec l’astuce. On ne parle pas de thème enfant mais la modification du retour de la fonction bloginfo(‘stylesheet_url’).
Bonjour à tous,
Je suis tombé sur cet article un peu par hasard et je pense qu’il va me servir.
Cependant, quelqu’un peut-il me dire où insérer le code de ce filtre ?
Merci à vous.
Et Bonne Année, on est encore en janvier.
@+
@Cyril : Il faut insérer le code dans le fichier functions.php de votre thème.
Merci pour l’astuce.
Bien pratique pour Compass qui crée un dossier /stylesheets/styles.css.
Mêmes si je sais qu’on peut paramétrer Compass pour changer le chemin.
salut, je me suis donné pour mission la conception du site web de mon groupe d’ambiance. je suis véritablement un débutant et je voudrais des conseils de toute la communauté quels quel soit pour me permettre de mettre sur pied un site de qualité.
j’ai installé wampserver et j’utilise le theme mainstream
dites moi tout plungin nécessaire astuces et autres
merci pour votre soutien
@Yipene: Si vous avez besoin d’aide plus complète, je vous conseille d’aller faire un tour vers le forum de la communauté FR de WordPress : http://www.wordpress-fr.net/support/
Merci pour l’info. J’ai testé ça a marché.
Comment je peut compressé les fichier CSS et JS afin d’augmenter le vitesse de chargement des page
Merci Jonathan