如何在 WordPress 編輯器中添加按鈕 [教程]

如何在 WordPress 編輯器中添加按鈕 [教程]

為什麼 WordPress 按鈕塊如此重要?

網站上的導航對於訪問者和客戶來說非常重要。我們想從一個子頁面進一步發送它們。引導他們完成整個購物過程。這就是為什麼在頁面內容中正確插入重要鏈接非常重要。

基本上我們有兩個選擇。使用標準鏈接或按鈕。關於何時使用第一個選項和稍後的選項的意見各不相同。通常,一頁上有多個可能的操作。我們需要確定哪一個是主要的,哪一個是次要的。我們建議您僅將按鈕用於主要操作。這樣您就可以更好地了解此主要操作。您會將訪問者的注意力集中到此操作上。我們也可以將其稱為號召性用語按鈕。不要在一個子頁面上創建太多按鈕。

主要按鈕功能有哪些?

  • 按鈕可以引起訪問者的注意——號召性用語
  • 它們分隔頁面或帖子內容並使其更具可讀性
  • 幫助確定頁面方向。許多訪問者僅用眼睛視覺掃描頁面
  • 使用超鏈接將訪問者引導至其他頁面

有很多參數決定按鈕是否成功。重要的是例如尺寸、位置或按鈕顏色。有必要遵循標準的 UI 和 UX 原則。綠色用於具有積極作用的按鈕,例如購買東西。紅色代表消極——例如取消訂閱時事通訊。正確設計的按鈕可以直接影響訪問者的操作。

在 WordPress 中的任何頁面或帖子上添加按鈕

WordPress 5 之前的情況

在 WordPress 塊編輯器發明之前,添加按鈕是一個相當複雜的過程。因為 WordPress 本來就沒有這個功能。您可以將主題與頁面生成器或第 3 方插件一起使用。在這種情況下,短代碼創建按鈕。

在我們較舊的 WordPress 主題中,您可以在可視化編輯器中使用短代碼添加按鈕。單擊“插入短代碼”->“按鈕”後,您可以在模式窗口中設置各種設置。文本、文本顏色、按鈕顏色、url、對齊方式等。借助這些高級設置,您無需任何編程即可輕鬆快速地添加按鈕。

通過簡碼添加按鈕
在塊編輯器發布之前通過簡碼添加按鈕

如何在WordPress編輯器中使用按鈕塊?

感謝 WordPress 5,有了第二種方法。容易多了。 WordPress 可視化編輯器帶來了許多有用的塊。要在網站上創建按鈕,您現在可以在編輯器中使用 WordPress 按鈕塊。

分步指南如何在 WordPress 編輯器中添加按鈕

1. 首先您需要決定要在哪裡插入按鈕
2.按鈕塊可以通過多種方式添加:
– 單擊頂部欄中的“+”或塊編輯器中選擇按鈕塊的任意位置

單擊“+”添加按鈕
通過單擊“+”添加按鈕塊
通過搜索欄添加按鈕
通過搜索欄添加按鈕塊
通過斜杠添加按鈕塊
使用斜杠“/”添加按鈕塊

– 您還可以使用搜索欄找到任何塊,只需寫“按鈕”

– 通過輸入“/”,您可以訪問所有可用的塊

3.創建的Button塊可以進一步配置

添加按鈕文本和 URL 地址

一旦創建了 WordPress 塊按鈕,您就可以在其中輸入文本。請記住,對於號召性用語按鈕,最好使用帶有清晰信息的簡短文本。您可以將文本設置為粗體、斜體或下劃線。所有這些更改都可以通過單擊工具欄中的 來進行。您還可以將按鈕對齊到側面或居中。

按鈕編輯
只需幾秒鐘,您就可以完全改變按鈕的外觀

按鈕通常指向另一個頁面或外部網站。因此,在其下方有一個用於添加 URL 地址的輸入。優點是添加 URL 不需要選擇文本。

更改按鈕顏色

新的編輯器允許您在幾秒鐘內修改 WordPress 按鈕塊。只需使用右側邊欄中的設置即可。您可以更改按鈕背景顏色或按鈕內的文本顏色。有基本的預定義顏色,或者您可以選擇自己的顏色。所有變化都可以立即看到,以查看顏色組合是否正確。

更改按鈕顏色
單擊所選顏色後按鈕顏色立即更改

一個很棒的功能是,如果您選擇錯誤的組合,例如灰色背景和白色文本顏色,WordPress 塊編輯器將警告您該按鈕在您的網站上無法讀取。

找到您自己的按鈕樣式

按鈕樣式選項
直接從工具欄或檢查器設置更改按鈕的樣式

要超快速且毫不費力地創建或更改按鈕,您可以使用準備好的樣式之一。按鈕可以以這種方式更改為例如圓形、邊框或矩形。嘗試什麼最適合您的網站風格或設計。

使用自定義 CSS 編輯按鈕

使用自定義 CSS 類可以實現更大的自定義。這樣您就可以按照自己的意願在 WordPress 編輯器中添加自己的 CSS 樣式和样式按鈕。

自定義類輸入
插入自定義類來設置按鈕的樣式

正如我們所看到的,有比使用按鈕簡碼更簡單的方法。 WordPress 按鈕塊可以在與 WordPress 塊編輯器兼容的任何主題中使用。閱讀有關我們全新 Citadela WordPress 主題的更多信息。它是專門為 WordPress 塊編輯器設計和開發的。

最後有額外提示

不要忘記監控您的 WordPress 按鈕塊和按鈕成功本身。如果您使用 Google Analytics,您可以創建一個唯一的 URL。要跟踪訪客點擊,您可以添加 谷歌UTM參數。可以使用 URL 生成器創建 URL。添加參數可以讓您識別訪問來源。如果您想知道訪問者從哪裡來到您的購物頁面,這將非常有用。

您目前使用 WordPress 按鈕塊時遇到的最大問題是什麼?讓我們在下面的評論中討論一下。分享您在網站上使用按鈕的經驗。

4 對“How to add button in WordPress editor [tutorial]”的思考

  1. 感謝您分享本教程。您還可以指導我如何創建塊模板嗎?我正在使用此資源 https://wpitech.com/create-wordpress-gutenberg-block-templates/ 做同樣的事情,但它給出了一個錯誤,並且我在前端有一些編程行。這是代碼
    add_action( 'init', 函數() {
    $args = 數組(
    '公共' => 真實,
    '標籤' => '新聞',
    'show_in_rest' => 真,
    'template_lock' => '全部',
    '模板' => 數組(
    array( '核心/段落', array(
    '佔位符' => '突發新聞',

  2. 您知道是否有一種方法可以使用按鈕折疊內容而無需下載插件?基本上我使用的是 wordpress.com 高級版,而不是商業版,所以下載插件並不是一個簡單的選擇。

    謝謝!

    1. 你好呀,

      謝謝你的詢問。您應該直接詢問 wordpress.com 的支持團隊,他們是否可以提供一些解決方案來解決您的問題。此致!
      茲拉特科
      艾特團隊

評論被關閉。