¿Cómo agregar estilos en línea dinámicos?

28 jun 2013, 23:07:26
Vistas: 22K
Votos: 2

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?

1
Comentarios

+1, pero editado para proporcionar un ejemplo usando condicionales de consulta y mantener todo el código de encolado de estilos junto.

Chip Bennett Chip Bennett
5 abr 2014 17:47:01
Todas las respuestas a la pregunta 5
3
10

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

28 jun 2013 23:26:31
Comentarios

¿No debería ejecutarse esto en el hook wp_enqueue_styles en su lugar?

Jack Jack
9 dic 2016 17:05:39

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

Pat J Pat J
9 dic 2016 17:10:55

Pero he actualizado mi respuesta para usar wp_enqueue_style() en lugar de wp_enqueue_script() para encolar la hoja de estilos. Gracias.

Pat J Pat J
9 dic 2016 17:14:16
0

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.

28 jun 2013 23:26:48
0

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.)

1 sept 2016 19:39:01
0

Simplemente usa:

add_action('admin_head','myfunc24235235');
function myfunc24235235(){ ?>

  <style>
  .smth{ color:red;}
  </style>

    <?php
}
1 sept 2016 16:35:23
0

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

9 sept 2017 23:27:14