當你透過各類網絡行銷、SEO、社群平台或付費廣告把目標訪客帶到來你的網站，除了吸收你製作的高價值內容和多媒體之外，如何讓訪客執行最重要的轉換操作？按鈕區塊 能夠輕鬆引導你的訪問者去他們想去的地方，並幫助你提高參與度和轉化率等的目標，使用按鈕區塊可以提示訪客按一下按鈕的連結並採取行動。這也是製作成功的 Call to Action (行動呼籲) 頁面的關鍵元素，透過簡單易用的 WordPress 區塊編輯器 即可以輕鬆達成這一目的。
(按鈕 Button) 和 (按鈕群組 Button Group) 的差異？
首先按鈕區塊是單獨存在，每個按鈕都有獨立的設定值，不受其他外部因素影響。反之，按鈕群組則是多個按鈕的集合和組成，最少 2 個，理論上沒有上限。值得注意新版的 WordPress 區塊編輯器就預設是使用 (按鈕群組 Button Group)，那怕你只是需要 1 個按鈕，所以你可能會感到很奇怪，我們下方教學會先談及 按鈕群組 的設定，然後再獨立研究 單獨按鈕 的細項設定，希望新手不會弄混兩者的差異。
如何新增按鈕 Button Block (方法一)？
步驟一：
步驟二：
如何新增按鈕 Button Block (方法二)？
步驟一：
步驟二：
步驟三：
如何變更按鈕群組的「對齊方式」？
按鈕群組預設的對齊是寬幅寬度，填滿左右兩邊的文章空間，這符合基礎的現代美學和實用性。
步驟一：點擊「變更對齊方式」按鈕
步驟二：按鈕群組對齊模式
全幅寬度：無視部落格文章內部的設定，以 100% 的螢幕寬度「填滿」整個畫面。
按鈕群組的「變更內容分散對齊方式 Aligning Buttons」
這個設定可以改變群組對齊部落格文章內部的寬度，例如控制在「文章 Post」的靠左、置中或靠右的對齊方式。
步驟一：點擊「變更對齊方式」按鈕
步驟二：3 種按鈕群組對齊模式
2. 內容置中對齊方式
3. 內容靠右對齊方式
按鈕群組的排列順序
如果你的按鈕多 1 個，那就需要調整的「排列方法」，具體來說有 2 種，分別是「水平排列」和「垂直排列」。前者是標準格式，會不斷向橫延伸，反之垂直排列比較罕見，很像分行放置按鈕的視覺效果。
新手們，請確保您已經學懂「清單檢視」模式的應用：
為什麼我很難去選取目標「區塊」元素？你需要瞭解「清單檢視 List View」功能
由於 WordPress 區塊編輯器 已經推出了一段時間，不過部分新手在操作時發現不好上手，尤其在選取目標「區塊」元素時，常常選不到自己希望選擇的物件。還有因為「隱藏」的線框，沒有相關的區塊觀念可能會碰壁。這次從「觀念」介紹如何更「精準」和「正確」地選取區塊物件，這需要配合「清單檢視 List View」功能的協助。
新增「按鈕 Button」區塊和設定
當你新增了 1 個標準的按鈕區塊，會出現一個「群組」和「按鈕」，由於上方我們已經介紹了群組的基礎功能，現在會花數分數介紹按鈕的功能解說。在「輸入按鈕文字」裡，你是可以「自由發揮」創意的，下方提議一些常用的狀況供大家參考，不限於這些 Call to Action (行動呼籲) 的例子。
- 閱讀更多 | Read More
- 學習更多 | Learn More
- 立即購買 | Buy Now
- 立即下載 | Download
- 加入購物車 | Add to Cart
- 立即預約 | Book Now
透過按鈕群組新增更多「按鈕」
步驟一：從群組檢視所有按鈕
步驟二：點擊 [+] 符號
直接調整按鈕的「外觀樣式 Styles」
步驟一：點擊「按鈕」的符號
步驟二：2 種按鈕群外觀樣式
左右移動按鈕的順序位置
步驟一：點擊需要 [ 移動 ] 的目標按鈕
步驟二：點擊 [ < ] 和 [ > ] 控制方向
在按鈕插入「超連結」網址
在長篇文章和頁面裡的按鈕插入「超連結」是很常見的做法，在 WordPress 編輯器裡的步驟很簡單和直觀。
步驟一：點擊「鎖鏈」按鈕
步驟二：從進階的頁面設定
步驟三：點擊「在新分頁中開啟」按鈕
步驟四：確認設定
粗體、斜體和其他格式化設定
步驟一：套用 [ 粗體 ] 和 [ 斜體 ]
步驟二：較少使用率的格式化功能
2. 下標
3. 內嵌圖片
4. 內嵌程式碼
5. 刪除線
6. 文字色彩
7. 鍵盤輸入
從「區塊」面板調整按鈕的「外觀樣式 Styles」
步驟一：預覽和套用外觀
步驟二：調整 [ 預設 ] 的樣式風格
調整按鈕的 [ 文字色彩 ]
![調整按鈕的 [ 文字色彩 ]](https://wp-valley.com/wp-content/uploads/2021/12/WP-Valley-Blog-Featured-Image-171-buttons-block-11.jpg)
預設按鈕會受到佈景主題的影響，如不適用，請在這邊區塊設定面板調整，每個物件都允許獨立設定色彩。
調整按鈕的 [ 背景色彩 ]
![調整按鈕的 [ 背景色彩 ]](https://wp-valley.com/wp-content/uploads/2021/12/WP-Valley-Blog-Featured-Image-171-buttons-block-12.jpg)
同上，預設按鈕的 [ 背景色彩 ] 會受到佈景主題的影響，如不適用，請在這邊區塊設定面板調整，每個物件都允許獨立設定色彩。新版區塊編輯器已經支援 [ 漸層色彩 ] 可供使用。
調整按鈕的「框線圓角半徑」
預設按鈕是「直角」的，感覺上是正規和方正，但也允許你調整成「圓角」。
步驟一：拉動滑杆控制 [ 框線圓角半徑 ]
步驟二：輸入數值控制 [ 框線圓角半徑 ]
步驟三：重設為 [ 預設值 ]
調整個別按鈕的「寬度」，總數量的總和是 100%
寬度總和是 100%，這種設定允許你設定個別按鈕可以佔用更多空間位置，舉例 1 個按鈕佔 50%，另外 2 個按鈕各佔 25%，算式就是 50% + 25% + 25% = 100%，如果多於 100% 會換行處理。
調整連結的設定
步驟一：點擊「在新分頁中開啟」按鈕
步驟二：連結的 Rel 屬性值
HTML 錨點設定
步驟二：HTML 錨點
附加的 CSS 類別設定
步驟三：附加的 CSS 類別
常見問題 FAQ
WordPress 按鈕的外觀設定和選擇太少？
這屬正常，如果需要更完整和功能強大的「按鈕」功能，請參考其他《區塊組合套件》外掛提供的額外強化項目，例如 Stackable Blocks、Kadence Blocks、Generate Blocks 和 Qubely Blocks，大部分這類免費外掛都提供不錯的升級效果，一般都能滿足市場上主流的進階需求。
(按鈕 Button) 和 (按鈕群組 Button Group) 的差異？
首先按鈕區塊是單獨存在，每個按鈕都有獨立的設定值，不受其他外部因素影響。反之，按鈕群組則是多個按鈕的集合和組成，最少 2 個，理論上沒有上限。值得注意新版的 WordPress 區塊編輯器 就預設是使用 (按鈕群組 Button Group)，那怕你只是需要 1 個按鈕，所以你可能會感到很奇怪，我們下方教學會先談及 按鈕群組 的設定，然後再獨立研究 單獨按鈕 的細項設定，希望新手不會弄混兩者的差異。
參考資料和引用文獻：
- Button Block | WordPress.org
- Button Block – Support – WordPress.com
- CSS 基本概念 – WordPress.com
- 維基百科：WordPress 是什麼？
- 維基百科：什麼是行動呼籲 (Call to action)？
- Elegant Themes：How to Use the WordPress Buttons Block
- WPBeginner：How to Add Call to Action Buttons in WordPress (without Code)
- Ultimate Blocks：Improved Button Block for Gutenberg
- Easy WP Guide：Buttons Block
- WordPress/gutenberg · GitHub
- 網站迷谷：透過 WordPress 寫文章
- 網站迷谷：為什麼我很難去選取目標「WordPress 區塊」元素？
- 網站迷谷：WordPress 官方的區塊編輯器
- 網站迷谷：什麼是 WordPress 可重複使用區塊的應用？
- 網站迷谷：認識《WordPress 區塊小工具》
- 網站迷谷：認識《Stackable》
我們提供市場上最新的網站架設新聞、教學和相關知識，我們不會向用戶發送垃圾和推廣內容，而你可以隨時「取消訂閱」。
學員人數：6,600+ 人（持續增加之中）
