纯代码实现WordPress站点运行/复制/保存代码框

投稿   这里么  2017-05-19 07:34:41  250 人阅读  27 条评论

投放广告联系   诚邀合作伙伴   赞助我们   公告栏   赞助光荣榜

很多博主站长应该都有留意到,某些站点分享代码的时候,直接在当前页有一个运行代码、复制代码、保存代码的按钮,特别是运行代码,点击后就可以看到代码的运行效果,这个做法极大地提高了用户体验。所以说这个运行/复制/保存代码框有时候还是挺有用的,今天就跟大家分享一下纯代码实现 WordPress 站点运行/复制/保存代码框。

实现 WordPress 站点运行/复制/保存代码框步骤

1、点击下载 run-code-OL.js 文件,并上传到所使用主题的 js 文件夹中。

2、在当前所使用主题的 functions.php 文件最后一个 ?> 的前面添加如下代码:

  1. /**添加可运行代码框*/
  2. function textarea($atts$content = null) {
  3. return '<script src="'.get_template_directory_uri() . '/js/run-code-OL.js" type="text/javascript" charset="utf-8"></script>
  4. <form>
  5. <div align="center">
  6. <textarea id="code" style="width:100%;height:255px;" cols="80" rows="15">'.$content.'</textarea>
  7. <br />
  8. <input type="button" onclick=runCode(code) value="运行代码" style="border:1px solid #B1B4CD;background:#696D81;color:#FFF; padding-top:5px;">
  9. <input type="button" onclick=copycode(code) style="border:1px solid #B1B4CD;background:#696D81;color:#FFF; padding-top:5px;" value="复制代码" onclick="copycode(runcode3)">
  10. <input type="button" onclick=saveCode(code) style="border:1px solid #B1B4CD;background:#696D81;color:#FFF; padding-top:5px;" value="另存代码" onclick="saveCode(runcode3)">
  11. <br/>注意:如需评论后运行请重新刷新页面</div>
  12. </form><br>';}
  13. add_shortcode("code""textarea");

其中运行框的高度和宽度可直接修改代码 width:100%;height:255px;

3、在编辑文章的时候,切换到文本模式,然后直接添加以下代码即可:

  1. [code]添加所需要运行的代码[/code]
特别提醒

这个简码是 [code] [/code] 而不是 < code >< / code> ,如果你的主题中有别的 code 短代码占用,可以把以下代码中的 code 换成自定义。

  1. add_shortcode("code""textarea");

4、运行效果图如下:

纯代码实现WordPress站点运行/复制/保存代码框 WordPress 第1张

PS:想要亲自体验一番,请移步《不间断无缝滚动上下左右图片&文字Js代码》。

拓展内容

经过 boke112的测试,这个运行代码没有问题,但是复制代码和保存代码在 360 浏览器无效,在 IE 浏览器有效,不过不要紧,最关键的是运行代码没有问题就 OK 了。

其实我们还可以把这个做成一个快捷按钮集成到文章编辑器中,以 Nana 主题为例,打开 functions.php 文件,找到以下代码

  1. QTags.addButton( 'ygjtpxc', '图片相册', "[imgs]连续插入N张图片[/imgs]" );

在它的下方直接添加运行代码按钮

  1. QTags.addButton( 'ygjyxdm', '运行代码', "[code]添加所需要运行的代码[/code]" );

这样一来,我们在编辑文章的时候,切换到文本模式,直接点击编辑器上的『运行代码』按钮,然后添加想要运行的代码即可。

纯代码实现WordPress站点运行/复制/保存代码框 WordPress 第2张

文章标签: ,   ,  
原文地址:http://zli.me/htmls/257.html
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 这里么 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
WordPress/zblogPHP免费响应式博客主题Blogs

 发表评论


  1. 质趣网
    质趣网 【小白】 @回复

    过来学习了!

  2. 纯洁博客
    纯洁博客 【状元】 @回复

    搬运工不捣鼓这些了

  3. benen005
    benen005 【进士】 @回复

    确实不错

  4. 小萝博客
    小萝博客 【状元】 @回复

    这个体验非常直观了

  5. 明月登楼
    明月登楼 【王爷】 @回复

    很多用户估计都用不到这个功能!

  6. YangOne
    YangOne 【进士】 @回复

    从用户体验的角度来看,是很有用的。但并不适用于所有博客。

  7. 演绎法
    演绎法 【进士】 @回复

    好气ooo哦

  8. JV
    JV 【秀才】 @回复

    还行吧,目前主流浏览器不支持这么复制,可以用“全选代码”来代替。我写的这种功能跟这个差别挺大的。

  9. 彩票自助机
    彩票自助机 【进士】 @回复

    运行代码原来是一张图啊 [嘻嘻]

  10. 雅兮网
    雅兮网 【尚书】 @回复

    我站经常分享一些前端效果,一直苦于没有一个WordPress适用的代码演示功能,自己试过用简单的js来实现,但是WordPress的后台总是会将中的代码转译掉,今天看到这个js ,灰常的兴奋,马上去测试。

    • boke112导航
      boke112导航【村长】2017-05-19 10:49  回复

      @雅兮网[嘻嘻] 其实这个还是挺好用的,可以让人直接点击就能看到效果

      • 雅兮网
        雅兮网 【尚书】2017-05-19 10:50  回复

        @boke112导航刚测试了 我的后台还是会将html编辑器模式中换行 在可视化转换成 有点莫名其妙的

        • boke112导航
          boke112导航【村长】2017-05-19 10:55  回复

          @雅兮网我在本地测试的时候没有问题,文中所该处的演示文中地址,也就是begin主题也没有问题,这样看来应该是你的主题对这个编辑器做了什么,你可以检查看看

  11. Mr.Li
    Mr.Li 【举人】 @回复

    我忽然想去学各种语言了,高中的时候学过一点pascal, [思考]

  12. 辩论吧
    辩论吧 【举人】 @回复

    搞的我也想学WordPress了 [互粉]

  13. 爱时尚
    爱时尚 【尚书】 @回复

    现在用户体验才是王道

  14. 我赚啦
    我赚啦 【小白】 @回复

    古人日三省其身,我从博客里吸收养分!

  15. 闲鱼
    闲鱼 【进士】 @回复

    这个可以有,博主文章写得用心了

  16. 龙笑天
    龙笑天 【状元】 @回复

    非常给力,之前一直在找这个~ [赞]

  17. 企业战略
    企业战略 【举人】 @回复

    复制代码和保存代码在 360 浏览器无效,在 IE 浏览器有效。

  18. 金榜台博客
    金榜台博客 【状元】 @回复

    很不错的东西

  19. 大伟哥博客
    大伟哥博客 【举人】 @回复

    这个东西对站长、博客、网页设计相关的人来说特别有用啊

  20. 灵异世界网
    灵异世界网 【进士】 @回复

    万能的wordpress…