如何正确地将jQuery加载到WordPress中

Question

我有一个WordPress网站，想要使用一个叫DataTables的jQuery插件。然而我一直在苦恼如何正确地将jQuery脚本和DataTables脚本加载到WordPress中。

我知道应该使用wp_enqueue_script("jquery")，但我不知道该放在哪里以及如何加载其他所需的jQuery插件。

我最近尝试了把这个代码放在我的WordPress网站的header.php文件中：

<?php wp_enqueue_script("jquery"); ?>

<?php wp_head(); ?>

任何帮助都将不胜感激！

- grad_student

Answer 1

jQuery被包含在WordPress核心中，当你引用你的JavaScript时，你可以声明你的脚本是依赖于jQuery加载的。这可以通过在wp_enqueue_script的第三个参数中进行配置：http://codex.wordpress.org/Function_Reference/wp_enqueue_script。

正确使用wp_enqueue_script的方法是将其包含在附加到特定操作钩子的回调函数中。当我开始学习WordPress时，这听起来非常复杂，但实际上它是一个非常好的系统，因为它允许你指定在WordPress初始化期间运行代码的时间。

所以，在你的functions.php文件或插件中，添加你的钩子即可。

add_action( 'wp_enqueue_scripts', 'my_js_include_function' );

然后，在那个函数中，您运行实际包含，并声明您的脚本依赖于jquery。

function my_js_include_function() {
    wp_enqueue_script( 'my_script.js', '/path/to/myscript.js', array('jquery') );
}

wp_enqueue_script()的第一个参数是您为脚本分配的任意名称。如果您随后声明另一个脚本依赖于原始脚本，则可以在第三个参数中引用它。

- Andrew Bartel

---

直接从文档中获取：必须使用核心捆绑的脚本，而不是包含它们自己版本的脚本。例如jQuery。 不要托管自己的jQuery。 - User

Answer 2

在我的functions.php文件中：

function mytheme_scripts() {
    wp_enqueue_script( 'myscript', get_template_directory_uri() . '/js/myscript.js', array('jquery'), false, true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );

function custom_shortcode3() {

echo "wp_enqueue_scripts();";
}
add_shortcode( 'totaldeprodutos', 'custom_shortcode3' );

在我的/js/myscript.js文件中：

<div id="show"></div>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

                    function total() {
        setInterval(function () {
            $('#show').load('datatotaldeprodutos.php')
        }, 1000);
    };

我需要短代码展示函数total()

- Marcelo F

Answer 3

最好的方法是通过functions.php文件实现，

URL: http://codex.wordpress.org/Function_Reference/wp_enqueue_script

示例：

/**
 * Proper way to enqueue scripts and styles
 */
function theme_name_scripts() {
    wp_enqueue_style( 'style-name', get_stylesheet_uri() );
    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}

add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

这段代码的作用是创建一个名为“theme_name_scripts”的函数，然后调用wp_enqueue_script()函数，它有5个参数：“脚本名称”、“URL”、“数组”、“版本”和“True/False”（True在页眉中加载，False在页脚中加载）...

Add_action部分是将其附加到WordPress的钩子。它很容易理解，您需要它才能使函数正常工作。它说从函数'theme_name_scripts'或函数名称wp_enqueue_scripts...

祝你好运，如果需要更多帮助，请尝试谷歌搜索“WordPress，enqueue Scripts教程”

- I am Cavic

Answer 4

如果你无法使用任何WordPress方法，你仍然可以在extension_name.php中手动包含你的Jquery插件，在wp_enqueue_script("jquery");之后。

echo "<script src='http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js'></script>";

- sidney