javascript - 将自定义 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' );