web-dev-qa-db-fra.com

Gestion des versions @import du style.css du thème parent

Le contexte

J'ai construit un thème pour enfants basé sur Twenty Thirteen qui fonctionne assez bien. Après la mise à jour du thème parent vers la version 1.3, j'ai constaté un comportement étrange avec le style provoqué par le style.css d'un thème parent mis en cache.

Voici le contenu du style.css de mon thème enfant (en omettant les en-têtes)

/* =Imports styles from the parent theme
-------------------------------------------------------------- */
@import url('../twentythirteen/style.css');

Ainsi, le style.css du thème enfant ne fait rien d'autre que d'importer le style.css du thème parent.

J'ai également un autre fichier css avec les personnalisations de mon thème enfant que j'ai mis en file d'attente comme suit 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 qui s'assure que la feuille de style est rechargée lors de la mise à jour du thème enfant.

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 continueront d'utiliser les versions en cache de l'ancien ../twentythirteen/style.css.

Code pertinent dans Twenty Treize qui met en file d'attente le 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:

  1. Mettez à jour mon thème enfant chaque fois que le thème parent est mis à jour pour modifier une chaîne de version dans style.css (par exemple, @import url('../twentythirteen/style.css?ver=NEW_VERSION');). Cela crée un lien inutile et gênant entre la version du thème parent et l'enfant.

  2. Dans le functions.php de mon enfant, 1) wp_dequeue_style le style.css et 2) wp_enqueue_style du thème de l'enfant inclus, le style.css du parent theme directement avec la chaîne de version. Cela perturbe l'ordre des CSS en file d'attente dans le thème parent.

  3. Utilisez le filtre style_loader_tag pour modifier la balise css <link> générée pour style.css et modifiez le chemin pour qu'il pointe directement sur le style.css de parent theme avec une chaîne de version. Cela semble plutôt obscur pour un besoin aussi commun (contournement de cache).

  4. Sauvegardez le style.css du thème parent dans le style.css de mon thème enfant. Identique à (1) vraiment, mais un peu plus rapide.

  5. Faites du style.css de mon thème enfant un lien symbolique vers le style.css du thème parent. Cela semble assez bidon ...

Ai-je raté quelque chose? Aucune suggestion?

modifier

Ajout des feuilles de style genericicons.css et ie.css dans le thème parent afin de préciser pourquoi je ne peux pas modifier l'instruction @import css en wp_enqueue_style dans mon thème enfant. Actuellement, avec une instruction @import dans le style.css de mon thème enfant, j'ai cet ordre dans les pages générées:

  1. twentythirteen/genericons/genericons.css -> mis en file d'attente par thème parent
  2. child-theme/style.css -> mis en file d'attente par le thème parent, @imports twentythirteen/style.css
  3. twentythirteen/css/ie.css -> mis en file d'attente par thème parent
  4. child-theme/css/main.css -> mis en file d'attente par thème enfant

Si je mets en file d'attente le style.css du parent en tant que dépendance de main.css, ceci deviendra:

  1. twentythirteen/genericons/genericons.css -> mis en file d'attente par thème parent
  2. child-theme/style.css -> vide, mis en file d'attente par le thème parent
  3. twentythirteen/css/ie.css -> mis en file d'attente par thème parent
  4. twentythirteen/style.css -> mis en file d'attente par thème enfant en tant que dépendance de main.css
  5. child-theme/css/main.css -> mis en file d'attente par thème enfant

Notez que ie.css est maintenant inclus avant le style.css du thème parent. Je ne souhaite 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 posera pas de problème avec la priorité des règles CSS.

csschild-themecachestylesheetparent-theme
28
bernie

Ma réponse précédente est excessivement compliquée et ne respecte potentiellement pas la chaîne de dépendance du thème parent (voir la remarque dans une autre réponse).

Voici une autre prise beaucoup plus simple qui devrait fonctionner beaucoup mieux:

function use_parent_theme_stylesheet() {
    // Use the parent theme's stylesheet
    return get_template_directory_uri() . '/style.css';
}

function my_theme_styles() {
    $themeVersion = wp_get_theme()->get('Version');

    // Enqueue our style.css with our own version
    wp_enqueue_style('child-theme-style', get_stylesheet_directory_uri() . '/style.css',
        array(), $themeVersion);
}

// Filter get_stylesheet_uri() to return the parent theme's stylesheet 
add_filter('stylesheet_uri', 'use_parent_theme_stylesheet');

// Enqueue this theme's scripts and styles (after parent theme)
add_action('wp_enqueue_scripts', 'my_theme_styles', 20);

L'idée est simplement de filtrer l'appel à get_stylesheet_uri() dans le thème parent pour renvoyer sa propre feuille de style à la place de celle du thème enfant. La feuille de style du thème enfant est ensuite mise en file d'attente dans l'action hook my_theme_styles.

8
bernie

Vous n'êtes pas obligé d'utiliser @import. En fait, il vaut mieux ne pas le faire. Utiliser une approche en file d'attente est probablement préférable dans tous les cas.

Voici la partie pertinente du code de vingt-treize ans:

function twentythirteen_scripts_styles() {
...
    // Loads our main stylesheet.
    wp_enqueue_style( 'twentythirteen-style', get_stylesheet_uri(), array(), '2013-07-18' );
...
}
add_action( 'wp_enqueue_scripts', 'twentythirteen_scripts_styles' );

Voici ce que vous faites dans votre code:

function child_scripts_styles() {
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri().'/css/main.css', array('twentythirteen-style'), 'YOUR_THEME_VERSION' );
}
add_action( 'wp_enqueue_scripts', 'child_scripts_styles' );

Si votre fichier main.css doit venir après le fichier style.css du parent, il vous suffit de le rendre dépendant de cela.

Maintenant, si vous avez aussi un B.css dans l'enfant, vous configurez les dépendances en conséquence:

function child_scripts_styles() {
    wp_enqueue_style( 'child-B-style', get_stylesheet_directory_uri().'/B.css', array('twentythirteen-style'), 'YOUR_THEME_VERSION' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri().'/css/main.css', array('child-B-style'), 'YOUR_THEME_VERSION' );
}
add_action( 'wp_enqueue_scripts', 'child_scripts_styles' );

Faites en sorte que les dépendances que vous définissez pour chaque élément reflètent réellement ce qu’elles sont réellement. Si main.css doit venir après B.css, alors cela dépend. Si B.css doit être placé après le style.css du parent, alors B en dépend. Le système de mise en file d'attente le réglera pour vous.

Et si vous n'utilisez pas réellement le style.css de l'enfant pour quoi que ce soit, alors vous n'êtes pas obligé de le mettre en file d'attente . Il peut s'agir simplement d'un espace réservé pour contenir les informations d'en-tête de votre thème. Ne pas l'utiliser? Ne le charge pas.

Aussi, qu'est-ce que vous faites 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 définissez votre sélecteur pour plus de précision. Cela peut venir en premier, ou en dernier lieu, ou quelque chose entre les deux, le sélecteur le plus spécifique gagne toujours.

Modifier

En lisant vos commentaires et en regardant de plus près le code, je vois où l'erreur est là. Le code vingt-treize met en file d'attente "get_stylesheet_uri ()", qui, dans le cas d'un thème de thème enfant, serait le fichier style.css de votre thème enfant, et non le fichier du parent. C'est pourquoi @import fonctionne et conserve le même ordre (ce qui encore une fois importe peu).

Dans ce cas, si vous ne souhaitez pas utiliser l'importation, je vous recommande de mettre directement en file d'attente le fichier style.css du parent. Ainsi:

function child_scripts_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css', array() );
}
add_action( 'wp_enqueue_scripts', 'child_scripts_styles' );

Le code dans functions.php du thème enfant s'exécute en premier. Par conséquent, vos propres scripts wp_enqueue_scripts seront exécutés en premier, ce qui 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 réalité le style.css de votre enfant). En ne le faisant pas dépendre de quoi que ce soit, comme le parent, il est simplement placé correctement dans la sortie. Notez que l'ordre de ce fichier et de genericons.css n'a pas d'importance, car le "style de vingt-deux ans" d'origine n'a pas le genericers.css en tant que dépendance répertoriée.

Le fichier style.css de votre propre enfant se chargera, et honnêtement, c’est là que vous devriez placer vos modifications pour le thème enfant, et non dans un fichier principal.css séparé. Rien ne vous empêche de mettre vos modifications ici, mais il n’ya aucune raison d’avoir un fichier css supplémentaire.

19
Otto

attention

Cette solution n'a pas respectez les dépendances du thème parent ! La modification du nom de descripteur du thème parent affecte la chaîne de dépendances définie dans le thème parent. Voir mon beaucoup plus simple autre réponse .

réponse originale

Bien que la réponse d'Otto soit assez bonne, j'ai fini avec ceci dans les functions.php de mon thème enfant

function my_theme_styles() {
    global $wp_styles;
    $parentOriginalHandle = 'twentythirteen-style';
    $parentNewHandle = 'parent-style';

    // Deregister our style.css which was enqueued by the parent theme; we want
    // to control the versioning ourself.
    $parentStyleVersion = $wp_styles->registered[$parentOriginalHandle]->ver;
    $parentDeps = $wp_styles->registered[$parentOriginalHandle]->deps;
    wp_deregister_style($parentOriginalHandle);

    // Enqueue the parent theme's style.css with whatever version it used instead
    // of @import-ing it in the child theme's style.css
    wp_register_style($parentNewHandle, get_template_directory_uri() . '/style.css',
        $parentDeps, $parentStyleVersion);

    // Enqueue our style.css with our own version
    $themeVersion = wp_get_theme()->get('Version');
    wp_enqueue_style($parentOriginalHandle, get_stylesheet_directory_uri() . '/style.css',
        [$parentNewHandle], $themeVersion);
}

// Run this action action the parent theme has enqueued its styles.
add_action('wp_enqueue_scripts', 'my_theme_styles', 20);

Il conserve le numéro de commande et les numéros de version du code parent style.css du thème parent tout en contrôlant la version du style.css du thème enfant.

2
bernie