在網站加入導航選單(Menu)

Wordpress網頁設計教學 - 在網站加入導航選單(Menu) #9 - 封面

WordPress網頁設計教學 – 在首頁加入聯絡我們的資訊
所需時間:15 mins
你將會學到:為網站加入選單,讓用戶有更好的體驗

————————————————————

我們已經完成了網站所有的內容了,接下來,為了讓其他人在瀏覽你網站的時候,更易找到內容,我們會為網站建立導航的選單。

在Wordpress網站加入網站導航選單(Menu)

  1. 在網站名稱下面,點 選單 > 修改選單名稱為 主要選單
  2. 打預設的選單都移除掉 > 點擊打開選項目,在下邊點移除
  3. (連結到首頁最頂部的選單) 在左邊點 自訂連結 > 連結網址 = http://jamourweb.com/# > 連結文字 = 首頁 > 新增至選單
  4. (連結到首頁中,產品 / 服務的選單) 在左邊點 自訂連結 > 連結網址 = http://jamourweb.com/#pg-71 > 連結文字 = 產品及服務 > 新增至選單
    上面中,7 和 1這個數字是會變化的,當你在後台點 頁面 > 首頁後,你會看到網址上面有出現一個 “post=7“(或其他任意數字),這個 7 ,就是我們加在#pg- 後的第一個數字了。
    第二個數字,是根據該頁的第幾行(row),第一行 = 0,第二行 = 1,第三行 = 2,如此類推,由於產品及服務是出現在第二行,所以要在 #pg-7- 後面加入 1
  5. (連結到首頁中,過往企劃的選單) 在左邊點 自訂連結 > 連結網址 = http://jamourweb.com/#pg-72 > 連結文字 = 過往企劃 > 新增至選單
  6. (連結到首頁中,最新文章的選單) 在左邊點 自訂連結 > 連結網址 = http://jamourweb.com/#pg-74 > 連結文字 = 最新文章 > 新增至選單
  7. (連結到首頁中,聯絡我們的選單) 在左邊點 自訂連結 > 連結網址 = http://jamourweb.com/#pg-75 > 連結文字 = 聯絡我們 > 新增至選單接下來的連結,是會導向其他頁面的,包括跳到不同的過往企劃的頁面,和去到部落格的頁面。我們首先要了解,過往企劃中,不同項目的網址是什麼,你可以在後台點 Projects > 點 相關的過往企劃,進去以後你就可以在固定網址中,找到該企劃的網址。
  8. (連結人像攝影頁面的選單) 自訂連結 > 連結網址 =  https://jamourweb.com/projects/人像攝影 > 連結文字 = 人像攝影 > 新增至選單
  9. (連結其他攝影頁面的選單) 自訂連結 > 連結網址 =  https://jamourweb.com/projects/其他攝影 > 連結文字 = 其他攝影 > 新增至選單
  10. (連結司儀工作頁面的選單) 自訂連結 > 連結網址 =  https://jamourweb.com/projects/司儀工作 > 連結文字 = 司儀工作 > 新增至選單
  11. (連結影片後製頁面的選單) 自訂連結 > 連結網址 =  https://jamourweb.com/projects/影片後製 > 連結文字 = 影片後製 > 新增至選單
  12. (連結婚禮攝影頁面的選單) 自訂連結 > 連結網址 =  https://jamourweb.com/projects/婚禮攝影 > 連結文字 = 婚禮攝影 > 新增至選單
  13. 將上面五個選單,變成過往企劃的子項目:將相關選單拖放到過往企劃的下面,再往右拉一下就可以了最後,是要加入部落格的頁面到選單,當用戶點擊在 最新文章 下面的 部落格時,就會跳到去部落格頁面
  14. (連結部落格頁面的選單) 在左邊點 頁面 > 打鈎部落格 > 新增至選單
  15. 將部落格的選單變成最新文章的子項目:將部落格選單拖放到最新文章的下面,再往右拉一下就可以了
  16. 建立選單
  17. 確保「顯示地點」中主要選單有打鈎,如沒有,要把它打鈎 > 點 儲存選單

現在用戶可以點擊導航選單去瀏覽你網站,讓他們可以更易掌握你網站的資料。有效的網站導致選單亦會有助提昇你的SEO評分。如果對這課堂有任何問題,記得Inbox我啊。

下一課:
#10 連結社群媒體及改善排版,完成你的網站吧