海天无影BLOG

WordPress短代码添加运行代码框

平常看到好的代码，站长们都喜欢收藏和分享给大家，海天也不例外，看到大家喜欢海天放出的代码，海天也很高兴啊。如果能在WordPress的文章中加上可运行的代码框，那么有些代码可以直接运行，直接看到代码运行结果，那效果肯定是更好的了。

那海天就来用WordPress短代码加上一个代码运行框，这样以后有些可直接运行的静态代码，大家就可以直接运行看到效果了。

这个代码运行框，海天原来在《投影样式的图片显示形式》文章中就运用过，大家可以再去看看。本来这个代码运行框是在万戈兄那里看到的，可是万戈是给出运行框的代码（传送门），如果要使用的话，每次还需要自己手动复制粘贴到文章里，这样就有点麻烦 了。

所以海天就稍微改进一下，用wordpree里的短代码，直接调用这个代码运行框，这样每次使用起来就非常方便了。

一、下载 run-code-OL.js 文件，上传至服务器。

二、打开functions.php文件，在其中加上以下代码：

/**添加可运行代码框*/
function textarea($atts, $content = null) {
return '<script src="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>
<br />
<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/>提示：可以先修改部分代码再运行 <span style="color:#ff0000">注意：如需评论后运行请重新刷新页面</span></div>
</form><br>';}
add_shortcode("code", "textarea");

三、对了，还要去掉 wordpress 的自动全角转半角，否则双引号、单引号什么的被转成全角，那代码就运行不起来了。方法还是将下面代码加入functions.php中：

/**去掉全角转半角*/
remove_filter('the_content', 'wptexturize');

运行代码框使用方法：

[c ode]要运行的代码[/c ode]      （去掉空格）

注意：需要在HTML模式下编辑，否则会被 wordpress 可视化模式给自动转化掉。

运行效果请传至《投影样式的图片显示形式》观看