Usando wp_add_inline_style sin una hoja de estilo


18

Necesito agregar estilos personalizados en línea al encabezado de un tema personalizado que estoy creando. Me he encontrado con la wp_add_inline_style()función, que funciona pero realmente no me conviene, ya que depende de una hoja de estilo específica. Necesitaría agregar estilos en línea al final de la etiqueta de encabezado sin una dependencia de hoja de estilo.

He intentado configurar la hoja de estilo del tema o una inexistente. En ambos casos, funciona, pero es un truco IMO sucio (cargue la hoja de estilo del tema dos veces o consulte un archivo fantasma ...). ¿Hay una manera adecuada de agregar estilos en línea en la cabeza sin depender de una hoja de estilos?

Por supuesto, podría agregarlos directamente en el archivo header.php, pero me gustaría evitar esto.

Respuestas:


24

Solo necesita agregar los estilos directamente al encabezado de la página. La mejor manera de hacerlo es usar el gancho de acción 'wp_head', suponiendo que esté usando un tema que tiene el gancho. Al igual que:

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

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

Consulte el códice WP para obtener más información sobre los ganchos de acción.


¡No hay problema! Me alegro de poder ayudar.
SkyShab

Si (como yo) desea agregar CSS en línea personalizado a las páginas del tablero, puede usar la admin_headacción.
Ese chico brasileño el

16

Simplemente podría usar una manija "ficticia":

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

wp_add_inline_style( 'dummy-handle', '* { color: red; }' );

Realmente me gusta esta solución porque mi estilo tiene un identificador y está en cola como si estuviera incluido en un archivo .css.
dev_masta

El uso de false como fuente de wp_register_style tampoco está permitido según la documentación codex.wordpress.org/Function_Reference/…
16patsle

3

Su tema ciertamente tiene una hoja de estilo predeterminada (de lo contrario, ni siquiera se cargaría como tema). Simplemente use esta misma hoja de estilo como el controlador para su CSS en línea. Se puede encontrar un ejemplo en functions.php del tema TwentyFifteen (código omitido por brevedad):

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

}
function twentyfifteen_post_nav_background() {
    wp_add_inline_style( 'twentyfifteen-style', $css );
}

1
El OP solicitó específicamente un método diferente al uso de wp_add_inline_style (). Ambos métodos funcionan, y no he encontrado ninguna razón convincente para usar wp_add_inline_style (). Si conoces un motivo, me gustaría saberlo.
SkyShab

Su solución funciona, pero sigue siendo "hacky" según algo que escuché de alguien del equipo de WP una vez (si no me equivoco); No es exactamente mi opinión . Creo que el OP estaba pensando que no había forma de hacer esto sin cargar la hoja de estilo dos veces o usar un gancho fantasma. De todos modos, si no están creando un complemento, siempre hay una hoja de estilo de tema para acompañar. También estoy editando mi respuesta ya que su solución está documentada en el Codex. :)
Casper el

Jugué con wp_add_inline_style (), y esto es lo que encontré. El beneficio de adjuntar los estilos a una hoja de estilos es que si se retira, los estilos no se imprimirán. Pero cualquiera de los métodos los imprime en línea en la cabeza. Digamos que usted es un desarrollador de complementos y sus estilos se imprimen en la cabeza. Esto no tiene nada que ver con los estilos de tema y, por lo tanto, si un tema secundario eliminó los estilos de tema principal para usar el suyo, ahora no se generarán sus estilos de complemento. Por lo tanto, el OP puede haber especificado esa parte de la solicitud por este motivo.
SkyShab el
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.