pengembangan-web-mp-pd.com

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?

plugin-developmentcssoptions
25
Chris_O

Gunakan wp_register_style dan wp_enqueue_style untuk 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; ?>;
}
27
Doug

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

Jika slider Anda hanya akan berada di satu halaman, dan Anda ingin style 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
10
Dan Gayle

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

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.

1
chazza