如何在 WordPress 中添加一个简单的 jQuery 脚本？

问题描述

我阅读了 Codex 和一些关于在 WordPress 中使用 jQuery 的博客文章，这非常令人沮丧。我已经在 functions.php 文件中加载了 jQuery，但是所有的指南都很糟糕，因为他们假设你已经有了大量的 WordPress 体验。例如，他们说现在我正在加载 jQuery 通过 functions.php 文件，现在我只需要加载我的 jQuery 。

我该怎么做？什么文件，具体来说，我添加代码？我如何为单个 WordPress 页面添加它？

最佳解决方案

我知道你对教程的意思。这是我如何做到的：

首先你需要写你的脚本。在你的主题文件夹中创建一个叫做’js’ 的文件夹。在该文件夹中为您的 javascript 创建一个文件。例如。 your-script.js 。将您的 jQuery 脚本添加到该文件 (您不需要.js 文件中的<script> 标签) 。

以下是您的 jQuery 脚本 (在 wp-content /themes /your-theme /js /your-scrript.js) 中的示例：

jQuery(document).ready(function($) {
  $('#nav a').last().addClass('last');
})

注意，在函数开始时我使用 jQuery 而不是 $。

好的，现在打开你的主题的 functions.php 文件。您将需要使用 wp_enqueue_script()功能，以便您可以添加脚本，同时告诉 WordPress 它依赖于 jQuery 。以下是如何做到这一点：

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_enqueue_script(
        'your-script', // name your script so that you can attach other scripts and de-register, etc.
        get_template_directory_uri() . '/js/your-script.js', // this is the location of your script file
        array('jquery') // this array lists the scripts upon which your script depends
    );
}

假设你的主题在正确的地方有 wp_head 和 wp_footer，这应该是正常的。让我知道，如果你需要更多的帮助。

WordPress 的问题可以在 WordPress Answers 上询问。

次佳解决方案

经过多次搜索，我终于找到了与最新的 WordPress 一起使用的东西。以下是以下步骤：

找到您的主题目录，在您的自定义 js(此示例中为 custom_js) 的目录中创建一个文件夹。
将您的自定义 jQuery 放在此目录中的.js 文件 (本例中为 jquery_test.js) 中。

确保您的自定义 jQuery .js 如下所示：

(function($) {
$(document).ready(function() {
$('.your-class').addClass('do-my-bidding');
})
})(jQuery);

转到主题的目录，打开 functions.php

在顶部附近添加一些如下所示的代码：

//this goes in functions.php near the top
function my_scripts_method() {
// register your script location, dependencies and version
   wp_register_script('custom_script',
   get_template_directory_uri() . '/custom_js/jquery_test.js',
   array('jquery'),
   '1.0' );
 // enqueue the script
  wp_enqueue_script('custom_script');
  }
add_action('wp_enqueue_scripts', 'my_scripts_method');

检查你的网站，以确保它的工作原理！

第三种解决方案

如果您使用 wordpress child theme 添加脚本到您的主题，您应该将 get_template_directory_uri 功能更改为 get_stylesheet_directory_uri，例如：

家长主题：

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_register_script(
        'parent-theme-script', 
        get_template_directory_uri() . '/js/your-script.js', 
        array('jquery') 
    );

    wp_enqueue_script('parent-theme-script');
}

儿童主题：

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_register_script(
       'child-theme-script', 
       get_stylesheet_directory_uri() . '/js/your-script.js', 
       array('jquery') 
    );

    wp_enqueue_script('child-theme-script');
}

get_template_directory_uri：/your-site /wp-content /themes /parent-theme

get_stylesheet_directory_uri：/your-site /wp-content /themes /child-theme

第四种方案

除了通过功能将脚本放在一起，您可以在「任何模板」中的标题，页脚中包含一个链接 (一个链接 rel 标签) 。你只需要确保路径正确。我建议使用这样的东西 (假设你在你的主题的目录中) 。

<script type="javascript" href="<?php echo get_template_directory_uri();?>/your-file.js"></script>

一个很好的做法是将这个权利包括在关闭身体标签之前，或者至少在你的页脚之前。您还可以使用 php include 或其他几种方法来拉入此文件。

<script type="javascript"><?php include('your-file.js');?></script>

第五种方案

您可以使用此插件添加自定义 javascript 或 jquery 。 https://wordpress.org/plugins/custom-javascript-editor/

当你使用 jQuery 不要忘记使用 jquery noconflict 模式

参考文献

How do I add a simple jQuery script to WordPress?

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

如何在 WordPress 中添加一个简单的 jQuery 脚本？