Làm cách nào để thêm tùy chọn CSS vào plugin mà không sử dụng kiểu nội tuyến?

Gần đây tôi đã phát hành một plugin, WP Coda Slider , sử dụng mã ngắn để thêm thanh trượt jQuery vào bất kỳ bài đăng hoặc trang nào. Tôi đang thêm một trang tùy chọn trong phiên bản tiếp theo và tôi muốn bao gồm một số tùy chọn CSS nhưng tôi không muốn plugin thêm các lựa chọn kiểu như CSS nội tuyến. Tôi muốn các lựa chọn được tự động thêm vào tệp CSS khi nó được gọi.

Tôi cũng muốn tránh sử dụng fopen hoặc ghi vào một tệp cho các vấn đề bảo mật.

Là một cái gì đó như thế này dễ thực hiện hay tôi sẽ tốt hơn nếu chỉ thêm các lựa chọn kiểu trực tiếp vào trang?

Sử dụng wp_register_stylevà wp_enqueue_styleđể thêm biểu định kiểu. KHÔNG chỉ cần thêm một liên kết biểu định kiểu vào wp_head. Kiểu xếp hàng cho phép các plugin hoặc chủ đề khác sửa đổi biểu định kiểu nếu cần.

Biểu định kiểu của bạn có thể là tệp .php:

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

my-Stylesheet.php sẽ như thế này:

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

Tự động xây dựng một tệp CSS và sau đó tải nó thêm gánh nặng hiệu năng HUGE cho một thỏa thuận băng thông rất thấp khi thêm tệp CSS, đặc biệt là nếu có các biến trong CSS sẽ được xử lý thông qua WP. Vì đó là hai tệp khác nhau được tạo cho một lần tải trang, WP khởi động hai lần và chạy tất cả các truy vấn DB hai lần và đó là một mớ hỗn độn lớn.

Nếu thanh trượt của bạn chỉ xuất hiện trên một trang và bạn muốn các kiểu được đặt tự động, thì cách tốt nhất của bạn là thêm một khối kiểu vào tiêu đề.

Theo thứ tự thực hiện:

1. Thêm một khối nhỏ các kiểu trong tiêu đề, được tạo động - Rất nhanh
2. Thêm biểu định kiểu không động qua wp_enqueue_style - Trung bình
3. Thêm biểu định kiểu động qua wp_enqueue_style - Rất chậm

Đây là cách tôi thường làm:

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

Tôi đã gặp khó khăn với tất cả các khuyến nghị của ilk này - có thể tôi hơi dày, hoặc có thể những người đóng góp đã mất liên lạc chung.

Tôi đã giải quyết việc mã hóa này trong tệp php của trình cắm thêm: -

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

Nó dường như làm việc. Nó chỉ tải trên các trang sử dụng plugin. Nó tải sau thẻ h1 là tốt đối với tôi. Tôi không thể thấy làm thế nào nó có thể hiệu quả hơn hoặc rõ ràng hơn.

.... nhưng có lẽ tôi đã sai - tôi đã nói rằng tôi hơi dày.

Cập nhật kể từ Wordpress 3.3

Có một chức năng gọi là wp_add_inline_style có thể được sử dụng để tự động thêm kiểu dựa trên các tùy chọn chủ đề / plugin. Điều này có thể được sử dụng để thêm một tập tin css nhỏ vào đầu nên nhanh chóng và hiệu quả.

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