将 jQuery 包含到 Wordpress 模板中答案

【问题标题】：Include jQuery into Wordpress template将 jQuery 包含到 Wordpress 模板中
【发布时间】：2013-06-03 11:43:22
【问题描述】：

我有一个定制的幻灯片，我使用 jQuery 开发。它在我的本地机器上完美运行，但是当我尝试将它转换到 wordpress 服务器时，它就无法正常工作......

这就是我链接我的 javascript 文件的方式：

<?php wp_enqueue_script("jquery"); ?>       
        <?php wp_head(); ?>
        <script type="text/javascript" src="<?php bloginfo('template_url') ?>/js/jQuery.js"></script>
        <script type="text/javascript" src="<?php bloginfo('template_url') ?>/js/JQueryUI.js"></script>
        <script type="text/javascript" src="<?php bloginfo('template_url') ?>/js/slider.js"></script>
        <script type="text/javascript" src="<?php bloginfo('template_url') ?>/js/gallery.js"></script>

我还检查了 javascript 是否正常工作（警报之类的东西）。但与 jQuery 相关的一切都没有。

迫切需要帮助。任何提示或相关教程的链接都可以。提前谢谢！

【问题讨论】：

你解决了吗？怎么样？

标签： jquery wordpress web slideshow

【解决方案1】：

您应该在您的functions.php 文件中使用wp_enqueue_script()，而不是您的header.php。（而且你添加了两次 jQuery）

functions.php:

function my_scripts_method() {
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'jquery-ui', get_template_directory_uri() . '/js/JQueryUI.js', );
    wp_enqueue_script( 'slider', get_template_directory_uri() . '/js/slider.js' );
    wp_enqueue_script( 'gallery', get_template_directory_uri() . '/js/gallery.js' );
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

您还应该注意，WordPress 将 jQuery 排入noConflict mode，因此您需要noConflict wrappers 才能使用$：

jQuery(document).ready(function($) {
    // your code here
});

然后您只需调用wp_head()，WordPress 就会自动将这些 javascript 添加到您的页面中。

【讨论】：

我不明白你的意思...我在哪个文件中添加你编写的代码，header.php 或slider.js???
wp_head() 应该在</head> in header.php. Your jQuery stuff in slider.js`之前。
您在gallery.js 的第 2 行只有 var 。删除它。
我确实在之前有 wp_head()。
感谢您指出gallery.js中的错误，但是并没有解决。

【解决方案2】：

正如您在此处看到的：Function Reference/wp head，在 在二十一主题 示例中，他们添加了一条注释：

/* Always have wp_head() just before the closing </head>
 * tag of your theme, or you will break many plugins, which
 * generally use this hook to add elements to <head> such
 * as styles, scripts, and meta tags.
 */

这只是说您需要在关闭<head></head> 之前放置wp_head(); 函数。

所以试着把这行：

<?php wp_head(); ?>

在您的站点中关闭 <head> 之前的最后一行。

我看到的另一个问题是你忘了用;结束php行

这很关键！

使用您在此处提供的代码，将其更改为：

<?php wp_enqueue_script("jquery"); ?>       
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jQuery.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/JQueryUI.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/slider.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/gallery.js"></script>
    <?php wp_head(); ?>

【讨论】：

感谢您的回复，但这并没有帮助...滑块的乐趣在于它向我展示了第一张幻灯片，并且没有改变它...跨度>
你能发个链接让我看看问题吗？