渡す必要のあるパラメーターの種類に応じて、1つの追加オプション。これを呼び出しましょう（2a）。また、動的に生成されるtext/cssまたはtext/javascriptではなく、を出力するPHPスクリプトを作成text/htmlし、WordPressをロードするのではなく、GETパラメーターを使用して必要なデータを提供することもできます。もちろん、これは、比較的少数の比較的コンパクトなパラメーターを渡す必要がある場合にのみ機能します。したがって、たとえば、投稿のURLまたはファイルまたは類似のディレクトリのみを渡す必要がある場合、次のようなことができます。
header.php内：
<script type="text/javascript" src="<?php print get_stylesheet_directory_uri();
?>/fancy-js.php?foo=bar&url=<?php print urlencode(get_permalink($post->ID)); ?>"></script>
fancy-js.phpで：
<?php
header("Content-type: text/javascript");
?>
foo = <?php print json_encode($_GET['foo']); ?>;
url = <?php print json_encode($_GET['url']); ?>;
等
ただし、これにより、GETパラメーターで直接渡されたデータにのみアクセスできます。渡す必要のあるものの数が比較的少なく、それらの表現が比較的コンパクトな場合にのみ機能します。（基本的に一握りの文字列または数値-ユーザー名、ユーザー名、またはディレクトリ。ユーザーの最近の投稿すべてなどのリストではありません。）
これらのオプションのどれが最適かについてはわかりません。それはユースケースに依存します。オプション（1）にはシンプルであるというメリットがあり、WordPressを2回ロードすることによるパフォーマンスの低下を招くことなく、明らかに必要なWordPressデータへのアクセスを許可します。使用する必要のない強力な理由がない限り（スタイルシートやスクリプトのサイズが原因など）、ほとんど間違いなくあなたがすべきことです。
サイズが1ページの重量の点で問題を引き起こすほど大きくなった場合は、（2）または（2a）を試すことができます。
または、これはおそらくより良いアイデアです-静的に指定できる部分から動的データを実際に使用するスクリプトまたはスタイルシートの部分を分離しようとすることができます。＃my-fancy要素の背景パラメータを設定するために、WordPressからディレクトリを渡す必要があるスタイルシートがあるとします。これらすべてをhead要素に入れることができます。
<style type="text/css">
#my-fancy-element {
background-image: url(<?php print get_stylesheet_directory_uri(); ?>images/fancy.png);
padding: 20px;
margin: 20px;
font-weight: bold;
text-transform: uppercase;
font-size: 12pt;
/* ... KB and KB of additional styles ... */
}
#another-fancy-element {
/* ... KB and KB of additional styles ... */
}
/* ... KB and KB of additional styles ... */
</style>
しかし、なぜそうする必要があるのでしょうか？ここには、WordPressのデータに依存する1行しかありません。WordPressに依存する行のみを分割することをお勧めします。
<style type="text/css">
#my-fancy-element {
background-image: url(<?php print get_stylesheet_directory_uri(); ?>images/fancy.png);
}
</style>
標準のリンク要素（style.cssなど）を使用してロードする静的スタイルシートに他のすべてを配置します。
#my-fancy-element {
/* background-image provided dynamically */
padding: 20px;
margin: 20px;
font-weight: bold;
text-transform: uppercase;
font-size: 12pt;
/* ... KB and KB of additional styles ... */
}
#another-fancy-element {
/* ... KB and KB of additional styles ... */
}
/* ... KB and KB of additional styles ... */
そして、カスケードに仕事をさせてください。
JavaScriptについても同じことが言えます：これを行うのではなく：
<script type="text/javascript">
// Here comes a huge function that uses WordPress data:
function my_huge_function () {
// Do a million things ...
jQuery('#my-fancy').append('<a href="'+<?php json_encode(get_permalink($GLOBALS['post']->ID)); ?>+'">foo</a>);
// Do a million more things ...
my_other_function(<?php print json_encode(get_userdata($GLOBALS['post']->post_author); ?>);
}
function my_other_function (user) {
// Do a million things ...
}
</script>
代わりに、head要素に次のようなものを入れます。
<script type="text/javascript">
var WordPressPostData = {
url: <?php print json_encode(get_permalink($GLOBALS['post']->ID)); ?>,
author: <?php print json_encode(get_userdata($GLOBALS['post']->post_author)); ?>
}
</script>
そして、残りを静的JavaScriptファイルにドロップし、my_huge_function（）およびmy_other_function（）を書き換えて、グローバルWordPressPostData.urlおよびWordPressPostData.authorを使用します。
40KのCSSまたは40KのJSは、ほとんど常に動的データに実際に依存する<1Kに分割でき、残りは静的外部ファイルで指定し、カスケード（CSSの場合）またはグローバルにアクセス可能ないずれかを使用して再結合できます変数（JS、グローバル、DOM要素、または他の任意のキュービックホール）。