如何在WordPress管理端主题选项中添加Select2 JS

Question

我添加了select2 js，以在我的wordpress主题设置下拉选项中提供搜索功能，以添加搜索 -> 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电话。使用依赖项。

请参阅示例

将此代码放在主题的function.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 Core。查看有关开发人员门户网站的更多详细信息。如果将第三个参数设置为 array('jquery') jquery core将在您的select2插件之前包含。

比您的页面，标头，scrtip文件(您想要的地方(放置js select2插件：

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