javascript - 我的脚本无法在 WordPress 静态站点中运行

Question

我正在开发我的 WordPress 网站，我的首页/主页使用静态页面。我想使用视差滚动，但无法加载和运行我的脚本。

我将它链接到标题中，如下所示:

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/scroll.js"></script>

这是我的滚动脚本:

(function($) {
    $.fn.parallax = function(options) {
        var windowHeight = $(window).height();
        // Establish default settings
        var settings = $.extend({
            speed: 0.15
        }, options);

        // Iterate over each object in collection
        return this.each( function() {

        // Save a reference to the element
        var $this = $(this);

            // Set up Scroll Handler
            $(document).scroll(function(){
                var scrollTop = $(window).scrollTop();
                var offset = $this.offset().top;
                var height = $this.outerHeight();

                // Check if above or below viewport
                if (offset + height <= scrollTop || offset >= scrollTop + windowHeight) {
                return;
                }

                var yBgPosition = Math.round((offset - scrollTop) * settings.speed);

                // Apply the Y Background Position to Set the Parallax Effect
                $this.css('background-position', 'center ' + yBgPosition + 'px'); 
            });
        });
    }
}(jQuery));

$('.parallax-section-1').parallax({
speed : 0.15
});

我发现一些文章我必须使用functions.php并对脚本进行排序，但我以前从未这样做过，所以我有点迷失，所以任何帮助将不胜感激。

Answer 1

首先，让我们以“WordPress 方式”加载脚本。这实际上有助于简化故障排除。

为此，请编辑主题的 functions.php文件。

在该文件中，添加此 PHP 代码。确保它在 <?php 之间开始/结束标签。

通常，我建议将其添加到文件的末尾，但如果您的文件包含此 ?> - 您添加的代码位于 ?> 之前 :

add_action('enqueue_scripts', 'my_custom_script');

function my_custom_script() {
    // Be sure jQuery is loading
    wp_enqueue_script('jquery');
    // Load your script
    wp_enqueue_script('my-parallax-script', get_template_directory_uri() . '/js/scroll.js', array('jquery'), FALSE, TRUE);
}

现在 - 一旦您执行此操作，您将需要确保您的脚本确实正在加载。为此，请访问该页面，然后在浏览器中执行“查看源”。当您查看源代码时，搜索“scroll.js”的代码 - 如果找到它，那就太好了。单击 URL(或将其复制/粘贴到浏览器窗口中)并确保脚本引用正确的位置。如果没有，您需要确保将脚本移动到正确的位置，以便页面加载它。

下一步
您的脚本存在问题，在 WordPress 中无法运行。您正在使用 $ 引用 jQuery符号，并且看起来您正在直接引用一个元素，这意味着当脚本运行时该元素很可能不存在，这意味着它不会达到预期的效果。

相反，我们需要做两件事。因为 WordPress 在所谓的 no conflict mode 中加载 jQuery。 ，您需要使用 jQuery 来引用它，不是$ 。并且您需要将代码放入 document ready功能。

值得庆幸的是，jQuery 提供了一种灵活的方式来准备文档，公开 $ 在文档内部准备好，为了方便:

// Shorthand version of "No-conflict-safe" document ready
jQuery(function($) {
    // Inside here, we can use $ instead of jQuery
    $('.parallax-section-1').parallax({
        speed : 0.15
    });
});

如果完成所有这些操作后仍然无法正常工作，那么您需要在浏览器中打开控制台，并查找任何 JavaScript 错误。他们将帮助您确定发生了什么，这是解决问题的第一步。