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带有jQuery ...但是如果我不添加它，我就不会得到我需要的功能。我已经遍布Stack Overflow寻找答案，但我似乎无法让它发挥作用。

同样，这是我开发的第一个插件，所以我很感激任何帮助。谢谢。

Answer 1

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

您可以查看以下链接：

jquery is not defined in wordpress

not defined using JQuery

您也可以再次查看以下关于make $ work的链接：

Using ‘$’ instead of ‘jQuery’ in WordPress

Answer 2

试试这个，订单很重要，通常你想先加载样式。然后你需要加载jQuery，然后加载bootstrap，因为bootstrap需要jQuery。

＆＃13;

// A $( document ).ready() block.
$(document).ready(function() {
  console.log("jQuery ready!");
});

＆＃13;

<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>

＆＃13;

无法让jQuery CDN适用于WordPress插件

2 个答案: