我的脚本不在wordpress静态站点中工作

Question

I am working on my wordpress site, and i use a static page for my front/home page. I wanted to use parallax scrolling but i cant get my script to load and work.

I linked it in header like this:

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

and this is my scroll 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
});

I found some articles that i would have to use the functions.php and enque the script but i never did that before so im a bit lost, so any help would be highly appreciated.

Answer 1

First things first, lets load the script the "WordPress Way". This will actually help simplify troubleshooting.

To do that, edit your theme's functions.php file.

In that file, add this PHP code. Be sure it is between <?php opening / closing tags.

Typically, I'd recommend adding it to the end of the file, but if your file includes this ?> - that the code you add is before the ?> :

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);
}

Now - once you do this, you will want to be sure that your script is in fact loading. To do that, visit the page, then do a VIEW SOURCE in your browser. When you view source, do a search of the code for "scroll.js" - if you find it, great. Click on the url (or copy / paste it into your browser window) and be sure that the script is referencing the right location. If not, you'll need to be sure to move the script to the right location, so the page will load it.

Next Step
You have a problem with your script that will not work in WordPress. You are referencing jQuery with the $ symbol, AND it appears that you are referencing an element directly, which means there's a good chance the element doesn't exist when the script will run, which means that it won't have the desired effect.

Instead, we need to do two things. Because WordPress loads jQuery in what's called no conflict mode , you need to reference it using jQuery , not $ . AND you need to put your code into a document ready function.

Thankfully, jQuery offers a slick way of doing the document ready that exposes the $ inside of the document ready , for convenience:

// 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
    });
});

If it still does not work after all of this, then you need to open your console in your browser, and look for any javascript errors. They will help you identify what is going on, which is the first step to solving the problem.