WordPress入門08-WordPress設定導航選單
看了前面的教程,基本上也知道怎麼使用WordPress建立一個個人網站,那麼,究竟該如何設定WordPress導航選單?
怎樣使用自定義選單功能?
訪問後臺>>外觀>>選單。
在自定義選單之前,你需要建立好所需的文章分類和頁面,請參考《Wordpress建立和管理文章分類》,下面進入正題。
建立選單
開啟後臺>>外觀>>選單,在“編輯選單”選項卡下,然後點選“建立新選單”。比如下圖我建立一個名為“Main”的選單:
有些新手朋友誤以為這裡新增的“選單”就是一個單獨的連結,其實不是這樣的,這個“選單”是一組連結,你可以給他新增N個連結,組成導航條。
新增連結和設定選單
WordPress會自動讀取你的文章、頁面、自定義連結,分類目錄,標籤。你就可以將這些內容展現為一個完整的選單。
具體步驟如下:
- 從左邊選擇需要新增的連結(頁面連結、文章連結、自定義連結和分類目錄連結),加入到選單中。(其實這裡允許你新增任何連結,比如你可以新增一個首頁,通過“自定義連結”指向首頁網址即可)
- 可以編輯每個選單專案的資訊,並用拖放的方式為其排序。將某個選單項稍稍向右拖動,這個專案即變為子選單(低一格就是二級選單,低兩格就是三級選單,以此類推),這樣你的選單便有了層級關係。
- 排好選單以後,點選“儲存選單”。
最終的效果對比
拿虛幻私塾舉例,下圖是後臺選單的效果:
下圖是對應的前臺的展現:
- 本文固定連結: http://www.xuhss.com/beginner/wordpress-nav-menu
- 轉載請註明: MrBang <time>2018年02月05日 </time>於 虛幻私塾 發表
相關文章
- (四)選單導航及路由設定路由
- WordPress入門09-WordPress基本設定
- PbootCMS導航選單-導航選單的使用教程boot
- elementui NavMenu導航選單預設展開UI
- CSS垂直導航選單CSS
- Flutter 導航設定Flutter
- JavaScript二級導航選單JavaScript
- CSS 動態導航選單CSS
- 導航選單(動畫)--- jQuery動畫jQuery
- JavaScript 三級導航選單JavaScript
- CSS導航欄及下拉選單CSS
- CSS多級導航選單效果CSS
- CSS垂直三級導航選單CSS
- Element-ui之導航選單UI
- JavaScript slide下拉導航選單效果JavaScriptIDE
- WordPress愛導航主題原始碼原始碼
- jQuery三級導航選單詳解jQuery
- 純css製作導航下拉選單CSS
- 固定在頂部的導航選單
- vue元件之路之menu導航選單Vue元件
- 零基礎創作專業wordpress網站04-建立並編輯導航選單網站
- Python爬蟲入門教程導航帖Python爬蟲
- Shell 入門系列: 導航 (未完待續)
- HarmonyOS Next 入門實戰 - 導航框架:頁面路由、元件導航(Navigation)框架路由元件Navigation
- jQuery 淡入淡出效果下拉導航選單jQuery
- CSS三級下拉導航選單詳解CSS
- JavaScript橫向二級導航選單效果JavaScript
- CSS3麵包屑導航選單CSSS3
- JavaScript可摺疊屬性導航選單JavaScript
- JavaScript下拉摺疊導航選單講解JavaScript
- 純CSS打造淘寶導航選單欄CSS
- CSS3垂直摺疊導航選單CSSS3
- CSS水平導航選單製作詳解CSS
- CSS 水平導航選單製作詳解CSS
- CSS3橫向導航選單效果CSSS3
- 滑鼠懸浮緩慢下拉導航選單
- CSS 可伸縮圓角導航選單CSS
- 透明層滑動跟隨導航選單