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

我做不到很坚强,但起码要让自己不再懦弱!人生最大的错误,是用健康换取身外之物,人生最大的悲哀,是用生命换取个人的烦恼,人生最大的浪费,是用生命解决自己制造的麻烦!

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

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

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

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

  1. /**添加可运行代码框*/
  2. functiontextarea($atts,$content=null){
  3. return'<scriptsrc="'.get_template_directory_uri().'/js/run-code-OL.js"type="text/javascript"charset="utf-8"></script>
  4. <form>
  5. <divalign="center">
  6. <textareaid="code"style="width:100%;height:255px;"cols="80"rows="15">'.$content.'</textarea>
  7. <br/>
  8. <inputtype="button"onclick=runCode(code)value="运行代码"style="border:1pxsolid#B1B4CD;background:#696D81;color:#FFF;padding-top:5px;">
  9. <inputtype="button"onclick=copycode(code)style="border:1pxsolid#B1B4CD;background:#696D81;color:#FFF;padding-top:5px;"value="复制代码"onclick="copycode(runcode3)">
  10. <inputtype="button"onclick=saveCode(code)style="border:1pxsolid#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、运行效果图如下:

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

拓展内容

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

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

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

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

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

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

到此这篇关于纯代码如何实现WordPress站点运行/复制/保存代码框就介绍到这了。那一缕缕充满希望的阳光,是我们前进的动力,是我们坚强不屈的毅力。青春,是一块块大小不一的石头。更多相关纯代码如何实现WordPress站点运行/复制/保存代码框内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!

标签: WordPress