为wordpress加入运行代码功能

今天修改了一下主题样式,并为主题加入了两个新功能:文章内容目录运行代码功能

运行代码功能估计需要的人不多,但来脚儿网的人应该就需要,所以我放出实现方法

运行代码功能预览:

[runcode id=’rr’][/runcode]

全兼容,而且,你可以修改代码再运行

前期准备工作

需要的javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function toruncode (t) {
    var id = t.getAttribute('data-runid')
    if(id) {
        // var id = t.slice(5);
        var code = document.getElementById(id);
        if(code) { torun(code.value); }
    }
    function torun (v) {
      var newwin = window.open('', "_blank", '');
      newwin.document.open('text/html', 'replace');
      newwin.opener = null;
      newwin.document.write(v);
      newwin.document.close();
    }
}

把这个函数加入你的JS文件并引用

其实有了这个JS就可以了,不需要PHP知识都行。只要你发文章的时候手写代码,如:

1
2
3
4
5
<textarea id="rr"><script>
alert('run code is \\ ok!');
</script>;
</textarea>
<input type="button" onclick="toruncode(this)" data-runid="rr" value="运行代码">

就可以运行了。

但是这么麻烦的话,谁他妈会用啊?

把功能加入shortcode

wordpress的shortcode功能非常好用,把下列代码加入你主题的functions.php

1
2
3
4
5
6
7
8
9
10
11
function to_run_code ($attrs,$content='') {
  extract(shortcode_atts(array(
    'id' => 'runcode'
  ), $attrs));

  if(empty($content)) return;
  else {
    return '<textarea id="'.$id.'">'. $content . '</textarea> <br /> <input type="button" value="运行代码" data-runid="'.$id.'" onclick="toruncode(this)" />';
  }
}
add_shortcode('runcode', 'to_run_code');

完成,使用!

使用方法:编辑文章时,切换到html模式,输入类似代码:

[-runcode id=’aid’]
some code here!
[-/runcode]

:这里的是我加起以免被运行用的。

要记住id不要相同了啊!

其余的wordpress会给你自动生成。

注意事项:请关闭wordpress默认的特殊字符自动编码功能,避免不必要的麻烦。

4 评论

  1. 运行JS脚本的功能啊啥时候搞一个运行PHP的功能就牛逼了

发表评论

电子邮件地址不会被公开。