重點整理
在子主題 functions.php 用 add_shortcode 註冊一個函數，就能建立自己的短代碼，在文章、頁面或小工具中輸出指定文字與圖片。本文提供範例程式碼並說明呼叫方式。
WordPress shortcode 在網頁設計時是非常彈性的功能，當需要在特定位置加入想要呈現的內容，卻受限於網站主題框架無法以內建編輯器或區塊小工具完成時，就可以選擇自行創建 shortcode 函式定義想要顯示的內容，只要在 HTML 區塊中加入 shortcode ，就能夠在網站主題不支援編輯的位置顯示特定文字或圖片，本篇文章分享的 shortcode 函式相當簡單，只需按照步驟就能夠完成，如果想了解更多 shortcode 知識，可參考 WordPress Shortcode 教學 – 網頁設計基礎，運用簡碼加入網頁內容元素。
使用 add_shortcode 函數
第一步：在下方的函式中，dh_first_shortcode 是可以自定義的名稱，但要注意如果有更改，函式結尾處的 add_shortcode 內容也必須要替換成一樣的名稱。而這段函式所代表的意義就是定義當 dh_first_shortcode 這段文字以代碼的形式在 HTML 中出現時，會回傳（return）文字 ” shortcode教學 ” 以及網站圖示（Site Icon），也就是在網頁上顯示。
// 這個短代碼要拿來做什麼
function dh_first_shortcode() {
// 把要顯示的圖文組成字串，最後用 return 回傳（不要用 echo）
$html = 'shortcode教學';
$html .= '<img src="' . esc_url( get_site_icon_url( 64 ) ) . '" alt="鵠崙設計">';
return $html;
}
add_shortcode( 'dh_first_shortcode', 'dh_first_shortcode' );範例中的圖片用 get_site_icon_url() 取得網站在「外觀 → 自訂 → 網站識別」設定的網站圖示，換成自己的圖片網址也可以。
加入方式為選擇子主題模板，在 functions.php 檔案內容結尾處加入此段函式即可，如下圖所示。
第二步：以 WordPress 傳統編輯器而言，只需加入剛剛定義的 shortcode 名稱，並在前後加上 [ ] 符號即可。
第三步：完成後就會在網頁上顯示我們所定義的文字與圖片，如下圖所示。
第四步：在本來的函式中，我們只單純輸出文字，因此在外觀上不會套用網站主題既有的 CSS 樣式表，此時只需要為文字加入 HTML 標籤以及 CSS 類名稱，以下圖為例，設定文字為 h2 就會套用網站中對 h2 既有的樣式，比如字體粗細與大小。
function dh_first_shortcode() {
$html = '<h2 class="dh-title">shortcode教學</h2>';
$html .= '<img src="' . esc_url( get_site_icon_url( 64 ) ) . '" alt="鵠崙設計">';
return $html;
}（下方截圖是本文早期的 echo 寫法，請以上方 return 的寫法為準。）
第五步：更新後在重新整理網頁，文字就會套用 h2 標籤的樣式了。
為什麼短代碼函數要用 return，不要用 echo？
本文早期的範例用 echo 直接輸出內容（上方範例已改成 return），這種寫法在短代碼裡會出問題：WordPress 會先執行短代碼，再把結果放回文章的位置，如果函數用 echo，內容會在文章其他文字之前就被印出來，常見的症狀是短代碼的內容跑到文章最上方，在區塊編輯器儲存時也可能出現更新失敗的錯誤。
正確寫法是把要輸出的 HTML 組成字串，最後 return 回傳。若內容較長，可以用 ob_start() 開始暫存輸出，最後 return ob_get_clean();，就能照常寫 HTML 又不會跑位。
短代碼怎麼接收參數？
短代碼可以像 [dh_notice color="red" title="注意"] 一樣帶參數，讓同一段程式在不同地方顯示不同內容：
- 函數的第一個參數
$atts會收到這些設定。 - 用
shortcode_atts()指定預設值，例如shortcode_atts( array( 'color' => 'gray', 'title' => '' ), $atts )，沒填的參數就用預設。 - 輸出到畫面前用
esc_html()、esc_attr()處理參數，避免有人在參數裡塞入程式碼。
包住內容的短代碼（例如 [dh_box]文字[/dh_box]）則用第二個參數 $content 取得中間的文字。
常見問題
add_shortcode 的程式碼要放在哪裡？
放在子主題的 functions.php，或用 Code Snippets 這類程式碼片段外掛新增。直接寫在父主題裡，主題更新時會被覆蓋；短代碼若要跨主題使用，也可以寫成自己的小外掛。
在區塊編輯器（Gutenberg）裡怎麼使用短代碼？
新增一個「短代碼」區塊，輸入 [你的短代碼名稱]即可，前台會顯示函數輸出的內容。在段落區塊裡直接打短代碼通常也能運作，但用專門的短代碼區塊比較不會被編輯器改動格式。
短代碼的名稱有什麼限制？
名稱建議只用小寫英文、數字與底線，並加上自己的前綴（例如 dh_），避免和外掛或主題的短代碼撞名。名稱撞到時，後註冊的會覆蓋先註冊的，造成其中一邊失效。
結語
shortcode 寫法可以有很多種，另外一種比較複雜的甚至可以在代碼中直接加入篩選條件，比如說文章 loop 可以使用 shortcode_atts 來制定規則，以控制網站前端只顯示特定的分類文章，shortcode 看起來就會像 [dcat cat=”cat_id”]，只要輸入文章分類 id ，就能只顯示特定分類的文章，這是屬於比較進階的寫法，之後鵠學苑也會陸續分享喔！