Bagaimana cara menambahkan opsi CSS ke plugin saya tanpa menggunakan gaya sebaris?

Saya baru-baru ini merilis sebuah plugin, WP Coda Slider , yang menggunakan kode pendek untuk menambahkan slider jQuery ke setiap posting atau halaman. Saya menambahkan halaman opsi di versi berikutnya dan saya ingin memasukkan beberapa opsi CSS tetapi saya tidak ingin plugin menambahkan pilihan gaya sebagai CSS inline. Saya ingin pilihan ditambahkan secara dinamis ke file CSS ketika dipanggil.

Saya juga ingin menghindari menggunakan fopen atau menulis ke file untuk masalah keamanan.

Apakah hal seperti ini mudah dicapai atau lebih baik saya menambahkan pilihan gaya langsung ke halaman?

Gunakan wp_register_styledan wp_enqueue_styleuntuk menambahkan stylesheet. JANGAN hanya menambahkan tautan stylesheet ke wp_head. Gaya antrian memungkinkan plugin atau tema lain untuk memodifikasi lembar gaya jika perlu.

Lembar gaya Anda dapat berupa file .php:

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

my-stylesheet.php akan terlihat seperti ini:

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

Secara dinamis membangun file CSS dan kemudian memuatnya menambah beban kinerja BESAR untuk apa yang seharusnya menjadi bandwidth yang sangat rendah untuk menambahkan file CSS, terutama jika ada variabel dalam CSS yang akan diproses melalui WP. Karena ini adalah dua file berbeda yang dibuat untuk satu memuat halaman, WP memulai dua kali dan menjalankan semua permintaan DB dua kali, dan itu adalah kekacauan besar.

Jika slider Anda hanya akan berada di satu halaman, dan Anda ingin gaya diatur secara dinamis, maka taruhan terbaik Anda adalah menambahkan blok gaya ke header.

Dalam urutan kinerja:

1. Tambahkan blok kecil gaya di header, dibuat secara dinamis - Sangat cepat
2. Tambahkan lembar gaya non-dinamis melalui wp_enqueue_style - Medium
3. Tambahkan stylesheet dinamis melalui wp_enqueue_style - Sangat Lambat

Beginilah biasanya saya melakukannya:

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

Saya mengalami kesulitan dengan semua rekomendasi sejenisnya - mungkin saya agak tebal, atau mungkin kontributor telah kehilangan sentuhan umum.

Saya memutuskan untuk mengkode ini di 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'/>";

Tampaknya berhasil. Itu hanya memuat pada halaman-halaman yang menggunakan plugin. Itu dimuat setelah tag h1 yang baik-baik saja oleh saya. Saya tidak bisa melihat bagaimana ini bisa lebih efisien atau lebih jelas.

.... tapi mungkin saya salah - saya memang mengatakan saya agak tebal.

Pembaruan sejak Wordpress 3.3

Ada fungsi yang disebut wp_add_inline_style yang dapat digunakan untuk menambahkan gaya secara dinamis berdasarkan opsi tema / plugin. Ini dapat digunakan untuk menambahkan file css kecil di kepala yang harus cepat dan efisien.

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