当前位置:秋叶网络博客 网络技术 ◊ 给wordpress添加代码运行框(可用)

给wordpress添加代码运行框(可用)

作者:秋叶 发表时间:2013年12月10日

首先,先解释一下这篇文章的标题,为什么后面要加个(可用),因为确实可用,再次提醒大家不要到处百度了,百度上的网站都是互相抄袭,一搜一大堆,内容都是一样,一样没关系,关键是一个都用不了,给了搜索者带来了很多麻烦,还怀疑自己技术有问题;有点用的也存在诸多问题,比如说代码溢出框外,js错误,还有的网站真的就是完完全全的抄袭,连自己都不知道这些代码怎么用,在自己的网站上都不会操作,他还写得有声有色,拿别人去做白老鼠。一些重要细节也忽略了,还有的呢就是输入框样式不尽如人意....不多说了,说多了都是泪啊!

下面是见证奇迹的时刻,请跟随我的脚步。

首先在自己的functions文件中适当位置(这个适当位置建议php函数结束符号前,即?>的前面一行)加入以下代码,顺便做这个代码框的演示

————————————————把以下代码加到functions里去—————————————————

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>,搞错了是不行的。。。

差点忘了把js文件提供给大家点击下载

_____________________________________________________________________________

好,问题又来了,有问题就有解决方案嘛,到底是什么问题呢,大家在使用代码运行框的时候,可能会遇到,代码框里面的代码并非完完全全自己粘上去的代码,你在发表的瞬间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);

把raw前面的“-”去掉,使用方法就是在你不想要wordpress自动擅自加入代码的区域用[-raw][-/raw]包围起来。(同样要去掉横杠-

这样的话你粘贴进去的代码就是完完全全你的代码了。

注:编辑代码必须在html模式下编辑,否则还会加上</br>的,最好就只加一组,多了它就乱了,以致使某些起不到效果,如最后的那个运行框,被前面着色代码raw截取了。

目录: 网络技术 | 标签: , | 17333次阅读