WordPress嵌入代码运行框 清空 运行代码 复制代码

在WordPress中嵌入代码运行框 清空 运行代码/复制代码

许多网站都采用了一种类似于“运行代码、复制代码、清空代码、另存为代码”的静态代码运行框，这些工具允许用户直接点击运行按钮来查看代码效果，极大地提升了访客的互动体验。WordPress作为一个功能强大的内容管理系统，同样可以实现这样的短代码运行框功能。以下是效果图：

实现方法：

1. 下载并上传文件：
– 首先，您需要下载`run-code-OL.js`文件，并将其上传至您的服务器。

2. 修改主题文件：
接下来，在您主题目录下的`functions.php`文件中，找到适当的位置并添加以下代码：

/**添加可运行代码框*/
function textarea($atts, $content = null) {
return '<script src="http://blog.haitianhome.com/wp-content/themes/prowerV3.1/run-code-OL.js" _fcksavedurl=""http://blog.haitianhome.com/wp-content/themes/prowerV3.1/run-code-OL.js"" type="text/Javascript" charset="utf-8"></script>
<form>
<div align="center">
<textarea id="code" style="width:555px;height:255px;" cols="80" rows="15">'.$content.'</textarea>

<input type="button"onclick=runCode(code) value="运行代码" style="border:1px solid #B1B4CD;background:#696D81;color:#FFF; padding-top:5px;">
<input type="button"onclick=copycode(code) style="border:1px solid #B1B4CD;background:#696D81;color:#FFF; padding-top:5px;"value="复制代码" onclick="copycode(runcode3)">
<input type="button"onclick=saveCode(code) style="border:1px solid #B1B4CD;background:#696D81;color:#FFF; padding-top:5px;"value="另存代码" onclick="saveCode(runcode3)">
<br/&gt;提示：可以先修改部分代码再运行 <span style="color:#ff0000">注意：如需评论后运行请重新刷新页面</span></div>
</form>
';}
add_shortcode("code", "textarea");

使用指南：在HTML模式下，您只需输入`[code]您的代码[/code]`，然后在`code`标签两侧加上`[`和`]`即可。

通过这些简单的步骤，您就可以在WordPress网站上嵌入代码运行框，让您的访客能够直接运行和查看代码效果，从而提升他们的浏览体验。这种互动性的功能不仅增加了网站的趣味性，还能够吸引更多的技术爱好者和开发者。