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

Answer 2

有一种非常简单的方法可以使用名为“代码嵌入”的插件来添加 JS。

1. 安装插件后，开始一个新的帖子或页面。
2. 在自定义字段元框中输入名称 CODE1 和您的嵌入代码作为值。 保存这个。
3. 在您的帖子中添加 {{CODE1}} 您希望嵌入代码出现的位置。

使用以下链接查看使用此插件的步骤。 指导