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?
la source
Réponses:
QUESTION 1
Règle générale, oui. Mais , vous ne devez jamais supposer . La plupart des catastrophes et des défaillances en direct sont dues à des hypothèses ou des faits basés sur une hypothèse
FAITS SANS HYPOTHÈSES
Le fichier functions.php d'un thème enfant est chargé en premier, puis le fichier functions.php du parent. Cela garantit que la feuille de style principale du thème parent est chargée avant la feuille de style principale du thème enfant à partir du code mis à jour dans le codex
Regardons le thème groupé, vingt-douze. La magie opère ici
wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );. C'est ainsi que la feuille de style principale est mise en file d'attente. Lorsque le thème est actif en tant que thème parent, le style.css sera chargé à partir du thème parent commeget_stylesheet_uri()il sera pointé vers le style.css du répertoire parent.Lorsque vous passez à un thème enfant,
get_stylesheet_uri()"change" son chemin pour pointer vers le style.css du thème enfant, ce qui signifie maintenant qu'au lieu dewp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );charger le style.css parent, il charge désormais le style.css enfant.Tous les autres styles du thème parent sont chargés comme d'habitude dans l'ordre où ils ont été écrits
POTHOLES
Styles en ligne et feuilles de style ajoutés directement à votre modèle d'en-tête. J'ai fait quelques tests sur cette question. Si la feuille de style parent n'est pas mise en file d'attente à l'aide
wp_enqueue_scriptset directement chargée dans l'en-tête, la feuille de style principale du thème enfant est chargée en premier. Comme solution de contournement ici, j'ai précédemment recommandé de copier le header.php du parent vers le thème enfant et de supprimer ces appels. Vous devrez ensuite mettre en file d'attente les styles de thème parent et enfant et toutes les autres feuilles de style qui ont été directement chargées dans le header.php comme décrit dans la fonction dépréciée OPJ'ai rencontré cela une ou deux fois où les styles (et scripts) sont directement chargés dans l'en-tête, et à cause de cela l'appel à
wp_headest omis. Cela entraînera l'échec de l'action de mise en file d'attente en silence, de sorte que vos styles n'apparaîtront tout simplement pas.Mauvaises priorités définies. Il n'est pas nécessaire de définir des priorités pour les actions parent et enfant lorsque vous accrochez vos fonctions de mise en file d'attente. Lorsque les deux ont la même priorité par défaut, la règle du premier arrivé, premier servi s'applique. Cela garantira que l'ordre de chargement est correct
NOTE AUX AUTEURS THÉMATIQUES DES PARENTS
La bonne méthode acceptée pour ajouter des styles et des scripts à un thème consiste à utiliser le
wp_enqueue_scriptscrochet d'action. N'ajoutez jamais de styles et de scripts directement dans le modèle d'en-tête et ne définissez aucune priorité dans votre action lorsque vous accrochez votre fonctionChargez également toujours la feuille de style principale comme suit:
Cela garantira que la feuille de style principale de l'enfant est chargée lorsqu'un thème enfant est utilisé
VOTRE RESPONSABILITÉ EN TANT QU'AUTEUR DU THÈME DE L'ENFANT
Prenez votre temps et étudiez le thème parent. Connaissez votre thème parent, assurez-vous que vous êtes à l'aise avec les structures du thème et la façon dont les fonctions et les crochets sont utilisés dans le thème. Vous ne pouvez pas créer un thème enfant réussi si vous ne savez pas comment fonctionne le thème parent. Il est de votre responsabilité de vous assurer que les styles et les scripts sont correctement chargés pour que votre code fonctionne comme prévu.
Toujours alerter l'auteur du thème parent de tout code dont vous n'êtes pas satisfait. Par exemple, si l'auteur a ajouté ses styles directement à l'en-tête, faites-le savoir et faites-lui savoir que ce n'est pas la bonne façon de le faire, et demandez-lui de corriger cela dans une prochaine version.
QUESTION 2
Malheureusement, il n'existe aucune méthode directe pour se prémunir contre cela. Le fait est que les styles de plug-in ne doivent jamais remplacer les styles de thème par défaut sans le consentement de l'utilisateur final. À mon avis, c'est juste une mauvaise pratique ou une négligence de la part de l'auteur du plugin. Je suggérerais que dans un cas comme celui-ci, contactez l'auteur du plugin et faites-le alerte à ce sujet
Vous avez également toujours la possibilité de retirer de la file d'attente et de désenregistrer un style (et un script) dont vous n'avez pas besoin, ou dont vous devez changer la priorité et les requeueing et les réenregistrer comme dans votre code ci-dessus (ce qui est parfaitement bien). Juste une note sur votre shivm , il est préférable de retirer la file d'attente et de désenregistrer un style et un script.
QUESTION 3
Je ne pense pas qu'il y ait de réponse directe en noir et blanc à ce problème. Je répondrais en disant: faites ce que vous êtes à l'aise tant que c'est dans une certaine ligne directrice qui régit l'action.
Les feuilles de style ne sont pas là pour ajouter des fonctionnalités, mais sont là pour ajouter une expérience visuelle à l'utilisateur. Les styles sont également directement envoyés tels quels au navigateur où ils sont traités. Wordpress ne joue aucun rôle ici.
Sur cette base, je ne vois vraiment aucun drapeau rouge menaçant lors du chargement d'une feuille de style deux fois. Cela peut cependant coûter quelques millisecondes. Pour être honnête, à part cela, je ne suis pas vraiment sûr de savoir comment les doublons sont traités entre les différents navigateurs. C'est quelque chose que vous, en tant que lecteur, pouvez aller tester
À mon humble avis, les doublons ne sont jamais bons et doivent toujours être évités. Je suggérerais que si vous voulez vraiment mettre manuellement en file d'attente la feuille de style principale de l'enfant pour une raison quelconque, vous devriez utiliser votre code dans votre shivm . Retirez de la file d'attente et désenregistrez le doublon ajouté par défaut, puis remettez la feuille de style en file d'attente comme d'habitude.
Juste une chose à retenir également, les fonctions de mise en file d'attente et d'enregistrement ont un
$dependancyparamètre que vous pouvez également utiliser. Il est donc facile de charger une feuille de style secondaire et de la rendre dépendante de la feuille de style principale de votre thème enfantEN CONCLUSION
Depuis la récente mise à jour du codex, les commentaires ont été incroyables et je voudrais remercier tous les commentaires à ce sujet. Je voudrais encourager tout le monde à participer à tout type de commentaires sur cette question en particulier. Si vous avez quelque chose à ajouter ou à commenter, veuillez le faire.
la source