另一个选项,取决于需要传入的参数类型。我们称之为(2a)。您还可以创建PHP脚本,该脚本输出动态生成的text/css
或text/javascript
而不是text/html
, 并使用GET参数而不是加载WordPress为他们提供所需的数据。当然,只有当您需要传入相对较少数量的相对紧凑的参数时,这才有效。因此,例如,假设您只需要传入帖子的URL或文件的目录或类似内容,您可以执行以下操作:
在标题中。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>
在花式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数据,而无需加载WordPress两次。这几乎可以肯定是你应该做的,除非你有充分的理由不这样做(例如,由于你需要使用的样式表或脚本的大小)。
如果大小变得足够大,导致一页的重量出现问题,那么您可以尝试(2)或(2a)。
或者——这可能是更好的主意——您可以尝试将脚本或样式表中实际使用动态数据的部分与可以静态指定的部分分开。Ssay您有一个样式表,需要从WordPress传递一个目录,以便为#my fancy元素设置背景参数。您可以将所有这些都放在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的数据。最好只拆分依赖于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\\u maging\\u function()和my\\u other\\u function(),以使用全局字PressPostData。url和WordPressPostData。著者
40K CSS或40K JS几乎总是可以分为<;1K这实际上取决于动态数据,其余数据可以在静态外部文件中指定,然后使用级联(对于CSS)或全局可访问的变量(globals、DOM元素或JS的任何其他您喜欢的小隔间)重新组合。