5

動的な WordPress プラグイン用の CSS が必要で、最善または最も一般的な方法を知りたいです。現在、方法 2 を使用していますが、IE9 に問題があります。そのため、動的 CSS のより良い解決策があるのではないかと考え、これらを思いつきました。

wp_head1.)フック付きのスタイル ブロックを含める

プロ：

  • 追加のサーバー要求なし

反対:

  • 各ページのサイズに応じて多くのデータ
  • あまりきれいではない
  • キャッシュ不可

2.)admin_url('admin-ajax.php?action=my_css')リンクタグでの使用

プロ：

  • オンザフライで CSS を作成 (および Transient API でキャッシュ)
  • 用途wp_enqueue_style
  • 期限切れヘッダーでキャッシュ可能

コントラ

  • ロードする必要がありますwp-load.php
  • IE9 では動作しません (なぜですか? )

3.) 変更時に CSS ファイルを作成する

プロ

  • 速い
  • WordPress 全体をロードする必要はありません ( wp-load.php)

コントラ

  • あまり動的ではない
  • 特定のフォルダの書き込みルールが必要
  • スクリプトの問題またはアクセス許可の欠落の原因が古くなっている、または欠落している可能性があります

方法 1 は好きではありません。すべてのページでスタイルが必要になるわけではなく、方法 2 は IE9 では機能しません。

3番目のものを使用する必要がありますか、それとも欠点がありますか?

前もって感謝します！

4

2 に答える 2

1

PHP に永続キャッシュが組み込まれていないため、ある程度の制限があります。memcached、 、さらにはファイルへの書き込みアクセス権があることを保証できる場合はAPC、これらの方法のいずれかを使用して CSS をキャッシュし、キーを使用して取得できます。そのためにを使用する必要がwp-load.phpないため、すべてのプラグインをロードする必要がある場合などよりもパフォーマンスが向上します。

とはいえ、動的 CSSは、Microsoft の記事MIME-Handling Change: text/cssに従って、CSS を出力する前に設定すると、IE9 で機能するはずです。header('Content-type: text/css');

とはいえ、#1 と #2 のハイブリッド アプローチを試すこともできます。ファイルの書き込み権限があることを保証できれば、#3 は無効のように思えます。実装するにuser-agentは、要求しているブラウザーを検出し、CSS を出力する単一の関数をセットアップするだけです。IE9 でない場合は、 を使用してスタイルシートをインクルードadmin_url('admin-ajax.php?action=my_css')し、フックされた関数から出力を呼び出すことができます。IE9 の場合は、フックから への関数を呼び出すことにより、スタイルシートをヘッダーにインクルードできますwp_head。このようにして、ほとんどのクライアントの CSS をキャッシュし、IE で回避することができます。ページ サイズなどに関する短所は有効ですが、それは IE9 です。

クライアントごとに CSS をキャッシュできる限り、通常wp-load.php、パフォーマンスに大きな影響を与えない余分なリクエストが 1 つだけ見られます。

を使用してIE9を確認できますif (false!==strpos('MSIE 9;', $_SERVER['HTTP_USER_AGENT']))

于 2012-10-22T01:47:00.280 に答える
1

動的コンテンツから CSS を生成できるwp-dynamic-cssというライブラリを作成しました。

このライブラリを使用すると、特別な構文を使用して CSS ファイル内の変数を表すことができます。

これがどのように使用できるかです：

// 1. Load the library
require_once 'wp-dynamic-css/bootstrap.php';

// 2. Enqueue the stylesheet (using an absolute path, not URL)
wp_dynamic_css_enqueue( 'my-dynamic-style', 'path/to/my-style.css' );

// 3. Set the callback function (used to convert variables to actual values)
function my_dynamic_css_callback( $var_name )
{
   return get_theme_mod($var_name);
}
wp_dynamic_css_set_callback( 'my-dynamic-style', 'my_dynamic_css_callback' );

my-style.cssここで、次のコードで呼び出されるファイルがあるとします。

body {
   background-color: $body_bg_color;
}

たとえば、呼び出しget_theme_mod('body_bg_color')が value を返す場合#fff、次のmy-style.cssようにコンパイルされます。

body {
   background-color: #fff;
}
于 2016-03-20T05:56:56.310 に答える