如何将 jquery 库和 js 文件加载到 wordpress 主题中？答案

【问题标题】：How do I load jquery library and a js file into wordpress theme?如何将 jquery 库和 js 文件加载到 wordpress 主题中？
【发布时间】：2017-06-24 20:06:51
【问题描述】：

过去一天我一直在尝试将 jquery 库和 js 文件加载到我的 WordPress 主题中，但不知道如何执行此操作，而且我看到的所有地方的说明都不同且没有用。

目前：

functions.php

<?php

function wpb_custom_new_menu() {
    register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}

add_action( 'init', 'wpb_custom_new_menu' );

function enqueue_stylesheets() {
    wp_enqueue_style('style', get_stylesheet_directory_uri() . '/style.css');
}

function enqeue_scripts() {
    wp_enqueue_script('homeSlider', get_stylesheet_directory_uri() . '/js/homeSlider.js', array('jquery'));
}

add_action('wp_enqueue_scripts', 'enqueue_stylesheets');

header.php

<head> 

    <meta charset="utf-8"> 

    <meta name="viewport" content="width=device-width, initial-scale=1">  

    <title><?php echo get_bloginfo( 'name' ); ?></title>

    <meta name="description" content="<?php get_bloginfo( 'description' ); ?>">

   <?php wp_head(); ?>

</head>

【问题讨论】：

标签： javascript jquery html wordpress wordpress-theming

【解决方案1】：

您需要在enqeue_scripts 函数中添加您想要的脚本。您只需要复制当前功能并使用您需要的信息对其进行更新。 PD: jQuery 已经加载。

function enqeue_scripts() {
    wp_deregister_script('jquery'); 
    wp_register_script('jquery', 'https://code.jquery.com/jquery-2.2.4.min.js'); 
    wp_enqueue_script('jquery');
    wp_enqueue_script('homeSlider', get_stylesheet_directory_uri() . '/js/homeSlider.js', array('jquery'));
    wp_enqueue_script('a unique name', 'source_path/js/another.js');
}

这是function documentation

wp_enqueue_script 函数至少需要 2 个参数：唯一名称（作为字符串）和脚本路径。您可以使用get_stylesheet_directory_uri 函数获取到根主题目录的完整路径，然后将其余路径连接到 js 文件。

第三个参数是一个依赖脚本数组。示例：代码中名为“homeSlide”的当前脚本依赖于 jQuery。如果你的脚本依赖于 jQuery，你需要指定它。

而且，你需要正确地挂钩这个函数。

add_action( 'wp_enqueue_scripts', 'enqeue_scripts' );

你的整个代码应该是这样的：

<?php

function wpb_custom_new_menu() {
    register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}

add_action( 'init', 'wpb_custom_new_menu' );

function enqueue_stylesheets() {
    wp_enqueue_style('style', get_stylesheet_directory_uri() . '/style.css');
}

function enqeue_scripts() {
    wp_deregister_script('jquery'); 
    wp_register_script('jquery', 'https://code.jquery.com/jquery-2.2.4.min.js'); 
    wp_enqueue_script('jquery');
    wp_enqueue_script('homeSlider', get_stylesheet_directory_uri() . '/js/homeSlider.js', array('jquery'));
}

add_action('wp_enqueue_scripts', 'enqueue_stylesheets');
add_action('wp_enqueue_scripts', 'enqeue_scripts');

【讨论】：

从我的原始帖子中可以看出，我已经这样做了。还是不行。
您需要修复您正在调用的操作函数的名称。参见：add_action('wp_enqueue_scripts', 'enqueue_scripts');
这会创建一条错误消息“警告：缺少 add_action() 的参数 2，在 /homepages/19/d635628066/htdocs/ArmstrongWebsiteTest/wp-content/themes/Armstrong/functions.php 中调用13 并在第 398 行的 /homepages/19/d635628066/htdocs/ArmstrongWebsiteTest/wp-includes/plugin.php 中定义”。它仍然不能使 jquery 工作。
对不起。你能看看你是否正确粘贴了add_action函数的两个参数吗？ add_action('wp_enqueue_scripts', 'enqeue_scripts');
是的。如果我按照您显示的方式放置它，则会出现错误消息。似乎是它不喜欢'enqeue_scripts'部分但对'wp_enqeue_scripts'没有问题

【解决方案2】：

通过functions.php文件添加css&js文件不是必须的，可以直接在header.php中添加css&js文件

就像这样：

<head> 

    <meta charset="utf-8"> 

    <meta name="viewport" content="width=device-width, initial-scale=1">  

    <title><?php echo get_bloginfo( 'name' ); ?></title>

    <meta name="description" content="<?php get_bloginfo( 'description' ); ?>">

    //Include CSS files
    <link rel="stylesheet" href="<?php echo esc_url( get_template_directory_uri() ); ?>/css/style.css">

    //Including JS files
    <script type="text/javascript" src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/homeSlider.js"></script>

   <?php wp_head(); ?>

</head>

希望对你有所帮助。

【讨论】：

是的，你是对的。这行得通，但方法不正确！
可能是这样，但是我们在创建自定义主题的时候，直接把这些css&js添加到头文件中&对于那些运行在footer中的js文件包含在wp_footer()函数之前的footer.php中.
你给了正确的路径和正确的js和css吗？请评论上面的 wp_enqueue_script 函数，您在其中将所需的 js 和 css 排入队列。
有缓存插件吗？当直接包含在标题中时，站点如何不读取 css 和 js？我也很困惑。