it-swarm-es.com

¿Cómo agrego opciones de CSS a mi complemento sin usar estilos en línea?

Recientemente lancé un complemento, WP Coda Slider , que usa códigos cortos para agregar un control deslizante jQuery a cualquier publicación o página. Estoy agregando una página de opciones en la próxima versión y me gustaría incluir algunas opciones de CSS, pero no quiero que el complemento agregue las opciones de estilo como CSS en línea. Quiero que las opciones se agreguen dinámicamente al archivo CSS cuando se llame.

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 estaría mejor simplemente agregando las opciones de estilo directamente a la página?

25
Chris_O

Use wp_register_style y wp_enqueue_style para agregar la hoja de estilo. NO simplemente agregue un enlace de hoja de estilo a wp_head. Los estilos de colas permiten que otros complementos o temas modifiquen la hoja de estilos si es necesario.

Su hoja de estilo puede ser un archivo .php:

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

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

<?php
// We'll be outputting 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; ?>;
}
27
Doug

Crear dinámicamente un archivo CSS y luego cargarlo agrega una carga de rendimiento ENORME a lo que debería ser una oferta de ancho de banda muy bajo al agregar un archivo CSS, especialmente si hay variables en el CSS que se procesarán a través de WP. Debido a que se están creando dos archivos diferentes para una carga de página, WP se inicia dos veces y ejecuta todas las consultas de base de datos dos veces, y es un gran lío.

Si su control deslizante solo estará en una página y desea que los estilos se configuren dinámicamente, entonces su mejor opción es agregar un bloque de estilo al encabezado.

En orden de rendimiento:

  1. Agregue un pequeño bloque de estilos en el encabezado, creado dinámicamente - Muy rápido
  2. Agregar una hoja de estilo no dinámica a través de wp_enqueue_style - Medio
  3. Agregar una hoja de estilo dinámica a través de wp_enqueue_style - Muy lento
10
Dan Gayle

Así es como normalmente lo hago:

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 "/* Something */";
        define( 'DONOTCACHEPAGE', 1 ); // don't let wp-super-cache cache this page.
        die();
    }
}

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

He tenido dificultades con todas las recomendaciones de este tipo, tal vez sea un poco espeso, o tal vez los colaboradores hayan perdido el toque común.

Me decidí a codificar esto en el archivo php de plug-in: -

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 que está bien por mí. No puedo ver cómo podría ser más eficiente o más claro.

.... pero tal vez me equivoque, dije que estaba un poco gorda.

1
chazza

Actualización desde Wordpress 3.3

Hay una función llamada wp_add_inline_style que se puede usar para agregar estilos dinámicamente en función de las opciones de tema/complemento. Esto se puede usar para agregar un pequeño archivo css en la cabeza 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', 'default css goes here for when there is no value' );

    //or for Example
    $color = get_option( 'custom_plugin_color', 'red' ); //red is default value if value is not set
    $css = ".mycolor{
                background: {$color};
           }";

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

}

add_action( 'wp_enqueue_scripts', 'myprefix_scripts' );
0
Lyle Bennett