如何将wp_deQueue_style()用于在WP_Widget类中排队的样式

时间:2015-03-29 作者:mrwweb

我有一个插件,它制作了一个小部件,将一些前端CSS排成队列以设置widdget的样式。我打电话wp_enqueue_stylepublic widget() 扩展中的方法WP_Widget 类别:

<?php class FPW_Widget extends WP_Widget {

    // ...

    public function widget( $args, $instance ) {

        // enqueuing here ensure that styles only load when plugin is being displayed
        wp_enqueue_style( \'fpw_styles_css\', plugins_url( \'css/fpw_styles.css\', dirname(__FILE__)), false, FPW_VERSION );
我想要的是,在保持排队的可怕条件性质的同时,使其能够出列(即,只有在有活动小部件的情况下才加载CSS文件)。

我试过了wp_dequeue_style() 都打开wp_enqueue_scripts 具有高优先级(999) 和上widgets_init 但是没有任何运气。

这可能吗?如果可能,我该怎么做?

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

widget() 方法在呈现小部件时调用,因此您排队的样式将打印在页脚中(此时页眉已经打印)。

即使大多数浏览器都可以呈现从页面正文链接的样式,这也是无效的HTML,因为根据HTML标准,与scrypts不同,样式必须放置在页面中<head>. (尝试validate your markup, 您将看到错误)。

这也是为什么\'widgets_init\'\'wp_enqueue_scripts\' 无法用于删除样式:这些挂钩在widget() 方法,并且您不能删除尚未添加的样式。

有两种解决方案。

解决方案1第一个解决方案假设您希望保持您的方法,即使不符合HTML标准:一旦样式打印到页脚,用户可以使用\'wp_footer\' 钩子将样式出列。

假设添加样式如下:

public function widget( $args, $instance ) {
    wp_enqueue_style(\'fpw_styles_css\');
}
可通过以下方式删除:

add_action(\'wp_footer\', function() {
   wp_dequeue_style(\'fpw_styles_css\');
});
解决方案2如果希望插件不打印无效的HTML,解决方案是使用is_active_widget() 要检查小部件是否处于活动状态并将样式排入队列(如果是),请执行以下操作:

add_action( \'wp_enqueue_scripts\', function() {
  if ( is_active_widget(false, false, $widgetid) ) {
      wp_enqueue_style(\'fpw_styles_css\');
  }
}, 5); // used priority 5 to make possible dequeue using default 10 priority
这样,样式将添加到<head>, 并且用户将能够使用标准方法将样式出列:wp_dequeue_style() 连接到\'wp_enqueue_scripts\'.

唯一的问题是is_active_widget() 不检查小部件是否实际打印到页面,但仅当在任何边栏的后端配置了小部件的任何实例时。这意味着即使小部件并没有实际打印到页面上,也可能会添加样式。

但是,用户可以轻松删除特定页面的样式,因为conditional tags 工作正常时\'wp_enqueue_scripts\' 已启动。示例:

add_action( \'wp_enqueue_scripts\', function() {
  if (! is_front_page()) { // allow widget style only in front page
      wp_dequeue_style(\'fpw_styles_css\');
  }
});

结束

相关推荐

如何将一个css类添加到自定义字段值?

在用户配置文件中有一个下拉列表,其中包含可供选择的选项。自定义字段名是带有多个值的颜色:红色、绿色、蓝色等。我可以为这些值添加css类吗。像red\\u css、blue\\u css等?使风格一致。blue\\u css{字体大小:10px;}这可能吗?谢谢