Eklenti satır içi stilleri kullanmadan CSS seçeneklerini nasıl eklerim?

Geçenlerde bir eklenti, WP Coda Slider'ı yayımladım. herhangi bir yazıya veya sayfaya bir jQuery sürgüsü eklemek için kısa kodlar kullanan . Bir sonraki sürümde bir seçenekler sayfası ekliyorum ve bazı CSS seçeneklerini eklemek istiyorum, ancak eklentinin stil seçeneklerini satır içi CSS olarak eklemesini istemiyorum. Seçimlerin çağrıldığında dinamik olarak CSS dosyasına eklenmesini istiyorum.

Ayrıca güvenlik sorunları için fopen kullanmak veya bir dosyaya yazmaktan da kaçınmak istiyorum.

Böyle bir şeyin başarılması kolay mı yoksa stil seçimlerini doğrudan sayfaya eklemekten daha iyi olur muyum?

Stil sayfasını eklemek için wp_register_styleve wp_enqueue_styledüğmelerini kullanın . Sadece bir stil sayfası bağlantısı eklemeyin wp_head. Kuyruk stilleri, diğer eklentilerin veya temaların gerekirse stil sayfasını değiştirmelerini sağlar.

Stil sayfanız bir .php dosyası olabilir:

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

my-stylesheet.php şöyle görünür:

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

Dinamik olarak bir CSS dosyası oluşturmak ve daha sonra yüklemek, özellikle CSS'de WP üzerinden işlenecek değişkenler varsa, bir CSS dosyası eklemenin çok düşük bir bant genişliği anlaşmasının ne olması gerektiğine BÜYÜK bir performans yükü ekler. Bir sayfa yüklemesi için oluşturulan iki farklı dosya olduğundan, WP iki kez başlar ve tüm DB sorgularını iki kez çalıştırır ve bu büyük bir karışıklıktır.

Kaydırıcınız yalnızca bir sayfada olacaksa ve stillerin dinamik olarak ayarlanmasını istiyorsanız, en iyi seçeneğiniz başlığa bir stil bloğu eklemektir.

Performans sırasına göre:

1. Başlığa, dinamik olarak oluşturulmuş küçük stiller bloğu ekleyin - Çok hızlı
2. Wp_enqueue_style aracılığıyla dinamik olmayan bir stil sayfası ekleme - Orta
3. Wp_enqueue_style ile dinamik bir stil sayfası ekleme - Çok Yavaş

Genelde böyle yaparı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' );

Bu ilkin tüm önerileri konusunda zorluk yaşadım - belki biraz kalınım ya da belki katılımcılar ortak dokunuşunu kaybetti.

Bunu eklenti php dosyasında kodlamaya karar verdim: -

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

İşe benziyor. Yalnızca eklentiyi kullanan sayfalara yüklenir. Benim için iyi olan h1 etiketinden sonra yükler. Nasıl daha verimli veya daha net olabileceğini göremiyorum.

.... ama belki de yanılıyorum - biraz kalın olduğumu söyledim.

Wordpress 3.3'ten beri güncelleme

Tema / eklenti seçeneklerine göre stilleri dinamik olarak eklemek için kullanılabilecek wp_add_inline_style adlı bir fonksiyon var . Bu, kafasına hızlı ve verimli olması gereken küçük bir css dosyası eklemek için kullanılabilir.

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