海天无影Blog

WordPress短代码添加运行代码框

/ 1305阅 / 54评 / 0

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

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

wordpress代码运行框

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

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

一、下载 run-code-OL.js 文件,上传至服务器。[down]http://blog.haitianhome.com/upload/2010/07/run-code-OL.zip[/down]

二、打开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 可视化模式给自动转化掉。

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

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注