如果页面上显示小部件,如何使脚本入队?


8

我创建了一个使用jquery插件的小部件,并使用is_active_widget使该脚本入队,它工作正常,但即使在未显示此小部件的页面上也包括该脚本。所以有没有办法仅在显示此小部件时才使脚本入队?

提前致谢。

Answers:


11

您应该可以将其wp_enqueue_script()作为Widget输出的一部分进行调用。

编辑

快速入门,使用准系统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' );
?>

在Widget的输出中(即在内)添加内联wp_enqueue_script()调用: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...
    }
?>

实际上,我正在这样做,并使用了is_active_widget(),但是即使该小部件在一个页面上处于活动状态,它也会在所有页面上排队该脚本。
Pierre

使用is_active_widget()wp_enqueue_script()Widget 输出中调用不同。查看最新答案。
Chip Bennett

感谢您的更新,但是通过快速而肮脏的示例或使用wp_enqueue_script()的方式表示什么?还有一个关于主题的问题,我在小部件中看到很多私有函数和公共函数,它们是做什么的?我们应该使用它们专用于主题的小部件吗?非常感谢您:)
Pierre

快速而肮脏的示例 ”是指我引用的是标准Widget类构造,如链接的Codex文章中所述。我假设您已经使用Widgets API编写了自定义Widget。如果不是,那你应该是;但是,如果您需要更具体的指导,我们将需要查看您的Widget代码。
Chip Bennett

这行不通。由于它被标记为答案,因此不确定它是否曾经起作用。但是现在,在wp_enqueue_scripts操作之后触发窗口小部件表单
Omar Abid

6

如果脚本需要进入以下<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,如果有页面上的多个控件实例...


1
很酷的主意,但这实际上并没有解决OP的问题,因为它is-active_widget()只是让您知道某个小部件是否已激活(即:拖动到Appearance> Widgets中的侧边栏区域之一),而不是实际出现在任何给定页面上。
2013年

条件错误:(1) is_active_widget将返回sidebar_id,即使该侧栏未显示在当前页面上也是如此。这将在每个页面上添加脚本。(2) wp_enqueue_script只会添加一次脚本,即使您多次调用它也是如此。不需要self::$did_script (3),因为__construct即使没有显示小部件,每个页面请求都将调用它
Philipp

2

皮埃尔

我的处理方式是使用wp_enqueue_scriptwp_dequeue_script,并$is_active在Your_Widget类中使用实例变量

因此wp_enqueue_scriptis_active_widget只要页脚参数设置为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');
    }
}

如果未使用的话,这种先入队然后出队的方法也适用于定义需要脚本的短代码的插件


0

我考虑使用“ wp_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
    }



}

1
啊。wp_enqueue_script()请。没有直接打印JS。
汤姆·奥格

恐怕wp_enqueue_script()在这里不起作用,因为除wp_enqueue_script之外的钩子在实际调用小部件之前已被触发。
Dipesh KC

您可以在wp_footer操作之前的任何时间调用wp_enqueue_script()。在构建模板页面期间将调用该小部件。您可以挂钩dynamic_sidebar动作,检测小部件的实际显示时间,或者更简单地,按照@ChipBennet的建议,将您的enqueue_script()权限放到widget()方法中。
Tom Auger
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.