javascript - Javascript 在 Wordpress 中不起作用

Question

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

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

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

<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 文件包含在内，并使用一些基本的 JS 来为标题设置动画或滚动到顶部——这也没有奏效。

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

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

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

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

score 3 · Accepted Answer

两件事要解决 -

错误：SyntaxError：非法字符源文件： http ://rosspw.com/wp-content/themes/rosspw2013/js/rosspw.js行：21，列：5 源代码：}); ;â€‹</李>
尝试在关闭 body 标记之前添加此 JS 代码。

让我知道它是否适合您。

尝试Firebug用于调试。

为了更好地理解检查这个截图 -

正如您在加载之前使用 jquery 一样。

jQuery

score 2 · Accepted Answer

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

jQuery();在 WordPress中使用 jQuery 的正确方法$();是：

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

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

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

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

希望这对你有用！

score 1 · Accepted Answer

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

第 70-71 行：

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

这给出了一个例外： Uncaught ReferenceError: $ is not defined

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

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

您可以执行以下两项操作之一：

将您的 jquery.js 引用移动到页面顶部。
加载文档后调用您的 jquery 函数。就像是：

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

score 0 · Accepted Answer

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

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

然后在你的外部脚本上：

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

4 回答 4