无法让 jQuery CDN 为 WordPress 插件工作

Question

我正在构建我的第一个 WordPress 插件，但遇到了一些麻烦。我首先使用我创建的联系表创建了一个自定义页面模板。它使用 Bootstrap JS、Bootstrap CSS、jQuery 和 jQuery UI 作为日期选择器。它还使用了外部样式表。一切都很顺利。我现在把这个页面模板变成一个插件，这样我就可以很容易地在多个网站上使用它，并且更容易拉动主题的默认设计。我最初在 .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 工作正常，我认为我的 Bootstrap CSS 工作正常，但我不认为 jquery 和 Bootstrap JS 工作正常。当我将它设置为页面模板时它提供的功能不再起作用，当我通过在我的页面模板版本中注释掉 jQuery 行来测试它时，我得到了与现在完全相同的结果。我确实已经尝试过先注销 jquery，然后尝试重新注册它……但这也不起作用。

现在我已经读到 WordPress 带有 jQ​​uery...但是如果我不添加它，我将无法获得所需的功能。我已经在 Stack Overflow 上寻找答案，但我似乎无法让它发挥作用。

再次重申，这是我开发的第一个插件，因此我将不胜感激。谢谢你。

Answer 1

Wordpress 带有 jquery，您应该在语句的开头使用 JQuery 关键字而不是 $。

您也可以查看以下链接：

jquery is not defined in wordpress

not defined using JQuery

您也可以查看以下链接以使 $ 再次工作：

Using ‘$’ instead of ‘jQuery’ in WordPress

Answer 2

试试这个，顺序很重要，通常你想先加载样式。然后你需要加载 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>