在標題導航菜單中添加一個按鈕

標題導航菜單是 WordPress 是一個經常未被使用的網站空間。 雖然大多數網絡管理員僅將其用於導航，但您也可以添加搜索欄甚至促銷內容。 但是，為了有效地做到這一點，您應該考慮在標題導航菜單中添加一個按鈕。 在本文中，我們將詳細說明為什麼這樣做是有益的，以及如何正確地這樣做。

在標題導航菜單中添加按鈕的好處

在標題導航菜單中有一個按鈕似乎是一件微不足道的事情。 畢竟，標準超鏈接和按鈕之間似乎沒有太大區別。 好吧，實際上，使用按鈕而不是純文本會產生令人驚訝的結果。 這主要是由於人的注意力是如何工作的，以及您的按鈕有多顯著。

人們通常如何體驗標題導航菜單

標題導航菜單通常是人們注意到的第二件事。 如果您的網站設計得很好並正確添加了導航菜單，那麼您的帖子標題應該是第一個吸引觀眾眼球的東西。 但是，在那之後，他們的目光自然會轉嚮導航菜單，以查看可用的內容。 如果他們決定留在當前頁面上，那就這樣吧。 但是，如果您的網站上還有其他興趣點，它們應該在標題導航菜單中清晰可見。

畢竟，您的目標應該是讓人們盡可能長時間地留在您的網站上。 並且有一個易於理解的菜單會很有幫助。 那麼，所有這些按鈕從何而來？

添加按鈕的好處

添加按鈕的主要思想是強調一些重要的東西。 雖然標題菜單確實包含有趣的鏈接，但並非所有鏈接都具有相同的重要性。 有些是幫助閱讀的簡單導航工具。 還有一些是更直接的宣傳內容，用於引導讀者進行轉化。 好吧，當涉及到後者的內容時，按鈕應該是您的首選。 由於您可以以任何您認為合適的方式更改它們，它們自然會脫穎而出並引起注意。 因此，如果您了解客戶通過您的網站的旅程，您可以輕鬆地使用按鈕將他們吸引到社交媒體或成功轉換。

定制提示

自定義按鈕以獲得適當的效果可能有點棘手。 一方面，您不希望它們過於突出，因為它們會破壞網頁的外觀。 但是，您也不希望它們過多地融入其中，因為它們不會引起注意。 所以，你需要找到中間立場，說起來容易做起來難。 我們的建議是尋找在標題導航菜單中成功使用按鈕的網站，看看它們如何使用顏色。 請記住，您可以更改按鈕的形狀、輪廓、字體和顏色。 因此，在定制中使用這種多樣性對您有利。 理想情況下，您會發現與您網站的整體美感相得益彰的風格。 同時也引起了人們的注意。

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

幸運的是，在 WordPress 標題導航菜單中添加一個按鈕非常簡單。 首先，您需要前往導航菜單並添加要轉換為按鈕的鏈接。 您可以在外觀 -> 菜單頁面上執行此操作。 完成後，單擊頂部附近的“屏幕選項”按鈕。 通過這樣做，您將獲得一個帶有幾個選項的下拉菜單。 對於這種情況，您只需要檢查“CSS 類”選項。

完成此操作後，向下滾動並單擊展開要轉換為按鈕的菜單項。 在那裡，您將在項目設置中獲得一個新的 CSS 類選項。 在其中，您可以輸入班級名稱。 從理論上講，您可以以任何您認為合適的方式命名您的班級。 但是，對於本文，我們將給類名“menu-button”以便於理解。 輸入姓名後，請記住單擊“保存菜單”按鈕。

添加 CSS 代碼

添加自定義 CSS 類後，我們可以繼續添加 CSS 代碼。 在這裡，您需要轉到外觀 -> 自定義並啟動 WordPress 主題定制器。 通過這樣做，您將獲得您網站的預覽和主題設置列表。 您需要做的是單擊 Additional CSS 選項卡並展開它。 在這裡，您將獲得一個框，您可以在其中添加自定義 CSS 代碼。 對於初學者，我們建議您只需粘貼以下代碼：

. 菜單按鈕 {
背景顏色：#eb5e28;
邊框：1px；
邊框半徑：3px；
-webkit-box-shadow:1px 1px 0px 0px #2f2f2f;
-moz-box-shadow:1px 1px 0px 0px #2f2f2f;
盒子陰影：1px 1px 0px 0px #2f2f2f;
}
.menu-button a, .menu-button a:懸停, .menu-button a:active {
顏色：#fff！重要；
}

添加 CSS 代碼後，主題定制器會將其應用於您的網站預覽。 這將允許您查看所做的更改。 不用擔心，這些變化不是永久性的。 如果您覺得有必要，請繼續嘗試使用 CSS，看看您能做什麼。 為了保存您的更改，請單擊“發布”按鈕。

有了這個，您就完成了在標題導航菜單中添加一個按鈕。

最後的想法

考慮到所有因素，按鈕可以成為標題菜單的絕佳插件。 但是，找到正確的設計至關重要。 事實上，人們避免添加按鈕的主要原因之一是他們根本無法將按鈕與網站設計相適應。 如果您遇到困難，我們強烈建議您諮詢專業的平面設計師並重視他們的意見。 如您所見，一旦您確定了設計，添加按鈕實際上並不需要太多。