Utilisation de wp_add_inline_style sans feuille de style

18

Je dois ajouter des styles intégrés personnalisés à l'en-tête d'un thème personnalisé que je crée. J'ai rencontré la wp_add_inline_style()fonction, qui fonctionne mais ne me convient pas vraiment car elle dépend d'une feuille de style spécifique. J'aurais besoin d'ajouter des styles en ligne à la fin de la balise head sans dépendance de feuille de style.

J'ai essayé de définir la feuille de style du thème ou une feuille inexistante. Dans les deux cas, cela fonctionne mais c'est un peu un hack IMO sale (soit charger la feuille de style du thème deux fois ou se référer à un fichier fantôme ...). Existe-t-il un moyen approprié d'ajouter des styles en ligne dans head sans dépendre d'une feuille de style?

Bien sûr, je pourrais les ajouter directement dans le fichier header.php mais j'aimerais éviter cela.

theme-development wp-enqueue-style terzag
la source

Réponses:

24

Il vous suffit d'ajouter les styles directement à l'en-tête de page. La meilleure façon de le faire est d'utiliser le hook d'action 'wp_head', en supposant que vous utilisez un thème qui a le hook. Ainsi:

add_action('wp_head', 'my_custom_styles', 100);

function my_custom_styles()
{
 echo "<style>*{color: red}</style>";
}

Consultez le codex WP pour en savoir plus sur les hooks d'action.

SkyShab
la source
Aucun problème! Heureux d'avoir pu aider.
SkyShab
Si (comme moi) vous souhaitez ajouter du CSS en ligne personnalisé aux pages du tableau de bord, vous pouvez utiliser l' admin_headaction.
Ce brésilien Guy
16

Vous pouvez simplement utiliser une poignée "factice":

wp_register_style( 'dummy-handle', false );
wp_enqueue_style( 'dummy-handle' );

wp_add_inline_style( 'dummy-handle', '* { color: red; }' );
Flix
la source
J'aime vraiment cette solution parce que mon style a une poignée et est mis en file d'attente comme s'il était inclus à partir d'un fichier .css.
dev_masta
L'utilisation de false comme source de wp_register_style n'est pas non plus autorisée par la documentation codex.wordpress.org/Function_Reference/…
16patsle
3

Votre thème a très certainement une feuille de style par défaut (sinon il ne serait même pas chargé en tant que thème). Utilisez simplement cette feuille de style comme gestionnaire de votre CSS en ligne. Un exemple peut être trouvé dans le functions.php du thème TwentyFifteen (code sauté pour plus de concision):

function twentyfifteen_scripts() {
    wp_enqueue_style( 'twentyfifteen-style', get_stylesheet_uri() );

}
function twentyfifteen_post_nav_background() {
    wp_add_inline_style( 'twentyfifteen-style', $css );
}
Casper
la source
1
L'OP a spécifiquement demandé une méthode autre que l'utilisation de wp_add_inline_style (). Les deux méthodes fonctionnent, et je n'ai trouvé aucune raison convaincante d'aller avec wp_add_inline_style (). Si vous connaissez une raison, j'aimerais la connaître.
SkyShab
Votre solution fonctionne, mais elle est toujours "hacky" selon quelque chose que j'ai entendu de la part de quelqu'un de l'équipe WP (si je ne me trompe pas); pas exactement mon avis . Je pense que l'OP pensait qu'il n'y avait aucun moyen de le faire sans charger la feuille de style deux fois ou utiliser un crochet fantôme. Quoi qu'il en soit, s'ils ne créent pas de plugin, il y a toujours une feuille de style de thème à suivre. J'édite également ma réponse car votre solution est documentée dans le Codex. :)
Casper
J'ai joué avec wp_add_inline_style (), et c'est ce que j'ai trouvé. L'avantage d'attacher les styles à une feuille de style est que s'il est retiré de la file d'attente, les styles ne seront pas imprimés. Mais l'une ou l'autre méthode les imprime en ligne dans la tête. Disons que vous êtes un développeur de plugins et que vos styles sont imprimés dans la tête. Cela n'a rien à voir avec les styles de thème, et donc si un thème enfant a retiré les styles de thème principaux pour utiliser le sien, maintenant vos styles de plugin ne sont pas sortis. Ainsi, le PO peut avoir spécifié cette partie de la demande pour cette raison.
SkyShab