将值从小部件传递到插件内的函数

时间:2013-09-25 作者:Jason

我有一个插件,它是用许多小部件构建的。小部件的捆绑包。每个小部件都创建自己的自定义CSS代码。

我希望将自定义生成的CSS代码从每个小部件传递到我通过WordPress AJAX创建的一个主自定义CSS文件,而不是在其中显示15组不同的内联CSS代码。

我将显示已设置的功能,以实现这一点。

AJAX创建的CSS文件下面的CSS文件是通过WordPress AJAX创建的。它允许我在文件中放置自定义CSS语句。它还包含一个过滤器,我希望将额外生成的CSS从窗口小部件传递到此函数(文件)。

/**
 * Echo the CSS for the custom widgets style
 */
public function advanced_widget_pack_css() {
    if(empty($_GET[\'action\']) || $_GET[\'action\'] != \'advanced_widget_pack_gen_css\') return;
    if(!isset($_GET[\'ver\'])) return;

    $css_text = \'\';

    /* ============================= */
    /* Archives Widget               */
    /* ============================= */
    $css_text .= ".awp_archives_colour { color:".awp_option(\'awp_archives_dropdown_inst_colour\')." !important }\\n"; 

    /**
     * Filter for any incoming CSS
     */
    $css_text = apply_filters(\'advanced_widget_pack_css\', $css_text);

    header("Content-type: text/css");
    echo $css_text;
    exit();
}
带有自定义CSS代码的widget类之一下面的代码是插件中使用的众多widget之一的片段。小部件创建自定义CSS代码并将其存储在变量中$sc_css. 我想从这里传递变量的内容$sc_css 或将内容附加到函数advanced_widget_pack_css() 我之前创建的。

class Advanced_Widget_Pack_Widget_Archives extends WP_Widget {

    public function __construct(){
        // This filter hooks the custom genrated css code to the advanced_widget_pack_css function
        add_filter(\'advanced_widget_pack_css\', array(&$this,\'awp_pass_css_code\'));
    }

    public function form($instance) {}

    public function widget($args, $instance){

        extract($args);

        // All the widget code is contained here....

        // Styling for the shortcode
        if($is_awp_sc == \'true\'){

            /* Generate unique id if shortcode - used for styling */
            $sc_id = mt_rand(1, 100000);

            $sc_css =  ".awp_archive_widget_sc".$sc_id." { border:".$awp_archives_border_width.\' \'.$awp_archives_border_style.\' \'.$awp_archives_border_color." !important }\\n";
            $sc_css .= $awp_archives_border_radius == \'round\' ? \'.awp_archive_widget_sc\'.$sc_id.\' { -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px }\' : \'\'.\'\'." \\n";

            $sc_css .= ".awp_archive_widget_sc".$sc_id." li a, .awp_archive_widget_sc".$sc_id." li { font-size:".$awp_archives_font_size." !important }\\n";
            $sc_css .= ".awp_archive_widget_sc".$sc_id." li a { color:".$awp_archives_link_std." !important }\\n";
            $sc_css .= ".awp_archive_widget_sc".$sc_id." li a:hover { color:".$awp_archives_link_hover." !important }\\n";

            // This should pass the variable
            echo $this->awp_pass_css_code($sc_css);
        }

        // The widget code gets outputted here
    }

    // This function is created to pass the content of the variable $sc_css to the advanced_widget_pack_css function
    function awp_pass_css_code( $sc_css ) {
        return $sc_css;
    }
}
问题我试图通过传递$sc_css 变量,然后将其挂接到函数advanced_widget_pack_css() 通过WordPress过滤器。

出现的问题是,将变量的内容传递给AJAX生成的样式表时,变量的内容始终为空。

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

首先,我可以说为什么你的代码不起作用。

自定义css是在widget WordPress在小部件显示时调用的函数。

我想,您在文档上已经准备好发送一个ajax请求advanced_widget_pack_css() 作用但每个ajax请求都是一个全新的http请求,唯一的作用域是运行一个函数,当然不是嵌入小部件。

因此,通过ajax的新请求从不调用widget() 方法,因此当然不会添加css。

说了这些,想一分钟你在做什么。

假设您的工作流可以工作,如果用户没有启用js,它就会失败。即使启用了js,页面也会加载自定义css,这些css应该根据ajax请求加载(而WordPress中的ajax速度不是很快……)因此:

如果没有js也没有css,那么即使js页面加载时没有css,那么您也有一个或多个未设计的小部件,浏览器不允许缓存css,因此您的代码无法工作(我解释了yopu的原因),但即使您找到了使其工作的方法,也不是一个很好的解决方案。

什么是解决方案?

首先,在小部件中隔离生成自定义css的函数。

之后,您应该调用widget() 方法,但在update 方法这样,每次小部件更新时都会生成css,and you can save the newly generated css to store it in a css file.

作为一种好的做法,最好将此文件保存在uploads文件夹中,因为您可以确定该文件夹可以从WP写入。

伪代码:

class Advanced_Widget_Pack_Widget_Archives extends WP_Widget {

   function generate_css( $instance ) {
     // some code here to generate css from instance arguments...
     return $sc_css;
   }

   function update( $new_instance, $old_instance ) {
     // some code here to update the widget instance...
     $css = $this->generate_css( $new_instance );
     $upload_dir = wp_upload_dir();
     $path = $upload_dir[\'basedir\'] . \'/myplugin/myplugin-customwidget.css\';
     if ( ! file_exists($upload_dir[\'basedir\'] . \'/myplugin\') )
       mkdir($upload_dir[\'basedir\'] . \'/myplugin\');
     file_put_contents($path, $css);
   }

}
之后,您可以使用WordPress标准方式将刚刚创建的文件排队。。。

此方法的替代方法是在widget() 方法(正如您已经做的那样),并在标记中作为内联样式输出。

SO网友:Nicü

一个快速的解决方案是将所有生成的css数据以序列化数组的形式存储到WordPress数据库中,并使用get_option/set_option

结束

相关推荐

Filters on Login Page

我正在尝试使用修改登录页built in filters. add\\u操作按预期工作,但我无法使筛选器工作。这是我函数中的代码。php:add_filter( \'login_form_top\', \'filter_top_login\' ); function filter_top_login( $content ) { return \'This is what I want it to say!\'; } 但当我加载wp登录时,它似乎没有做任何