学做网站培训课程介绍

当前位置:

如何在网站添加“运行代码”功能

近期有学做网站论坛学员咨询如何在网站上实现“运行代码”的功能,如图:

如何在网站添加“运行代码”功能

可以在网站上放一段代码,然后点击“运行代码”就可以实现在线看到代码效果,直接点击运行就能实施的查看效果,给访客带来了特别好的体验。

那么如何在自己做网站时也能有这样的功能呢?下面学做网站论坛就来介绍一下制作方法。

方法一:非Wordpress网站,方法见:实现网页”运行代码”功能JS代码

方法二:WordPress程序网站,制作步骤如下:

  1. 第一步:下载 code.js 文件,先下载下来,再上传到网站主题文件夹中;
  2. 第二步:在wordpress主题文件夹目录的functions.php适当位置添加如下代码:
    
    
    /**添加可运行代码框*/

    function textarea($atts, $content = null) {
    return '<script src="http://blog.haitianhome.com/wp-content/themes/prowerV3.1/run-code-OL.js" _fcksavedurl=""http://blog.haitianhome.com/wp-content/themes/prowerV3.1/run-code-OL.js"" type="text/javascript" charset="utf-8"></script>
    <form>
    <div align="center">
    <textarea id="code" style="width:555px;height:255px;" cols="80" rows="15">'
    .$content.'</textarea><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/>提示:可以先修改部分代码再运行 <span style="color:#ff0000">注意:如需评论后运行请重新刷新页面</span></div>
    </form>
    '
    ;}
    add_shortcode("code", "textarea");
  3. 第三步:在wordpress网站后台发布文章时,在“文本”模式下,输入以下代码即可。
    
    
    [code]你的代码[/code]

    如何在网站添加“运行代码”功能

  4. 这样,我们自己的网站就拥有了在线“运行代码”功能了。

相关知识:网站如何添加打赏功能

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

相关教程

  • DW中插入文字是最简单的操作,我们可以像在word一样随意的打出自己想要的文字。打开DW后,点击“设计”模式,在文字框中就可以打字了。插入文字可以是
  • 在制作网页中我们时常会将一些文字、图片等做成超链接,但如果在制作时,某些链接页面还没有做好,这时我们就可以用的空链接,提醒自己哪些地方需要添
  • 近期有学做网站论坛学员咨询如何在网站上实现“运行代码”的功能,如图:可以在网站上放一段代码,然后点击“运行代码”就可以实现在线看到代码效
  • 问:WP的运行环境是UTF-8的,DZ怎么选择?DZ模板选择什么样的运行环境?GBK还是UTF-8?两个有什么区别吗?答:utf8在程序维护、数据
  • 什么是html代码HTML(Hyper Text Mark-up Language )即超文本标记语言,是 WWW 的描述语言,由 Tim Berners-lee提出。只要使用鼠标在某一文档中点
  • 各位同学大家好,我是学做网站论坛的建站会员广东崔磊。很感谢论坛老师在我学习网站制作课程期间,对我的辅导帮助。现在在这里我想给同学做分享一
  • 纯代码Wordpress前台投稿功能制作方法,很多建网站学员学习了Wordpress教程后,使用Wordpress 程序建了网站。但如果每天都是自己更新文章,感觉会有点
  • 多站点 (Multisite) 功能是 WordPress 3.0  后版本的一个重要更新,整合了 WordPress MU 内核。后台自动升级内核后,无法直接使用该功能。需要通过手