很多博主站长应该都有留意到，某些站点分享代码的时候，直接在当前页有一个运行代码、复制代码、保存代码的按钮，特别是运行代码，点击后就可以看到代码的运行效果，这个做法极大地提高了用户体验。所以说这个运行/复制/保存代码框有时候还是挺有用的，今天就跟大家分享一下纯代码实现 WordPress 站点运行/复制/保存代码框。
实现 WordPress 站点运行/复制/保存代码框步骤
1、点击下载 run-code-OL.js 文件，并上传到所使用主题的 js 文件夹中。
2、在当前所使用主题的 functions.php 文件最后一个 ?> 的前面添加如下代码：
- /**添加可运行代码框*/
- functiontextarea($atts,$content=null){
- return'<scriptsrc="'.get_template_directory_uri().'/js/run-code-OL.js"type="text/javascript"charset="utf-8"></script>
- <form>
- <divalign="center">
- <textareaid="code"style="width:100%;height:255px;"cols="80"rows="15">'.$content.'</textarea>
- <br/>
- <inputtype="button"onclick=runCode(code)value="运行代码"style="border:1pxsolid#B1B4CD;background:#696D81;color:#FFF;padding-top:5px;">
- <inputtype="button"onclick=copycode(code)style="border:1pxsolid#B1B4CD;background:#696D81;color:#FFF;padding-top:5px;"value="复制代码"onclick="copycode(runcode3)">
- <inputtype="button"onclick=saveCode(code)style="border:1pxsolid#B1B4CD;background:#696D81;color:#FFF;padding-top:5px;"value="另存代码"onclick="saveCode(runcode3)">
- <br/>注意：如需评论后运行请重新刷新页面</div>
- </form><br>';}
- add_shortcode("code","textarea");
其中运行框的高度和宽度可直接修改代码width:100%;height:255px;。
3、在编辑文章的时候，切换到文本模式，然后直接添加以下代码即可：
- [code]添加所需要运行的代码[/code]
这个简码是 [code] [/code] 而不是 < code >< / code> ，如果你的主题中有别的 code 短代码占用，可以把以下代码中的 code 换成自定义。
- add_shortcode("code","textarea");
4、运行效果图如下：
PS：想要亲自体验一番，请移步《不间断无缝滚动上下左右图片&文字 Js 代码》。
拓展内容
经过 boke112 的测试，这个运行代码没有问题，但是复制代码和保存代码在 360 浏览器无效，在 IE 浏览器有效，不过不要紧，最关键的是运行代码没有问题就 OK 了。
其实我们还可以把这个做成一个快捷按钮集成到文章编辑器中，以 Nana 主题为例，打开 functions.php 文件，找到以下代码
- QTags.addButton('ygjtpxc','图片相册',"[imgs]连续插入 N 张图片[/imgs]");
在它的下方直接添加运行代码按钮
- QTags.addButton('ygjyxdm','运行代码',"[code]添加所需要运行的代码[/code]");
这样一来，我们在编辑文章的时候，切换到文本模式，直接点击编辑器上的『运行代码』按钮，然后添加想要运行的代码即可。
到此这篇关于纯代码如何实现WordPress站点运行/复制/保存代码框就介绍到这了。那一缕缕充满希望的阳光，是我们前进的动力，是我们坚强不屈的毅力。青春，是一块块大小不一的石头。更多相关纯代码如何实现WordPress站点运行/复制/保存代码框内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！
