正确的jQuery-UI入队方式

时间：2017-07-20 作者：Lucio Crusca

我很难在插件中包含jquery ui脚本和样式。看来我的wp_enqueue_script 只会忽略调用。

现在已经有很多类似的问题了，但到目前为止，我找到的所有答案都可以归结为wp_enqueue_script 内部wp_enqueue_scripts 动作钩，我已经在做了。

在类的构造函数中，我调用：

add_action( \'wp_enqueue_scripts\', array($this, \'enqueue_scripts\') );
然后，如下所示：

public function enqueue_scripts()
{    
  wp_enqueue_script( \'jquery-ui-core\', false, array(\'jquery\') );
  wp_enqueue_script( \'jquery-ui-widget\', false, array(\'jquery\') );
  wp_enqueue_script( \'jquery-ui-mouse\', false, array(\'jquery\') );
  wp_enqueue_script( \'jquery-ui-accordion\', false, array(\'jquery\') );
  wp_enqueue_script( \'jquery-ui-autocomplete\', false, array(\'jquery\'));
  wp_enqueue_script( \'jquery-ui-slider\', false, array(\'jquery\'));
我已经检查了代码是否在每次页面加载时都会执行。然而，页面缺少<link> jquery ui库的标记。我已经试过了jquery 在的第三个参数中显式指定的依赖项wp_enqueue_script 呼叫。

我还尝试了一个普通的WP 4.8安装，除了我的插件外，没有安装其他插件，并且只有默认的2017主题。没有骰子。

我的代码怎么了？

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

首先，WordPress通过注册jQuery UIwp_default_scripts(). 依赖项已经设置好了，所以您只需要将真正需要的脚本（而不是核心）排队。因为您没有更改版本号或任何内容，所以只使用句柄是可以的。

// no need to enqueue -core, because dependancies are set
wp_enqueue_script( \'jquery-ui-widget\' );
wp_enqueue_script( \'jquery-ui-mouse\' );
wp_enqueue_script( \'jquery-ui-accordion\' );
wp_enqueue_script( \'jquery-ui-autocomplete\' );
wp_enqueue_script( \'jquery-ui-slider\' );
至于样式表：WordPress does not register jQuery UI styles by default!

在评论中，butlerblog pointed out 根据Plugin Guidelines

不允许在不作为服务的情况下在插件内执行外部代码，例如：

出于字体包含以外的原因致电第三方CDN；所有与服务无关的JavaScript和CSS都必须在本地包含，这意味着不允许通过CDN加载样式，并且应始终在本地完成。您可以使用wp_enqueue_style().

SO网友:Greg Perham

如果您将自己的脚本排队，只需添加\'jquery-ui-accordion\', 例如，到依赖项列表。将自动添加所有必需的依赖项。示例：

wp_enqueue_script( \'my-theme\', get_stylesheet_directory_uri() . \'/js/theme.js\', array( \'jquery\', \'jquery-ui-accordion\' ) );
将生成此代码：

<script type=\'text/javascript\' src=\'/wp-includes/js/jquery/ui/core.min.js\'></script>
<script type=\'text/javascript\' src=\'/wp-includes/js/jquery/ui/widget.min.js\'></script>
<script type=\'text/javascript\' src=\'/wp-includes/js/jquery/ui/accordion.min.js\'></script>
<script type=\'text/javascript\' src=\'/wp-content/themes/theme/js/theme.js\'></script>

SO网友:umesh.nevase

我修改了你的脚本。试试这个，它是有效的。

add_action( \'wp_enqueue_scripts\', array($this, \'enqueue_scripts\') );
public function enqueue_scripts()
{    
  wp_enqueue_script( \'jquery-ui-core\');
  wp_enqueue_script( \'jquery-ui-widget\');
  wp_enqueue_script( \'jquery-ui-mouse\');
  wp_enqueue_script( \'jquery-ui-accordion\' );
  wp_enqueue_script( \'jquery-ui-autocomplete\');
  wp_enqueue_script( \'jquery-ui-slider\');
}

结束
标签： plugin-development   jquery-ui   小码农  

相关推荐

如何在WordPress上正确包含jQuery-UI效果

我一直试图在我的wordpress主题中包含jquery ui效果（更具体地说是抖动效果）。到目前为止，我只能包含jQuery脚本，但我真的不知道在哪里放置ui脚本以及如何将它们排队。这是我的密码。这显然行不通： <?php wp_enqueue_script(\"jquery\"); ?> <?php wp_enqueue_script(\"jquery-ui-core\"); ?> <?php wp_head(); ?> <lin