Come faccio ad aggiungere opzioni CSS al mio plugin senza usare gli stili in linea?

Di recente ho rilasciato un plugin, WP Coda Slider , che utilizza codici brevi per aggiungere un cursore jQuery a qualsiasi post o pagina. Sto aggiungendo una pagina di opzioni nella prossima versione e vorrei includere alcune opzioni CSS ma non voglio che il plugin aggiunga le scelte di stile come CSS incorporato. Voglio che le scelte vengano aggiunte dinamicamente al file CSS quando viene chiamato.

Vorrei anche evitare di usare fopen o scrivere su un file per problemi di sicurezza.

Qualcosa del genere è facile da realizzare o starei meglio aggiungendo le scelte di stile direttamente alla pagina?

Utilizzare wp_register_stylee wp_enqueue_styleper aggiungere il foglio di stile. NON aggiungere semplicemente un collegamento al foglio di stile a wp_head. Gli stili di accodamento consentono ad altri plugin o temi di modificare il foglio di stile, se necessario.

Il foglio di stile può essere un file .php:

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

my-stylesheet.php sarebbe simile a questo:

<?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; ?>;
}

La creazione dinamica di un file CSS e il suo caricamento aggiunge un enorme onere di prestazioni a quella che dovrebbe essere una quantità di larghezza di banda molto bassa di aggiunta di un file CSS, specialmente se ci sono variabili nel CSS che verranno elaborate tramite WP. Poiché sono stati creati due file diversi per un caricamento di pagina, WP si avvia due volte ed esegue tutte le query DB due volte, ed è un gran casino.

Se il tuo dispositivo di scorrimento si troverà su una sola pagina e desideri che gli stili siano impostati in modo dinamico, la soluzione migliore è aggiungere un blocco di stile all'intestazione.

In ordine di prestazione:

1. Aggiungi un piccolo blocco di stili nell'intestazione, creato dinamicamente - Molto velocemente
2. Aggiungi un foglio di stile non dinamico tramite wp_enqueue_style - Medio
3. Aggiungi un foglio di stile dinamico tramite wp_enqueue_style - Molto lento

Ecco come lo faccio di solito:

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' );

Ho avuto difficoltà con tutte le raccomandazioni di questo genere - forse sono un po 'spessa, o forse i collaboratori hanno perso il tocco comune.

Ho deciso di codificare questo nel file php 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'/>";

Sembra funzionare Si carica solo su quelle pagine che utilizzano il plugin. Si carica dopo il tag h1 che va bene per me. Non riesco a vedere come potrebbe essere più efficiente o più chiaro.

.... ma forse mi sbaglio - ho detto che ero un po 'spessa.

Aggiornamento da Wordpress 3.3

Esiste una funzione chiamata wp_add_inline_style che può essere utilizzata per aggiungere dinamicamente stili in base alle opzioni di temi / plugin. Questo può essere usato per aggiungere un piccolo file CSS nella testa che dovrebbe essere veloce ed efficiente.

<?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' );