Ce message soulève quelques questions que j'ai rencontrées concernant les changements récents concernant les méthodes de mise en file d'attente des feuilles de style évoquées dans ce fil et ce fil .
Les problèmes que j'ai rencontrés sont survenus dans un scénario de cas d'utilisation général, en utilisant un thème parent largement utilisé et bien entretenu qui est spécifiquement prêt pour le thème enfant dans une installation WP 4.0. Le fichier functions.php de mon thème enfant contient uniquement la wp_enqueue_stylefonction décrite dans le Codex .
Veuillez noter que bien que le code référencé ci-dessous soit spécifique à ce thème, il utilise en grande partie les conventions de codage actuelles utilisées par les thèmes parents. De plus, mes sujets de préoccupation sont très probablement reproductibles sur un grand nombre de thèmes parentaux établis actuellement dans la nature. De plus, les questions que ces questions soulèvent sont applicables à un niveau universel, quel que soit le thème parent utilisé.
QUESTION 1: Deux files d'attente
La configuration recommandée:
Le thème parent met en file d'attente les styles et les scripts à l'aide du wp_enqueue_scriptscrochet, la partie pertinente étant la suivante:
add_action('wp_enqueue_scripts', 'parent_theme_function_name');
function parent_theme_function_name() {
wp_register_style( 'avia-style' , $child_theme_url."/style.css", array(), '2', 'all' );
wp_enqueue_style( 'avia-base');
if($child_theme_url != $template_url) { wp_enqueue_style( 'avia-style'); }
}Mon thème enfant met en functions.phpfile d'attente les styles selon les modifications récentes du codex:
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );
function enqueue_parent_theme_style() {
wp_enqueue_style( 'dm-parent-style', get_template_directory_uri().'/style.css' );
}Notez les ID suivants tels qu'utilisés par le code référencé:
id='dm-parent-style-css'est la feuille de style du thème parent, mise en file d'attente par ma fonction de thème enfantid='avia-style-css'est la feuille de style de mon thème enfant, mise en file d'attente par la fonction de thème parentid='dm-child-style-css'est la feuille de style de mon thème enfant, telle que mise en file d'attente par ma fonction de thème enfant
Les resultats:
À première vue, tout allait bien, le <head> montrant l'ordre suivant:
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />
<!-- Multiple individual parent theme styles here -->
<link rel='stylesheet' id='avia-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />Après l'installation d'un plugin, l'ordre de mise en file d'attente a maintenant changé comme suit:
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />
<!-- Multiple individual parent theme styles here -->
<link rel='stylesheet' id='avia-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />
<!-- Pesky plugin styles -->En fin de compte, j'ai besoin du CSS de mon thème enfant à charger après tous les plugins, j'ai donc été obligé d'ajouter un numéro de priorité à la fonction dans mon thème enfant (voir la discussion précédente concernant le numéro de priorité) .
Parce que ma fonction ne met en file d'attente que le CSS du thème parent, cependant, le résultat est que maintenant le CSS du thème parent est déplacé à la fin, laissant le CSS du thème de mon enfant dans une situation encore pire qu'avant.
<!-- Multiple individual parent theme styles here -->
<link rel='stylesheet' id='avia-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />
<!-- Pesky plugin styles -->
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />Maintenant, je suis obligé de recourir également à la mise en file d'attente de mon style de thème enfant, pour m'assurer qu'il soit repoussé au début de la ligne, provoquant le problème susmentionné de deux files d'attente (nouveau terme? Lol) le thème enfant css.
La configuration obsolète:
Fonction révisée dans le thème enfant:
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style', 99 );
function enqueue_parent_theme_style() {
wp_enqueue_style( 'dm-parent-style', get_template_directory_uri().'/style.css' );
wp_enqueue_style( 'dm-child-style', get_stylesheet_directory_uri().'/style.css' );
}Les resultats:
Produire l'ordre suivant dans le <head>:
<!-- Multiple individual parent theme styles here -->
<link rel='stylesheet' id='avia-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />
<!-- Pesky plugin styles -->
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />
<link rel='stylesheet' id='dm-child-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />Même si l'inclusion de la feuille de style enfant dans ma fonction a entraîné sa mise en file d'attente à deux reprises, à mon humble avis, c'est préférable au codage en supposant que le thème parent mettra correctement en file d'attente notre feuille de style enfant pour nous. Sur la base des ID attribués à chaque style mis en file d'attente, il semble que le thème parent le met en file d'attente, pas quoi que ce soit dans WP Core.
Mon Shivm:
Bien que je ne suggérerais guère que ce soit le moyen recommandé (et je suis sûr que les développeurs ayant plus d'expérience en codage que moi-même grogneront contre cette solution), j'ai retiré l'ID du thème parent (utilisé pour mettre en file d'attente le style de mon thème enfant) juste au-dessus de ma propre file d'attente dans le fichier de fonctions de mon thème enfant comme indiqué:
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style', 99 );
function enqueue_parent_theme_style() {
wp_enqueue_style( 'dm-parent-style', get_template_directory_uri().'/style.css' );
wp_dequeue_style( 'avia-style' );
wp_enqueue_style( 'dm-child-style', get_stylesheet_directory_uri().'/style.css' );
}Les resultats:
Cela a résolu les problèmes à portée de main, résultant en:
<!-- Multiple individual parent theme styles here -->
<!-- Plugin styles -->
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />
<link rel='stylesheet' id='dm-child-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />Bien sûr, cela nécessitait de connaître l'ID utilisé par le thème parent - quelque chose de plus générique serait nécessaire pour être utilisé comme méthodologie de développement de thème enfant standard.
PROBLÈME 2: Feuilles de style enfant déplacées
(Il semble difficile de croire que cela ne soit pas apparu dans un autre fil, même si je n'en ai pas vu de spécifique en regardant ... si je l'ai raté, n'hésitez pas à le porter à mon attention.)
Je n'utilise jamais la valeur style.csspar défaut dans le répertoire racine du thème enfant pour mes styles de thème - elle doit évidemment être là, mais tous mes styles réels sont compilés à partir de SCSS sous la forme d'un fichier .css minifié dans un répertoire / css /. Bien que je réalise que ce n'est pas "la norme attendue" au niveau universel pour le développement de thèmes enfants, les développeurs WordPress les plus sérieux que je connais font quelque chose de similaire. Cela, bien sûr, nécessite la mise en file d'attente manuelle de cette feuille de style dans ma fonction, que le thème parent la mette en file d'attente ou non.
Pour tout résumer...
- Est-il sûr d'inclure l'hypothèse que les thèmes parents mettent correctement en file d'attente les styles de thème enfant, du point de vue des normes de thème enfant?
- La suppression de la priorité pourrait potentiellement créer plus de confusion pour une partie de la communauté WordPress, lorsque les styles de thème enfant commenceraient à être remplacés par un plugin. Nous nous attendons à ce que les thèmes écrasent les styles, mais pas tellement avec les plugins.
- Lorsque vous utilisez une feuille de style personnalisée pour les styles de thème enfant réels (comme supposés les mettre dans le prédéfini
style.css), la mise en file d'attente manuelle de ce fichier devient nécessaire. En termes de maintien de la continuité entre un large éventail de développeurs, ne serait-il pas logique d'encourager la mise en file d'attente manuelle de la feuille de style enfant, quel que soit le double éventuel?