什麼是浮動的黏性導航菜單?
浮動或黏性導航菜單是指在用戶滾動網頁時,這個導航菜單會“黏”在屏幕頂部,隨時可見。通常,在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頁面構建器插件。