我的腳本在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和enque的腳本，但我從來沒有這樣做過，所以我有點失落，所以任何幫助將不勝感激。

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錯誤。他們將幫助您確定發生了什麼，這是解決問題的第一步。