很多站長都會有這樣的需求：在WordPress頂部選單新增一個按鈕，以吸引網站訪客的注意和點選。在本教程中，我們詳細介紹如何在WordPress站點頂部選單新增一個可點選按鈕。
為什麼在WordPress頂部選單中新增按鈕？
WordPress導航選單通常是純文字連結，看起來都一樣。在設計方面，所有連結都被賦予相同的重要性和權重。
如果您想新增指向線上訂單的連結、登入或註冊頁面連結或立即購買連結，該怎麼辦？這些重要的號召性用語看起來就像標題選單中的其餘連結一樣。
將WordPress導航選單中的重要連結更改為按鈕將使它們更加引人注目。這有助於使用者輕鬆找到它們，從而提高他們在您網站上的參與度和體驗。
預設情況下，WordPress可以選擇使用按鈕區塊在WordPress文章和頁面中新增按鈕。但是，這沒有用於在導航選單中新增按鈕的內建選項。
但有一個簡單的技巧可以將WordPress導航選單中的任何連結轉換為按鈕。
下面，讓我們來看看如何在不安裝外掛的情況下在WordPress頂部選單中新增按鈕。
在WordPress導航選單中新增一個按鈕
首先，您需要將要轉換為按鈕的連結新增到WordPress導航選單中。
只需轉到WordPress 儀表板中的外觀 » 選單頁面，然後將連結新增到導航選單。
之後，您需要單擊頂部的“顯示選項”按鈕。這將顯示一個帶有一堆選項的下拉選單。您需要選中“CSS 類”選項旁邊的框。
現在，向下滾動到您的選單並單擊以展開要轉換為按鈕的選單項。
您會注意到選單項設定中有一個新的CSS類選項。在這裡，您需要輸入一個類名。您可以將此CSS類命名為任何您想要的唯一名稱，但在本教程中，我們將其命名為menu-button。
輸入名稱後，單擊“儲存選單”按鈕以儲存更改。
現在我們已經為選單項新增了我們自己的自定義CSS類，我們可以通過新增我們自己的自定義CSS程式碼來設計它。
只需轉到外觀»自定義即可啟動WordPress主題定製器。
您現在將在右側看到您網站的實時預覽，並在左側欄中看到一系列主題設定。
現在您需要單擊“額外 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導航選單中新增按鈕。關於選單方面的技巧，你可能對下面的文章感興趣：
評論留言