添加自定義Js到Wordpress主題

Question

我有這個簡短的JavaScript我想添加到客戶端的WordPress。我對WordPress如何操作或添加我的代碼不太瞭解。我在網上閱讀了一些文章，但有點困惑如何去做這件事。我添加了我需要註冊的腳本，並告訴wordpress使用Jquery，但我不斷收到錯誤。在註冊之前，它需要jQuery。當我添加wptuts_script它現在不會識別。我把這段代碼放在了錯誤的地方嗎？這裏是文件路徑js文件html/wp-content/themes/metis/js基本上我想添加這個js（使用jQuery）：

document.ready(function() { 

    function wptuts_scripts_with_jquery() 
    { 

     // or 
     // Register the script like this for a theme: 
     wp_register_script('custom-script', get_template_directory_uri() . '/js/test.js', array('jquery')); 

     // For either a plugin or a theme, you can then enqueue the script: 
     wp_enqueue_script('custom-script'); 
    } 
    add_action('wp_enqueue_scripts', 'wptuts_scripts_with_jquery'); 

    function updatebtm() { 
     var pos = $(window).scrollTop(); 
     console.log(pos); 
     if (pos >= 800) { 
      $('.portfolio-top').css('display', 'none'); 

     } else { 

      $('.portfolio-top').css('display', 'block'); 
     } 

    } $(window).bind('scroll', updatebtm); 

}); 

---

Answer 1

的問題是，你完全混合PHP和JavaScript。你應該做兩件事情：

1. 添加自定義JavaScript文件到你的主題
2. 註冊/入隊是.js文件的插件文件或的functions.php

你的JavaScript也有一些語法錯誤。

下面是一個什麼樣的文件可能看起來像一個例子：

的JavaScript：

(function($) { 

    $(document).ready(function() { 

     function updatebtm() { 
      var pos = $(window).scrollTop(); 
      console.log(pos); 
      if (pos >= 800) { 
       $('.portfolio-top').css('display', 'none'); 

      } else { 

       $('.portfolio-top').css('display', 'block'); 
      } 

     } 
     $(window).bind('scroll', updatebtm); 

    }); 

})(jQuery); 

PHP（在的functions.php）：

function wptuts_scripts_with_jquery() { 
    wp_enqueue_script('custom-script', get_template_directory_uri() . '/js/test.js', array('jquery')); 
} 
add_action('wp_enqueue_scripts', 'wptuts_scripts_with_jquery');