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

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

这是功能文档

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

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

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

如何将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