最後更新日期：2020 年 3 月 27 日
本篇文章會教你如何使用程式碼片段(Code Snippets)來自訂WordPress語法，並且提供6個實用的程式碼片段範例教學，不僅可以改善外觀樣式，更能提高工作效率以及方便管理！
許多人可能像我一樣，每篇文章會有一個固定的結尾(CTA)，或是常常使用一些固定的文字樣式(CSS)，甚至想要自己修改主題或是外掛，都可以透過程式碼片段(Code Snippets)這個外掛來完成。
因此在這篇文章，我會教你如何使用Code Snippets，以及提供我常使用的6個程式碼片段程式碼給你參考使用。
想要知道WordPress有哪些好用的主題或是外掛，可以關注我這篇文章：2019年WordPress推薦主題與外掛，最新優惠持續更新中！
目錄
什麼是程式碼片段？
程式碼片段(Code Snippet)本身的定義是：一段可重複利用的程式碼。
我們在寫程式時，可能在很多個部分都使用到同一段程式，這時候就會讓程式變得冗長，所以會將這些內容獨立出來並加以定義成一個新的程式碼，我們就稱作程式碼片段。
程式碼片段可以把可重複使用的程式碼分割儲存，方便除錯與加速開發。
在許多編譯器的環境裡，內建了許多程式碼片段，而在WordPress也有人做出相對應的外掛：Code Snippets，提供我們方便加入自己的程式碼。
為什麼要使用程式碼片段？
使用程式碼片段是為了讓我更好管理這些程式碼，我不需要因為換主題而重新寫一次語法，也不用一直寫重複性的文字。
程式碼片段提供了我一個方便管理所有客製化的程式碼，也可以匯出匯入到別的網站。
我自己常在用的程式碼片段，可以分為下面幾種類型：
1. 每篇文章都會使用的文字
我在每篇文章的結尾，都會有一段固定的文字，希望大家幫忙分享，或是有問題可以留言，以及訂閱我的部落格。
這些文字如果要每篇打的話，萬一我想要改內容就必須一篇一篇改，但若我使用程式碼片段，我只需要打Shortcode ，像是 [end] 這樣的方式，就可以顯示這些文字了。
假設未來要改變內容，只要更改程式碼片段，就可以改變所有文章的內容。
2. 文章內會使用的固定樣式
有看我其他篇文章的人就知道，我有時候會有步驟教學(Step1 , Step2…)，或是一段粉紅色區塊的結論，這也是我透過程式碼片段完成的樣式。
我一樣可以透過Shortcode來顯示我要的樣式，就不需要再使用其他外掛來製作那些區塊了!
3. 更改整個網頁的樣式
假設要更改整個網頁的字型或是標題樣式，通常很多文章都會建議在外掛的編輯CSS或是style.css裡面更改，但是這種方式會造成一個問題，就是更換主題的時候，這些設定就會跟著消失。
但如果透過程式碼片段來更改，不論是什麼主題，都可以一直保留這些樣式，不會隨著主題被替換掉。
4. 更改外掛或主題的設定
有時候對於外掛的功能有稍微的不滿，或是對外掛或是主題的樣式想要做調整，也可以透過程式碼片段來更改。
如果在外掛或是主題本身改的話，很有可能造成外掛本身有問題或是更新失敗等等問題。
5. 更改WordPress安全性設定
WordPress本身的框架提供了很多可變更性，像我就移除了WordPress的登入入口，改成WordPress.com的第三方登入。
如何安裝及使用程式碼片段
STEP 1
在WordPress後台，點選安裝外掛，搜尋Code Snippets，看到剪刀圖案的就是了，然後點選立即安裝，接著按啟用。
STEP 2
啟用之後，左邊就會看到程式碼片段的欄位，點近來就會看到有四個範例，分別是新增HTML、CSS、JavaScript、php語法的範例。
STEP 3
首先做一個示範，點選HTML 短代碼範例，就會進來編輯程式碼的頁面，這個範例是新增一個Shortcode，然後Shortcode的名字是shortcode_name，接著點選左下角的儲存設定並啟用。
使用方法是在文章中打 [shortcode_name] ，就會顯示下面 $out 的文字：”在這裡撰寫網站專屬 HTML 短代碼內容”。
STEP 4
接著去編輯文章做測試，在文章內打 [shortcode_name] ，然後儲存草稿查看。
STEP 5
到文章查看，發現剛剛在程式碼片段的文字顯示出來了！
這樣就是一個簡單的程式碼片段新增Shortcode的範例。
STEP 6
如果要提供給其他的WordPress網站使用，就只要按匯出，會存成一個json格式的文件，在另一個網站按下匯入，就可以輕鬆轉移程式碼片段。
STEP 7
如果要新增程式碼的話，就點選新增程式碼片段，把程式碼貼上去就好，也可以多加解釋，防止未來忘記功能。
6個程式碼片段範例教學
把所有連結改成開啟新分頁
功能介紹
一般寫文章的時候，我建議大家把所有的連結都用新分頁開啟，才不會讓網頁的跳出率太高。
但是以我而言，我很常在插入連結的時候，忘記勾選以新分頁開啟，導致有一陣子的跳出率突然變高。
所以我寫了這個程式碼片段，他可以幫你把所有非你的網域的連結改成用新分頁開啟，即使圖片也是一樣。
我要強調一點的就是這是針對非你的網域，舉個例子來說，我的網域是 johntool.com，如果連結是 johntool.com/2019-vpn-recommend/，這樣就無法以新分頁開啟。
但是透過這個功能，就只需要針對你的網域的連結特別設定新分頁開啟就好，大幅降低了遺漏的可能性。
程式碼
|
1
2
3
4
5
6
7
8
9
10
11
12
|
add_action( 'wp_head', function () { ?> <script> window.onload = function() { var links = document.links; for (var i = 0, linksLength = links.length; i < linksLength; i++) { if (links[i].hostname != window.location.hostname) { links[i].target = '_blank'; } } } </script><?php } ); |
畫面
更改整個網站的字型與標題樣式
功能介紹
這個程式碼片段主要是在改我的網站的樣式，將整個網站的字型改成思源黑體，還有調整我的h2、h3、h4的標題樣式。
如果想要更針對標題樣式有怎麼樣的變化，可以參考這篇文章：【WordPress教學】如何寫CSS更改WordPress標題樣式？3個實際範例教學。
程式碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|