如果Widget显示在页面上,如何将脚本入队?

时间:2012-04-08 作者:Pierre

我创建了一个使用jquery插件的小部件,并使用is\\u active\\u小部件将脚本排队,它工作正常,但即使在没有显示此小部件的页面上,它也包含脚本。那么,如果这个小部件正在显示,是否有办法只将脚本排队?

提前谢谢。

4 个回复
最合适的回答,由SO网友:Chip Bennett 整理而成

你应该可以打电话wp_enqueue_script() 作为小部件输出的一部分。

使用裸骨骼快速编辑Widgets API 课程示例:

<?php
class wpse48337_Widget extends WP_Widget {

    public function __construct() {
        // widget actual processes
    }

    public function form( $instance ) {
        // outputs the options form on admin
    }

    public function update( $new_instance, $old_instance ) {
        // processes widget options to be saved
    }

    public function widget( $args, $instance ) {
        // outputs the content of the widget
    }

}
register_widget( \'wpse48337_Widget\' );
?>
添加您的wp_enqueue_script() 在小部件的output - i、 e.在public function widget():

<?php    
    public function widget( $args, $instance ) {
        // outputs the content of the widget

    // Enqueue a script needed for
    // the Widget\'s output
    wp_enqueue_script( \'jquery-pluginname\', $path, $deps );

    // Rest of widget output goes here...
    }
?>

SO网友:onetrickpony

如果脚本需要进入<head> 第节:

class Your_Widget extends WP_Widget{

  protected static $did_script = false;

  function __construct(){

    // parent::__construct() ...

    add_action(\'wp_enqueue_scripts\', array($this, \'scripts\'));

  }

  function scripts(){

    if(!self::$did_script && is_active_widget(false, false, $this->id_base, true)){
      wp_enqueue_script(\'your-script\');
      self::$did_script = true;
    }           

  }


}
否则,Chip Bennett的解决方案将在页脚中对其进行排队。

这个$did_script 静态变量不是必需的,我使用它只是为了避免对wp_enqueue_script 如果页面上有多个小部件实例。。。

SO网友:Russell Jamieson

皮埃尔,

我处理这件事的方式是wp_enqueue_scriptwp_dequeue_script, 并使用实例变量$is_active 在Your\\u Widget类中

因此wp_enqueue_script 基于is_active_widget 它将脚本列在所有页面上,但footer参数设置为true。请注意,出列是按优先级运行的,以确保它在输出脚本之前运行。

function enqueue_scripts() {
  if ( is_active_widget( false, $this->id, $this->id_base, true ) ) {
    wp_enqueue_script( \'your-script-handle\', \'your-script-url\', array(), \'1.0\', true );
    add_action( \'wp_footer\', array($this,\'dequeue_redundant_scripts\'), 1 );
  }
}

然后在窗口小部件功能中指示窗口小部件在该页面上是否处于活动状态

function widget( $args, $instance ) {
    // outputs the content of the widget
    $this->is_active = true;  
}
然后在页脚中,如果小部件在该页面上未处于活动状态,则将脚本出列

function dequeue_redundant_scripts() {
    if (! $this->is_active) {
        wp_dequeue_script(\'your-script-handle\');
    }
}
对于定义需要脚本的短代码的插件来说,这种先排队,然后在未使用时退出的方法也很有效

SO网友:Dipesh KC

我考虑使用“wp\\u footer”钩子,因为这个钩子是在页脚执行的,并且可能是仅在使用小部件的地方添加脚本的最佳方式。

class Your_Widget extends WP_Widget{

    function widget( $args, $instance ) {

         add_action(\'wp_footer\',array($this,\'front_end_scripts\'));

    }

    function front_end_scripts(){
       ?><script type="text/javascript">
          console.log(\'this works!\');
        /*
          Or if you need external scripts then you may use 
          $.getScript([your-script-url] );
        */
        </script> <?php
    }



}

结束