web-dev-qa-db-fra.com

Problèmes de mise en file d'attente des feuilles de style de thème parent et enfant avec la méthode Codex révisée

Ce message soulève quelques questions que j'ai rencontrées à propos des modifications récentes apportées aux méthodes de mise en file d'attente des feuilles de style dans ce fil et ce fil .

Les problèmes que j'ai rencontrés se présentaient dans un scénario de cas d'utilisation général, utilisant un thème parent largement utilisé et bien géré, spécialement conçu pour un thème enfant sur une installation WP 4.0. Le functions.php de mon thème enfant ne contient que la fonction wp_enqueue_style sous la forme détaillée 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 en vigueur utilisées par les thèmes parents. De plus, mes domaines de préoccupation peuvent très bien être dupliqués sur un grand nombre de thèmes parents établis actuellement dans le répertoire. En outre, les questions qu’ils soulèvent s’appliquent à un niveau universel, quel que soit le thème parent utilisé.

NUMÉRO 1: Mise en file d'attente

La configuration recommandée:

Le thème parent met en file d'attente les styles et les scripts à l'aide du hook wp_enqueue_scripts, 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 functions.php met en file d'attente les styles en fonction des dernières modifications apportées au 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 identifiants suivants 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 la fonction de thème de mon enfant
  • id='avia-style-css' est la feuille de style de mon thème enfant, mise en file d'attente par la fonction de thème parent
  • id='dm-child-style-css' est la feuille de style de mon thème enfant, telle qu'elle a été mise en file d'attente par la fonction de thème de mon enfant

Les résultats:

À première vue, tout allait bien, avec le <head> indiquant 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 été modifié 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 de mon thème enfant (voir la discussion précédente concernant le numéro de priorité) .

Étant donné que ma fonction met uniquement en file d'attente les fichiers CSS du thème parent, le résultat est que le fichier thème parent} css est déplacé à la fin, laissant les données de mon thème 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 à la mise en file d'attente de mon style de thème enfant afin de s'assurer qu'il est déplacé au début de la ligne, ce qui cause le problème susmentionné of twoqueueing (nouveau terme? Lol) du thème enfant.

La configuration obsolète:

Fonction révisée dans le thème de l'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 résultats:

Produire la commande suivante 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 provoqué sa mise en file d'attente à deux reprises, à mon humble avis, il est préférable de coder sous la hypothèse que _ le thème parent met correctement en file d'attente notre feuille de style enfant pour nous. En fonction des identifiants attribués à chaque style mis en file d'attente, il apparaît que le thème parent le met en file d'attente, mais pas dans WP Core.

Mon Shivm:

Bien que je suggérerais difficilement que ce soit le moyen recommandé (et je suis sûr que les développeurs possédant plus d'expérience en codage que moi-même gémiront avec cette solution), j'ai retiré de la file d'attente 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 résultats:

Cela a résolu les problèmes actuels, 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 entendu, cela nécessitait de connaître l'ID utilisé par le thème parent - il faudrait utiliser un nom plus générique comme méthodologie de développement de thème enfant standard.

NUMÉRO 2: Feuilles de style enfants déplacées

(Il semble difficile de croire que cela ne soit pas apparu dans un autre sujet, bien que je n'en ai pas vu de particulier en regardant ... si je l'ai manqué, n'hésitez pas à me le faire savoir.)

I never utilise le style.css par défaut dans le répertoire racine du thème enfant pour mes styles de thème - il doit bien évidemment être là, mais tous mes styles actuels sont compilés à partir de SCSS sous la forme d'un fichier .css minifié dans un fichier/css/annuaire. Bien que je réalise que ce n'est pas "la norme attendue"} au niveau universel pour le développement de thèmes pour enfants, la plupart des développeurs WordPress sérieux que je connais font quelque chose de similaire. Cela nécessite bien sûr de mettre manuellement la feuille de style en file d'attente dans ma fonction quel que soit of si le thème parent l'a mise en file d'attente ou non.

Pour tout résumer...

  1. Est-il prudent d’inclure l’hypothèse que les thèmes parents placent correctement les styles de thème enfant dans la file d’attente, du point de vue des normes de thème enfant?
  2. La suppression de la priorité pourrait potentiellement créer davantage de confusion pour une partie de la communauté WordPress, lorsque les styles de thème enfants commenceraient à être écrasés par un plugin. Nous nous attendons à ce que les thèmes écrasent les styles, mais pas autant avec les plugins.
  3. Lorsque vous utilisez une feuille de style personnalisée pour les styles de thème enfants réels (comme supposé les placer dans le style.css prédéfini), il est nécessaire de mettre en file d'attente manuellement ce fichier. En termes de maintien de la continuité d'un large éventail de développeurs, ne serait-il pas judicieux d'encourager la mise en file d'attente manuelle de la feuille de style enfant, quel que soit le doublon possible?
child-themewp-enqueue-styleparent-themecodex
9
dMcClintock

QUESTION 1

Est-il prudent d’inclure l’hypothèse que les thèmes parents placent correctement les styles de thème enfant dans la file d’attente, du point de vue des normes de thème enfant?

Règle générale, oui. Mais , vous devriez ne jamais assumer . La plupart des catastrophes et des échecs en direct sont dus à 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, suivi du 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 fourni, vingt-douze. La magie se passe ici wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );. Voici comment la feuille de style principale est mise en file d'attente. Lorsque le thème est actif en tant que thème parent, style.css sera chargé à partir du thème parent, car get_stylesheet_uri() sera dirigé vers le style.css du répertoire parent.

  • Lorsque vous passez à un thème enfant, get_stylesheet_uri() "modifie" son chemin pour qu'il pointe vers le style.css du thème enfant, ce qui signifie que, au lieu de cela, wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() ); charge le style parent.css et charge désormais le style.css enfant.

  • Tous les autres styles du thème parent sont chargés normalement, dans l’ordre dans lequel ils ont été écrits.

NIDS DE POULE

  • Styles en ligne et feuilles de style ajoutés directement à votre modèle d'en-tête. J'ai fait des tests sur cette question. Si la feuille de style parent n'est pas mise en file d'attente avec wp_enqueue_scripts et chargée directement dans l'en-tête, la feuille de style principale du thème enfant est chargée en premier. En guise de solution de contournement, j'ai précédemment recommandé de copier le fichier header.php du parent dans le thème enfant et de supprimer ces appels. Vous devrez ensuite interroger les styles de thème parent et enfant, ainsi que toute autre feuille de style directement chargée dans le header.php, comme décrit dans la fonction OP depreciated

  • Je suis tombé sur ce problème une ou deux fois où les styles (et les scripts) sont directement chargés dans l'en-tête et, de ce fait, l'appel à wp_head est omis. Cela fera en sorte que l'action de mise en file d'attente échoue en silence, de sorte que vos styles ne seront tout simplement pas affichés.

  • 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 enqueueu. 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ÈMES DES PARENTS

La méthode acceptée appropriée pour ajouter des styles et des scripts à un thème consiste à utiliser le point d'ancrage wp_enqueue_scripts. Jamais ajoutez des styles et des scripts directement dans le modèle d'en-tête, et ne définissez aucune priorité dans votre action lorsque vous accrochez votre fonction

Toujours aussi charger la feuille de style principale comme suit:

wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );

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 THÈME ENFANT

  • Prenez votre temps et travaillez à travers le thème parent. Connaissez votre thème parent, assurez-vous que vous êtes à l'aise avec les structures de thème et la manière 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 connaissez pas parfaitement le fonctionnement du thème parent. Il est de votre responsabilité de vous assurer que les styles et les scripts sont correctement chargés afin que votre code fonctionne comme prévu.

  • Toujours alerter l'auteur du thème parent de tout code qui ne vous convient pas. Par exemple, si l'auteur a ajouté ses styles directement dans l'en-tête, mettez-le en alerte et informez-le que c'est une mauvaise façon de le faire, et demandez-lui de corriger cela dans une version ultérieure.

QUESTION 2

La suppression de la priorité pourrait potentiellement créer davantage de confusion pour une partie de la communauté WordPress, lorsque les styles de thème enfants commenceraient à être écrasés par un plugin. Nous nous attendons à ce que les thèmes écrasent les styles, mais pas tellement avec les plugins

Malheureusement, il n'y a pas de méthode directe pour se protéger contre cela. En fait, les styles de plug-in ne doivent jamais écraser les styles de thème par défaut sans le consentement de l'utilisateur final. À mon avis, il s’agit là d’une mauvaise pratique ou d’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 alertez-le à 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 avez besoin de changer la priorité de, de les remettre en file d'attente et de les réenregistrer comme dans votre code ci-dessus (ce qui est parfaitement correct). Juste une note sur votre shivm , il est préférable de retirer de file et de désenregistrer un style et un script.

QUESTION 3

Lors de l'utilisation d'une feuille de style personnalisée pour les styles de thème enfants réels (comme supposé les mettre dans le style.css prédéfini), la mise en file d'attente manuelle de ce fichier devient nécessaire. En termes de maintien de la continuité d'un large éventail de développeurs, ne serait-il pas judicieux d'encourager la mise en file d'attente manuelle de la feuille de style enfant, quel que soit le doublon possible?

Je ne pense pas qu'il y ait une réponse directe en noir et blanc à cette question. Je répondrais en disant: faites ce que vous êtes à l'aise tant que cela respecte une certaine ligne directrice qui régit l'action.

Les feuilles de style ne sont pas là pour ajouter des fonctionnalités, mais pour ajouter une expérience visuelle à l'utilisateur. Les styles sont également envoyés directement tels quels au navigateur, où ils ont été traités. Wordpress ne joue aucun rôle ici.

Sur la base de ce fait, je ne vois vraiment pas de drapeaux rouges menaçants dans le chargement d'une feuille de style deux fois. Cela pourrait toutefois coûter quelques millisecondes de performances. Pour être honnête, à part cela, je ne sais pas vraiment comment les doublons sont gérés sur différents navigateurs. C’est quelque chose que vous, en tant que lecteur, pouvez tester

IMHO, les doublons ne sont jamais bons et devraient toujours être évités. Je suggérerais que si vous voulez vraiment mettre en file d'attente manuellement la feuille de style principale de l'enfant pour quelque raison que ce soit, vous devez utiliser votre code dans votre shivm . Supprimez et enregistrez le doublon ajouté par défaut, puis remettez la feuille de style en file d'attente comme d'habitude.

Une chose à ne pas oublier non plus, les fonctions de mise en file d'attente et d'enregistrement ont un paramètre $dependancy 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 enfant

EN CONCLUSION

Depuis la récente mise à jour du codex, les retours sont fantastiques et je tiens à remercier tous ceux qui ont répondu. 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.

5
Pieter Goosen