找我們做網站
↑
Wordpress · WordPress 客製與程式碼

WordPress Shortcode 教學:短代碼是什麼、貼在哪裡與常用外掛

WordPress 客製與程式碼發布 2018.08.26更新 2026.10.02閱讀約 6 分鐘
WordPress Shortcode 教學:短代碼是什麼、貼在哪裡與常用外掛

重點整理
WordPress Shortcode(短代碼、簡碼)是用中括號包起來的一段文字,例如 [contact-form-7 id="123"],貼進文章、頁面或小工具後,前台會自動換成外掛或主題提供的內容。使用方式只有三步:在外掛設定頁或說明文件找到短代碼、複製、貼到區塊編輯器的「短代碼」區塊。想不寫程式就插入分頁、按鈕、手風琴等元素,可以用免費外掛 Shortcodes Ultimate。

網站的側邊欄想放聯絡表單、文章中間想插入一組分頁或按鈕,但編輯器內建的區塊做不到,這時常會在外掛說明裡看到「把這段短代碼貼上即可」。這篇說明 Shortcode 是什麼、長什麼樣子、可以貼在哪些地方,並示範用 Shortcodes Ultimate 插入現成的網頁元素。

Shortcode 是什麼?長什麼樣子?

Shortcode 是 WordPress 內建的機制:外掛或主題用 PHP 先定義好一個名稱,使用者在內容裡寫上這個名稱,WordPress 輸出網頁時就會把它換成對應的 HTML。常見的寫法有兩種:

  • 單一標籤:[gallery]、[contact-form-7 id="123" title="聯絡我們"],中括號裡是名稱與參數。
  • 成對標籤:[su_heading size="18"]標題文字[/su_heading],開頭與結尾中間包住要套用效果的內容。

名稱(例如 su_heading)不能自己改,只能改參數值(18)和中間的文字。中括號要用半形 [ ],用全形就不會生效。另外,不是每個外掛都有提供短代碼,要看外掛設定頁或 WordPress.org 外掛頁面的說明。

步驟一:在外掛設定頁找到短代碼

以 Contact Form 7 為例,在「聯絡表單」清單或表單編輯頁上方就能看到這張表單的短代碼,直接複製即可。

Contact Form 7 表單清單中,每張表單旁顯示的短代碼
Contact Form 7 表單清單中,每張表單旁顯示的短代碼

如果在設定頁找不到,可以到 WordPress.org 外掛目錄打開該外掛的頁面,在「說明」或「常見問題」裡通常會列出可用的短代碼與參數。

步驟二:貼到側邊欄或頁尾小工具

到「外觀」→「小工具」,在要放的側邊欄或頁尾區域新增「短代碼」區塊,貼上剛才複製的短代碼後按「更新」。下圖是舊版小工具介面(文字小工具),流程相同:

舊版 WordPress 小工具頁面,將文字小工具加入側邊欄(2018 年畫面,新版改用區塊)
舊版 WordPress 小工具頁面,將文字小工具加入側邊欄(2018 年畫面,新版改用區塊)
在側邊欄小工具中貼上 Contact Form 7 短代碼(舊版畫面)
在側邊欄小工具中貼上 Contact Form 7 短代碼(舊版畫面)

回到網站前台,側邊欄就會出現短代碼代表的聯絡表單。

網站前台左側邊欄顯示由短代碼產生的聯絡表單
網站前台左側邊欄顯示由短代碼產生的聯絡表單

步驟三:貼到文章或頁面

在區塊編輯器按「+」新增區塊,搜尋「短代碼」,把短代碼貼進去後發布或更新。直接貼在一般段落裡多半也能運作,但用「短代碼」區塊比較不會被編輯器自動加上格式而失效。使用傳統編輯器的網站,要切到「文字」分頁再貼上。

傳統編輯器「文字」分頁中貼上聯絡表單短代碼(舊版編輯器畫面)
傳統編輯器「文字」分頁中貼上聯絡表單短代碼(舊版編輯器畫面)
頁面前台顯示短代碼產生的聯絡表單區塊
頁面前台顯示短代碼產生的聯絡表單區塊

步驟四:貼到主題提供的短代碼欄位

有些佈景主題會在文章或頁面的編輯畫面下方提供專門的欄位,讓你把短代碼放在頁首之後、頁尾之前等固定位置。下圖是 OceanWP 主題在編輯畫面中的設定區塊:

OceanWP 主題在頁面編輯畫面提供的短代碼欄位,可選擇顯示位置
OceanWP 主題在頁面編輯畫面提供的短代碼欄位,可選擇顯示位置

在想要的位置欄位貼上短代碼,更新頁面,內容就會出現在那個位置。

在 OceanWP 的頁尾小工具之前欄位貼上短代碼
在 OceanWP 的頁尾小工具之前欄位貼上短代碼

用 Shortcodes Ultimate 插入現成元素

Shortcodes Ultimate 是免費的短代碼外掛(2026 年 9 月仍有更新),提供分頁、手風琴、按鈕、提示框、欄位、輪播等元素,可以在區塊編輯器、傳統編輯器和小工具中使用。安裝啟用後,後台會多出「Shortcodes」選單,「Available shortcodes」頁面列出所有元素與範例。

Shortcodes Ultimate 的 Available shortcodes 頁面,列出可用的網頁元素(舊版畫面)
Shortcodes Ultimate 的 Available shortcodes 頁面,列出可用的網頁元素(舊版畫面)

點進某個元素(例如 Heading),可以看到它的短代碼與可調整的參數,直接複製即可使用。

Heading 元素的短代碼與參數設定說明
Heading 元素的短代碼與參數設定說明

在編輯器中也可以用外掛提供的「Insert shortcode」按鈕,以視覺化方式挑選元素、調整參數再插入,不用自己記參數。

傳統編輯器上方的 Insert shortcode 按鈕(舊版畫面)
傳統編輯器上方的 Insert shortcode 按鈕(舊版畫面)
Insert shortcode 視窗中可選擇的各種網頁元素
Insert shortcode 視窗中可選擇的各種網頁元素

插入後,內容裡會出現像 [su_heading size="18"]標題[/su_heading] 這樣的成對標籤,中間的文字和參數值都可以直接修改。

編輯器中插入的 Heading 與 Tabs 短代碼
編輯器中插入的 Heading 與 Tabs 短代碼
修改短代碼文字與參數後的內容
修改短代碼文字與參數後的內容

發布後回到前台,就能看到標題與分頁元素。

前台顯示由 Shortcodes Ultimate 產生的標題與分頁元素
前台顯示由 Shortcodes Ultimate 產生的標題與分頁元素

常見問題

短代碼貼上後前台直接顯示文字,沒有變成內容怎麼辦?

通常是提供這個短代碼的外掛已停用或刪除。先確認外掛有啟用、名稱沒有打錯、中括號是半形;如果是放在主題或頁面編輯器不支援短代碼的欄位,改用「短代碼」區塊或文字小工具。

停用外掛後,文章裡的短代碼會怎樣?

會直接以 [名稱 …] 的原始文字顯示在前台。換掉或停用外掛前,最好先搜尋全站用到哪些短代碼,改用其他方式替換後再停用。

可以自己寫一個短代碼嗎?

可以,用 WordPress 的 add_shortcode() 函式就能定義自己的短代碼,寫法可以參考 WordPress shortcode 函式教學。建議寫在子主題或 Code Snippets 這類外掛裡,避免主題更新時被覆蓋。

結語

Shortcode 是 WordPress 讓外掛內容「放到任何地方」的簡單做法:找到短代碼、複製、貼進短代碼區塊就完成。現在區塊編輯器已經內建很多元素,簡單的按鈕或欄位不一定需要短代碼;但要放聯絡表單、商品列表這類外掛內容時,短代碼仍然是最直接的方式。使用前先確認外掛會長期維護,日後要換外掛時也比較好整理。

鵠學苑・鵠崙設計鵠崙設計 2014 年成立,專注 WordPress 網站開發,400 多個網站在我們自己的主機上運作。鵠學苑的文章由團隊實際操作後整理,工具與外掛的功能以撰文當時為準。
鵠崙設計

不想自己摸索,
就交給我們做。

外掛設定、主機效能、改版搬家,這裡寫的每一件事,都是我們每天在客戶網站上做的工作。留下需求,1 個工作天內回覆。