如何在WordPress中創建浮動的黏性導航菜單

WPressize Me

12/05/2023

什麼是浮動的黏性導航菜單?

浮動或黏性導航菜單是指在用戶滾動網頁時,這個導航菜單會“黏”在屏幕頂部,隨時可見。通常,在WordPress頂部的導航菜單包含了你網站最重要的內容鏈接。通過將這個菜單設置為黏性,訪客可以在任何時候點擊這些鏈接而不需要滾動頁面。

如果你運行一個在線商店,那麼頂部的導航菜單通常包含了旨在轉化的頁面鏈接,例如結帳頁面和購物車頁面。通過將頂部菜單設置為黏性,你可以減少購物車放棄率,從而獲得更多的銷售。

方法一:使用主題設置添加黏性菜單(簡單)

一些優質的WordPress主題內置了對黏性導航菜單的支持。你可以通過進入WordPress儀表板的外觀 » 自定義,檢查是否有標記為‘菜單’的設置。如果不確定你的主題是否支持黏性菜單,可以查閱主題的文檔或聯繫開發者尋求幫助。如果你的主題不支持黏性菜單,你需要使用其他方法。

方法二:使用插件添加黏性導航菜單(推薦)

最簡單的方法是使用Sticky Menu & Sticky Header插件。首先,你需要安裝並激活這個插件。啟用後,前往設置 » 黏性菜單(或其他)來配置你的菜單。在開始之前,你需要使用瀏覽器的檢查工具來獲取導航菜單的CSS ID。之後,將這個CSS ID添加到‘黏性元素’字段中,並點擊‘保存更改’按鈕。這樣,你的導航菜單就會保持在頁面的頂部。

方法三:使用代碼添加浮動黏性導航菜單

你也可以使用CSS創建一個黏性導航菜單。最佳方法是使用WPCode插件來添加自定義CSS,這樣你可以避免許多常見的WordPress錯誤,並且可以隨時開關黏性菜單。首先,安裝並啟用WPCode插件。在插件頁面中,添加自定義CSS片段,並將以下代碼添加到代碼編輯器中:

#site-navigation {background:#000000;height:60px;z-index:170;margin:0 auto;border-bottom:1px solid #dadada;width:100%;position:fixed;top:0;left:0;right:0;text-align: center;}

這會創建一個黑色背景的導航菜單。你可以更改背景顏色的十六進制代碼來使用其他顏色。之後,替換#site-navigation為你的導航菜單的CSS ID。當你對代碼滿意後,將代碼片段設置為‘活動’並保存。

附加:使WordPress文章置頂

如果你有一個WordPress博客,建議將一些重要的博客文章設置為置頂,這樣即使發佈新內容,也能保持這些文章在博客頁面的頂部。你可以通過打開內容編輯器,然後展開‘摘要’標籤,勾選‘置頂到博客首頁’選項。最後,點擊‘更新’或‘發佈’按鈕保存設置。

希望這篇文章能幫助你在WordPress網站上添加浮動的黏性導航菜單。你還可以參考我們的初學者指南,了解如何增加博客流量,或比較最佳的WordPress頁面構建器插件。



Related Posts

  • 2024-07-20
  • WordPress 主题

您是否想在 WordPress 中為不同頁面使用多個佈景主題?可以自訂網頁的外觀和布局,為文章、頁面和部分區域建立模板。但是如果您想為網站的某些部分或頁面使用完全不同的佈景主題呢?本文將指導您如何在 WordPress 中為頁面使用多個佈景主題。

閱讀更多
  • 2024-07-19
  • WordPress 主题

您是否想在 WordPress 網站上添加回頂效果?這種效果在頁面較長時非常有用,可以讓用戶輕鬆返回頁面頂部,提升網站的用戶體驗。本文將教您如何使用 jQuery 和插件在 WordPress 中添加平滑回頂效果。

閱讀更多
  • 2024-07-13
  • WordPress 主题

您是否想在 WordPress 中創建一個自定義頁面?自定義頁面允許您使用與網站其餘部分不同的佈局。許多 WordPress 網站使用自定義頁面佈局來建立銷售頁面、登陸頁面、網路研討會頁面等。在這篇文章中,我們將向您展示如何輕鬆地在 WordPress 中創建自定義頁面。

閱讀更多

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>