记录生活 学习SEO优化 | 他日若遂凌云志 敢笑黄巢不丈夫
>>Home > 学习笔记 > WordPress短代码添加运行代码框

WordPress短代码添加运行代码框

Tags: | | 作者:海天无影

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

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

wordpress代码运行框

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

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

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

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

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

日志信息 »

该日志于2010-07-10 13:03由 海天无影 发表在学习笔记分类下, 你可以发表评论。除了可以将这个日志以保留源地址及作者的情况下转载到你的网站或博客,还可以通过RSS 2.0订阅这个日志的所有评论。

31条评论▼点击进行评论

  1. 我刚写的插件也用到了短代码~

    • 嗯 短代码很有用的
      而且很容易使用 呵呵~

  2. 看来海天也是有研究的同志

    • 哈哈 喜欢折腾
      看到人家写的 喜欢拿来自己改改 :lol:

  3. 貌似和我没啥关系,算鸟。继续玩我的bo去

    • 额 这个的确和你的BLOG没什么关系~ :|

      • 我们一起把平平忽悠到WP阵营中来。

        • 哈哈 好啊 我赞成
          不过看平平这小子 平时也不折腾他的BO
          我怀疑 他也不要折腾的WP了 哎~

  4. 确实是好东西值得分享,从前只在F2BLOG的时候用过一段时间,后来就没有了

    • F2BLOG 额 我还真没用过这个博客 呵呵

  5. 你的评论样式很有特点哦!哈哈 :mrgreen:

    • 呵呵 你说的是印章吗?
      可惜你的不是WP 要不然也去加个玩玩啊 呵呵~

      • 啊哦!啊哦!我有WP,呵呵 告诉我方法!呵呵

        • 额……你看我的前几篇文章啊 我前两篇刚说的方法…… :|

  6. 哈哈,这个我玩过的,还是在真好网里面弄过。
    现在一般没有研究代码,就懒得加上去了。

    • 呵呵 反正段代码里扔进去
      用的时候 直接调用 无所谓啦~

  7. 让我这么一个菜鸟来看这个有点难!嘿嘿!我来凑个数吧!

    • 额 你直接加到functions.php文件中
      用的时候直接调用 也不麻烦啦~

  8. 我的留言喃??不会吧!

    • 额 你的留言在上面啊?怎么啦?

  9. 想问下侧边栏的微博是怎么弄的

  10. 这是一个好玩的!

    • 呵呵 是啊 以后要添加代码运行框就很方便的了~

  11. 学习一下 今天来得有点晚 呵呵

    • 呵呵 今天是比较晚哦 比较忙的啊~

  12. 人气很不错啊 海天哥。。嘿嘿

    • 多亏朋友们捧场罢了 呵呵
      博主推广不错哦

      • 瞎弄的呗 呵呵。。。。

  13. 谢谢谬赞啦。

    • 哈哈 真的 真的~
      :grin: 加油哦 多写好文章 给我们参考 嘿嘿

  14. 我的是zblog 不过还是学习了~~

    • 呵呵 是啊 你的是 zblog
      但我们两的皮肤 是差不多的~

  15. 嗯~·这个方法不错。试试

    • 呵呵 经常分享代码的 用起来很方便了~

  16. 这篇文章写的非常棒 先收藏了 谢谢博主~~~

  17. 看起来不错,不过我能分享的代码也不多,就不弄了,呵呵

    • 呵呵 我就扔到functions.php文件中 用的时候再说~

      • :shock: functions.php说:”小子,算你狠” :mrgreen:

        • 哈哈 谁叫折腾WP 大多数都在functions.php文件中加代码就行了呢
          WordPress就这点 太方便了~

  18. 老哥 我还在痛苦之中 我无论是在普通状态还是在HTML状态下 添加这段代码 代码都会自动添加换行标签 弄得不能运行。

    • 呵呵 看楼下的 有取消这个的哦~

      • 老哥啊 楼下的地址已经失效啦!

  19. :twisted: 我也遇到和上面同学一样的问题啊~~~~~~~~~~~~ :?:

  20. :| 问题解决啦~~~~~~~~我是看这个的。
    http://www.ttphp.com/2011/01/26/wordpress-close-wrap-label-plugin/

  21. 试试去

  22. 首先谢谢你的分享,但我遇到一个问题,就是在function里面加的代码中出现的汉字全变口了,不能识别出来了,请问这个怎么办?

    • 把代码另存为UTF8格式就行了

  23. 遗憾地说,这个JS好像不对劲,只有“运行”能用,点击“复制”按钮没用,点击“保存”是在新页面打开源码

    • 额 好吧 不兼容 貌似只支持IE……

  24. 请问博主你的返回首页这个小东西是怎么做出来的啊

  25. 相加一个运行代码的代码框,这个看起来不错

icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif 

« WordPress文章编辑增加nofollow标签超链接 添加广告,加载完页面再加载广告 »