WordPress加入短代码运行框(运行代码/复制代码/清空代码无插件)
<p><span style='font-family: tahoma, arial, "Microsoft YaHei"; font-size: 14px;'>很多朋友可能经常在一些网站上看到类似于“运行代码、复制代码、清空代码、另存为代码的静态代码运行框，直接点击运行就能实施的查看效果，给访客带来了非常好的体验。 </span><br style='font-family: tahoma, arial, "Microsoft YaHei"; font-size: 14px;'><span style='font-family: tahoma, arial, "Microsoft YaHei"; font-size: 14px;'>WordPress也不例外，同样可以加入短代码运行框，效果图如下：</span><br style='font-family: tahoma, arial, "Microsoft YaHei"; font-size: 14px;'><img title="WordPress加入短代码运行框(运行代码/复制代码/清空代码无插件)" alt="WordPress加入短代码运行框(运行代码/复制代码/清空代码无插件)" src="https://zhuji.jb51.net/uploads/img/202305/6440fb74cf444bc73b92e87a6b917b9b.jpg" style="max-width:100%!important;height:auto!important;border: 1px solid rgb(204, 204, 204); vertical-align: middle; padding: 1px; overflow: hidden; max-width: 696px; font-family: tahoma, arial, "Microsoft YaHei"; font-size: 14px; width: 520px; height: 295px;'><br style='font-family: tahoma, arial, "Microsoft YaHei"; font-size: 14px;'><strong style='font-family: tahoma, arial, "Microsoft YaHei"; font-size: 14px;'>方法非常简单</strong><span style='font-family: tahoma, arial, "Microsoft YaHei"; font-size: 14px;'>： </span><br style='font-family: tahoma, arial, "Microsoft YaHei"; font-size: 14px;'><strong style='font-family: tahoma, arial, "Microsoft YaHei"; font-size: 14px;'>第一步</strong><span style='font-family: tahoma, arial, "Microsoft YaHei"; font-size: 14px;'>：下载 run-code-OL.js 文件，上传至服务器。 </span><br style='font-family: tahoma, arial, "Microsoft YaHei"; font-size: 14px;'><strong style='font-family: tahoma, arial, "Microsoft YaHei"; font-size: 14px;'>第二步</strong><span style='font-family: tahoma, arial, "Microsoft YaHei"; font-size: 14px;'>：在主题目录的functions.php适当位置添加如下代码： </span></p>
<div style='margin: 3px auto 0px; padding: 0px 3px; outline: none; line-height: 21.6px; clear: both; border-width: 1px; border-style: solid; border-color: rgb(0, 153, 204); background: rgb(246, 251, 255); overflow: hidden; font-family: tahoma, arial, "Microsoft YaHei";'>
<p style="margin: 0px; padding: 0px; outline: none; float: right; line-height: 25.2px; font-size: 14px;">
<span style="line-height: 25.2px; cursor: pointer;"><u>复制代码</u></span></p>
<p>
代码如下:</p>
</div>
<p style='margin: 0px auto 3px; padding: 0px 3px; outline: none; line-height: 25.2px; font-size: 14px; clear: both; border-right: 1px solid rgb(0, 153, 204); background: rgb(221, 237, 251); overflow: hidden; border-left: 1px solid rgb(0, 153, 204); word-break: break-all; border-bottom: 1px solid rgb(0, 153, 204); word-wrap: break-word; font-family: tahoma, arial, "Microsoft YaHei";'>
<br>
/**添加可运行代码框*/ <br>
function textarea($atts, $content = null) { <br>
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> <br>
<form> <br>
<div align="center"> <br>
<textarea id="code" style="width:555px;height:255px;" cols="80" rows="15">'.$content.'</textarea> <br><br>
<input type="button"onclick=runCode(code) value="运行代码" style="border:1px solid #B1B4CD;background:#696D81;color:#FFF; padding-top:5px;"> <br>
<input type="button"onclick=copycode(code) style="border:1px solid #B1B4CD;background:#696D81;color:#FFF; padding-top:5px;"value="复制代码" onclick="copycode(runcode3)"> <br>
<input type="button"onclick=saveCode(code) style="border:1px solid #B1B4CD;background:#696D81;color:#FFF; padding-top:5px;"value="另存代码" onclick="saveCode(runcode3)"> <br>
<br/>提示：可以先修改部分代码再运行 <span style="color:#ff0000">注意：如需评论后运行请重新刷新页面</span></div> <br>
</form><br>
';} <br>
add_shortcode("code", "textarea"); </p>
<p>
<br style='font-family: tahoma, arial, "Microsoft YaHei"; font-size: 14px;'><strong style='font-family: tahoma, arial, "Microsoft YaHei"; font-size: 14px;'>使用方法</strong><span style='font-family: tahoma, arial, "Microsoft YaHei"; font-size: 14px;'>： </span><br style='font-family: tahoma, arial, "Microsoft YaHei"; font-size: 14px;'><span style='font-family: tahoma, arial, "Microsoft YaHei"; font-size: 14px;'>在HTML模式下，输入code你的代码/code</span><br style='font-family: tahoma, arial, "Microsoft YaHei"; font-size: 14px;'><span style='font-family: tahoma, arial, "Microsoft YaHei"; font-size: 14px;'>code两则加"["、"]"</span></p>
頁:
[1]