Code Embed：在WordPress文章和頁面中添加Javascript的最佳插件

轉自 丘壑博客

前（fei）言（hua）

自從又開始迷上了WordPress，天天都會花很多時間在WordPress相關的網站上閒逛，這感受居然有點像分手複合又陷入了熱戀的情人，沒事就膩歪在一塊兒，要把以前錯過的時間都補回來。。。

打算開一個系列《每日插件》，本文算做是第一篇吧

JavaScript 和 WordPress

什麼是JavaScript？

廣義上來講， JavaScript，一般縮寫爲JS，是一種高級的，解釋執行的編程語言。 JavaScript是一門基於原型、函數先行的語言，是一門多範式的語言，它支持面向對象編程，命令式編程，以及函數式編程。宿主環境：瀏覽器（web端）、node.js（服務端）

狹義上來講有兩種：

一個是基於瀏覽器端的 JavaScript （前端 ），是運行在瀏覽器環境裏的腳本語言，更多的是對html dom元素的操做，以及一些異步刷新等等，就像jquery的初衷同樣，更少的代碼，更多的特效；

一個是基於服務端的 JavaScript （後端 Node.js），儘管它設計之初是拿來寫高性能服務的，但發展到今天實際用途已經很普遍了，除了服務器端開發，桌面、命令行工具用得也挺普遍的。

因此，當咱們在談論在WordPress中嵌入JavaScript時，特指的是瀏覽器端的JavaScript。

爲何要在WordPress文章或頁面中添加JavaScript？

首先，經過JavsScript能夠極大的豐富和擴展WordPress的功能，更好的知足自定義需求。

因爲JavaScript是一種客戶端腳本語言，它能夠在網頁上實現複雜的功能，網頁展示給你的再也不是簡單的靜態信息，而是實時的內容更新，交互式的地圖，2D/3D 動畫，滾動播放的視頻等等。

其次，JavaScript的功能豐富多樣，再加上它的各類庫，幾乎能勝任任何工做。

在Web網頁中的JavaScript從代碼的來源來講，能夠分爲兩類，第一方和第三方。

第一方是網頁開發者本身使用的JavaScript代碼（內容可控）。一些簡單的需求徹底能夠直接手寫一段小的代碼便可，固然這裏也是能夠引入各類庫的。

第三方則是來自其餘服務提供商將本身的服務經過「HTML投放代碼」的形式提供給網站使用（內容基本不可控）。因爲Javascript的動態特性，通常的第三方服務都會直接或間接的提供Javascript文件給網站頁面加載。這裏有很是多的第三方服務可使用，好比監控代碼、Gist的嵌入代碼、聯盟或電商的推廣代碼等等都是這種形式。

最後，在WordPress上使用JavaScript很容易 。

通常來講，在WordPress文章或頁面中插入JavaScript的方法有以下幾種：

• 編輯器：在古騰堡編輯器中插入一個HTML塊，把代碼以HTML的形式插入。這種方式比較方便，適合插入一些簡單的小段代碼，或者是第三方提供的動態加載代碼。好比在本博客WordPress 精品插件大全頁面的開發小記中的Python代碼、PHP代碼的嵌入就是直接使用了gist提供的JavaScript嵌入方式
• PHP文件：WordPress核心代碼中已經自帶了不少的JavaScripty庫，在主題文件中使用 wp_enqueue_script()註冊JavaScript。這種方式比較靈活，自定義強，但對於不熟悉代碼的用戶可能會不太友好。具體方法在本博客的jQuery標籤裏的文章裏有介紹
• 管理後臺：在WordPress管理後臺中能夠經過插入Header Scripts、Body Scripts、Footer Scripts 來形式來控制插入的範圍。這種方式比較適合插入一下全局性的代碼，如Google的Analytics、Adsense等代碼，也能夠爲文章或頁面插入單獨的代碼
• 插件方式：經過WordPress插件的方式來插入JavaScript。這類插件也是不少的，本文重點要介紹的就是這種方式。

Code Embed：在WordPress文章和頁面中添加Javascript的最佳插件

Code Embed

Author(s): David Artiss

Current Version: 2.3.2

Last Updated: 2018-10-22

simple-embed-code.2.3.2.zip

96%

Ratings

20,000+

Installs

WP 4.6+

Requires

插件介紹

這個插件的做者是David Artiss，從他的自我介紹裏得知他是 WordPress.com VIP team工做的，爲一些大型企業客戶提供技術服務，是WordPress的核心代碼、文檔、技術支持等方面的貢獻者。

這個插件的評價幾乎全是五星好評，惟一一個一星是用戶找不到開始自定義字段的地方，做者還給耐心解釋了，不愧是作VIP服務的啊！這耐性！

插件的功能很強大，使用也很方便，主要亮點以下：

• Add HTML or JavaScript to posts or pages – particularly useful for embedding videos!
• Embed in widgets using the Widget Logic plugin
• Global embedding allows you set up some code in one post or page and then access it from another
• Modify the keywords or identifiers used for embedding the code to your own choice
• Search for embedding code via a simple search option
• Add a simple suffix to the embed code to convert videos to responsive output
• Embed an external script directly using just the URL
• And much, much more!

• 能夠在任意文章或頁面裏插入HTML、JavaScript，嵌入視頻的時候特別有用
• 結合 Widget Logic 插件，能夠支持有條件的插入
• 全局性調用，在一篇文章/頁面嵌入後能夠在其餘的文章/頁面中調用。（這個絕對是亮點！）
• 支持自定義嵌入代碼的前綴關鍵詞
• 支持搜索
• 支持視頻的響應式嵌入
• 支持第三方代碼的直接嵌入或者直接使用URL進行嵌入
• 。。。。

使用步驟

第1步：安裝所需的插件

要將Javascript添加到 WordPress頁面和文章 ，你須要安裝Code Embed插件。安裝WordPress插件的步驟很簡單，能夠下載WordPress插件文件並上傳到你的站點。或者，使用WordPress儀表板中的「添加新插件」功能。安裝後不要忘記激活插件。

第2步：在儀表板中打開選項

激活後，在文章的編輯頁面中，單擊三個點點，在「選項」選擇「 自定義字段」選項。

第3步：建立新的JavaScript代碼條目

在文章編輯器下方，將看到「自定義字段」框，你須要點擊「輸入新欄目（add new）」，而後輸入自定義字段的名稱和值字段。

須要注意是：你須要使用CODE前綴（例如，CODEshowtime）做爲自定義字段的名稱，而後將javascript代碼粘貼到值字段中。不要忘記單擊「添加自定義字段」按鈕以保存自定義字段。

基本這個值的字段能夠算作無限長，能夠存4百萬個字符，你能夠放心的添加：

WordPress stores the custom field contents in a MySQL table using the longtext format. This can hold over 4 billion characters.

第4步：編輯頁面或帖子，插入短代碼

如今，你可使用此自定義字段CODEshowtime將JavaScript代碼嵌入到文章中的任何位置。只需在帖子內容的任何位置添加這個名字便可 ，見上圖。

總結

該插件可幫助你建立新的JS字段，並能夠在全部頁面和文中重複使用。只須要輸入JS字段的名稱以及包含JS代碼的值字段。填寫字段後，就能夠在內容中使用字段名稱。在給新JS字段命名時，不要忘記輸入前綴CODE。