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


26

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?


@ Chris_O : Saya telah memikirkan hal yang persis sama. Yang saya inginkan adalah cara untuk memanggil wp_enqueue_style()(dan wp_enqueue_script()) dengan nama fungsi alih-alih nama file dan membuat fungsi saya menghasilkan CSS (atau JS) tetapi masih memilikinya akhirnya dimasukkan melalui stylesheet yang ditautkan. Sejauh yang saya tahu ini tidak mungkin dengan wp_equeue_*()fungsi. Mungkin kita harus menyerahkan tiket trac?
MikeSchinkel

@ MikeSchinkel: Itu akan menjadi cara yang sangat logis untuk menggunakan fungsi wp_enqueue. Saya akan menambahkan dukungan untuk tiket itu.
Chris_O

@Chris_O: Saya baru saja melihat jawaban @ Doug; Saya membuat asumsi buruk Anda sudah tahu itu. Seandainya saya menyadari bahwa bukan itu masalahnya, saya akan mengarahkan Anda ke sini: wordpress.stackexchange.com/questions/556/#562
MikeSchinkel

@ MikeSinkink saya tahu tentang wp_register dan wp_enqueue. Saya mencari cara untuk membangun style sheet berdasarkan nilai-nilai dari halaman opsi plugin.
Chris_O

@ Chris_O : Ah. Saya suka menganggap diri saya sebagai seseorang yang masih bisa melihat apa yang orang lain lewatkan dalam suatu solusi bahkan setelah saya mempelajari solusinya (yaitu kebanyakan pakar bukanlah guru yang baik dan meskipun saya bukan ahli terbaik, saya umumnya guru yang baik. ) OTOH, ini salah satu yang saya lewatkan, maaf. :)
MikeSchinkel

Jawaban:


27

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

3
Selain itu - karena nilai-nilai hanya berubah ketika nilai-nilai pada halaman opsi diubah - Anda dapat menghasilkan file CSS di simpan. Anda dapat menyimpan file CSS di direktori plugin juga, jadi ini sedikit lebih performant untuk menjalankan file PHP pada setiap permintaan CSS dengan menyertakan dll.
hakre

1
Terima kasih! bekerja dengan baik. Tapi saya mendapatkan kesalahan fatal get_option () ... tidak terdefinisi. Kemudian saya memuat file wp-config.php dan kemudian memperbaiki masalahnya.
Sumith Harshan

Sumith, dapatkah Anda menjelaskan bagaimana Anda menggunakan get_option di dalam file CSS khusus? Terimakasih banyak!
Antonio Petricca

10

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

@ Dan-gayle Poin yang sangat bagus. Plugin dapat digunakan di lebih dari satu halaman dan beberapa pengguna menggunakannya pada 2 atau 3 halaman. Itu hanya memberikan lembar gaya statis saat ini dan js pada halaman yang memiliki kode pendek.
Chris_O

Saya setuju dengan Dan Gayle, meskipun Anda memilih jawaban saya. Menambahkan blok CSS kecil ke wp_head akan jauh lebih baik dari segi kinerja daripada mengharuskan stylesheet terpisah diunduh pada setiap tampilan halaman (bahkan jika terbatas pada beberapa posting / halaman dengan kode pendek). Satu-satunya alasan untuk menggunakan stylesheet terpisah di tempat pertama adalah bahwa mereka dapat di- cache oleh browser . Lembar gaya dinamis tidak bisa di-cache.
Doug

2
Apakah ini masih cara yang tepat untuk melakukan sesuatu?
Dave Kiss

2

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

1

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.


Anda hanya boleh memuat <link>elemen di kepala halaman
shea

Yerss. Itu karena css Anda ingin memengaruhi segalanya dari bagian atas halaman ke bawah. Saya senang hanya mempengaruhi apa yang muncul setelah tag h1. Saya tidak dapat membuat salah satu contoh berfungsi (saya pikir mereka mungkin tidak dijelaskan dengan baik). Coba sendiri pada beberapa bagian html pengujian. Jika saya salah beri tahu saya :)
chazza

@ chazza Itu bukan satu-satunya alasan. Ketika peramban mendeteksi gaya apa pun setelah tag tubuh ditulis, itu berhenti apa pun yang dilakukannya sampai gaya itu dimuat dan diterapkan, yang buruk untuk kinerja dan mengarah ke reflow layar dan kilatan teks tanpa gaya. Namun, jika itu tidak terlalu penting, masukkan file css itu seperti yang Anda katakan. Saya melakukannya sepanjang waktu, dan pada akhirnya tidak apa-apa. Tidak optimal, tapi baik-baik saja.
Dan Gayle

0

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' );
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.