第三天：編輯首頁與選單

只要堅持約一小時，你就可以有個漂亮的門面！而且訪客也可以輕鬆找到你用心寫過的文章囉！

建立全新
WP 網站

套用版型
增加內容

編輯首頁
編輯選單

調整設計
修改樣式

安裝外掛
擴展功能

好學生推廣
加碼影片！

第三天課程大綱

加入社團討論

課程中使用的工具

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

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

1. 如何編輯主選單？

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

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

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

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

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

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

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

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

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

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

到網站後台的 外觀 > 自訂
點選 Featured Slider > General
勾選 Enable Featured Slider
勾選你喜歡的 Featured Slider Style （滑塊樣式）就可以囉！

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

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

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

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

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

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

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

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

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

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

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

到網站後台的 外觀 > 自訂
到 Homepage > General
在 Homepage Layout 的地方，選擇自己好歡的排版方式（可參考 Soledad 主題的示範網站）

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

有兩種簡單的方式喔！

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

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

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

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

重要觀念與操作 15’03”

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

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

建立全新
WP 網站

套用版型
增加內容

編輯首頁
編輯選單

調整設計
修改樣式

安裝外掛
擴展功能

好學生推廣
加碼影片！

歡迎分享課程

歡迎贊助帶路姬

刷卡

或

PayPal

留言給帶路姬吧！取消回覆

32 留言

summer 2019-12-01 - 8:07 pm

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

回答

網站帶路姬 / Erin Lin 2019-12-05 - 8:09 pm

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

回答

sunny 2019-12-13 - 12:27 pm

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

回答

小娜 2020-07-09 - 2:11 am

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

回答

網站帶路姬 / Erin Lin 2020-07-09 - 11:37 am

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

回答

winter 2020-02-28 - 11:12 am

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

回答

網站帶路姬 / Erin Lin 2020-03-17 - 11:42 pm

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

回答

tj 2020-06-28 - 5:30 pm

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

回答

網站帶路姬 / Erin Lin 2020-07-07 - 3:37 pm

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

回答

小湘 2020-07-11 - 12:39 am

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

回答

網站帶路姬 / Erin Lin 2020-07-17 - 5:49 pm

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

回答

亞 2020-07-12 - 6:45 pm

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

回答

網站帶路姬 / Erin Lin 2020-07-16 - 1:49 pm

會是響應式的喔！

回答

Andy 2020-07-28 - 7:22 pm

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

回答

ken lee 2020-08-02 - 2:24 pm

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

回答

ken lee 2020-08-02 - 4:14 pm

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

回答

波妮 2020-08-14 - 3:42 pm

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

回答

網站帶路姬 / Erin Lin 2020-08-14 - 4:57 pm

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

回答

Toywan 2020-08-16 - 10:02 pm

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

回答

網站帶路姬 / Erin Lin 2020-08-26 - 5:07 pm

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

回答

ann 2020-09-12 - 3:00 pm

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

回答

網站帶路姬 / Erin Lin 2020-09-14 - 2:42 pm

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

回答

恕瑋 2020-10-29 - 11:57 pm

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

回答

網站帶路姬 / Erin Lin 2020-11-08 - 3:31 pm

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

回答

Diona 2020-12-30 - 5:17 pm

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

回答

網站帶路姬 / Erin Lin 2021-01-01 - 4:04 pm

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

回答

胖胖白目熊 2021-05-16 - 10:59 pm

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

回答

網站帶路姬 / Erin Lin 2021-05-18 - 8:42 pm

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

回答

BB 2021-06-30 - 10:00 pm

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

回答

網站帶路姬 / Erin Lin 2021-07-01 - 4:07 pm

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

回答

CJ 2022-05-02 - 9:48 pm

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

回答

Jerry 2022-06-26 - 10:56 pm

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

謝謝!

回答