将自定义 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. 在插件或functions.php中注册/排队该.js文件

你的 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' );