Comment savoir dans quel ordre WordPress place les fichiers CSS ?

J’ai installé le thème Roots (version 4 pour pouvoir utiliser la grille 1140px) sur WordPress 3.3.1 et je souhaite modifier le CSS. Au départ, je n’obtiens que le fichier style.css dans l’éditeur et je ne peux pas voir les autres.

Les fichiers css dont j’ai besoin sont situés dans un sous-dossier marqué ‘css’, et je vois à partir d’une recherche rapide sur Google qu’il y a un bogue connu avec les sous-dossiers css, donc je les ai déplacés dans le dossier racine qui semble fonctionner, mais le site semble maintenant un peu bancal, donc je ne pense pas que ce soit tout à fait correct.

Comment m’assurer que les fichiers css sont placés dans le bon ordre dans le code WordPress ? Pour le moment, je ne sais pas comment savoir dans quel ordre ils ont été placés.

Merci Jason

Solution n°1 trouvée

Quelques notes que j’ai observées sur la façon dont Roots charge le CSS. Il charge les fichiers dans cet ordre :

1. css/style.css
2. css/bootstrap.css
3. css/bootstrap-responsive.css (éventuellement, si BOOTSTRAP_RESPONSIVE est défini sur true dans inc/roots-config.php)
4. css/app.css

Ce sont mes observations préliminaires, mais il est clair que vous voulez éditer les fichiers CSS dans Roots d’une manière bien structurée.

css/style.css Je pense que c’est principalement le truc HTML5 Boilerplate, peut-être d’autres trucs de configuration? Vous ne voudriez probablement pas y toucher.

css/bootstrap.css et css/bootstrap-responsive.css Notez ici que ces fichiers proviennent de Twitter Bootstrap et sont compilés en pointant un compilateur LESS vers css/less/bootstrap.less et css/less/bootstrap-responsive. moins. Vous n’aurez peut-être jamais besoin de modifier ces fichiers. Si c’était le cas, il serait beaucoup plus agréable d’étudier un peu LESS, d’apporter des modifications aux fichiers .less et de les recompiler. Il n’y a pour la plupart qu’une poignée de @variables que vous voudriez changer, et si vous le faites de cette façon, selon la façon dont Bootstrap est configuré pour fonctionner, vous aurez un processus très agréable et organisé. Les principales choses que vous modifieriez ici sont les options de mise en page et les paramètres de couleur. (Il existe un certain nombre d’applications LESS gratuites que vous pouvez télécharger pour recompiler les fichiers.)

css/app.css Il s’agit d’un fichier CSS standard très bien structuré, avec des sections pour la base, l’en-tête, le contenu, etc. Ici, vous voudriez juste essayer de garder votre CSS bien organisé dans les sections fournies.

Je trouve que si je l’aborde de manière ordonnée et que je comprends comment Roots structure les choses, c’est vraiment un très bon système.

Solution n°2 trouvée

1. Ne modifiez pas votre thème à l’aide de l’éditeur WordPress.

Il s’agit d’une approche de développement rapide et sale, mais vous pouvez facilement détruire l’intégralité de votre site par erreur avec cet outil. Au lieu de cela, modifiez les fichiers sur votre ordinateur localement, puis utilisez FTP pour télécharger les fichiers modifiés sur le serveur.

2. Déplacer le CSS cassera le thème.

WordPress exige que les thèmes enregistrent leur CSS afin de le rendre à la page. Les thèmes utilisent une fonction ( wp_register_style()) pour indiquer à WordPress le nom de la feuille de style, son emplacement et pour spécifier si d’autres feuilles de style doivent ou non être chargées en premier.

Roots inclut certaines de ces définitions dans /inc/roots-scripts.php. Deux lignes, pour un exemple précis :

wp_enqueue_style('roots_style', get_template_directory_uri() . '/css/style.css', false, null);
wp_enqueue_style('roots_bootstrap_style', get_template_directory_uri() . '/css/bootstrap.css', array('roots_style'), null);

La première ligne s’enregistre roots_styleet nécessite qu’elle soit style.cssdans le /cssrépertoire. Il n’a pas de dépendances.

La deuxième ligne s’enregistre roots_bootstrap_styleet nécessite qu’elle soit bootstrap.cssdans le /cssrépertoire. Il dépend de roots_styles, donc WordPress ajoutera roots_stylesautomatiquement en premier.