添加自定义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');