WordPress 五天自學衝刺班 — 部落格篇
第三天:建立更多內容

修改首頁+新增更多內容+編輯選單與小工具

第一天
%
準備環境
第二天
%
建立與修改展示網站
第三天
%
建立更多內容
第四天
%
客製化外觀
第五天
%
展望未來

今日目標:編輯首頁、新增更多內容、編輯選單與編輯側邊的額外資訊

  1. 如何新增滑塊 Slider 到網站首頁?------------------------ (3:50 實作 )
  2. 如何增加三個精選圖片連結到首頁?----------------------- (6:10 實作)
  3. 如何改變首頁文章列表的排版方式?------------------------ (5:56 實作)
  4. 如何新增更多內容?文章與頁面的差別? ------------- (6:14 觀念+實作)
  5. 如何編輯選單? ---------------------------------- (10:42 觀念+實作)
  6. 什麼是網站的四大區域?-------------------------------(5:35 重要觀念)
  7. 如何編輯網站的小工具?-----------------------------(11:17 觀念+實作)
Soledad 主題範例

第三天的課程要開始囉!

帶路姬真的把複雜的知識變簡單了!只要你願意再多堅持一點,你一定會成功做出來的!

如何修改首頁?

3:50 參考影片,改不改都沒關係喔。如果你很喜歡預設的排版的話,也可以跳過這個步驟。(設定的位置有異動,新版的設定位置,請參考右邊的文字說明。)

如何新增滑塊 Slider 到網站首頁?

加入滑塊到首頁的方式有很多,帶路姬教大家的是利用外觀自訂器裡的設定,只要三分鐘搞定,但選擇也非常多喔!

  1. 請到 外觀 > 自訂 來打開外觀自訂器。
  2. 點選 Featured Slider > General  (精選滑塊的一般選項)。
  3. 勾選 Enable Featured Slider 來啟用滑塊功能。
  4. 從下面 Featured Slider Style (精選滑塊樣式) 處,選一個自己喜歡的滑塊樣式。
  5. 記得點選 發佈 來儲存喔!

6:10 參考影片,改不改都沒關係喔。如果你很喜歡預設的排版的話,也可以跳過這個步驟。(設定的位置有異動,新版的設定位置,請參考右邊的文字說明。)

如何增加三個精選圖框到首頁?

有時候,你可能會想特別強調某幾篇文章或某幾個連結,Soledad 這個主題,可以讓你輕鬆多加一排精選圖框喔!

  1. 請到 外觀 > 自訂 來打開外觀自訂器。
  2. 點選 Homepage > Home Featured Boxes (首頁 > 首頁精選圖框)。
  3. Enable Home Featured Boxes Style 2 Enable Home Featured Boxes Style 3 為兩種不同的樣式,可以擇一,或同時不勾就會是預設的樣式。
  4. 在下面一點,請在 Homepage Featured Box 1st image 處,上傳第一張精選圖片。
  5. Homepage Featured Box 1st Text,填入精選框中想顯示的文字。
  6. Homepage Featured Box 1st URL,填入精選框的連結。
  7. 接著下面可以設定第二個和第三個精選框的圖片、文字與連結。
  8. 如果有設定圖文時,精選框才會出現。
  9. 記得點選 發佈 來儲存喔!

5:56  參考影片,改不改都沒關係喔。如果你很喜歡預設的排版的話,也可以跳過這個步驟。(設定的位置有異動,新版的設定位置,請參考右邊的文字說明。)

如何改變首頁文章列表的排版方式?

預設的狀況下,當你新增文章時,會在首頁以一篇一篇往下堆疊的方式來列出最新文章。假如你不喜歡一篇一篇往下排的方式,Soledad 主題可以讓你輕鬆改編他的排版方式喔!可以改成一排兩篇之類的喔!總共有24個不同的選擇!

  1. 請到 外觀 > 自訂 來打開外觀自訂器。
  2. 點選 Homepage > General (首頁的一般選項)。
  3. 找到 Homepage Layout (首頁排版),即可試試看裡面的所有選項,挑一個喜歡的。
  4. 記得點選 發佈 來儲存喔!

如何新增更多內容?文章與頁面的差別?

6:14 必學觀念喔!一定要看喔!

為了方便站長們管理內容,WordPress 把內容分成不同的類型,最基本的就是「頁面」和「文章」。

「頁面」不能分類,「文章」才可以依照「分類」或「標籤」來分類。

像關於我們、聯絡我們,這種單一個頁面,也很少更新的,是適合放在頁面類。

像最新消息、心情故事、經驗分享、旅遊美食日記之類的,會因為時間累積而越來越多篇的,適合放在文章類,然後用「分類」或「標籤」的方式來加以分類整理。

  1. 請到 文章 > 分類,去編輯文章的分類。
  2. 也可以到 文章 > 全部文章 > 點選任何一篇文章進入編輯,在右手邊的「分類」設定處,去指定該文章的分類,或新增更多分類。

如何編輯選單?

10:42 必學觀念喔!一定要看喔!

有組織的主選單,可以幫助訪客快速找到你的內容喔!

  • 這個影片教你如何從控制台的左邊「外觀 > 選單」來新增和修改選單。
  • 一個網站的選單其實可以不只有一個(主選單),還可以有其他選單,放置在網站的不同位置,請先選擇你要編輯哪一個選單?或者新增新選單。
  • 可以從左手邊的「分類」展開,把你之前設定好的分類,勾選加入到右邊的選單當中,也可以上下拖拉改變順序。
  • 當選單位置指定為「Primary Menu」時,選單會出現在主選單位置喔!
  • 設定完,記得要點「儲存選單」喔!

認識網站的四大區域:頁首、內容、側邊欄、頁尾

5:35 必學觀念喔!一定要看喔!

為什麼要分四大區域?

區域是帶路姬自己幫大家區分的,為了幫助新手比較好猜測,你想改的東西「可能」從哪裡改?

  • 當你編輯文章與頁面時,你是在編輯內容,會顯示在內容區域。
  • 假如你想改 Logo,Logo 位於頁首的區域,就不該到編輯文章或頁面的地方去改,所以,請到外觀自訂編輯器裡的 Header Options (頁首選項) 去找。
  • 側邊欄區與頁尾區裡有很多小塊小塊的資訊,這些額外的資訊都是「小工具」,下一個影片會教你該怎麼改這些「小工具」。

如何編輯網站的小工具?

11:17 必學觀念喔!一定要看喔!

在側邊欄與頁尾都可以放置「小工具」,來補充額外的內容,或插入廣告。

  • 請到 外觀 > 小工具,去編輯小工具。
  • 可以從左邊選擇你想用的小工具,拖到右邊你想放的位置裡。
  • Main Sidebar 是主要側邊欄的位置。
  • Footer Column #1Footer Column #2Footer Column #3,這三個位置則是在頁尾的區域。

第三天的課程結束囉!

今天真是辛苦大家了!第一次學 WordPress 就要一下塞這麼多知識,如果暫時一知半解也沒關係,請大家之後慢慢嘗試,先用假的內容來熟悉介面,比較節省學習時間喔!明天!我們要正式來客製化外觀囉!

第一天
%
準備環境
第二天
%
建立與修改展示網站
第三天
%
建立更多內容
第四天
%
客製化外觀
第五天
%
展望未來

你喜歡這樣的學習方式嗎?

這裡需要你的真實見證! 成功時,別忘了留言告訴我喔!- 網站帶路姬

網站帶路姬 / Erin Lin

Hello~我是Erin Lin,美國網頁設計研究碩士,七年美國工作經驗,2012年成立「Erin Lin 網頁設計工作室」專門設計高質感的WordPress網站。2018年五月,開始「WordPress 網站帶路姬」,希望以輕鬆有趣的方式來分享 WordPress 架站教學與資源給不懂程式的新手與創業站長。

30 則留言

  1. 帶路姬晚上好~~~
    想問一下請問我可以把三個精選圖框移動到首頁的頁尾嗎?
    或是怎麼樣在頁尾加一個新區塊?因為我希望可以加一整個區塊不是分三格的那種~~~

    1. 可以喔,可是做法就真的蠻不一樣的,你可能就得學習使用 Elementor 這個外掛來自由的設計排版。

  2. 帶路姬ERIN你好
    請問我已經將文章做分類, 並且將分類同步放在主選單上, 但是無論點進去分類貨主選單,都無法帶出相關的文章,畫面一直呈現空白….
    請幫幫忙 卡關卡好久了
    謝謝

      1. 請檢查看看,是不是有外掛衝突的情況,可以把所有外掛停用,再一個一個打開來除錯。
        尤其是請小心,不要同時安裝兩個SEO的外掛。

  3. 帶路姬ERIN你好~
    請問別的主題是不是就沒有slider功能~我是用Enflod
    是也能用Elementor去做嗎?

    1. 不一定喔,不過,大部分的主題都是可以增加Slider, 我相信Enfold一定也有,只是增加Slider的方式會不太一樣。Enfold應該有他自己搭配的頁面編輯器,你可能要去他的介紹頁面找一下,確認他有提到和Elementor相容才可以喔~

  4. 請問老師
    如果我在自訂項目「Featured Slider Options」裡面
    選擇「 Penci Slider Style 1」
    他有三張設定好的Slider
    我要怎麼更換圖片?

    1. 在控制台左手邊,有一個 Penci Slider,這是一個製作幻燈片秀的工具,到那邊去找,應該不難。

  5. 老師這樣架出來的網站是響應式的網站嗎
    如果不同的裝置看會不會歪掉

  6. Erin妳好
    我不太會架設網站,僅在學校學習過WIX而已
    對於主機、空間那些,我也不太會看
    我有稍微瀏覽過妳的網站
    發現妳是用Cloudways主機
    我現在有在用bluehost主機,跟著妳的影片,試著架設
    我想架設網站的目的有幾個:
    1.部落格:分享生活&使用經驗(會與相關餐飲品牌做聯盟推廣)
    2.品牌官網:為一餐飲品牌使用(計劃10年後展店),
    內容包含品牌意象、特色介紹、料理型態等等,預計會有一些影片、圖片等些許媒體的陸續使用,也會開放與顧客/會員的互動(有點像現在這樣)
    3.作品集:想把一路以來學習的歷程,個別做一系列的作品集,架設於網站上
    ※我不太清楚應該把這3類的網站分開或架設在同一個網站會比較好
    ※也不太知道這樣的需求,應該選擇怎麼樣的主機比較適合
    ★想請Erin給我一些建議,謝謝!

  7. 跟著影片做到第三天,我的網站突然就連不上了,出現Error 521 Web server is down的畫面,請問為什麼會這樣QQ

    1. 很可惜的是,WordPress的網站,精選圖片的大小,其實沒有辦法很輕易地調整,都需要一點程式背景才能處理。

    1. 我記得影片裡有提到,如果真的找不到的話,可以到社團裡來發問喔。

  8. 帶路姬好~~~
    我想要改變首頁文章列表的排版方式
    但是Homepage Layout沒有出現在我的General options裡面
    我該如何是好呢?

  9. Erin您好
    我上您的課程已經到第四堂課,老師教得很好。
    這邊有個問題想請教您,我在設定的過程中發現 Featured Slider 不會顯示了。
    我確認在一開始學習第三堂課 Featured Slider 時是可以動的,後來調了一些設定後才不能動。請問有什麼地方需要確認的嗎?
    目前我只有新增一篇文章,有將圖片設定為精選,且有確認過 Enable Featured Slider 有勾選,
    但首頁就是不會顯示Featured Slider 功能。

    1. 請在頁面前台,最上面的地方點選 Edit with Elementor,進到 Elementor 編輯器裡找找看喔!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Back to top button
★ 完全免費的影音+圖文教學+ ★

帶路姬陪你用五天的下班時間
做好第一個 WordPress 網站

想完整的學好基礎嗎?快來看看吧!😊
close-link
close-link
close-link
close-link