第二天:套用版型與增加內容

只要堅持約一小時,你的網站將煥然一新,變得和示範網站一樣專業美觀,還可以自己掌控文章的內容與分類喔!
建立全新
WP 網站
套用版型
增加內容
編輯首頁
編輯選單
調整設計
修改樣式
安裝外掛
擴展功能
好學生推廣
加碼影片!

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

第二天的課程都是教 WordPress 最重要的基礎,請不要跳過任何影片喔!加油!你一定可以的!

1. 如何設定網頁的永久連結?

永久連結 = 設定網址的組成方式!

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

  1. 只要到網站後台的 設定 > 永久連結,跟著影片選擇一個你喜歡的網址組成的方式就可以了!
  2. 網址最好不要包含中文字,避免分享網址時,會變成亂碼。

2. 網站有分前台和後台?

先來簡單認識一下網站後台 (控制台) 的介面吧!

必看基礎觀念 3’38”

3. 如何安裝 Flatsome 佈景主題?

下載下來的檔案需要解壓縮,還要分兩次上傳喔!

 跟著影片操作就可以了喔! 6’45”

  1. 登入 Envato Market 網站的帳號,下載佈景主題備用
  2. 解壓縮下載的檔案,資料夾中會看到 flatsome-x.x.x.zipflatsome-child.zip 兩個壓縮檔案
  3. 到網站後台 外觀 > 佈景主題,先上傳 flatsome-x.x.x.zip,再上傳 flatsome-child.zip,並且啟用 flatsome-child.zip 這個子主題就可以囉!
  4. 延伸閱讀 (非必要):什麼是子主題?

安裝 Flatsome 主題與 Soledad 主題的流程幾乎是一模一樣的喔!請依照上方的說明,記得要先將下載下來的檔案解壓縮,再依次上傳兩個 Flatsome 的佈景主題 zip 檔就可以囉!

4. 如何快速套版&設定 WooCommerce?

套版=匯入示範內容的檔案!

 跟著影片操作就可以套版了喔! 11’55”

Flatsome有提供設定精靈,讓你快速匯入範例檔案!就不用從零開始做起!

請到 Flatsome > Setup Wizard
  1. 請參考左邊第二個影片來獲得授權碼 (序號),並註冊 Flatsome 主題。
  2. 為子主題命名 (不命名也沒關係,直接點 Continue 繼續)
  3. 安裝主題建議的外掛 (直接點 Continue 繼續)
  4. 匯入範例內容 (全部打勾,直接點 Continue 繼續)
  5. 設定LOGO與匯入版型資訊 (LOGO可以在第五天再上傳、版型先跟著帶路姬選擇 Grid Style2,第五天會教你換別的),選好請點 Continue 繼續。
  6. 同意客服支援條款,同意請點 Agree and Continue 繼續。
  7. Ready! 設定好囉!請點選 Return to the WordPress Dashboard 連結 回到 WordPress 後台。

WooCommerce 基本設定! 5’38”

WooCommerce 也有提供設定精靈,讓你快速設定好網路商店喔!

雖然帶路姬為了安全因素,無法在遠端直接教你設定金流與物流,但是我還是帶你稍微看一下這些設定,讓你知道串接的地方在哪裡喔!

WooCommerce > Store Setup 開始。
  1. Setup Payment:設定商店的金流 (如果是銷售國外,可以考慮用Paypal,如果是國內,可以考慮串接綠界等第三方金流公司)。
  2. Set up Tax:設定稅金。
  3. Set up shipping:設定商店的物流(可以最後再安裝綠界外掛,就可以使用超商物流)
  4. Personalize my store:客製化商店外觀(基本的 Logo設定)。
  5. Store Details:設定商店地址。
關於綠界金物流的外掛與串接
  1. 帶路姬會再第五天提供相關連結給大家,大家安裝好綠界的外掛後,可以再到 WooCommerce > 設定 (Settings) > 運送方式 或 付款 做相關設定。
補充 1:Demo 匯入失敗怎麼辦?
補充 2:匯入後的樣子看起來和示範網站不一樣,該怎麼辦?

5. 從哪裡開始編輯網頁的內容?

網站有分成四大區域,先搞懂「內容」次是指哪裡喔!

基礎觀念! 3’14”

6. 要從哪裡修改商品與文章的分類呢?

重要觀念與操作! 4’38”

修改分類的方式有兩種:

第一種:

  1. 請點選主選單的 Shop
  2. 左手邊隨便選一個商品分類。
  3. 點選最上面的「編輯分類」即可進行修改。

第二種:

    1. 在控制台的左邊,找到「商品 > 分類」。
    2. 即可在這頁新增、編輯、刪除所有的商品分類。

7. 從編輯「About」開始...

基礎觀念! 14’59”

這個影片的學習重點:
  1. 網站有分成四大區域,我們要先來學習修改「內容」的部分喔!
  2. 讓我們一起來編輯「About」的頁面,從這學習 UX Builder 頁面編輯器的基本觀念:
    • 從哪裡改標題列?(請試著改成「關於我們」)
    • 從哪裡替換大幻燈片的背景
    • 從哪裡刪除元素
    • 從哪裡新增更多元素

8. 試試編輯一個範例的「商品」

基礎觀念與操作! 5’26”

這個影片的學習重點:
  1. 請打開一個商品頁面
  2. 點選「編輯商品」來編輯這一頁
  3. 修改商品標題
  4. 修改商品完整描述
  5. 修改商品簡短描述
  6. 指定商品所屬的分類
  7. 指定商品的類型、原價與優惠價
  8. 指定商品圖片

9. 試試編輯一個範例的「文章」

基礎觀念!9’24”

  1. 如果文章內容沒有多欄位的排版、不需要插入特殊元素時,可以盡量以預設的區塊編輯器來編輯文章內容就好,比較不會讓網頁變慢。

恭喜你!今天的課程也完成囉!準備進入第三天囉!

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

歡迎分享課程

歡迎贊助帶路姬

留言給帶路姬吧!

42 留言

kevin 2019-09-17 - 7:26 pm

erin你好~謝謝你的教學,跟著課程學習到了尾聲,陸續在編輯商品,我想詢問一下~要怎麼把評論和星星的功能關閉,因為找了好久都找不到><

回答
小予 2019-12-19 - 12:39 pm

您好:請問一下”要從哪裡修改範例網頁的內容?”影片中編輯部BLUG點進去時出現”404Oops! That page can’t be found”不是老師影片中的畫面,請問是哪個步驟錯了嗎?謝謝

回答
網站帶路姬 / Erin Lin 2019-12-20 - 11:29 am

這個問題解決了嗎?請你到社團裡來發問好了,寫清楚一點前因後果,附帶一下後台截圖,我們比較好協助你喔!

回答
izone 2020-03-03 - 11:17 pm

老師你好!我訂購了Flatsome 1 years,在安裝上傳的佈景主題後卡關了,本來顯示成功但再我啟用後,網站一直顯示錯誤,;無法建立目錄,想問是因為我只有買一年份所以無法安裝嗎?請問我該怎麼處理無法使用Flatsome樣式的問題?

回答
網站帶路姬 / Erin Lin 2020-03-17 - 11:47 pm

Flatsome 是一次購買,終生可更新的,並且預設附帶半年的客服。無法建立目錄這個,我猜是你重複上傳主題,應該是你已經上傳成功過一次了喔(只是猜的),建議你可以到我的社團發問,並且附上截圖。

https://www.facebook.com/groups/wpointer

回答
vivian 2020-03-16 - 4:06 pm

你好.想請問一下.我在 (怎麼安裝 Flatsome 的佈景主題?)裡的片裡訪問詳細信息的申請網址點進去.結果點進去不能打開.想請問該怎麼處理這個問題?

回答
Tom 2020-05-08 - 10:00 am

老師您好,
我己經購買了Betheme佈景主題,才看到你的教學,不知道去哪裡打開Maintenance Mode,你知道嗎?
或是您有Betheme的教學?謝謝!

回答
Tom 2020-05-25 - 12:08 am

我己經透過老師連結重新購買了Flatsome.謝謝!

回答
網站帶路姬 / Erin Lin 2020-06-11 - 7:20 pm

你可以到社團裡來問問喔~
https://www.facebook.com/groups/wpointer

回答
米森 2020-09-29 - 10:08 am

老師妳好,想請問
您介紹的cloudways虛擬主機方案$12那個,一次可以放幾個網站在上面呢?
如果只有一個,有推薦可以開多個網站的主機方案嗎?
第二個問題想請問flatsome購買後可以用在幾個網站上使用呢?
若只有一個,有推薦可以多網站使用的樣版嗎?

謝謝老師

回答
網站帶路姬 / Erin Lin 2020-10-07 - 7:36 pm

1. Cloudways 的主機都可以放無限個網站喔。但是主機資源有限,放越多網站,可能會跑的比較不順喔。
2. https://wpointer.com/wordpress-tutorials/themeforest-licenses/
多網站使用的主題,就會比較貴喔,可以參考這篇文章:
https://wpointer.com/wordpress-tutorials/avada-soledad-flatsome-astra-oceanwp/

回答
Cloudlines2020 2020-10-28 - 6:32 pm

老師妳好
我想問一下,我設定好flatsome的佈景的最後一步無法點開wooCommerce 他說我的帳號沒有使用權限

回答
新手學員 2020-11-22 - 12:18 am

老師我也是這個問題
最後要設定woowooCommerce
點選後也跳出帳號沒有使用權限
主機是bluehost
麻煩老師解答謝謝

回答
Tony 2020-11-27 - 1:19 pm

我也是這個問題
點選要設定woowooCommerce
點選後也跳出帳號沒有使用權限
主機是 Siteground
麻煩老師解答謝謝

回答
Carrie 2020-11-01 - 5:00 pm

在上傳檔案flatsome-3.12.3時, 出現 “上傳的檔案超過了 php.ini 中 upload_max_filesize 參數的設定值” 請問該如何解決?

回答
網站帶路姬 / Erin Lin 2020-11-08 - 3:35 pm

你是用哪一個主機呢?

回答
姬粉絲學員 2020-11-10 - 9:26 am

老師好,我想設定網站暫不公開。
Flatsome > Advanced” 這裡面的設定,按Save all Changes 完全沒反應,這部份的設定似乎沒有被寫入。其他的部份都正常。
Wordpress與Flatsome皆為最新版本,但Flatsone支援已過期,不知道是不是這部份還需要再延常購買?
主機: Cloudways / PHP: 7.2
謝謝老師幫忙!

回答
姬粉絲學員 2020-11-10 - 3:30 pm

我實在不知道這兩天發生什麼事,於是我拉回了兩天前的備份,就可以更新了,Save all Changes已正常,Advanced的畫面看起來也正常多了!
備份真是太重要了! (汗)

回答
網站帶路姬 / Erin Lin 2020-11-12 - 8:34 pm

好喔!

回答
adad00201 2020-11-15 - 6:00 pm

請問我在安裝完flatsome主題後要開始使用的時候
跳出驗證碼這裡,我依照教學將flatsome給的 purchase code 複製貼上
結果一直出現錯誤:「Please enter a valid purchase code. Make sure to get all the characters.」
我明明就花錢刷卡買了…也依照他給的驗證碼去貼
卻一直失敗說我驗證碼錯誤~”~
請問能怎麼解呢?

回答
大蘇 2020-12-16 - 8:46 am

我剛剛也遇到一樣的問題,目前已解決。過程供各位參考
原因是Envato把這個步驟改掉了,所以要輸入的不是教學影片中所說明
的purchase code。

解決方式是在註冊的頁面中,須在輸入序號的欄位上方點選(我忘記實際英文)to get a general token
1.進入頁面後,點選Create a new toke
2.輸入您購買的產品名稱,舉例我是輸入Flatsome
3.將Permissions needed的欄位全部打勾
4.點選Create token
5.此步驟非常重要,須將生成的token序號儲存起來,若遺失要取回很麻煩

取得token序號後,再回到教學影片中的地方輸入token的序號及完成。

回答
Eason 2020-11-25 - 9:56 pm

請問我在安裝完flatsome主題後要開始使用的時候
跳出驗證碼這裡,我依照教學將flatsome給的 purchase code 複製貼上
結果一直出現錯誤:「Please enter a valid purchase code. Make sure to get all the characters.」
我明明就花錢刷卡買了…也依照他給的驗證碼去貼
卻一直失敗說我驗證碼錯誤~”~
請問能怎麼解呢?

回答
大蘇 2020-12-16 - 8:46 am

我剛剛也遇到一樣的問題,目前已解決。過程供各位參考
原因是Envato把這個步驟改掉了,所以要輸入的不是教學影片中所說明
的purchase code。

解決方式是在註冊的頁面中,須在輸入序號的欄位上方點選(我忘記實際英文)to get a general token
1.進入頁面後,點選Create a new toke
2.輸入您購買的產品名稱,舉例我是輸入Flatsome
3.將Permissions needed的欄位全部打勾
4.點選Create token
5.此步驟非常重要,須將生成的token序號儲存起來,若遺失要取回很麻煩

取得token序號後,再回到教學影片中的地方輸入token的序號及完成。

回答
kevin 2020-11-27 - 1:21 pm

我也是這個問題…..
要設定woowooCommerce
點選後 顯示 –> (很抱歉,目前的登入身分沒有存取這個頁面的權限。)
主機是 Siteground
謝謝

回答
新手學員 2020-12-01 - 3:41 pm

相同的問題
剛剛購買主機 cloudways
要設定 Setup WooCommerce(optional) 錯誤訊息顯示 –> (很抱歉,目前的登入身分沒有存取這個頁面的權限。)
請問如何處理
謝謝

回答
Neil Ho 2020-12-10 - 9:24 am

Hi,
我也遇到相同的問題,
方便請問您的問題已解決了嗎?

如果已經解決的話可否請問一下處理的方法呢?

感謝感謝

回答
Neil Ho 2020-12-09 - 11:39 am

我的問題跟新手學員與Kevin一樣,
都是在最後一個步驟,
點下紫色的 Setup WooCommerce 之後,
就是簡單的:
‘很抱歉,目前的登入身分沒有存取這個頁面的權限。’
頁面上也沒有提供任何可以協助的連結。

我的主機是買 cloudways,全部都是經由帶路姬這邊的連結去購買的。
請問該如何處理,現在卡在這裡了

回答
Neil Ho 2020-12-09 - 7:46 pm

Flatsome設定精靈的第一步不是’Activate’,而是改成了’register’,
在這一步貼上購買Flatsome的purchase code會顯示invalid,
必須在這一頁的連結生成一個token貼上後,
然後再接後面的步驟,
不確定這個跟Setup WooCommerce卡關有無關係,
給帶路姬老師參考看看,
麻煩囉,感謝!
P.S. 如果暫時跳過這部分先上後面的可以嗎?XD

回答
freddy 2020-12-11 - 4:09 pm

跟您提供的答案無關…
現在大家的問題都一樣,卡在 (‘很抱歉,目前的登入身分沒有存取這個頁面的權限。’)
頁面上也沒有提供任何可以協助的連結。

我的主機是買 cloudways,全部都是經由帶路姬這邊的連結去購買的。
請問該如何處理,現在卡在這裡了….
[ 請帶路姬老師協助回答 ]
[ 請帶路姬老師協助回答 ]
[ 請帶路姬老師協助回答 ]
[ 請帶路姬老師協助回答 ]
[ 請帶路姬老師協助回答 ]
[ 請帶路姬老師協助回答 ]

回答
大蘇 2020-12-16 - 8:45 am

我剛剛也遇到一樣的問題,目前已解決。過程供各位參考
原因是Envato把這個步驟改掉了,所以要輸入的不是教學影片中所說明
的purchase code。

解決方式是在註冊的頁面中,須在輸入序號的欄位上方點選(我忘記實際英文)to get a general token
1.進入頁面後,點選Create a new toke
2.輸入您購買的產品名稱,舉例我是輸入Flatsome
3.將Permissions needed的欄位全部打勾
4.點選Create token
5.此步驟非常重要,須將生成的token序號儲存起來,若遺失要取回很麻煩

取得token序號後,再回到教學影片中的地方輸入token的序號及完成。

回答
terry 2020-12-16 - 5:54 pm

現在大家有共同的問題
點下紫色的 Setup WooCommerce 之後,出現 => ‘很抱歉,目前的登入身分沒有存取這個頁面的權限。’
頁面上也沒有提供任何可以協助的連結。
求救!
求救!
求救!
求救!
請網站管理員協助回答,謝謝

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

我已經更新教學了喔,請重新整理頁面,就可以看得到了喔!

回答
YC Fung 2021-01-26 - 11:26 pm

你好 Erin,
我安裝FLATSOME 和WINZARD SETUP後, 不知為何TEMPLATE都沒有顯示範例內容, 只有GRID的排位, 但WINZARD SETUP時明明有INSTALL DEMO CONTENT. 請問是那裡出錯了? 還有SEO PLUGPIN 要先安裝嗎? YOAST SEO OR RANK MATH比較好? 謝謝你~

回答
網站帶路姬 / Erin Lin 2021-01-27 - 11:09 am

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

回答
Mandy 2021-02-24 - 10:48 am

您好
我有一個其他學員好像沒有的這個問題
請問商品價格的”幣別”要如何更改呢?

回答
leo 2021-03-24 - 6:27 pm

我也有一樣的問題

回答
Apple 2021-04-26 - 12:29 pm

現在Flatsome需要envato的生成碼,我應該如何操作,因為這生成碼ㄧ輸入就等於全部把自己的資料給出去了ㄝ.

回答
許釗瑋 2022-02-15 - 5:22 pm

老師您好,第二天課程的編輯關於我們的部分,在點入Flatsome Child後,所顯示的業面與老師所拍攝的頁面不同,目前無法找到編輯頁面字樣,無法編輯關於我們的課程,請問老師該怎麼辦

回答
網站帶路姬 / Erin Lin 2022-02-15 - 11:38 pm

哈囉,歡迎到社團裡面貼文,附上截圖,比較清楚你的問題喔!
https://www.facebook.com/groups/wpointer

回答
謝大 2022-06-02 - 4:20 pm

請問帶路姬,我之前有在GODADDY買網址,也有在Siteground
買空間如何套用

回答
謝大 2022-06-02 - 4:21 pm

請問帶路姬,我之前有在GODADDY買網址,也有在Siteground
買空間如何套用

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

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

支持帶路姬

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

追蹤帶路姬
帶路姬人氣

網站成立:2018/05/01
總瀏覽量:2,150,487 (2022/2/9)
總訪客量:502,824 (2022/2/9)

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

★ 完全免費的影音+圖文教學+ ★

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

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