Question

过去一天我一直在尝试将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>

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

Answer 2

添加css＆amp ;; js文件通过functions.php文件，可以直接添加css＆amp; header.php中的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>

我希望，这可能对你有帮助。

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

2 个答案: