第三天:編輯首頁與選單

只要堅持約一小時,你就可以有個漂亮的門面!而且訪客也可以輕鬆找到你用心寫過的文章囉!
建立全新
WP 網站
套用版型
增加內容
編輯首頁
編輯選單
調整設計
修改樣式
安裝外掛
擴展功能
好學生推廣
加碼影片!

0.第三天的課程開始囉!

哈囉!歡迎來到五天自學衝刺班部落格篇第三天的課程!只要再撐一個小時,上完今天的課程,最重要的基礎就差不多上完了!明天再改一下 Logo 等等,幾乎就可以開始運作了喔!加油加油!

1. 如何編輯主選單?

要先建立內容與分類,才能把他們加到選單中喔!

 跟著影片操作就可以了喔! 15’59”

  1. 到網站後台的 外觀 > 選單
  2. 編輯現有的選單 或 新增一個選單
  3. 從左邊選擇勾選你想加到選單的項目,點選新增至選單
  4. 右邊可以改項目的標籤,或上下拖拉順序
  5. 下方記得勾選選單要出現的位置
  6. 儲存選單就可以囉!

2. 編輯首頁有兩種方式?

部落格篇教的是最簡單的方式,10分鐘搞定!

 跟著影片操作就可以了喔! 5’27”

  1. 方式一:用區塊編輯器或第三方的頁面編輯器(例如像 Elementor)來建立一個頁面,然後到設定 >閱讀,來設定這頁為首頁。(在五天自學衝刺班形象篇第三天有教喔!)
  2. 方式二:讓部落格彙整最新的文章成一個首頁,再透過外觀 > 自訂 所提供的設計選項,來設計首頁的排版與增加幾個互動的元素。(今天接下來的課程都是教這個方式喔!)

3. 如何加滑動的大圖到首頁?

這通常叫 Slider 或滑塊,可以漂亮的展示精選的文章

 跟著影片操作就可以了喔! 5’17”

  1. 到網站後台的 外觀 > 自訂
  2. 點選 Featured Slider > General
  3. 勾選 Enable Featured Slider
  4. 勾選你喜歡的 Featured Slider Style (滑塊樣式)就可以囉!

4. 如何增加熱門文章區塊到首頁?

這也是一個很漂亮區塊,可以選擇性的加到首頁喔!

 跟著影片操作就可以了喔! 3’11”

  1. 到網站後台的 外觀 > 自訂
  2. 可以透過左下角的三個圖示,來預覽不同螢幕大小下,預覽網頁呈現的樣子
  3. Homepage > Homepage Popular Posts (首頁熱門文章)
  4. 勾選 Enable Popular Posts on Homepage 即可啟用這個功能

5. 如何增加三個精選圖片連結到首頁?

可以自訂三張圖片,分別打開三個指定的網址喔!

 跟著影片操作就可以了喔! 3’13”

  1. 到網站後台的 外觀 > 自訂
  2. Homepage > Home Featured Boxes 
  3. 勾選 Enable Home Featured Boxes style 2 即可啟用這個功能
  4. 每個連結都可以自訂代表的圖片(Image)、顯示的文字 (Text)與連結的網址 (URL)

6. 如何改變首頁的文章排列方式?

可以一篇篇往下堆疊、也可以用格狀 (卡片) 呈現,選擇非常多!

 跟著影片操作就可以了喔! 3’29”

  1. 到網站後台的 外觀 > 自訂
  2. Homepage > General 
  3. Homepage Layout 的地方,選擇自己好歡的排版方式(可參考 Soledad 主題的示範網站

7. 如何控制文章摘要長度?

有兩種簡單的方式喔!

 跟著影片操作就可以了喔! 4’04”

  1. 編輯文章時,插入「閱讀全文」區塊於文章中,閱讀全文區塊以上的部分即為文章摘要。
  2. 或者,也可以再編輯文章時,於右手邊的「內容摘要」欄位,另外填寫獨立的內容摘要。

8. 如何編輯側邊欄與小工具的內容?

側邊欄裡一區塊、一區塊的額外資訊,都是「小工具」!

重要觀念與操作 15’03”

  1. 網站分成四大區域:頁首 (Header)、內容 (Content)、側邊欄 (Sidebar)、頁尾 (Footer)
  2. 側邊欄與頁尾是很常可以插入小工具的地方
  3. 外觀 > 小工具,展開小工具的區域去編輯裡面的小工具,或者點選+來新增更多的小工具到你喜歡的區域。
  4. 每個小工具的區域,是以區塊編輯器來編輯裡面的小工具。

今天的課程完成囉!可以準備進入第四天囉!

建立全新
WP 網站
套用版型
增加內容
編輯首頁
編輯選單
調整設計
修改樣式
安裝外掛
擴展功能
好學生推廣
加碼影片!

歡迎分享課程

歡迎贊助帶路姬

留言給帶路姬吧!

* By using this form you agree with the storage and handling of your data by this website.


33 留言

summer 2019-12-01 - 8:07 下午

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

回答
網站帶路姬 / Erin Lin 2019-12-05 - 8:09 下午

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

回答
sunny 2019-12-13 - 12:27 下午

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

回答
小娜 2020-07-09 - 2:11 上午

我也是同樣遇到這樣的問題,請問該怎麼做

回答
網站帶路姬 / Erin Lin 2020-07-09 - 11:37 上午

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

回答
winter 2020-02-28 - 11:12 上午

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

回答
網站帶路姬 / Erin Lin 2020-03-17 - 11:42 下午

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

回答
tj 2020-06-28 - 5:30 下午

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

回答
網站帶路姬 / Erin Lin 2020-07-07 - 3:37 下午

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

回答
小湘 2020-07-11 - 12:39 上午

為什麼我設定頁面不會顯示在頁面上?

回答
網站帶路姬 / Erin Lin 2020-07-17 - 5:49 下午

不太懂你的問題耶,請到社團來發問,並且說清楚一點喔。
https://www.facebook.com/groups/wpointer

回答
2020-07-12 - 6:45 下午

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

回答
網站帶路姬 / Erin Lin 2020-07-16 - 1:49 下午

會是響應式的喔!

回答
Andy 2020-07-28 - 7:22 下午

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

回答
ken lee 2020-08-02 - 2:24 下午

請問如何把分類的頁面設定到主選單

回答
ken lee 2020-08-02 - 4:14 下午

我找到了在選單那直接加!

回答
波妮 2020-08-14 - 3:42 下午

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

回答
網站帶路姬 / Erin Lin 2020-08-14 - 4:57 下午

請到社團裡發問喔~謝謝~
https://www.facebook.com/groups/wpointer

回答
Toywan 2020-08-16 - 10:02 下午

請問該如何隱藏Primary Menu右邊的社群聯結呢?

回答
網站帶路姬 / Erin Lin 2020-08-26 - 5:07 下午

歡迎到社團裡來發問喔:
https://www.facebook.com/groups/wpointer

回答
ann 2020-09-12 - 3:00 下午

Erin妳好
我想問文章地精選圖片
要在哪邊調整大小呢?
謝謝!

回答
網站帶路姬 / Erin Lin 2020-09-14 - 2:42 下午

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

回答
恕瑋 2020-10-29 - 11:57 下午

請問最上方有個banner—>simpleblog請問在哪邊更改?

回答
網站帶路姬 / Erin Lin 2020-11-08 - 3:31 下午

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

回答
Diona 2020-12-30 - 5:17 下午

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

回答
網站帶路姬 / Erin Lin 2021-01-01 - 4:04 下午

您好,歡迎到社團裡面來與大家討論。
https://www.facebook.com/groups/wpointer

回答
胖胖白目熊 2021-05-16 - 10:59 下午

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

回答
網站帶路姬 / Erin Lin 2021-05-18 - 8:42 下午

你後來有找到解決的辦法了嗎?可以到社團裡來發問喔!
https://www.facebook.com/groups/wpointer

回答
BB 2021-06-30 - 10:00 下午

可以問一下為甚麼都ˋ找不到header image 更改的選項嗎><

回答
網站帶路姬 / Erin Lin 2021-07-01 - 4:07 下午

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

回答
CJ 2022-05-02 - 9:48 下午

ERIN 好
在單篇文章連結狀態下, 文章內文底部會出現一欄”自訂項目 – 相關文章”(可控制項目: 顯示標題/顯示縮圖/顯示日期/顯示內容/外觀) 但無法移除, 不知道是從哪設定的, 似乎不再SIGLE POSTS 控制項裡, 想問如何解決.

回答
Jerry 2022-06-26 - 10:56 下午

帶路姬晚上好~
很感謝妳的自學衝刺班教學,讓我可以按部就班學習架站的知識。不過,由於先前未看到妳的教學影片,自己胡亂弄了一個簡易網站,造成在套用Soledad的佈景主題後,整個版面無法依Soleadad的Simple blog預設版面呈現,而且還出現了一些亂碼,也造成沒辦法跟著後續的課程繼續學習。請問應如何處理呢?(我想完全照妳的教學,重新架構我的網站,先前試作的網站內容是可全數捨棄的)

謝謝!

回答
Brook 2023-01-25 - 6:39 下午

晚安Erin–
謝謝您詳細又溫柔的解說
我跟著您的教學註冊來到第三天
但發現現在我註冊使用的Wordpress版本與您的畫面完全不同了
例如:
怪觀點入後是”編輯器”
很難一一核對您講解的功能
請問這該怎麼辦?
我今天整天卡在這裡
求解

謝謝

回答
訂閱電子報 (週四寄)
帶路姬的文章重質不重量,所以請訂閱我的電子報,以確保會收到更多優質教學好文喔!
聯盟分潤聲明

此站內容為Erin的真實架站經驗分享,部分推薦的商品有參加 聯盟計畫,您若點選文中的連結而購買商品,Erin可以從中獲取一點分潤。不過Erin 100%保證,只誠懇推薦自己親身試用過的好東西。(什麼是聯盟計畫?)

支持帶路姬

假如你很喜歡帶路姬的文章,希望鼓勵帶路姬繼續寫作,幫助WordPress新手,與推廣WordPress,不如贊助一下帶路姬吧!

追蹤帶路姬
帶路姬人氣

網站成立:2018/05/01
總瀏覽量:2,614,479(2024/2/2)
總訪客量:626,454 (2024/2/2)

© WordPress 網站帶路姬 2018~2024 版權所有 |  本站使用 Soledad主題 + Elementor Pro 編輯器   | 推薦使用 Cloudways主機