私のスクリプトはWordPressの静的サイトで動作していません

Question

私は私のWordPressのサイトで作業しています、私は正面/ホームページのために静的なページを使用しています。私は視差スクロールを使いたいと思っていましたが、スクリプトを読み込んで作業することはできません。

私はこのようにヘッダにそれをリンク：私はのfunctions.phpを使用してenqueしなければならないいくつかの記事を見つけました

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

：

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

と、これは私のスクロールスクリプトですスクリプトが、私は少し前にそれをやったことがありませんので、少し失われたので、どんな助けも高く評価されるでしょう。

Answer 1

まず最初に、スクリプトを「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); 
} 

今 - いったんこれを行うと、あなたのスクリプトが実際にロードされていることを確認したいでしょう。これを行うには、ページにアクセスし、ブラウザでVIEW SOURCEを実行します。ソースを表示するときは、 "scroll.js"のコードを検索してください。見つけたら、素晴らしいです。 URLをクリックするか、ブラウザのウィンドウにコピーして貼り付けて、スクリプトが正しい場所を参照していることを確認してください。そうでない場合は、適切な場所にスクリプトを移動する必要があります。そのため、ページにロードされます。

次のステップ
あなたははWordPressでに動作しないことをスクリプトに問題があります。 $シンボルでjQueryを参照していて、要素を直接参照しているように見えます。つまり、スクリプトが実行されるときに要素が存在しないということです。つまり、目的の効果が得られない可能性があります。

代わりに、2つのことを行う必要があります。 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のエラーを探す必要があります。彼らはあなたが何が起こっているのかを特定するのを手助けします。これは問題を解決するための第一歩です。