动态JAVASRIPT/CSS生成的解决方案

时间:2011-10-29 作者:onetrickpony

假设您需要根据当前上下文生成javascript或CSS代码。

例如,您在主页上有一个表单,在提交时触发ajax请求,在单个页面上有一个不同的表单。或者在CSS的情况下,您希望创建一个主题,允许其用户构建自己的布局、更改颜色等。

我目前看到的解决方案:

在文档的开头部分包含代码(如果是JS,则在结尾)

执行输出代码的特殊请求,如site。com?获取\\u资产。这很慢,因为WP加载了两次。

将其存储在临时文件中一段时间,然后从那里加载。对于公共主题或插件来说不太可靠。

仅Javascript-将其放入每次加载的普通文件中,使其成为静态文件。在这种情况下,您必须让代码处理任何情况

你认识其他人吗?你会走哪条路?

5 个回复
最合适的回答,由SO网友:radgeek 整理而成

另一个选项,取决于需要传入的参数类型。我们称之为(2a)。您还可以创建PHP脚本,该脚本输出动态生成的text/csstext/javascript 而不是text/html, 并使用GET参数而不是加载WordPress为他们提供所需的数据。当然,只有当您需要传入相对较少数量的相对紧凑的参数时,这才有效。因此,例如,假设您只需要传入帖子的URL或文件的目录或类似内容,您可以执行以下操作:

在标题中。php:

 <script type="text/javascript" src="<?php print get_stylesheet_directory_uri(); 
 ?>/fancy-js.php?foo=bar&amp;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的任何其他您喜欢的小隔间)重新组合。

SO网友:Chip Bennett

动态CSS案例相当简单。

只需创建一个函数来输出<style type="text/css"></style> 标记,然后将该函数挂钩到wp_print_styles. e、 g。

<?php
function mytheme_dynamic_css() {
    $options = get_option( \'mytheme_options\' );
    ?>
    <style type="text/css">
    /* Dynamic H1 font family */
    h1 { font-family: <?php echo $options[\'h1_font_family\']; ?>;
    </style>
    <?php
}
add_action( \'wp_print_styles\', \'mytheme_dynamic_css\' );
?>
或者,假设您已经预先配置了配色方案;您可以根据当前用户设置将适当的样式表排队:

<?php
function mytheme_enqueue_colorscheme_stylesheet() {
    $options = get_option( \'mytheme_options\' );
    $color_scheme = $options[\'color_scheme\'];
    wp_enqueue_style( $colorscheme, get_template_directory_uri() . \'/css/\' . $color_scheme . \'.css\' );
}
add_action( \'wp_enqueue_scripts\', \'mytheme_enqueue_colorscheme_stylesheet\' );
?>
注意,在这种情况下,函数钩住wp_enqueue_scripts, 因为WordPress没有wp_enqueue_styles 行动挂钩。

SO网友:Sisir

我想了一会儿。你的问题让我又回到了话题上。Not sure it is a good idea or not, so i would like experts comments on that.

What ifwrite the javascript/css file via php 管理员保存数据时。这将是一次写入,直到用户再次更改布局(用户可能不会经常这样做)。这样,当用户保存数据时,我们只能访问一次用户设置的数据库。

在写入文件后,它将是一个常规的javascript/css文件,因此我们不必每次加载主题时都调用数据库。

需要回答的一个问题:What will happen when a visitor try to access the site in the instant when php writing the file?

让我知道你的想法。

SO网友:cjbj

对于您可能不想包含在单独文件中的小段脚本,例如,因为它们是动态生成的,WordPress 4.5和进一步提供wp_add_inline_script. 此函数基本上将脚本锁定到另一个脚本。例如,假设您正在开发一个主题,并希望您的客户能够通过选项页面插入自己的脚本(如Google Analytics或AddThis)。Example.

对于样式,有wp_add_inline_style, 这基本上是一样的。例如,您可以使用它来循环所有定制器mod,并将它们收集到一个名为$all_mods, 然后将其添加到主样式表中:

if (!empty($all_mods)) wp_add_inline_style (\'main-style\', $all_mods);

SO网友:EarnestoDev

Create a dynamic JS.php file and feed important query_vars to it. 中的变量$_GET 将帮助文件确定上下文,您可以在其中缓存和使用readfile() 对于将来的请求。。。做任何事。

只需确保文件加载wp-load.php 因此您可以访问WP函数。使用当前文件夹的相对路径(dirname(__FILE__)) 或者直接在文件夹结构中向下搜索wp-load.php 无论插件的位置如何。

查找wp负载的代码。来自任何地方的php

// Ensure single declaration of function!
if(!function_exists(\'wp_locate_loader\')):
    /**
     * Locates wp-load.php looking backwards on the directory structure.
     * It start from this file\'s folder.
     * Returns NULL on failure or wp-load.php path if found.
     * 
     * @author EarnestoDev
     * @return string|null
     */
    function wp_locate_loader(){
        $increments = preg_split(\'~[\\\\\\\\/]+~\', dirname(__FILE__));
        $increments_paths = array();
        foreach($increments as $increments_offset => $increments_slice){
            $increments_chunk = array_slice($increments, 0, $increments_offset + 1);
            $increments_paths[] = implode(DIRECTORY_SEPARATOR, $increments_chunk);
        }
        $increments_paths = array_reverse($increments_paths);
        foreach($increments_paths as $increments_path){
            if(is_file($wp_load = $increments_path.DIRECTORY_SEPARATOR.\'wp-load.php\')){
                return $wp_load;
            }
        }
        return null;
    }
endif;
// Now try to load wp-load.php and pull it in
$mt = microtime(true);
if(!is_file($wp_loader = wp_locate_loader())){
    header("{$_SERVER[\'SERVER_PROTOCOL\']} 403 Forbidden");
    header("Status: 403 Forbidden");
    echo \'Access denied!\'; // Or whatever
    die;
}
require_once($wp_loader); // Pull it in
unset($wp_loader); // Cleanup variables
干杯,斯克里布!

PS: 对于文件夹不遵循正常WP递减结构的复杂结构,父插件可以与可直接访问的文件共享信息。带有呈现CSS/JS的动态PHP文件的父插件可以写入realpath()wp-load.php 独立文件可以使用它。这对0.1%的WP用户来说是一个问题。我认为那些移动文件夹而不遵循正常结构的人知道他们在做什么,并且可能会拉皮条兜售需要加载的插件wp-load.php 直接地

结束

相关推荐

如何加载父主题style.css?

我的WordPress站点使用的主题是父主题的子主题。根据需要,两个主题都有风格。css文件。然而,据我所知,WordPress只提供了加载子主题样式的机制。css文件。如何加载父主题样式?是否需要手动导入父主题的样式。将css文件转换为子样式。css文件?