免费资源
享你所想

WordPress添加代码运行框

这两天要连载从零开始自学HTML系列,文章中会出现一系列代码,但是需要自己写代码并自己写效果。麻烦不说主要太费时间。而且网页文章代码中不能出现尖括号<>,需要转换为实体字符&lt;&gt;才能显示。

我在网上找了一串代码,可以在Wordpress中显示一个代码运行框,点击就能直接运行,显示效果。给我的教程带来很大的帮助。

WordPress中添加代码运行框的方法

主要修改:function.php,js文件夹

1. 直接在下方下载run-code-OL.js文件夹,并上传到主题所在JS文件夹。如DUX主题中所在文件夹为 根目录/wp-content/themes/dux/js/,其他主题大同小异。

2. 在dux主题中找到function.php文件,并将如下代码添加至文件尾部。

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

3. 编辑文章的时候,切换到HTML模式,然后在代码前后插入[-code]与[-/code]即可。

编写代码时将code前的-去掉。

最终会在页面中显示一个代码框,可以用来运行代码,另外两个按钮复制代码和另存代码在部分浏览器中无法使用。

如浏览器显示错误,请尝试更换浏览器。

代码效果显示:
[code]

html页面标题

h1标题

h2标题

h3标题

h4标题

h5标题
h6标题

这是p段落

这是被
换行的p段落

[/code]

赞(0) 打赏
未经允许不得转载:无梦博客 » WordPress添加代码运行框
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

无梦博客

币池塘关于本站

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏