web-dev-qa-db-ja.com

インラインスタイルを使用せずにCSSオプションをプラグインに追加する方法を教えてください。

私は最近、プラグイン WP Coda Slider をリリースしました。これはショートコードを使用して、任意の投稿またはページにjQueryスライダーを追加します。私は次のバージョンでオプションページを追加しています、そして、私はいくつかのCSSオプションを含めたいのですが、インラインCSSとしてスタイル選択を追加したくありません。 CSSファイルが呼び出されたときに選択肢を動的に追加する必要があります。

セキュリティ問題のためにfopenを使用したりファイルに書き込んだりすることも避けたいと思います。

このようなことを達成するのは簡単ですか、それとも単にスタイルの選択をページに直接追加するほうがよいでしょうか。

plugin-developmentcssoptions
25
Chris_O

スタイルシートを追加するには、 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; ?>;
}
27
Doug

CSSファイルを動的に構築してからロードすると、特にCSSにWPを介して処理される変数がある場合、非常に低い帯域幅でCSSファイルを追加することに大きな負荷がかかります。 1ページの読み込みで2つの異なるファイルが作成されるため、WPは2回起動し、すべてのDBクエリを2回実行します。これは大変な作業です。

スライダーを1ページだけに配置し、スタイルを動的に設定したい場合は、ヘッダーにスタイルブロックを追加するのが最善の策です。

パフォーマンスの順に：

  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