web-dev-qa-db-fra.com

Feuilles de style en attente après le "rtl.css" du thème

Je développe actuellement un thème prenant en charge l'internationalisation et souhaite charger les feuilles de style après le rtl.css de mon thème (un style.css alternatif chargé pour les langues avec un ordre de lecture de droite à gauche).

Je connais bien la mise en file d'attente de mes feuilles de style et le contrôle de leur ordre de chargement avec des dépendances à l'aide des fonctions wp_register_style() et wp_enqueue_style(). Cependant, rtl.css est chargé automatiquement par WordPress lorsque la direction de la langue de la langue locale est rtl et il ne semble pas y avoir de moyen de spécifier la feuille de style. comme dépendance.

Je sais que je peux conditionnellement mettre en file d'attente des feuilles de style à l'aide de la fonction is_rtl(). Toutefois, les éléments <link> de ces feuilles de style sont toujours imprimés avant que WordPress n'imprime automatiquement les rtl.css. Je pourrais aussi simplement insérer manuellement <link>s dans les feuilles de style sur lesquelles je souhaite dépendre de rtl.css juste après l'appel de wp_head() dans le fichier header.php de mon thème, mais je pense que c'est une mauvaise pratique de le faire, et j'aimerais que mon thème soit de qualité commerciale.

Comment puis-je charger des feuilles de style après que WordPress ait chargé rtl.css?

theme-developmentlocalizationstylesheet
6
Melika .A

Ordre d'impression de feuilles de style

WordPress ne charge pas les fichiers rtl.css alternatifs de themes à l'aide de wp_register_style() ou wp_enqueue_style(). En tant que telle, la feuille de style n'est pas ajoutée à la file d'attente des styles de WordPress et ne peut pas être spécifiée comme dépendance lors de l'enregistrement ou de la mise en file d'attente de feuilles de style supplémentaires.

À la place, l'élément <link> de cette feuille de style est ajouté via la fonction locale_stylesheet() , qui est attachée à l'action wp_head. wp_print_styles EST LIÉ À L'ACTION wp_head AVEC UNE PRIORITÉ DE 8 TANDIS QUE locale_stylesheet() A LA PRIORITÉ PAR DÉFAUT DE 10 , ce qui signifie que tous les styles que vous mettez en file d'attente à l'aide de wp_enqueue_style() seront toujours seront imprimésavantrtl.css.

Note

locale_stylesheet() appelle the get_locale_stylesheet() function afin de déterminer la feuille de style de thème correspondant aux paramètres régionaux à charger. Il commence par rechercher {locale}.css (c'est-à-dire en_US.css). Si le fichier n'existe pas, il recherche ensuite {text-direction}.css (c'est-à-dire rtl.css ou ltr.css). Gardez à l'esprit que si vous fournissez une feuille de style {locale}.css pour les paramètres régionaux actuels, WordPress not not chargera automatiquement votre rtl.css

Solutions

Ce comportement peut être modifié de différentes manières, mais il convient de noter qu'il existe pour une raison - en chargeant rtl.css après toutes les feuilles de style en file d'attente, WordPress offre au thème la possibilité d'écraser les règles CSS fournies par les plugins et les comme cela, ne prend en charge que les langues de gauche à droite. Toutes les solutions que je propose ci-dessous éliminent la plupart du temps cette possibilité et peuvent créer des conflits si des plugins dépendent du comportement par défaut de WordPress (je ne peux pas en imaginer beaucoup).

Mettre manuellement votre feuille de style dans la file d'attente

Si vous empêchez WordPress de charger automatiquement votre fichier rtl.css, vous pouvez le traiter comme n'importe quelle autre feuille de style, ce qui vous permet de contrôler le moment du chargement du script. Il y a deux façons d'accomplir cela qui me viennent à l'esprit:

  • Accrochez-vous dans une action qui se déclenche avant wp_head et supprimez le crochet de locale_stylesheet():

    function remove_locale_stylesheet() {
    remove_action( 'wp_head', 'locale_stylesheet' );
}
add_action( 'init', 'remove_locale_stylesheet' );

  • Renommez votre fichier rtl.css en quelque chose d'autre (pas ltr.css ni {locale}.css).

Après avoir effectué l’une des opérations ci-dessus, mettez en file d'attente votre feuille de style RTL comme vous le feriez normalement - de manière conditionnelle sur is_rtl() si vous souhaitez également prendre en charge les langues LTR.

Inverser l’ordre d’impression de la feuille de style de wp_head

En prenant une action avant wp_head et en attribuant à locale_stylesheet() une priorité plus basse que wp_print_styles, vous pouvez forcer rtl.css à toujours charger avant les __ feuilles de style wp_enqueue_style() 'd, en le rendant effectivement comme si chaque feuille de style en attente dépendait de rtl.css:

function load_locale_style_first() {
    remove_action( 'wp_head', 'locale_stylesheet' );
    add_action( 'wp_head', 'locale_stylesheet', 7 );
}
add_action( 'init', 'load_locale_style_first' );
8
bosco