近期有學(xué)做網(wǎng)站論壇學(xué)員咨詢如何在網(wǎng)站上實現(xiàn)“運行代碼”的功能，如圖：

可以在網(wǎng)站上放一段代碼，然后點擊“運行代碼”就可以實現(xiàn)在線看到代碼效果，直接點擊運行就能實施的查看效果，給訪客帶來了非常好的體驗。

那么如何在自己做網(wǎng)站時也能有這樣的功能呢？下面學(xué)做網(wǎng)站論壇就來介紹一下制作方法。

方法一：非Wordpress網(wǎng)站，方法見：實現(xiàn)網(wǎng)頁”運行代碼”功能JS代碼；

方法二：WordPress程序網(wǎng)站，制作步驟如下：

1. 第一步：下載 code.js 文件，先下載下來，再上傳到網(wǎng)站主題文件夾中；
2. 第二步：在wordpress主題文件夾目錄的functions.php適當(dāng)位置添加如下代碼：

   
   /**添加可運行代碼框*/
   
   
   
   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="復(fù)制代碼" 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網(wǎng)站后臺發(fā)布文章時，在“文本”模式下，輸入以下代碼即可。

   
   [code]你的代碼[/code]
   
   

   

4. 這樣，我們自己的網(wǎng)站就擁有了在線“運行代碼”功能了。

相關(guān)知識：網(wǎng)站如何添加打賞功能

標(biāo)簽： 代碼

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。