it-swarm-ko.tech

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

최근에 단축키를 사용하여 모든 게시물이나 페이지에 jQuery 슬라이더를 추가하는 플러그인, WP Coda Slider 가 출시되었습니다. 다음 버전에서 옵션 페이지를 추가하고 일부 CSS 옵션을 포함하고 싶지만 플러그인이 스타일 선택을 인라인 CSS로 추가하는 것을 원하지 않습니다. CSS 파일을 호출 할 때 선택 사항이 동적으로 CSS 파일에 추가되기를 원합니다.

나는 또한 보안 문제를 위해 파일에 fopen을 쓰거나 쓰는 것을 피하고 싶다.

이처럼 쉽게 달성 할 수있는 것입니까, 아니면 스타일 선택을 페이지에 직접 추가하는 것이 더 좋을까요?

25
Chris_O

스타일 시트를 추가하려면 wp_register_stylewp_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; ?>;
}
27
Doug

CSS 파일을 동적으로 빌드 한 다음로드하면 특히 CSS에 WP를 통해 처리 할 변수가있는 경우 CSS 파일을 추가 할 때 매우 낮은 대역폭 거래가 발생하는 경우 큰 성능 부담이 추가됩니다. 한 페이지로드에 대해 두 개의 서로 다른 파일이 생성되므로 WP가 두 번 시작되고 모든 DB 쿼리가 두 번 실행되므로 큰 혼란이 있습니다.

슬라이더가 한 페이지에만있을 경우 스타일을 동적으로 설정하려면 가장 좋은 방법은 헤더에 스타일 블록을 추가하는 것입니다.

실적 순 :

  1. 동적으로 생성 된 헤더의 작은 스타일 블록 추가 - 매우 빠름
  2. Wp_enqueue_style을 통해 비 동적 스타일 시트 추가 - 중간
  3. Wp_enqueue_style을 통해 동적 스타일 시트 추가 - 매우 느림
10
Dan Gayle

이것은 내가 보통 그렇게하는 방법이다.

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

나는이 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 태그 다음에로드됩니다. 나는 그것이 더 효율적이거나 더 명확 할 수있는 방법을 볼 수 없다.

....하지만 아마도 나는 틀렸어. 나는 조금 두껍다고 했어.

1
chazza

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' );
0
Lyle Bennett