怎麼在個別文章/頁面加入 javascript 或 CSS?

如果我們是在編輯一個傳統的 HTML 頁面,我們會把 javascript 放在<head>標籤裡面,但是 wordpress 的文章/頁面編輯不包含去編輯<head>區塊,那我們該怎麼做?當然有人會想到一個外掛叫做 Head, Footer and Post Injections 就可以把東西加到<head>裡面,問題是這樣做的話每一個頁面都要下載那段 javascript ,就算那一頁其實不需要用到,這樣會增加網頁下載的速率,就算只多了零點幾秒,在網頁設計上都是能免則免。

所以我們的解決辦法是透過一個外掛「Code Embed」來實現。這個外掛可以把你要的 javascript 寫在自訂欄位裡面,需要的時候再呼叫進來。

 

Code Embed

▼首先先下載/安裝外掛「Code Embed」,外掛安裝好不用更改任何的設定。

▼接下來我們在「新增文章」或「編輯文章」的畫面右上角可以看到「顯示項目設定」,把它點開。

▼展開後會看到一些可勾選的功能方塊,把「自訂欄位」勾選起來(如果它還沒被勾選)

▼當自訂欄位開啟後,捲到頁面最下方就可以看到「自訂欄位」的區塊,點選「輸入新的欄位名稱」

欄位名稱的「開頭」一定必須是大寫的「CODE」(除非有去改這個外掛的設定)後面再加上要取的名字,比如說我目前這個欄位名稱取名為「CODEahref」(你可以取任何你可以辨識的名字,但是開頭一定要是「CODE」),然後右邊的欄位就輸入 javascript 或是 CSS 等等程式碼。

(這個例子右邊欄位是要放入一個頁內連結時會平滑捲動的 jQuery 程式碼。)

▼都填寫好了要記得按「新增自訂欄位」

▼到這裡還沒結束,接下來要在文章內容的「任何地方」加入 (就是前後各用兩個重複大括把剛剛取的名字括起來),這幾個大括號刮起來的字在文章發佈後是看不到的,不用擔心。

這樣才算是完成把這段 javescript 叫進來的步驟。

要加入 CSS 也是一樣的方式,只是把欄位內容換成 CSS 宣告就可以了,記得前後的 <style> 和結尾的 </style> 不可以省略。

 

全域屬性

有一個特別的地方是,雖然我們這段 javascript 只寫在這篇文章的自訂欄位裡,但是確可以在「任何一篇文章」的內文加入 重複叫入這段 javescript 來使用。

所以我的習慣是會新增一個「頁面」然後以後把要新增的 code 都寫在那篇頁面的自訂欄位,這樣以後比較好找,免得之後忘記到底是寫在哪一篇文章的自訂欄位,想要修改就會有點麻煩。