学做网站培训课程介绍

当前位置:

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

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

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

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

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

方法一:非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. 这样,我们自己的网站就拥有了在线“运行代码”功能了。

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

发表评论

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

相关教程

  • 网页如何添加背景音乐 视频教程附件下载 (1117065 次浏览)
    在上网过程中,有很多网站打开后会自动播放背景音乐,而且只有当关闭网页之后背景音乐才会停止。在我们自己建网站,同样也可以给自己的网页添加背
  • QQ客服在很多网站都很普通,它可以很方便的让浏览我们网站的用户通过QQ进行交流,不需要去查找QQ再加好友,只需要点一下QQ客服上的图标就可以直接发信
  • wordpress是一种PHP语言的网站程序,它不像HTML,可以直接用浏览器打开。 如果要让这种程序正常运行,就需要有符合它要求的网站环境。wordpress运
  • 近期有学做网站论坛学员咨询如何在网站上实现“运行代码”的功能,如图:可以在网站上放一段代码,然后点击“运行代码”就可以实现在线看到代码效
  • 各位同学大家好,我是学做网站论坛的建站会员广东崔磊。很感谢论坛老师在我学习网站制作课程期间,对我的辅导帮助。现在在这里我想给同学做分享一
  • 学做网站时,经常要修改代码,很多时候需要用到颜色代码,由于太多,不可能都记住,所以找到了一个带有中文颜色名称表示的颜色代码表,以便后期网页设
  • wordpress评论功能可以让用户在我们自己的网站上进行对文章的评论,发表自己的观点,很好的增强了网站与用户之间的交互性。还有的网站还添加了邮件功
  • 纯代码Wordpress前台投稿功能制作方法,很多建网站学员学习了Wordpress教程后,使用Wordpress 程序建了网站。但如果每天都是自己更新文章,感觉会有点