给wordpress添加代码运行框功能-IT技术网站

表示经常分享代码，但却每次测试或者展示都需要截图或者使用动态图来演示效果，这样不如直接给网站添加一个代码运行的功能，直接可以运行代码，看到代码的效果，觉得好的，可以直接使用，这样既方便了用户，也方便了分享。

WordPress代码框

这里首先要说明一下，以下分享的代码确实可用，虽然志在指尖还没有采用，不过就是可用的，因为时间原因，这里就不采用了，用空统一放到网站上面，毕业之后才发现时间很仓促，还是还是学校好，

大家不要到处百度了，百度上的网站都是互相抄袭，一搜一大堆，内容都是一样，一样没关系，关键是一个都用不了，给了搜索者带来了很多麻烦，还怀疑自己技术有问题；有点用的也存在诸多问题，比如说代码溢出框外，js错误，还有的网站真的就是完完全全的抄袭，连自己都不知道这些代码怎么用，在自己的网站上都不会操作，他还写得有声有色，拿别人去做白老鼠。

给wordpress添加代码运行框功能

首先在自己的functions文件中适当位置（这个适当位置建议php函数结束符号前，即?>的前面一行）加入以下代码：

function textarea($atts, $content = null) { return '<script src="js文件地址" type="text/javascript" charset="utf-8"></script> <form> <div align="center"> <textarea id="code" style="width:555px;height:200px; border:1px solid #ff0000;" cols="80" rows="15">'.$content.'</textarea> <br /> <input type="button"onclick=runCode(code) value="运行代码" style="border:1px solid #B1B4CD;background:#556b2f;color:#FFF; padding-top:5px;"> <input type="button"onclick=copycode(code) style="border:1px solid #B1B4CD;background:#556b2f;color:#FFF; padding-top:5px;"value="复制代码" onclick="copycode(runcode3)"> <input type="button"onclick=saveCode(code) style="border:1px solid #B1B4CD;background:#556b2f;color:#FFF; padding-top:5px;"value="另存代码" onclick="saveCode(runcode3)"> 提示：可以先修改部分代码再运行</div> </form><br>';} add_shortcode("code", "textarea");

其中的第二行的js文件地址自己下载后上传到自己的网站空间，获取绝对地址（带http://的）代替“js文件地址”（下面有下载）

至此所有步骤都完成了，剩下的就是使用方法了，看招

只要在你的博客编辑文章时手动输入[-code]你的代码[-/code]并在“你的代码”处粘贴你要向读者呈现的代码发表就行了，就会显示如我上面的效果。去掉前面的横杠-，这是我让它不显示做的干扰

注意：不要看错了，是[-code]而不是博客里面自带的<code>，搞错了是不行的。。。

好，问题又来了，有问题就有解决方案嘛，到底是什么问题呢，大家在使用代码运行框的时候，可能会遇到，代码框里面的代码并非完完全全自己粘上去的代码，你在发表的瞬间wordpress会自动加入一些换行代码</br>,

这些新加入的代码可能会影响代码的运行，所以如何屏蔽wordpress擅做主张需要在functions文件里（建议在运行框代码下面）加入以下代码

function my_formatter($content) { $new_content = ''; $pattern_full = '{([-raw].*?[-/raw])}is'; $pattern_contents = '{[-raw](.*?)[-/raw]}is'; $pieces = preg_split($pattern_full, $content, -1, PREG_SPLIT_DELIM_CAPTURE); foreach ($pieces as $piece) { if (preg_match($pattern_contents, $piece, $matches)) { $new_content .= $matches[1]; } else { $new_content .= wptexturize(wpautop($piece)); } } return $new_content; } remove_filter('the_content', 'wpautop'); remove_filter('the_content', 'wptexturize'); add_filter('the_content', 'my_formatter', 99);