請 AI 把 WordPress 的聯絡按鈕做得好按一點，最容易漏掉的是「哪一個按鈕」。如果把規則寫成 .wp-block-button__link，共用這個 class 的按鈕都可能受到影響。
這次用一個小改動示範完整流程。把指定頁面的一顆按鈕，在窄螢幕下左右各增加 8 像素內距。原有的桌面樣式、其他按鈕和連結都要保留。先取得實際的頁面與區塊 class，再請 AI 提出一段能單獨移除的 CSS。
從前台取得頁面和區塊的 class
在測試站用瀏覽器開啟目標頁面，對按鈕按右鍵選「檢查」。往上找到它所在的按鈕區塊，再看最外層 <body> 的 class。WordPress 佈景若有輸出 body_class()，一般頁面可能看得到 page-id-42 這類 class。請用你看到的值，別拿後台網址裡的數字直接猜前台結構。
如果頁面上有好幾顆按鈕，可在目標按鈕區塊的「進階」設定加上自訂 CSS class，例如 change-demo，再確認它出現在前台。範例中的自訂 class 在外層區塊，連結本身仍是 wp-block-button__link。如果你的編輯器把 class 放在不同元素上，選擇器也要跟著調整。
若前台沒有可辨識的頁面 class，或按鈕來自全站共用範本，先查該編輯器能否為這個頁面加獨立容器。只修改共用範本裡的按鈕，可能連其他頁面一起變動。
把修改範圍和驗收條件一起交給 AI
提供目標頁面、按鈕周圍的 HTML，以及開發者工具「計算後樣式」裡的原始內距。下面是可以改寫的需求，頁面 ID、class 和數值都取自本文示例。
請提供一段附加 CSS，僅調整
body.page-id-42內、.wp-block-button.change-demo底下的連結按鈕。當視窗寬度在 600 像素以下或等於 600 時，左右內距由 12 改為 20 像素。保留上下內距、連結與桌面樣式。先說明選擇器匹配哪些元素，並列出如何驗證其他頁面及同頁其他按鈕不受影響。
如果 AI 建議改共用佈景檔、替換整份 CSS，或替多個宣告加上 !important，先請它說明原本哪條規則覆蓋了新設定。用開發者工具確認規則來源，再決定是否需要調整優先順序。
用頁面、區塊和視窗寬度一起限制
這段 CSS 適用於上面的示例結構。.wp-block-button.change-demo 的兩個 class 在同一個元素上，中間不加空格。後面的空格表示連結是該區塊的後代。max-width 看的是瀏覽器視窗寬度，因此縮小桌面視窗也會觸發。
/* 聯絡按鈕手機內距：本次改動開始 */
@media (max-width: 600px) {
body.page-id-42 .wp-block-button.change-demo
.wp-block-button__link {
padding-inline: 20px;
}
}
/* 聯絡按鈕手機內距：本次改動結束 */padding-inline 在本文的橫排版面中會設定左右內距，上下內距沿用原值。600 像素是示例的斷點。你的按鈕在哪個寬度開始擁擠，就以該處附近的畫面決定斷點。
先備份現有 CSS，再把整段加到測試站原有的 CSS 管理位置。使用區塊佈景時，可在網站編輯器的「樣式」尋找全站附加 CSS。個別區塊類型的附加 CSS 欄位與全站欄位格式不同，這段包含選擇器及媒體查詢，應放在接受完整樣式表語法的欄位。若你用的是傳統佈景或頁面編輯器，請先確認團隊原本在哪裡管理這段樣式。
驗證同頁另一顆按鈕，也驗證另一頁
在本機用兩個模擬頁面重現了這個案例。它們共用同一份 CSS，每頁都放一顆有 change-demo 的按鈕和一顆沒有的按鈕。原始左右內距都是 12 像素。套用規則後，用瀏覽器讀取計算後樣式，結果如下。
| 檢查位置 | 視窗寬度 | 左右內距 |
|---|---|---|
| 目標頁的指定按鈕 | 390、600 像素 | 20 像素 |
| 目標頁的指定按鈕 | 601、1280 像素 | 12 像素 |
| 同頁的另一顆按鈕 | 390 像素 | 12 像素 |
| 另一頁、同一個自訂 class | 390 像素 | 12 像素 |
| 移除新規則後的目標按鈕 | 390 像素 | 12 像素 |
到你自己的測試站驗證時，也請點一次按鈕，確認連結正確，並在更窄的視窗檢查文字有沒有被擠出容器。若窄螢幕仍需調整，先看按鈕所在容器的可用寬度。
出現問題時，只移除這一段
若要還原，從原本的附加 CSS 欄位刪掉兩個註解之間的整段規則，連同註解一起移除，再儲存。重新載入同一頁，用計算後樣式確認回到修改前的數值。若網站有快取，先確認瀏覽器載入的是新版樣式檔，再判斷是否需要清除相關頁面的快取。
保留這次的頁面、區塊 class、原值和還原位置。下次要再改同一顆按鈕，就可以把這些資料放進AI 改站需求與驗收清單，讓接手者知道哪些變動已經驗過。
