Le contexte
J'ai construit un thème enfant basé sur Twenty Thirteen qui fonctionne plutôt bien. Après avoir mis à jour le thème parent vers la version 1.3, j'ai remarqué un comportement étrange avec le style causé par un thème parent mis en cache style.css
.
Voici le contenu du thème de mon enfant style.css
(en omettant les en-têtes)
/* =Imports styles from the parent theme
-------------------------------------------------------------- */
@import url('../twentythirteen/style.css');
Ainsi, le thème enfant style.css
ne fait rien de plus que d'importer le thème parent style.css
.
J'ai également un autre fichier css avec les personnalisations de mon thème enfant que je mets en file d'attente ainsi dans functions.php
:
// Enqueue parent theme's style.css (faster than using @import in our style.css)
$themeVersion = wp_get_theme()->get('Version');
// Enqueue child theme customizations
wp_enqueue_style('child_main', get_stylesheet_directory_uri() . '/css/main.css',
null, $themeVersion);
Cela me donne une très belle URL CSS comme celle-ci: domain.com/wp-content/themes/toutprettoutbon/css/main.css?ver=1.0.1
cela garantit que la feuille de style est rechargée lorsque le thème enfant est mis à jour.
Maintenant le problème
L'instruction @import url('../twentythirteen/style.css');
est complètement indépendante de la version du thème parent sous-jacent. En fait, le thème parent peut être mis à jour sans mettre à jour le thème enfant, mais les navigateurs utiliseront toujours les versions en cache de l'ancien ../twentythirteen/style.css
.
Code pertinent dans Twenty Thirteen qui met en file d'attente style.css
:
function twentythirteen_scripts_styles() {
// ...
// Add Genericons font, used in the main stylesheet.
wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '3.03' );
// Loads our main stylesheet.
wp_enqueue_style( 'twentythirteen-style', get_stylesheet_uri(), array(), '2013-07-18' );
// Note usage of get_stylesheet_uri() which actually enqueues child-theme/style.css
// Loads the Internet Explorer specific stylesheet.
wp_enqueue_style( 'twentythirteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentythirteen-style' ), '2013-07-18' );
}
add_action( 'wp_enqueue_scripts', 'twentythirteen_scripts_styles' );
Je peux penser à quelques façons de résoudre ce problème, mais aucune n'est vraiment satisfaisante:
Mettre à jour mon thème enfant à chaque fois que le thème parent est mis à jour pour changer une chaîne de version
style.css
(par exemple@import url('../twentythirteen/style.css?ver=NEW_VERSION');
). Cela crée un lien inutile et ennuyeux entre la version du thème parent et l'enfant.Dans mon enfant
functions.php
, 1)wp_dequeue_style
le thème enfant inclusstyle.css
et 2)wp_enqueue_style
le thème parentstyle.css
directement avec la chaîne de version. Cela perturbe l'ordre des CSS en file d'attente dans le thème parent.Utilisez le
style_loader_tag
filtre pour modifier la<link>
balise css généréestyle.css
et modifier le chemin pour pointer directement vers le thème parentstyle.css
AVEC une chaîne de version. Semble assez obscur pour un tel besoin commun (contournement du cache).Vider le thème parent
style.css
dans mon thème enfantstyle.css
. Identique à (1) vraiment, mais un peu plus vite.Faire de mon thème enfant
style.css
un lien symbolique vers le thème parentstyle.css
. Cela semble assez hackish ...
Ai-je raté quelque chose? Aucune suggestion?
modifier
Ajout genericicons.css
et ie.css
feuilles de style dans le thème parent pour clarifier pourquoi je ne peux pas changer l' @import
instruction css wp_enqueue_style
dans mon thème enfant. Actuellement, avec une @import
déclaration dans le thème de mon enfant style.css
, j'ai cette commande dans les pages générées:
- twentythirteen / genericons / genericons.css -> mis en file d'attente par thème parent
- child-theme / style.css -> mis en file d'attente par le thème parent, @imports twentythirteen / style.css
- twentythirteen / css / ie.css -> mis en file d'attente par thème parent
- child-theme / css / main.css -> mis en file d'attente par thème enfant
Si je mets en file d'attente le parent en style.css
tant que dépendance de main.css
, cela deviendra:
- twentythirteen / genericons / genericons.css -> mis en file d'attente par thème parent
- child-theme / style.css -> vide, mis en file d'attente par le thème parent
- twentythirteen / css / ie.css -> mis en file d'attente par thème parent
- twentythirteen / style.css -> mis en file d'attente par le thème enfant en tant que dépendance de main.css
- child-theme / css / main.css -> mis en file d'attente par thème enfant
Notez que ie.css est maintenant inclus avant celui du thème parent style.css
. Je ne veux pas modifier l'ordre de mise en file d'attente des fichiers css du thème parent car je ne peux pas présumer que cela ne causera pas de problèmes avec la priorité des règles css.
la source
@import
, définissez plutôt la feuille de style du thème parent comme une dépendance de votre propre feuille de style .style.css
ne seraient pas inclus au même endroit qu'aujourd'hui. Le parent inclut d'autres fichiers css qui doivent se trouver entre sonstyle.css
et le css de mon thème enfant.Réponses:
Vous n'êtes pas obligé d'utiliser @import. Il vaut mieux ne pas le faire, en fait. Utiliser une approche en file d'attente est probablement mieux partout.
Voici la partie pertinente du code de twentythirteen:
Voici ce que vous faites dans votre code:
Si votre main.css doit venir après le style.css du parent, alors vous le faites dépendre de cela.
Maintenant, si vous avez également un B.css dans l'enfant, vous configurez les dépendances en conséquence:
Faites en sorte que les dépendances que vous définissez pour chaque élément reflètent réellement ce que ces dépendances sont réellement. Si main.css doit venir après B.css, alors cela en dépend. Si B.css doit venir après le style.css du parent, alors B en dépend. Le système de mise en file d'attente le triera pour vous.
Et si vous n'utilisez pas réellement le style.css de l'enfant pour quoi que ce soit, vous n'avez pas du tout à le mettre en file d'attente . Il peut être juste un espace réservé pour contenir les informations d'en-tête de votre thème. Vous ne l'utilisez pas? Ne le chargez pas.
De plus, que faites-vous exactement qui dépend tellement de la commande ici? CSS ne se soucie pas de l'ordre de chargement dans la plupart des situations. CSS dépend davantage de la spécificité des sélecteurs. Si vous souhaitez remplacer quelque chose, vous rendez votre sélecteur plus spécifique. Cela peut venir en premier, ou en dernier, ou quoi que ce soit entre les deux, le sélecteur plus spécifique gagne toujours.
modifier
En lisant vos commentaires et en regardant de plus près le code, je vois où est l'erreur ici. Le code de vingt-treize met en file d'attente le "get_stylesheet_uri ()", qui dans un cas de thème enfant, serait le fichier style.css de votre thème enfant, pas le fichier parent. C'est pourquoi @import fonctionne et conserve le même ordre (ce qui, encore une fois, n'a pas autant d'importance que vous le pensez).
Dans ce cas, si vous ne souhaitez pas utiliser l'importation, je vous recommande de mettre en file d'attente le style.css du parent directement. Ainsi:
Le code dans le fichier functions.php du thème enfant s'exécute en premier, donc vos propres wp_enqueue_scripts s'exécuteront en premier, et cela mettra en file d'attente le style.css du thème parent, ce que le thème parent ne fait pas lui-même (car il met en fait en file d'attente le style.css de votre enfant). En ne le faisant dépendre de rien, comme le parent, il est simplement mis correctement dans la sortie. Notez que l'ordre de ce fichier et du genericons.css n'a pas d'importance, car le "style twentythirteen" d'origine n'a pas le genericons.css comme dépendance répertoriée.
Le style.css de votre propre enfant se chargera, et honnêtement, c'est là que vous devez mettre vos modifications pour le thème enfant, pas dans un fichier principal.css séparé. Rien ne vous empêche d'y mettre vos modifications, mais il n'y a aucune raison réelle d'avoir un fichier CSS supplémentaire.
la source
@import
n'est pas la meilleure façon de procéder. Veuillez consulter ma section "modifier" pour des informations plus précises. Je n'ai pas de besoins particuliers concernant la commande de CSS. Je ne veux tout simplement pas modifier l'ordre interne des fichiers css du thème parent, ce qui peut provoquer des problèmes avec la priorité des règles css.Ma réponse précédente est trop compliquée et ne respecte potentiellement pas la chaîne de dépendance du thème parent (voir la note dans une autre réponse).
Voici une autre prise beaucoup plus simple qui devrait fonctionner beaucoup mieux:
L'idée est de simplement filtrer l'appel à
get_stylesheet_uri()
dans le thème parent pour renvoyer sa propre feuille de style au lieu de celle du thème enfant. La feuille de style du thème enfant est ensuite mise en file d'attente plus tard dans le crochet d'actionmy_theme_styles
.la source
@import
version, aucun impact sur les performances du tout, il y aura deux requêtes style.css distinctes au serveur 2) Cette réponse supprime toute la dépendance ensemble ... 3) Vous pouvez vérifier ceget_template_directory_uri
que vousget_template_stylesheet_uri
faites et ce que vous faites ici: core.trac.wordpress.org/browser/tags/4.8/src/wp-includes/… Encore une fois, pas besoin de la plupart de ce code.wp_enqueue_style
ajoute automatiquement une chaîne de requête de contournement du cache à l'url qu'il génère (par exemple?ver=2013-07-18
) en fonction de la version du thème. Cela ne se fait pas par une@import
déclaration.Attention
Cette solution ne respecte pas les dépendances du thème parent ! La modification du nom du descripteur du thème parent affecte la chaîne de dépendances définie dans le thème parent. Voir mon autre réponse beaucoup plus simple .
réponse d'origine
Bien que la réponse d'Otto soit plutôt bonne, je me suis retrouvé avec cela dans les fonctions de mon thème enfant.php
Il conserve les
style.css
numéros de commande et de version du thème parent tout en contrôlant la version du thème enfantstyle.css
.la source
[$parentNewHandle]
pourarray($parentNewHandle)
@import
méthode fonctionne aussi bien, veuillez comparer les deux méthodes. Quant à la dépendance du thème enfant sur le thème parent, pas besoin non plus. L'enfantstyle.css
est toujours chargé après le parent, du moins d'après mes tests. L'amour d'avoir tort.