如何在Wordpress管理端主题选项中添加select2 js

Question

我在Wordpress主题设置下拉选项中添加了Select2 js以提供搜索功能，以添加搜索-> http://nimb.ws/1QW6id

我已将以下代码添加到我的管理选项文件中：

<?php if(is_admin()) { ?>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<script type="text/javascript">
  $(document).ready(function($) {
    $('.option-tree-ui-select').select2();
});
</script>

<?php } ?>

在管理端可以使用，但是代码与管理端媒体菜单冲突。媒体菜单会持续加载，并且不允许上传新图像。当我删除新代码时，媒体功能开始正常工作。

有想法该怎么解决这个吗？

Answer 1

使用wp_enqueue_script功能包括脚本。同时删除您的jquery调用。使用依赖项。

看一个例子

将此代码放在主题的functions.php或主插件文件中：

function enqueue_select2_jquery() {
    wp_register_style( 'select2css', '//cdnjs.cloudflare.com/ajax/libs/select2/3.4.8/select2.css', false, '1.0', 'all' );
    wp_register_script( 'select2', '//cdnjs.cloudflare.com/ajax/libs/select2/3.4.8/select2.js', array( 'jquery' ), '1.0', true );
    wp_enqueue_style( 'select2css' );
    wp_enqueue_script( 'select2' );
}
add_action( 'admin_enqueue_scripts', 'enqueue_select2_jquery' );

此操作将包括select2库和jquery。wp_register_script告诉WordPress的第三个参数，对于此脚本来说，应该能够正常工作的jquery核心。在开发人员门户上查看更多详细信息。如果将3rd param设置为array('jquery')jquery core将自动包含在select2插件之前。

比在您的页面中，标题，scrtip文件（您要在其中）放置带有call select2插件的JS：

<script type="text/javascript">
  $(document).ready(function($) {
      $('.option-tree-ui-select').select2();
  });
</script>