Як додати параметри CSS до свого плагіна без використання вбудованих стилів?

Нещодавно я випустив плагін WP Coda Slider , який використовує короткі коди, щоб додати повзунок jQuery до будь-якої публікації чи сторінки. Я додаю сторінку параметрів у наступній версії, і я хотів би включити деякі параметри CSS, але я не хочу, щоб плагін додавав вибір стилів як вбудований CSS. Я хочу, щоб вибір був динамічно доданий у файл CSS, коли він викликається.

Я також хотів би уникати використання fopen або запису у файл для проблем безпеки.

Чи щось подібне легко здійснити чи мені краще буде просто додати вибір стилю безпосередньо на сторінку?

Використовуйте wp_register_styleта wp_enqueue_styleдодайте таблицю стилів. НЕ просто додайте посилання на таблицю стилів wp_head. Стилі черги дозволяють іншим плагінам або темам змінювати таблицю стилів, якщо це необхідно.

Ваш таблиця стилів може бути .php файлом:

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

my-stylesheet.php виглядатиме так:

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

Динамічне складання CSS-файлу та завантаження його додає великого навантаження на ефективність до того, що має бути дуже низькою пропускною здатністю додавання CSS-файлу, особливо якщо в CSS є змінні, які підлягають обробці через WP. Оскільки це два різні файли, створені для завантаження однієї сторінки, WP запускається двічі і запускає всі запити БД двічі, і це велика безлад.

Якщо ваш слайдер буде розміщений лише на одній сторінці, і ви хочете, щоб стилі були задані динамічно, то найкраще поставити блок заголовка стилю до заголовка.

У порядку виконання:

1. Додайте невеликий блок стилів у заголовок, динамічно створений - Дуже швидко
2. Додайте нединамічний таблицю стилів через wp_enqueue_style - Середній
3. Додайте динамічну таблицю стилів через wp_enqueue_style - Дуже повільно

Ось як це я зазвичай роблю:

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

У мене виникли труднощі з усіма рекомендаціями цієї лайки - можливо, я дещо товстий, а може співавтори втратили загальну справу.

Я зупинився на кодуванні цього в PHP-плагіні:

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

Здається, працює. Він завантажується лише на ті сторінки, які використовують плагін. Він завантажується після тегу h1, який я добре чую. Я не бачу, як це може бути ефективніше чи зрозуміліше.

.... але, можливо, я помиляюся - я сказав, що я трохи товстий.

Оновлення після Wordpress 3.3

Існує функція під назвою wp_add_inline_style, яку можна використовувати для динамічного додавання стилів на основі параметрів теми / плагіна. Це можна використовувати для додавання невеликого файлу css у голові, який повинен бути швидким та ефективним.

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