有条件地将小部件的脚本/样式表放入HEAD中(仅当出现在页面上时!)


13

我一直在尝试在以下情况下为WordPress小部件加载脚本和样式...

  1. 脚本必须加载到HEAD中(否则它们会中断)。
  2. 仅在小部件实际显示时才加载脚本(它们非常重)。

我已经做了很多搜索,这似乎是一个常见的(未解决的)问题……但是我希望这里的某个人已经成功实现了解决方法。

这是到目前为止我所能做到的最好的...

以下是一个简单的小部件,可将文本打印到侧边栏。它成功地有条件地加载了jQuery(实际上是在显示小部件时)...尽管仅在页脚中!(注意:尽管此hack可能提供向后兼容性,但它也可能仅在WordPress 3.3上有效)。

class BasicWidget extends WP_Widget
{

    function __construct() {
        parent::__construct(__CLASS__, 'BasicWidget', array(
            'classname' => __CLASS__,
            'description' => "This is a basic widget template that outputs text to the sidebar"
        ));
    }

  function form($instance) {
    $instance = wp_parse_args( (array) $instance, array( 'title' => '' ) );
    $title = $instance['title'];
?>
  <p><label for="<?php echo $this->get_field_id('title'); ?>">Title: <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>" /></label></p>
<?php
  }

  function update($new_instance, $old_instance) {
    $instance = $old_instance;
    $instance['title'] = $new_instance['title'];
    return $instance;
  }

  function widget($args, $instance) {

    extract($args, EXTR_SKIP);

    echo $before_widget;
    $title = empty($instance['title']) ? ' ' : apply_filters('widget_title', $instance['title']);

    if (!empty($title))
      echo $before_title . $title . $after_title;;

    echo "<h1>This is a basic widget!</h1>";

    echo $after_widget;

        // if we're echoing out content, enqueue jquery.

        if (!empty($after_widget)) {
            wp_enqueue_script('jquery');
        }
    }
}
add_action( 'widgets_init', create_function('', 'return register_widget("BasicWidget");') );

似乎一旦WordPress开始处理小部件,现在入队(甚至取消注册较早入队的东西)为时已晚。

任何想法将不胜感激!

标记。

Answers:


15

Wordpress是一个不错的功能is_active_widget,可以在__construct中使用并测试当前页面中是否存在该小部件,并根据该ex添加脚本/样式:

function __construct() {
    parent::__construct(__CLASS__, 'BasicWidget', array(
        'classname' => __CLASS__,
        'description' => "This is a basic widget template that outputs text to the sidebar"
    ));
     if ( is_active_widget(false, false, $this->id_base) )
        add_action( 'wp_head', array(&$this, 'add_styles_and_scripts') );
}

function add_styles_and_scripts(){
    //since its wp_head you need to echo out your style link:
    echo '<link rel="stylesheet" href="http://example.com/css/style.css" type="text/css" />';
    //as for javascript it can be included using wp_enqueue_script and set the footer parameter to true:
    wp_enqueue_script( 'widget_script','http://example.com/js/script.js',array(),'',true );
}

感谢您的回答,Bainternet!我刚刚测试了您的代码,很遗憾,虽然javascript确实确实有条件地加载,但它仍在页脚中加载...即使在wp_head中调用了它。很奇怪!(顺便说一句,如果没有“ true”页脚指令,它仍然会这样做)。同样,回显样式表使其加载,而不管窗口小部件是否在页面上。有任何想法吗?
Mark Jeldi

wp_head在头脚本已经打印完后调用,因此它只会将它们加载到页脚中,但是您可以像使用echo '<script src="path/to/script.js"></script>';和样式表一样将其回显(而不是对其进行排队),不可能加载是小部件不处于活动状态
Bainternet'4

尝试使用wp_enqueue_scripts而不是wp_head您的操作。这将允许您将javascript放在页眉或页脚中。http://codex.wordpress.org/Function_Reference/wp_enqueue_script
Nick

谢谢,尼克!我确实尝试过wp_enqueue_scripts,尽管它确实在头部加载了javascript,但不会有条件地加载。
Mark Jeldi

0

或者,您可以尝试使用“小部件逻辑”插件...它使用条件语句来加载小部件。

反过来,这是相当不错的想法-但结果应该是预期的。

wp_print_scripts和wp_print_styles可能是合适的钩子,只需将优先级为100的动作添加到这些钩子中-成为队列中的最后一个。wp_enqueue_script(),wp_enqueue_style(),wp_deregister_script(),wp_deregister_style()...

您上面代码的问题可能缺少优先级参数(未经测试)? WP Codex


谢谢Syslogic!我确实也尝试过Widget Logic,以为我可以加入它的widget_content过滤器。不幸的是没有运气。它使用ob_start缓冲小部件输出,以便您可以在将小部件输出打印到屏幕上之前对其进行操作,但这仍为时已晚,无法触发头部中的任何内容。除非您知道解决方法?
Mark Jeldi

也许结合了Bainternet的解决方案(对于widget-logic来说似乎还不错)?这样,您可以定义在哪个位置加载哪个小部件-以及应加载的窗口小部件。在主题的functions.php中添加自己的条件语句可能有助于进一步改进。
Martin Zeitler

-1

您可以在自定义Widget类的小部件方法(函数)中简单地使用wp_enqueue_scriptwp_enqueue_style,并且仅当小部件处于活动状态时,它才会加载脚本。在此处查看详细信息和示例:https : //wpshed.com/wordpress/load-scripts-styles-widget-active/


仅链接的答案就很糟糕,因为链接会随着时间而中断。您至少应该总结一下链接中的内容。在任何情况下,这都是错误的。因为OP需要页面标题中的脚本。
马克·卡普伦

function widget( $args, $instance ) { wp_enqueue_script( 'wpshed-front-end', plugin_dir_url( __FILE__ ) . 'wpshed-front-end.js', array( 'jquery' ), '1.0.0', false ); }和处的“ false”表示将脚本加载到页眉或页脚中。再次总结一下,请在小部件方法(函数)中使用wp_enqueue_script或wp_enqueue_style。WordPress.com/org的开发人员就是这样做的。
iStefan '16

该注释应该是对答案的编辑;),但是当“显示”窗口小部件时,您已经完成了页面的开头部分,因此无法将JS放入队列中。
马克·卡普伦
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.