如何向WordPress添加简单的jQuery脚本？

Question

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

我到底该怎么做？具体来说,我向哪些文件添加代码？我究竟如何为单个WordPress页面添加它？

Answer 1

我知道你对这些教程的意思.我是这样做的:

首先,您需要编写脚本.在您的主题文件夹中创建一个名为'js'的文件夹.在您的javascript的该文件夹中创建一个文件.例如your-script.js.将jQuery脚本添加到该文件中(您不需要<script>.js文件中的标记).

以下是您的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 Answers上询问WordPress问题.

Answer 2

经过多次搜索,我终于找到了适合最新WordPress的东西.以下是要遵循的步骤:

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

3. 确保您的自定义jQuery .js看起来像这样:

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

4. 转到主题目录,打开functions.php

5. 在顶部附近添加一些看起来像这样的代码:

   //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');
   

6. 检查您的网站,以确保它的工作!

Answer 3

如果您使用wordpress 子主题为主题添加脚本,则应将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

Answer 4

您可以在主题的function.php文件中添加jQuery或javascript。代码如下：

add_action( 'wp_enqueue_scripts', 'add_my_script' );

function add_my_script() {
wp_enqueue_script(
    'your_script_name', // your script unique name 
    get_template_directory_uri().'/js/your-script.js', //script file location
    array('jquery') //lists the scripts upon which your script depends
);
}

有关更多详细信息，请访问本教程：http : //www.codecanal.com/add-simple-jquery-script-wordpress/