重點整理
在子主題 functions.php 加入一段 jQuery 函數，文章編輯畫面的標題下方會顯示目前字數，超過設定上限（範例為 30 字）就不能再輸入。注意中英文都以一個字元計算。
WordPress 自訂後台 是客制網站必備的功能之一，由於 WordPress 開源程式碼的特性，可以使用簡單的程式碼變更網站後台的操作方式，讓編輯網站內容的動作更容易被執行。在這一次教學中，鵠學苑將分享加入 jQuery function 限制文章編輯時可輸入的標題字數的方法，只需要在主題編輯器中加入 jQuery ，並輸入想要限制的字數，過程相當簡單。
而限制字數功能主要用於當網站具有多人編輯時，可以讓每一位作者在決定標題內容時不會寫的過於冗長，另一方面標題字數也會影響到網站前台顯示文章列表時的樣式、對齊、高低等，也不再需要人工計算字數，加入 jQuery 後會自動顯示當前標題字數。由於每個網站所使用的主題與外掛都不相同，建議在加入任何程式碼前都請先為網站做備份，以免造成網站錯誤。
注意事項：適用 WordPress 5.0 ( Beta )或以上版本
加入 jQuery function 至主題編輯器
第一步：下方是使用 jQuery 建立的函式，首先在 post 型態的編輯畫面中，標題欄位的下方加入自動計算當前標題字數的功能，接者在加入限制字數的 if 條件式，以下方定義的數字來說，就是當字串長度大於 30 字元時，將禁止繼續輸入數字的操作。
第二步：加入方式很簡單，在主題編輯器中的 functions.php 檔案結尾處加入此段函式，並修改想要限制的字數即可，記得要在子主題模板加入，如下圖所示。
第三步：完成後在編輯頁面中標題部分就會顯示當前標題字數以及限制字數。
第四步：要特別注意的是英文字計算方式與中文字相同，一個字母就算一個字，與常見的計算方式不同。
使用區塊編輯器時怎麼控制標題長度？
- 看 SEO 外掛的長度提示：Yoast SEO、Rank Math 在編輯畫面會用顏色或長度條提示 SEO 標題是否過長，作者寫完就能自己調整。
- 訂寫作規範：在團隊的寫作指南寫明標題建議字數，搭配編輯審稿，比用程式硬擋更有彈性。
- 用 CSS 處理前台顯示：列表上的標題可以用
-webkit-line-clamp限制顯示兩行，超出的部分以「…」結尾，版面就不會高低不齊。
若一定要在區塊編輯器中硬性限制，需要用區塊編輯器的 JavaScript API 另外開發，難度比原文的 jQuery 高。
加入後台程式碼前要注意什麼？
- 只在需要的頁面載入：用
admin_footer-post.php、admin_footer-post-new.php這類只在文章編輯頁觸發的 hook，不要讓程式碼在每個後台頁面都執行。 - 確認 jQuery 已載入：WordPress 後台預設有 jQuery，但寫法要用
jQuery(function($){ … })包起來，避免和其他程式衝突。 - 先在測試站試：後台 JavaScript 出錯可能讓編輯畫面無法使用。
- 放在子主題：避免主題更新時被覆蓋。
常見問題
這段 jQuery 在區塊編輯器（Gutenberg）也有用嗎？
通常沒有作用。原文的程式碼是針對傳統編輯器的標題欄位，區塊編輯器的標題是用 React 產生的，結構不同，jQuery 找不到原本的欄位。使用區塊編輯器的網站要改用其他做法。
為什麼中文和英文都算一個字？
程式用的是 JavaScript 的字串長度計算，每個中文字、英文字母、空白和標點都算一個字元。所以設定 30 字時，中文標題可以寫到 30 個字，英文標題卻只能寫大約 5 到 6 個單字。
限制標題字數會影響 SEO 嗎？
不會直接影響。標題字數限制只是讓後台作者寫短一點，避免列表版面高低不齊。搜尋結果顯示的標題由 SEO 外掛的 SEO 標題欄位決定，可以和文章標題分開設定。