我的脚本在wordpress静态站点中不起作用 - My Script is not working in wordpress static site

我正在我的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
});

我

找到了一些文章，我必须使用这些功能.php并编写脚本，但我以前从未这样做过，所以我有点迷茫，所以任何帮助将不胜感激。

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

为此，请编辑主题的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在所谓的无冲突模式下加载jQuery，所以你需要使用jQuery而不是$来引用它。并且您需要将代码放入文档就绪函数中。

值得庆幸的是，为了方便起见，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 错误。他们将帮助您确定正在发生的事情，这是解决问题的第一步。