¿Cómo agregar estilos en línea dinámicos?
Quiero agregar CSS dinámico, actualmente lo estoy agregando directamente al div, es decir:
$color = "#000000";
echo '<div style="background:'.$color.'">
¿Es malo agregar código de esta manera?
He leído en algunos foros que esto agrega carga al servidor y no es recomendado por los estándares de codificación de WordPress. Debería usar wp_add_inline_style()
. Así que estoy tratando de usar eso pero no funciona. Esto es lo que estoy intentando:
functions.php:
function add_custom_css() {
// Registrar y cargar el archivo CSS
wp_enqueue_script('custom-css', get_template_directory_uri() . '/custom.css');
}
}
add_action( 'wp_enqueue_scripts', 'add_custom_css' );
single.php
$color = "#000111";
$custom_css = "
.mycolor{
background: {$color};
}";
wp_add_inline_style( 'custom-css', $custom_css );
No agrega ningún código en el archivo custom.css. ¿Qué estoy haciendo mal?

Prueba esto:
Usando condicionales de consulta
No es recomendable poner el registro de estilos directamente en la plantilla. Es posible (si entiendes el orden en que se ejecutan las acciones relevantes y te aseguras de que tu llamada a wp_add_inline_style()
ocurra en el punto correcto del orden de ejecución). Es mucho más fácil mantener todo el código junto y usar un condicional de consulta apropiado, como is_single()
, para añadir el estilo dinámico:
function add_custom_css() {
wp_enqueue_style('custom-css', get_template_directory_uri() . '/custom.css');
// Añadir estilo dinámico si se muestra una página individual
if ( is_single() ) {
$color = "#000111";
$custom_css = ".mycolor{ background: {$color}; }";
wp_add_inline_style( 'custom-css', $custom_css );
}
}
add_action( 'wp_enqueue_scripts', 'add_custom_css' );
Respuesta Original
functions.php
function add_custom_css() {
wp_enqueue_style('custom-css', get_template_directory_uri() . '/custom.css');
}
add_action( 'wp_enqueue_scripts', 'add_custom_css', 20 );
single.php
function wpse104657_custom_color() {
$color = "#000111";
$custom_css = "
.mycolor{
background: {$color};
}";
wp_add_inline_style( 'custom-css', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'wpse104657_custom_color', 21 );
El tercer parámetro en las llamadas a add_action()
es la prioridad, que le indica a WordPress en qué orden añadir la acción -- números más altos significan una ejecución más tardía.
Editado para añadir Esto no añadirá ningún código a custom.css
-- solo añadirá estilos en línea si custom.css
ya ha sido cargado.
Referencias

No existe un hook llamado wp_enqueue_styles
. Los estilos y scripts deben encolarse usando el hook wp_enqueue_scripts
.

No agrega ningún código en el archivo custom.css. ¿Qué estoy haciendo mal?
Esos estilos se agregan en el documento HTML, dentro de las etiquetas <style>
, no en la hoja de estilos que encolas. Aún así, debes encolar la hoja de estilos antes de agregar estilos "en línea".
El nombre de la función es un poco confuso, porque produce bloques de estilo, no estilos en línea propiamente dichos. Lo que hiciste con el DIV anterior es un estilo en línea. Debes evitar estos porque toman la mayor precedencia antes de las reglas !important
(sería muy difícil sobrescribirlos).
He leído en algún foro que añade carga al servidor
No, no lo hace. Probablemente estás confundiendo esto con scripts PHP que actúan como hojas de estilo. Esos sí son problemáticos.

Tal vez sea solo yo, pero siento que estamos ahogándonos en un vaso de agua. (es una frase... búscala :))
Si estás construyendo un tema que podría tener un tema hijo asociado, tanto agregarlo directamente en línea como agregarlo a un bloque de estilo mediante wp_add_inline_style() va a requerir un !important para poder sobrescribirlo.
Si se trata de un plugin personalizado y cambiar el color de fondo es una parte crítica de la funcionalidad, entonces por supuesto, agrégalo en línea.
No veo ninguna ventaja en complicar esto demasiado.
Para responder a la pregunta original.
¿Está mal agregar código como el anterior?
La respuesta simple es: No, no está mal. Tiene consecuencias, pero el rendimiento del servidor no es una de ellas, y no veo nada en los estándares de codificación de WordPress que desaliente esto. En general, los estilos en línea deben usarse con moderación y cuidado, pero no son malos.
Si quieres asegurarte de mantener las preocupaciones separadas, podrías agregar una clase en línea en lugar de estilos.
$color = "black";
echo '<div class=".$color.">'
Y luego definir .black en tu hoja de estilos. (Eso, por supuesto, solo funciona si tienes una lista predefinida de opciones de color.)

Hago esto en todas mis plantillas, utilizando:
<?php
function hook_css() {
?>
<style>
.sub { margin: auto; max-width: 1140px;}
</style>
<?php
}
add_action('wp_head', 'hook_css');
?>
Esto colocará las etiquetas de estilo y los estilos referenciados dentro de la sección head al completar
<?php wp_head();?>
Si lo estás codificando en una plantilla, asegúrate de colocarlo antes de la sección
<?php wp_head();?>
. Puedes aprender más sobre esto aquí WordPress Codex
