Comment ajouter des options CSS à mon plugin sans utiliser de styles en ligne?

J'ai récemment publié un plugin, WP Coda Slider , qui utilise des shortcodes pour ajouter un curseur jQuery à n'importe quelle publication ou page. J'ajoute une page d'options dans la prochaine version et je voudrais inclure quelques options CSS mais je ne veux pas que le plugin ajoute les choix de style en CSS en ligne. Je veux que les choix soient ajoutés dynamiquement au fichier CSS lors de son appel.

Je voudrais également éviter d'utiliser fopen ou d'écrire dans un fichier pour des problèmes de sécurité.

Est-ce que quelque chose comme ça est facile à réaliser ou serais-je mieux de simplement ajouter les choix de style directement à la page?

Utilisez wp_register_styleet wp_enqueue_stylepour ajouter la feuille de style. N'ajoutez PAS simplement un lien vers une feuille de style wp_head. Les styles de file d'attente permettent à d'autres plugins ou thèmes de modifier la feuille de style si nécessaire.

Votre feuille de style peut être un fichier .php:

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

my-stylesheet.php ressemblerait à ceci:

<?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 création dynamique d'un fichier CSS, puis son chargement ajoute une énorme charge de performances à ce qui devrait être une très faible bande passante d'ajout d'un fichier CSS, surtout s'il y a des variables dans le CSS qui vont être traitées via WP. Parce qu'il s'agit de deux fichiers différents en cours de création pour un chargement de page, WP démarre deux fois et exécute toutes les requêtes DB deux fois, et c'est un gros gâchis.

Si votre curseur ne se trouve que sur une seule page et que vous souhaitez que les styles soient définis dynamiquement, alors votre meilleur pari est d'ajouter un bloc de style à l'en-tête.

Par ordre de performance:

1. Ajouter un petit bloc de styles dans l'en-tête, créé dynamiquement - Très rapide
2. Ajouter une feuille de style non dynamique via wp_enqueue_style - Medium
3. Ajouter une feuille de style dynamique via wp_enqueue_style - Très lent

Voici comment je le fais habituellement:

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

J'ai eu du mal avec toutes les recommandations de cet acabit - peut-être que je suis un peu épais, ou peut-être que les contributeurs ont perdu le contact commun.

J'ai décidé de coder cela dans le fichier php du 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'/>";

Cela semble fonctionner. Il ne se charge que sur les pages qui utilisent le plugin. Il se charge après la balise h1, ce qui me convient. Je ne vois pas comment cela pourrait être plus efficace ou plus clair.

.... mais peut-être que je me trompe - j'ai dit que j'étais un peu épais.

Mise à jour depuis Wordpress 3.3

Il existe une fonction appelée wp_add_inline_style qui peut être utilisée pour ajouter dynamiquement des styles en fonction des options de thème / plugin. Cela peut être utilisé pour ajouter un petit fichier CSS dans la tête qui devrait être rapide et efficace.

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