将自定义 Js 添加到 Wordpress 主题

Question

I have this short javascript I want to add to a client's wordpress. Im not really savvy on how wordpress operates or where to add my code. I've read some articles online but kinda confused on how to go about this. I added what I read is needed to register the script and to tell wordpress to use Jquery yet I keep recieving errors. Before it wasnt registering that it needed jquery. When i added the wptuts_script it won't recongnize that now. Did i put this code in the wrong place? here is the file path to the js file html/wp-content/themes/metis/js Basically I want to add this js (using 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

The problem is that you're completely mixing PHP and JavaScript. You should be doing two things:

1. Add a custom JavaScript file to your theme
2. Register / enqueue that .js file in a plugin or functions.php

Your JavaScript also has some syntax errors.

The following is an example of what your files could look like:

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 (in 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

There is a Very easy way to add JS using a plugin called "Code Embed".

1. Once you have the plugin installed start a new post or page.
2. In the Custom Fields meta box enter a name of CODE1 and your embed code as the value. Save this.
3. In your post add {{CODE1}} where you wish the embed code to appear.

Use Following Link see step by step of using this plugin. Guide