如何将 Jquery 和 Jquery-ui 与 wordpress 一起使用？答案

【问题标题】：How do I use Jquery and Jquery-ui with wordpress?如何将 Jquery 和 Jquery-ui 与 wordpress 一起使用？
【发布时间】：2015-09-09 12:24:58
【问题描述】：

我有一个网站，我正在尝试添加一些我编写过的东西，并且使用过 jquery 和 jquery-ui，当我编写代码时，我只是使用以下指向我计算机中文件的链接来访问jquery 和 jquery ui：

<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.js"></script>

然而，wordpress 不起作用，我在网上搜索了没有明确的答案，我遇到了很多函数（各不相同！）以及 php。我查看了其他网站的源代码和许多其他东西，但无法获得简单的解决方案，并且每次尝试它也不起作用。

也许解决方案很复杂，如果是这样，我愿意学习，但我需要知道从哪里开始。

干杯，

本

【问题讨论】：

您可以像在核心 php 中一样使用 jquery 和 jquery-ui 库。您可以在主题的头文件中添加这些链接。
我对 php 几乎一无所知，但是可以在标题中添加上述链接吗？我认为它们不会起作用，因为它们是保存在我的笔记本电脑上的，我需要任何特定链接吗？
能否请您附上带有 js 文件链接的 HTML 页面？也许在上传到服务器的页面上，links_to_js_files 指向您本地机器上的文件（应该使用托管库。它们可以在此页面上找到：developers.google.com/speed/libraries）
就是这样！我正在链接到我的本地机器，我知道这是错误的，但不知道还要链接到什么。所以现在我已经链接了这两个文件（以及我想知道的 jquery-ui css 样式表）但是它仍然不起作用......不过这是一个开始，干杯

标签： php jquery wordpress jquery-ui

【解决方案1】：

你可以（应该）这样做：

wp_enqueue_script('jquery');
wp_enqueue_script('jquery-ui-core');

这将添加包含在您的 WP 版本中的 jquery 和 jquery-ui。

请参阅Codex 以查看 WP 中包含的其他脚本。

【讨论】：

【解决方案2】：

作为 Flyer 答案的补充，这是正确的（您不需要将 jquery 作为外部文件包含在内，它已经在 WP 核心中，您只需将其加入队列）；您可能需要将您的 jQuery 代码封装在一个闭包中以使 $ 被识别：

(function($){
  // your jquery code here
})(jQuery);

【讨论】：

【解决方案3】：

你可以在你的functions.php文件中添加这段代码：

function test_name_scripts() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('jquery-ui-core');
}

add_action( 'wp_enqueue_scripts', 'test_name_scripts' );

欲了解更多信息，请参阅以下链接。 https://codex.wordpress.org/Function_Reference/wp_enqueue_script

【讨论】：

【解决方案4】：

您可以像这样在模板的 functions.php 文件中使用 <?php wp_enqueue_script(); ?> 将脚本排入队列

function theme_name_scripts() {
    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/jquery.js', array(), '1.0.0', true );
    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/jquery-ui.js', array(), '1.0.0', true );
}

add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

【讨论】：

@vard 是的，但如果你的代码依赖于其他版本的 jquery，你必须将它也包含在你的主题中
那么这不是正确的方法 - 您必须先取消注册默认 jquery 并将新的 jquery 命名为 jquery 否则其他需要 jquery 的队列将失败。
我非常同意你的观点，但是我遇到过这样的情况，我必须将 2 个版本的 jquery 作为一个 jquery 插件包含在与其他版本的 jquery 不兼容的情况下，并且其他 jquery 插件不兼容使用默认的 jquery。

【解决方案5】：

您可以像下面描述的那样添加https://codex.wordpress.org/Function_Reference/wp_enqueue_script

function my_scripts_method() {
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'jquery-ui-core' );
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

【讨论】：