¿Cómo agregar opciones CSS a mi plugin sin usar estilos en línea?

Question

¿Cómo agregar opciones CSS a mi plugin sin usar estilos en línea?

7 sept 2010, 07:11:12

Vistas: 28.6K

Votos: 27

Recientemente lancé un plugin, WP Coda Slider, que utiliza shortcodes para agregar un slider jQuery a cualquier entrada o página. Estoy agregando una página de opciones en la próxima versión y me gustaría incluir algunas opciones CSS, pero no quiero que el plugin agregue las opciones de estilo como CSS en línea. Quiero que las opciones se agreguen dinámicamente al archivo CSS cuando sea llamado.

También me gustaría evitar usar fopen o escribir en un archivo por problemas de seguridad.

¿Es algo como esto fácil de lograr o sería mejor simplemente agregar las opciones de estilo directamente a la página?

Chris_O

20.6K

desarrollo de plugins css opciones

Comentarios

@Chris_O: He estado pensando casi exactamente lo mismo. Lo que quiero es una forma de llamar a wp_enqueue_style() (y a wp_enqueue_script()) con un nombre de función en lugar de un nombre de archivo y que mi función genere el CSS (o JS) pero que finalmente se incluya a través de una hoja de estilos enlazada. Hasta donde sé, esto no es posible con las funciones wp_equeue_*(). ¿Tal vez deberíamos enviar un ticket en trac?

MikeSchinkel

7 sept 2010 09:44:51

@MikeSchinkel: Esa sería una forma muy lógica de usar las funciones wp_enqueue. Yo apoyaría ese ticket.

Chris_O

7 sept 2010 10:24:01

@Chris_O: Acabo de ver la respuesta de @Doug; hice una mala suposición de que ya lo sabías. Si me hubiera dado cuenta de que no era el caso, te habría dirigido aquí: http://wordpress.stackexchange.com/questions/556/#562

MikeSchinkel

8 sept 2010 03:12:01

@MikeSchinkel Yo conocía sobre wp_register y wp_enqueue. Estaba buscando una forma de construir la hoja de estilos basada en los valores de la página de opciones del plugin.

Chris_O

8 sept 2010 03:37:36

@Chris_O: Ah. Me gusta pensar en mí mismo como alguien que todavía puede ver lo que otros están pasando por alto en una solución, incluso después de aprender la solución (es decir, la mayoría de los expertos no son buenos maestros y aunque no soy el mejor experto, generalmente soy un buen maestro). Por otro lado, este es uno que se me pasó, lo siento. :)

MikeSchinkel

8 sept 2010 03:40:57

Todas las respuestas a la pregunta

Comentarios

Además - dado que los valores solo cambian cuando se modifican los valores en la página de opciones - podrías generar el archivo CSS al guardar. Puedes almacenar archivos CSS en el directorio del plugin también, así que esto es un poco más eficiente que ejecutar un archivo PHP en cada solicitud CSS con includes, etc.

hakre

8 sept 2010 00:44:26

¡Gracias! Funcionó bien. Pero obtuve el error fatal get_option()... está indefinido. Luego cargué el archivo wp-config.php y eso solucionó el problema.

Sumith Harshan

2 ene 2014 15:43:03

Sumith, ¿podrías explicar cómo has usado get_option dentro del archivo CSS personalizado? ¡Muchas gracias!

Antonio Petricca

9 sept 2015 14:50:33

Construir dinámicamente un archivo CSS y luego cargarlo añade una ENORME carga de rendimiento a lo que debería ser un proceso de muy bajo ancho de banda al agregar un archivo CSS, especialmente si hay variables en el CSS que van a ser procesadas a través de WordPress. Debido a que se están creando dos archivos diferentes para una sola carga de página, WordPress se inicia dos veces y ejecuta todas las consultas de la base de datos dos veces, lo que resulta en un gran desorden.

Si tu slider solo va a estar en una página y deseas que los estilos se establezcan dinámicamente, entonces tu mejor opción es agregar un bloque de estilo en el encabezado.

En orden de rendimiento:

Agregar un pequeño bloque de estilos en el encabezado, creado dinámicamente - Muy rápido
Agregar una hoja de estilos no dinámica vía wp_enqueue_style - Medio
Agregar una hoja de estilos dinámica vía wp_enqueue_style - Muy lento

Dan Gayle

6.15K

7 sept 2010 20:10:37

Comentarios

@Dan-gayle Muy buen punto. El plugin puede usarse en más de una página y algunos usuarios lo están utilizando en 2 o 3 páginas. Solo carga la hoja de estilo estática y el js actual en las páginas que tienen el shortcode.

Chris_O

7 sept 2010 20:25:05

Estoy de acuerdo con Dan Gayle, aunque votaste a favor de mi respuesta. Agregar un pequeño bloque CSS a wp_head sería mucho mejor en términos de rendimiento que requerir que se descargue una hoja de estilo separada en cada visita a la página (incluso si se restringe a las pocas publicaciones/páginas con el shortcode). La única razón para usar hojas de estilo separadas en primer lugar es que pueden ser almacenadas en caché por el navegador. Las hojas de estilo dinámicas no se pueden almacenar en caché.

Doug

7 sept 2010 20:56:49

¿Sigue siendo esta la forma correcta de hacer las cosas?

Dave Kiss

21 may 2013 17:26:11

Así es como suelo hacerlo:

function build_stylesheet_url() {
    echo '<link rel="stylesheet" href="' . $url . 'stylesheetname.css?build=' . date( "Ymd", strtotime( '-24 days' ) ) . '" type="text/css" media="screen" />';
}

function build_stylesheet_content() {
    if( isset( $_GET['build'] ) && addslashes( $_GET['build'] ) == date( "Ymd", strtotime( '-24 days' ) ) ) {
        header("Content-type: text/css");
        echo "/* Algo de contenido */";
        define( 'DONOTCACHEPAGE', 1 ); // evitar que wp-super-cache guarde en caché esta página.
        die();
    }
}

add_action( 'init', 'build_stylesheet_content' );
add_action( 'wp_head', 'build_stylesheet_url' );

sorich87

7.96K

7 sept 2010 10:55:17

He tenido dificultades con todas las recomendaciones de este tipo - quizás soy un poco lento, o tal vez los colaboradores han perdido el toque común.

Finalmente opté por codificar esto en el archivo php del plugin:-

echo "<link href='http://www.brittany-gite-holidays.co.uk/wp-content/plugins/flexavailability/css/css.css' type='text/css' rel='stylesheet' />";
echo "<link href='http://www.brittany-gite-holidays.co.uk/wp-content/plugins/flexavailability/css/public.css' rel='stylesheet' type='text/css'/>";

Parece funcionar. Solo se carga en aquellas páginas que usan el plugin. Se carga después de la etiqueta h1, lo cual me parece bien. No veo cómo podría ser más eficiente o más claro.

...pero quizás esté equivocado - ya dije que soy un poco lento.

chazza

11

18 ene 2013 17:47:39

Comentarios

Solo debes cargar elementos <link> en el encabezado (head) de la página

shea

18 ene 2013 22:37:04

Sí. Eso sería porque tu CSS está diseñado para afectar todo desde la parte superior de la página hacia abajo. Estoy feliz de afectar solo lo que viene después de la etiqueta h1. No pude hacer funcionar ninguno de los ejemplos (creo que pueden estar mal explicados). Pruébalo tú mismo en algún fragmento de HTML de prueba. Si estoy equivocado, dime :)

chazza

19 ene 2013 20:56:00

@chazza Esa no es la única razón. Cuando un navegador detecta estilos después de que se ha escrito la etiqueta body, detiene lo que sea que esté haciendo hasta que ese estilo se cargue y aplique, lo cual es malo para el rendimiento y provoca reflows de pantalla y flashes de texto sin estilo.

Sin embargo, si realmente no importa, incluye esos archivos CSS como dijiste. Yo lo hago todo el tiempo, y al final del día está bien. No es óptimo, pero está bien.

Dan Gayle

1 feb 2016 21:40:02

Actualización desde WordPress 3.3

Existe una función llamada wp_add_inline_style que puede utilizarse para añadir estilos dinámicamente basados en opciones del tema/plugin. Esto puede usarse para añadir un pequeño archivo CSS en el head que debería ser rápido y eficiente.

<?php
function myprefix_scripts() {

    wp_enqueue_style('name-of-style-css', plugin_dir_path(__FILE__) . '/css/ccsfilename.css');

    $css = get_option( 'loader_css', 'css por defecto va aquí cuando no hay valor' );

    //o por ejemplo
    $color = get_option( 'custom_plugin_color', 'red' ); //red es el valor por defecto si no está establecido
    $css = ".mycolor{
                background: {$color};
           }";

    wp_add_inline_style('name-of-style-css', $css);

}

add_action( 'wp_enqueue_scripts', 'myprefix_scripts' );

Lyle Bennett

73

19 jul 2019 13:21:00

Doug 1.05K · Accepted Answer · 2010-09-07T17:46:01Z

Utiliza wp_register_style y wp_enqueue_style para añadir la hoja de estilos. NO simplemente añadas un enlace a la hoja de estilos en wp_head. Encolar estilos permite que otros plugins o temas modifiquen la hoja de estilos si es necesario.

Tu hoja de estilos puede ser un archivo .php:

wp_register_style('myStyleSheet', 'my-stylesheet.php');
wp_enqueue_style( 'myStyleSheet');

my-stylesheet.php se vería así:

<?php
// Vamos a generar CSS
header('Content-type: text/css');

include('my-plugin-data.php');    
?>

body {
  background: <?php echo $my_background_variable; ?>;
  font-size: <?php echo $my_font_size; ?>;
}

Doug

1.05K

7 sept 2010 17:46:01