Jak dodać opcje CSS do mojej wtyczki bez używania stylów wbudowanych?

Niedawno wydałem wtyczkę, WP Coda Slider , która używa skrótów, aby dodać suwak jQuery do dowolnego posta lub strony. Dodaję stronę opcji w następnej wersji i chciałbym uwzględnić niektóre opcje CSS, ale nie chcę, aby wtyczka dodawała opcje stylu jako wbudowany CSS. Chcę, aby wybory były dynamicznie dodawane do pliku CSS po jego wywołaniu.

Chciałbym również unikać używania fopen lub pisania do pliku ze względów bezpieczeństwa.

Czy jest coś takiego łatwego do osiągnięcia, czy lepiej byłoby po prostu dodać opcje stylu bezpośrednio na stronie?

Użyj wp_register_stylei, wp_enqueue_styleaby dodać arkusz stylów. NIE dodawaj po prostu linku do arkusza stylów wp_head. Style kolejkowania pozwalają innym wtyczkom lub motywom modyfikować arkusz stylów, jeśli to konieczne.

Twój arkusz stylów może być plikiem .php:

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

my-stylesheet.php wyglądałby tak:

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

Dynamiczne budowanie pliku CSS, a następnie ładowanie go, OGROMNIE obciąża wydajność, co powinno być bardzo niską przepustowością dodawania pliku CSS, zwłaszcza jeśli w CSS są zmienne, które będą przetwarzane przez WP. Ponieważ są tworzone dwa różne pliki dla jednego ładowania strony, WP uruchamia się dwukrotnie i uruchamia wszystkie zapytania DB dwa razy, i to jest wielki bałagan.

Jeśli suwak ma znajdować się tylko na jednej stronie, a chcesz, aby style były ustawione dynamicznie, najlepszym rozwiązaniem jest dodanie bloku stylu do nagłówka.

W kolejności wykonania:

1. Dodaj mały blok stylów w nagłówku, dynamicznie tworzony - Bardzo szybko
2. Dodaj niedynamiczny arkusz stylów przez wp_enqueue_style - Medium
3. Dodaj dynamiczny arkusz stylów przez wp_enqueue_style - Very Slow

Tak zazwyczaj to robię:

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

Miałem trudności ze wszystkimi zaleceniami tego rodzaju - może jestem trochę gruby, a może autorzy stracili wspólny charakter.

Postanowiłem zakodować to w pliku php wtyczki: -

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'/>";

Wydaje się, że działa. Ładuje się tylko na tych stronach, które korzystają z wtyczki. Ładuje się po tagu h1, który jest dla mnie w porządku. Nie widzę, jak mogłoby być bardziej wydajne lub bardziej jasne.

.... ale może się mylę - powiedziałem, że jestem trochę gruby.

Aktualizacja od Wordpress 3.3

Istnieje funkcja o nazwie wp_add_inline_style, której można używać do dynamicznego dodawania stylów na podstawie opcji motywu / wtyczki. Można tego użyć do dodania małego pliku css w głowie, który powinien być szybki i wydajny.

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