Javascript 在 Wordpress 中不起作用

Question

我的网站是用 Wordpress 构建的，最近我一直在向它添加一些基本的 javascript：RossPW.com

但是，我添加的所有 javascript 似乎都不起作用，我一生都无法弄清楚为什么！

例如，我在标题中添加了以下简单的 sn-p，以淡入 -- 但这不起作用：

<script type="text/javascript">
$('body').hide();
$('body').fadeIn(3000);
</script>

到目前为止，为了尝试解决此问题，我尝试了两件事：

1) 将 wp_enqueue 正确添加到 header.php（过去已知这会导致 wordpress 出现一些问题：

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

2）我还尝试将 javascript 作为外部 .js 文件 here 包含在内，并使用一些基本的 JS 来为标题设置动画或滚动到顶部——这也没有奏效。

任何帮助将不胜感激 - 谢谢！

更新： 为了确保正确加载js/jquery。我已经尝试过这个基本警报——它确实有效！

<script type="text/javascript">
       alert('ALERT!')
</script>

但是，我编写的所有其他 javascript 都没有——而且我不知道为什么。我编写的 javascript 似乎很好，如下所示：jsfiddle.net/v9NSR/

Answer 1

需要解决的两件事 -

• 错误：语法错误：非法字符源文件： http://rosspw.com/wp-content/themes/rosspw2013/js/rosspw.js 线：21, 列：5 源代码：});​ ;​
• 尝试在关闭 body 标记之前添加此 JS 代码。

让我知道它是否适合你。

尝试使用Firebug进行调试。

为了更好地理解请查看此屏幕截图 -

因为您在加载之前使用 jquery。

Answer 2

您的代码中的第一件事是使用$ 符号调用jQuery。当您在 WordPress 中编写 jQuery 代码时，您必须确保与代码库没有冲突，因为 WordPress 可能会使用其他库并且可能会搞砸。

在 WordPress 中使用 jQuery 的正确方法是 jQuery(); 而不是 $(); 在您的情况下是：

<script type="text/javascript">
$('body').hide();
$('body').fadeIn(3000);
</script>

另一种方法是使用 jQuery $.noConflict() 函数包装 jQuery 代码，例如：

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

查看this 以获取有关 noConflict 函数的更多信息和完整文档。

希望它对你有用！

Answer 3

看起来您是在加载 jquery.js 的脚本标记之前调用 jquery 函数。

第 70-71 行：

$('body').hide();
$('body').fadeIn(3000);

这给出了一个例外： 未捕获的 ReferenceError: $ 未定义

但是 jquery.js 直到第 94 行才加载：

<script type='text/javascript' src='http://rosspw.com/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>

您可以做以下两件事之一：

1. 将 jquery.js 引用移至页面顶部。

2. 在加载文档后调用您的 jquery 函数。比如：

   函数fadeInBody() { $('body').hide(); $('body').fadeIn(3000); } window.onload = fadeInBody;

Answer 4

尝试在 wp_footer() 之前的页脚添加 jquery，然后是您的脚本

<?php
    wp_enqueue_script('jquery');
    wp_enqueue_script('myscript', 'myscript.js', array('jquery'));
    wp_footer();
?>

然后在你的外部脚本上：

$(document).ready(function () {
    $('body').hide();
    $('body').fadeIn(3000);
});