有时候我们想在页面内运行代码,方便说明问题,类似于 w3school 那样的。
实现方法可以分为插件式和非插件式。
插件式
可以使用 RunCode 插件。下载地址:http://wordpress.org/plugins/runcode/
或者使用 runcode by soncy 插件。下载地址:http://wordpress.org/plugins/runcode-by-soncy/
插件使用方法:
1、下载以下附件解压上传至wp-contentplugins目录下;
2、后台启用(无需设置);
3、编辑文章或页面的时候选择HTML编辑状态,把需要运行的代码放置在以下标签中发布即可:
[cc lang=”html”]
这里放置需要运行的代码
[/cc]
使用实例:
![图片 图片](http://xw2423.byr.edu.cn/blog/wp-content/uploads/2009/06/big-zombie.jpg)
非插件式
本处主要来自于网络,参考来源:
方法1
1、点此下载 run-code-OL.js 文件,解压并上传至服务器。
2、在 WordPress 日志中插入以下代码:
[cc lang=”php”]
[/cc] 3、在运行代码框中默认显示的代码添加在
[cc lang=”php”]
[/cc]
之间即可。运行效果图
方法2
通用版代码(适用于多数平台编辑器,比如织梦等):
[cc lang=”php”]
[/cc]
在发表文章时只需要将上面的代码中的“代码部分”改成需要运行的代码即可,发布之后,文章页面会自动把代码加入“运行代码”等按钮。 对于 WordPress ,方法更简单,首先只需要把下面代码添加到模板文件夹中的 functions.php 文件中。
[cc lang=”php”]
/**添加代码运行框**/
function textarea($atts, $content = null) {
return ‘
‘;}
add_shortcode(“code”, “textarea”);
[/cc]发布文章的时候在编辑器中使用[code]你的代码[/code],就可以直接套用代码运行框格式,很方便,实用,而且运行框自动根据代码的长度自动调整框的高度,框和按钮如果觉得不好看,可以自己美化一下。
使用时别忘了把http://www.qctang.com/wp-content/themes/d5/js/code.js这个js文件保存到自己的空间上,引用时将上面代码的js地址更换一下。
运行效果图