ฉันจะเพิ่มตัวเลือก CSS ในปลั๊กอินของฉันโดยไม่ใช้สไตล์อินไลน์ได้อย่างไร

ฉันเพิ่งเปิดตัวปลั๊กอินWP Coda Sliderที่ใช้รหัสย่อเพื่อเพิ่มตัวเลื่อน jQuery ในโพสต์หรือหน้าใด ๆ ฉันกำลังเพิ่มหน้าตัวเลือกในรุ่นถัดไปและฉันต้องการที่จะรวมบางตัวเลือก CSS แต่ฉันไม่ต้องการให้ปลั๊กอินเพื่อเพิ่มตัวเลือกสไตล์เป็นแบบอินไลน์ CSS ฉันต้องการเพิ่มตัวเลือกในไฟล์ CSS แบบไดนามิกเมื่อเรียกใช้

ฉันต้องการหลีกเลี่ยงการใช้ fopen หรือเขียนลงไฟล์สำหรับปัญหาด้านความปลอดภัย

เป็นเช่นนี้ง่ายต่อการบรรลุหรือฉันจะดีกว่าเพียงแค่เพิ่มตัวเลือกสไตล์โดยตรงกับหน้า?

ใช้wp_register_styleและwp_enqueue_styleเพื่อเพิ่มสไตล์ชีท wp_headไม่เพียงแค่เพิ่มการเชื่อมโยงไปยังสไตล์ชีต สไตล์การจัดคิวช่วยให้ปลั๊กอินหรือธีมอื่นสามารถแก้ไขสไตล์ชีทได้หากจำเป็น

สไตล์ชีทของคุณสามารถเป็นไฟล์. php ได้:

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

my-stylesheet.phpจะมีลักษณะเช่นนี้:

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

การสร้างไฟล์ CSS แบบไดนามิกและจากนั้นการโหลดมันจะเพิ่มภาระประสิทธิภาพการทำงานขนาดใหญ่ให้กับสิ่งที่ควรจะเป็นข้อตกลงแบนด์วิดท์ที่ต่ำมากในการเพิ่มไฟล์ CSS โดยเฉพาะอย่างยิ่งหากมีตัวแปรใน CSS ที่จะประมวลผลผ่าน WP เนื่องจากมันเป็นไฟล์ที่แตกต่างกันสองไฟล์ที่ถูกสร้างขึ้นสำหรับการโหลดหนึ่งหน้า WP เริ่มต้นขึ้นสองครั้งและรันการสืบค้น DB ทั้งหมดสองครั้งและเป็นระเบียบขนาดใหญ่

หากแถบเลื่อนของคุณจะอยู่ในหน้าเดียวเท่านั้นและคุณต้องการให้สไตล์มีการตั้งค่าแบบไดนามิกดังนั้นทางออกที่ดีที่สุดของคุณคือการเพิ่มบล็อกสไตล์ไว้ที่ส่วนหัว

ตามลำดับของประสิทธิภาพ:

1. เพิ่มบล็อกเล็ก ๆ ของสไตล์ในส่วนหัวสร้างแบบไดนามิก - เร็วมาก
2. เพิ่มสไตล์ชีทที่ไม่ใช่ไดนามิกผ่าน wp_enqueue_style - Medium
3. เพิ่มสไตล์ชีทแบบไดนามิกผ่าน wp_enqueue_style - ช้ามาก

นี่คือวิธีที่ฉันมักจะทำ:

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

ฉันมีปัญหากับคำแนะนำทั้งหมดของตระกูลนี้ - บางทีฉันอาจจะค่อนข้างหนาหรือผู้มีส่วนร่วมเสียการสัมผัสทั่วไป

ฉันตัดสินในการเข้ารหัสนี้ในไฟล์ php ปลั๊กอิน: -

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

ดูเหมือนว่าจะทำงาน มันโหลดได้เฉพาะบนหน้าเว็บที่ใช้ปลั๊กอิน มันโหลดหลังจากแท็ก h1 ซึ่งใช้ได้โดยฉัน ฉันไม่เห็นว่ามันจะมีประสิทธิภาพมากขึ้นหรือชัดเจนขึ้นได้อย่างไร

.... แต่บางทีฉันผิดฉันบอกว่าฉันหนาไปหน่อย

อัปเดตตั้งแต่ Wordpress 3.3

มีฟังก์ชันที่เรียกว่าwp_add_inline_styleซึ่งสามารถใช้เพื่อเพิ่มสไตล์แบบไดนามิกโดยยึดตามตัวเลือกธีม / ปลั๊กอิน สามารถใช้เพื่อเพิ่มไฟล์ css ขนาดเล็กในส่วนหัวซึ่งควรรวดเร็วและมีประสิทธิภาพ

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