我正在构建我的第一个WordPress插件，并且遇到了一些麻烦。我首先创建了一个自定义页面模板，其中包含我创建的联系表格。它使用Bootstrap JS，Bootstrap CSS，jQuery，然后使用JQuery UI进行datepicker。它还使用了外部样式表。一切都很好。我现在将此页模板变成一个插件，以便可以轻松地在几个网站上使用它，并更容易提取主题的默认设计。我最初在.php文件的头部中添加了Bootstrap JS，Bootstrap CSS，jQuery和jQuery UI：
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="/chem-dry-contact/style.css" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
我现在明白，这不是链接到WordPress的外部样式表和脚本的最佳方法，尤其是用于插件。但是它确实有效。
我能够让所有的HTML显示为带有短代码和所有内容的插件，但是看起来所有外部文件都没有工作。这是我使用WordPress的入口函数进行设置的方式：
function add_plugin_scripts() {
wp_enqueue_script( 'jquery-3.2.1', '/wp-content/plugins/ChemDry-PriceQuote/jquery-3.2.1.js', array(), null, true);
wp_enqueue_script('bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', array(), null, true);
}
add_action( 'wp_enqueue_scripts', 'add_plugin_scripts' );
function add_plugin_styles () {
wp_enqueue_style('style', '/wp-content/plugins/ChemDry-PriceQuote/style.css');
wp_enqueue_style('bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
}
add_action( 'wp_enqueue_scripts', 'add_plugin_styles' );
我的外部CSS正在工作，我认为我的引导程序CSS正在起作用，但我不认为JQuery和Bootstrap JS正在工作。当我设置为页面模板时，它提供的功能不再工作，当我通过评论页面模板版本中的jQuery行进行测试时，我得到的结果与现在得到的结果完全相同。我确实已经尝试先删除jQuery，然后尝试重新检查它……但这也没有起作用。
现在，我已经阅读了WordPress随jQuery带来的...但是，如果我不添加它，我将无法获得所需的功能。我看了整个堆栈溢出寻求答案，但我似乎无法使它起作用。
再次，这是我开发的第一个插件，因此我感谢任何帮助。谢谢。
WordPress随附jQuery，您应该在语句的开始时使用jQuery关键字而不是$。
您可以检查以下链接：
jQuery未在WordPress中定义
未使用jQuery
定义在在WordPress中使用" $"代替" jQuery"
尝试一下，订单很重要，通常您想先加载样式。然后，您需要加载jQuery，然后加载bootstrap，因为Bootstrap需要jQuery。
// A $( document ).ready() block.
$(document).ready(function() {
console.log("jQuery ready!");
});<head>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/chem-dry-contact/style.css" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>