如何在 WordPress 標題菜單中添加按鈕


您想在 WordPress 標題菜單中添加一個按鈕嗎?

在標題導航菜單中添加按鈕可讓您創建更引人注目的號召性用語。 它可以幫助您的訪問者採取行動,從而為您最重要的頁面帶來更多點擊,並創造更好的用戶體驗。

在本文中,我們將向您展示如何輕鬆地向 WordPress 標題菜單添加按鈕。

在 WordPress 導航菜單中添加按鈕

為什麼要在 WordPress 標題菜單中添加按鈕?

WordPress 導航菜單通常是純文本鏈接,看起來都一樣。 在設計方面,所有鏈接都被賦予相同的重要性和權重。

帶有普通鏈接的標題導航菜單

如果您想添加指向在線訂單的鏈接、登錄或註冊頁面鏈接或立即購買鏈接,該怎麼辦? 這些重要的號召性用語看起來就像標題菜單中的其餘鏈接一樣。

將 WordPress 導航菜單中的重要鏈接更改為按鈕將使它們更加引人注目。 這有助於用戶輕鬆找到它們,從而提高他們在您網站上的參與度和體驗。

帶按鈕的導航菜單

默認情況下,WordPress 可以選擇使用按鈕塊在 WordPress 帖子和頁面中添加按鈕。 但是,它沒有用於在導航菜單中添加按鈕的內置選項。

幸運的是,有一個簡單的技巧可以將 WordPress 導航菜單中的任何鏈接轉換為按鈕。

話雖如此,讓我們來看看如何在不安裝插件的情況下在 WordPress 標題菜單中添加按鈕。

在您的 WordPress 標題菜單中添加一個按鈕

首先,您需要將要轉換為按鈕的鏈接添加到 WordPress 導航菜單中。

只需轉到 外觀 » 菜單 WordPress 儀表板中的頁面並將鏈接添加到您的導航菜單。

添加指向 WordPress 菜單的鏈接

之後,您需要單擊頂部的“屏幕選項”按鈕。 這將顯示一個帶有一堆選項的下拉菜單。 您需要選中“CSS 類”選項旁邊的框。

在屏幕選項中顯示 CSS 類

現在,向下滾動到您的菜單並單擊以展開要轉換為按鈕的菜單項。

將自定義 CSS 類添加到鏈接

您會注意到菜單項設置中有一個新的 CSS 類選項。 在這裡,您需要輸入一個類名。 您可以將此 CSS 類命名為任何您想要的唯一名稱,但在本教程中,我們將其命名為 menu-button。

輸入名稱後,單擊“保存菜單”按鈕以存儲您的更改。

現在我們已經為菜單項添加了我們自己的自定義 CSS 類,我們可以通過添加我們自己的自定義 CSS 代碼來設計它。

只需轉到 外觀 » 定制 啟動 WordPress 主題定制器。

您現在將在右側看到您網站的實時預覽,並在左側欄中看到一系列主題設置。

WordPress 主題定制器中的附加 CSS 選項

現在您需要單擊“附加 CSS”選項卡以展開它。 這將顯示一個框,您可以在其中添加自定義 CSS 代碼。

在這裡,您可以復制並粘貼以下 CSS 代碼作為起點。

.menu-button { 
background-color:#eb5e28;
border:1px;
border-radius:3px;
-webkit-box-shadow:1px 1px 0px 0px #2f2f2f;
-moz-box-shadow:1px 1px 0px 0px #2f2f2f;
box-shadow:1px 1px 0px 0px #2f2f2f;
}
.menu-button a,  .menu-button a:hover, .menu-button a:active { 
color:#fff !important;
}

添加 CSS 代碼後,主題定制器將自動將其應用到您的網站預覽,您將能夠看到更改生效。

別擔心,在您單擊“發布”按鈕之前,這些更改不會在您的網站上生效。

菜單按鈕預覽

隨意使用 CSS 隨心所欲。 您可以更改背景顏色、鏈接文本顏色、添加邊框等。

不要忘記單擊“發布”按鈕以保存您的更改。

這不是很容易嗎?

您不僅可以使用此技巧向標題菜單添加按鈕,還可以使用它來突出顯示 WordPress 導航菜單中的任何鏈接。

我們希望本文能幫助您了解如何在 WordPress 標題菜單中添加按鈕。 想了解用戶如何與您的按鈕交互? 請參閱有關如何在 WordPress 中跟踪轉化率的指南。 接下來,查看我們為小型企業提供的最佳實時聊天軟件列表。

如果您喜歡這篇文章,請訂閱我們的 YouTube 頻道以獲取 WordPress 視頻教程。 你也可以找到我們 推特 和臉書。