如何使 JavaScript 在 Wordpress 车身后工作？ 需要包起来吗？

Question

I created a drag-drop canvas collage game in JS and need to put this into a Wordpress blog post (using the custom html code block, and the normal code block doesn't work, and I am not sure how to use shortcode). It works in editing mode, but when published or refreshed, the initial script and later body tags disappear. Upon refresh/publishing, the post shows: <a href="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></a>

I read somewhere that the code may need to be wrapped, but I don't know how to do that. What would be the best way to make the JS code not break? Thank you!

Below is original code that works in editor mode

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script>
    let currentlyDragging;
    let drawing = false;;
    let offset_x;
    let offset_y;
    let puzzle;

    $(window).load(function () {
        $(".draggable").click(startDragging);
        $(".draggable").mousemove(whileDragging);
        $("#puzzle").mousemove(whileDragging);

        puzzle = document.getElementById("puzzle");
    });

    function startDragging(e) {
        if (!drawing) {
            drawing = true;
            currentlyDragging = $(this);
            if (offset_x == null && offset_y == null) {
                var current_origin_y;
                var current_origin_x;
                var current_origin_y_string = currentlyDragging.context.style['margin-top'];
                if (current_origin_y_string === "") {
                    current_origin_y = 0;
                } else {
                    current_origin_y = parseInt(current_origin_y_string.split("px")[0]);
                }
                var current_origin_x_string = currentlyDragging.context.style['margin-left'];

                if (current_origin_x_string === "") {
                    current_origin_x = 0;
                } else {
                    current_origin_x = parseInt(current_origin_x_string.split("px")[0]);
                }
                offset_x = current_origin_x - e.pageX;
                offset_y = current_origin_y - e.pageY;
            }
        } else {
            drawing = false;
            currentlyDragging = null;
            offset_x = null;
            offset_y = null;
        }
    }

    function whileDragging(e) {
        if (currentlyDragging == null) {
            return false;
        }

        currentlyDragging.css({
            "margin-top": Math.min(Math.max(e.pageY + offset_y, 0), puzzle.clientHeight - currentlyDragging.context.height) + "px",
            "margin-left": Math.min(Math.max(e.pageX + offset_x, 0), puzzle.clientWidth - currentlyDragging.context.width) + "px"
        });
    }
</script>


<style>
    .draggable {
        position: absolute;
        cursor: pointer;
        user-select: none;
    }
</style>

<div id="puzzle" scroll="no" style="height: 400px; width: 80%; margin: auto;overflow: hidden; border: 10px solid #EA9D29;">
    <img class=draggable src="https://i.imgur.com/LFdGIZq.png" width=50 height=390 />
    <img class=draggable src="https://i.imgur.com/E0xYBjv.png" width=80 height=90 />
    <img class=draggable src="https://i.imgur.com/QZeayFy.png" width=80 height=100 />
    <img class=draggable src="https://i.imgur.com/Po2pvt0.png" width=80 height=80 />

</div>
</body> ```

Answer 1

Wordpres best practice is to enqueue scripts using wp_enqueue_script() . You should place your.js into a standalone file and use wp_enqueue_script() to add it to the desired page. You can find reference here - https://developer.wordpress.org/reference/functions/wp_enqueue_script/

And read the developer handbook relating to this topic here with relating to js and css - https://developer.wordpress.org/themes/basics/including-css-javascript/