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

Question

I have been trying for the past day to load the jquery library and a js file into my WordPress theme but have no idea how to do this and everywhere I look the instructions are different and haven't worked. 我一直在尝试将jquery库和一个js文件加载到我的WordPress主题中，但不知道如何做到这一点，我看到的说明是不同的，并没有奏效。

Currently: 目前：

functions.php 的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 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

You need add the scripts what you want in the enqeue_scripts function. 您需要在enqeue_scripts函数中添加所需的脚本。 You only need duplicate the current function and update it with the information that you need. 您只需复制当前函数并使用所需信息进行更新。 PD: jQuery is already loaded. 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');
}

This is the function documentation 这是功能文档

The wp_enqueue_script function need at least 2 parameters: a unique name (as string) and the path to the script. wp_enqueue_script函数至少需要2个参数：唯一名称（作为字符串）和脚本的路径。 You can use the get_stylesheet_directory_uri function to get the full path to the root theme directory and then concatenate the rest of path to the js file. 您可以使用get_stylesheet_directory_uri函数获取根主题目录的完整路径，然后将路径的其余部分连接到js文件。

The third parameter is an array of dependencies scripts. 第三个参数是依赖脚本数组。 Example: the current script in the code, named "homeSlide" has as dependency to jQuery. 示例：代码中名为“homeSlide”的当前脚本具有与jQuery的依赖关系。 If your script depends on jQuery, you need to specify it. 如果您的脚本依赖于jQuery，则需要指定它。

And, you need to hook this functions properly. 而且，您需要正确挂钩此功能。

add_action( 'wp_enqueue_scripts', 'enqeue_scripts' );

Your entire code should be like this: 你的整个代码应该是这样的：

<?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

It's not compulsory to add css & js files through functions.php file, you can directly add css & js files in header.php 通过functions.php文件添加css和js文件不是必须的，你可以直接在header.php中添加css和js文件

Just like this: 像这样：

<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>

I hope, this may help you. 我希望，这可能会对你有所帮助。

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

问题描述

2 个解决方案

解决方案1
0 2017-02-07 14:28:05

解决方案2
0 2017-02-07 15:42:38

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

问题描述

2 个解决方案

解决方案1 0 2017-02-07 14:28:05

解决方案2 0 2017-02-07 15:42:38

解决方案1
0 2017-02-07 14:28:05

解决方案2
0 2017-02-07 15:42:38