Bootstrap/bootstrap-select issue with Wordpress plugin. (TypeError: $(...).selectpicker is not a function)

Question

在 Wordpres 中，我创建了一个插件。我正在尝试使用 Bootstrap/bootstrap-select 在自定义页面模板上创建 multi-select（带有复选框），但我遇到了问题。我不是在创建新主题，而是使用 child 主题。这是我所做的：

将 page.php 从 parent 主题复制到 child 并将其重命名为 manage-matches。php
编辑了模板并添加了
- 模板名称：管理匹配项
创建了一个新页面并选择了这个新模板
在模板循环内容 div 中，我调用另一个 PHP 文件使用：此功能在 managematches.php 中，我
我将 header.php 复制到 child 并添加了对 bootstrap.css 和 bootstrap-select 的引用。css
我完成了 include_once 'includes/managematches.php'; 在我的插件中。

此函数 managematches() 为我的页面生成了 html，它工作正常。事实上，我可以创建 bootstrap 元素，因此我知道 bootstrap/bootstrap-select.css 文件正在运行。我还创建了一个 .js 文件 (managematches.js) 并将其加入队列，这很有效。通过工作，我的意思是标准 jQuery 函数和选择器工作正常。

问题是我无法使用 bootstrap-select.js 中的任何函数。我试过在很多地方引用它，但无济于事。我不断收到：

TypeError: $(...).selectpicker is not a function

问题描述如下：Bootstrap-select not working 我知道我的问题是我需要确保在加载我的代码之前包含 bootstrap-select.js。

我不清楚如何在 wordpress 环境中执行此操作。我很接近，但不是我想去的地方。如果有人对如何解决这个问题有建议，我将不胜感激。

回答我在我的插件中加入了 css 和 js，但是 functions.php 也可以工作。

wp_enqueue_style( 'bootstrap', 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');

wp_enqueue_style( 'bootstrap-select', 'http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/css/bootstrap-select.min.css');

wp_enqueue_script( 'bootstrapjs', 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js', array('jquery'), '', true );

wp_enqueue_script( 'bootstrap-selectjs', 'http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/js/bootstrap-select.min.js', array('jquery'), '', true );

Answer 1

The problem is described here: Bootstrap-select not working and I know my issue is that I need to make sure bootstrap-select.js is included before loading my code.

What I'm not clear on is how to do this in the wordpress enviornment. I'm close, but not where I want to be. If anyone has a suggestion on how to resolve this, I would appreciate the help.

我想您的 javascript 文件已加载到主主题的 header.php 或 footer.php 中。当然它们也可以包含在functions.php中。您可以检查生成页面的源代码并检查您的 bootstrap-select 包含在哪个点，然后在主题的源代码中搜索文件名。

你是如何让你的 managematches.js 排队的？通过使用 wp_enqueue_script，您还可以声明排队脚本的依赖关系。

Bootstrap/bootstrap-select issue with Wordpress plugin. (TypeError: $(...).selectpicker is not a function)

Bootstrap/bootstrap-select issue with Wordpress plugin. (TypeError: $(...).selectpicker is not a function)

wordpress

twitter-bootstrap

bootstrap-select