Code Embed：在WordPress文章和頁面中新增Javascript的最佳外掛

xodyhu發表於2019-04-02
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的最佳外掛

外掛介紹

這個外掛的作者是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。


相關文章