인라인 스타일을 사용하지 않고 플러그인에 CSS 옵션을 추가하려면 어떻게합니까?

최근에 짧은 코드를 사용하여 게시물이나 페이지에 jQuery 슬라이더를 추가 하는 플러그인 WP Coda Slider를 출시했습니다 . 다음 버전에서 옵션 페이지를 추가하고 일부 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에 WP를 통해 처리 될 변수가있는 경우 CSS 파일을 추가하는 매우 낮은 대역폭의 처리량에 막대한 성능 부담이 발생합니다. 한 페이지로드에 대해 두 개의 다른 파일이 생성되므로 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' );

나는이 ilk의 모든 권장 사항에 어려움을 겪었습니다. 어쩌면 조금 두껍거나 공헌자가 공통의 손길을 잃었을 수도 있습니다.

나는 플러그인 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' );