如何在 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 电话。使用依赖项。

看到 example

将此代码放在主题的 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 核心。在 developers portal 上查看更多详细信息。如果将第 3 个参数设置为 array('jquery') jquery 核心将自动包含在您的 select2 插件之前。

在你的页面中，header，scrtip 文件（你想要的地方）放置 JS 调用 select2 插件：

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

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

How to add select2 js in wordpress admin side theme options

media

wordpress

admin

jquery-select2