如何使JavaScript在Wordpress正文中工作?它需要包装吗

Question

我在JS中创建了一个拖放画布拼贴游戏，需要将其放入Wordpress博客文章中(使用自定义的html代码块，普通的代码块不起作用，我不知道如何使用shortcode(。它在编辑模式下工作，但当发布或刷新时，初始脚本和稍后的正文标记将消失。刷新/发布后，帖子显示：<a href="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></a>

我在某个地方读到代码可能需要包装，但我不知道如何做到这一点。让JS代码不崩溃的最佳方法是什么？非常感谢。

以下是在编辑器模式中工作的原始代码

<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的最佳实践是使用wp_enqueue_script()对脚本进行排队。您应该将.js放入一个独立的文件中，并使用wp_enqueue_script()将其添加到所需的页面中。你可以在这里找到参考资料-https://developer.wordpress.org/reference/functions/wp_enqueue_script/

在这里阅读与js和css相关的开发人员手册https://developer.wordpress.org/themes/basics/including-css-javascript/