如何在 WordPress 主题中包含 jQuery？

Posted 2023-02-24

【中文标题】如何在 WordPress 主题中包含 jQuery？

【英文标题】：How to include jQuery in a WordPress theme?

【发布时间】：2014-02-10 23:04:31

【问题描述】：

我是 WordPress 的新手，我正在研究如何将 jQuery 包含到主题中。

我在 functions.php 主题中创建了以下函数：

function load_java_scripts() 
    // Load FlexSlider javascript that handle the SlideShow:
    wp_enqueue_script('jQuery-js', 'http://code.jquery.com/jquery.js', array(), '1.0', true);

add_action('wp_enqueue_scripts', 'load_java_scripts');

所以我认为我可以将它添加为一些其他 JavaScript 或 CSS 本地资源，但我不确定这种方法，因为在这种情况下 jquery.js 不是本地资源，而是在线资源（是一样的吗？）

我也有一些疑问，因为在网上搜索我发现了不同的方法来将 jQuery 添加到我的主题中，比如one。

你能给我一些关于如何正确完成这项任务的信息吗？

【问题讨论】：

为什么要手动包含 jquery？不是都已经包含了吗？

【参考方案1】：

您没有使用 WordPress 中的 jQuery 有什么具体原因吗？

如果您需要添加依赖于 jQuery 的 JavaScript 文件，您可以将 jQuery 添加为 dependency。

<?php

function my_scripts_method() 
    wp_enqueue_script(
        'custom-script',
        get_stylesheet_directory_uri() . '/js/custom_script.js', #your JS file
        array( 'jquery' ) #dependencies
    );


add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

?>

请注意，WordPress 会在 no conflict wrappers 中加载 jQuery。所以你的代码应该是这样的：

jQuery(document).ready(function($) 
    // Inside of this function, $() will work as an alias for jQuery()
    // and other libraries also using $ will not be accessible under this shortcut
);

【讨论】：

谢谢@RRikesh，这就是问题所在。我忽略了 jQuery 加载。我不知道无冲突包装器。由于某种原因，我似乎无法将您的答案标记为解决方案。

【参考方案2】：

由于 WP 已经自带 jQuery，我会简单地为你的主题加载它，像这样将它添加到你的 functions.php 中

function load_scripts()
    //Load scripts:
    wp_enqueue_script('jquery'); # Loading the WordPress bundled jQuery version.
    //may add more scripts to load like jquery-ui

add_action('wp_enqueue_scripts', 'load_scripts');

有几种方法可以将 jQuery 包含到主题中。我总是使用 WP 捆绑版本，我觉得非常简单。

【参考方案3】：

在 wordpress 中不需要自定义 Jquery。 将依赖项添加为“jquery”，它将自动加载。

【参考方案4】：

试试这个，

<?php
    function load_external_jQuery() 
        wp_deregister_script( 'jquery' ); // deregisters the default WordPress jQuery 
        $url = 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'; // the URL to check against  
        $test_url = @fopen($url,'r'); // test parameters  
        if( $test_url !== false )  // test if the URL exists if exists then register the external file  
            wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js');
        
        else// register the local file 
            wp_register_script('jquery', get_template_directory_uri().'/js/jquery.js', __FILE__, false, '1.7.2', true);  
        
        wp_enqueue_script('jquery'); // enqueue the jquery here
    
    add_action('wp_enqueue_scripts', 'load_local_jQuery'); // initiate the function 
?>

【参考方案5】：

您可以使用以下方法来包含 jQuery：

wp_enqueue_script( 'jquery' );  

wp_enqueue_script( 'load-js-validate', 'foldername/jquery.js' );

Directly add in header file.<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.js"></script>

function js_scripts() 
wp_enqueue_script( 'jquery', get_template_directory_uri() . '/js/example.js');


add_action( 'wp_enqueue_scripts', 'js_scripts' ); // add this in function file