WordPress 五天自學衝刺班: 型錄篇
第二天:建立與修改範例網站

安裝Flatsome主題+匯入範例內容+修改關於我們、商品及文章

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

今日目標:安裝佈景主題、匯入範例網站資料、學習修改現有內容

  1. 怎麼安裝 Flatsome 的佈景主題?---------------------- (11:42 實作教學)
  2. 怎麼把網站變得和展示網站一樣?--------------------- (11:56 實作教學)
  3. WooCommerce 商店的基本設定?--------------------- (7:35 實作教學)
  4. 怎麼把網站設定為維護製作中模式?------------------ (6:30 實作教學)
  5. 要從哪裡修改範例網頁的內容?------------------------ (3:15 觀念+實作)
  6. 要從哪裡修改商品(文章)的分類呢?------------------- (4:38 觀念+實作)
  7. 從編輯「關於我們」開始 -------------------------------- (14:59 觀念+實作)
  8. 試試編輯「商品」------------------------------------------ (5:26 觀念+實作)
  9. 試試編輯「文章」------------------------------------------ (9:24 觀念+實作)
Flatsome 目標

第二天的課程要開始囉!

今天課程結束,你就有一個基本的網站了喔!

怎麼安裝 Flatsome 的佈景主題?

11:42 實作:跟著做就可以囉!

安裝過程很簡單,主要只有兩個步驟,可以參考影片喔!

影片一開始有一小段,介紹Cloudways的主機可以放很多Applications(網站)喔!

  • 安裝主要主題檔案

    到外觀 > 佈景主題 > 上傳 > 選擇 flatsome-x.x.x.zip (參考圖一)> 立即安裝

  • 安裝子主題檔案

    回到到外觀 > 佈景主題 > 上傳 > 選擇 flatsome-child.zip > 立即安裝 > 啟用 (參考圖一)

怎麼把網站變得和展示網站一樣?

11:56 -請照著步驟做就可以了喔!

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

請到 Flatsome > Setup Wizard

1. 第一步:
  • 請登入 Themeforest >你的帳號名稱> Downloads,找到 Flatsome。
  • 點一下Flatsome旁邊的 Download,從下拉選單點選最後一個。
  • 在下載的檔案中,複製 "Item Purchase Code" 下面那一整串啟用碼
  • 回到WordPress,貼到 "Activate" 啟用主題步驟的欄位,並且點選 Continue 繼續。
2. 第二步:為子主題命名 (不命名也沒關係,直接點 Continue 繼續)
3. 第三步:安裝主題建議的外掛 (直接點 Continue 繼續)
4. 第四步:匯入範例內容 (全部打勾,直接點 Continue 繼續)
5. 第五步:設定LOGO與匯入版型資訊 (LOGO可以在第五天再上傳、版型先跟著帶路姬選擇 Grid Style2,第五天會教你換別的),選好請點 Continue 繼續。
6. 第六步:同意客服支援條款,同意請點 Agree and Continue 繼續。
7. Ready! 設定好囉!請點選 Setup WooCommerce 進到下一步去設定商店

WooCommerce 商店的基本設定

7:35 - 請照著步驟做就可以了喔!

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

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

請點選剛剛 Flatsome 設定精靈最後一步的 > Setup WooCommerce 開始。

1. 第一步:設定商店
  • 請填寫商店地址
  • 請修改幣別
  • 請選擇你要販售的產品是實體的還是虛擬的
  • 點選 Let's Go 繼續
2. 第二步:設定商店的金流 (如果是銷售國外,可以考慮用Paypal,如果是國內,可以考慮綠界等第三方金流公司,點選 Continue 繼續)
3. 第三步:設定商店的物流 (選擇單一運費或免運費,直接點 Continue 繼續)
4. 第四步:啟用推薦外掛 (是否安裝都沒關係,點選 Continue 繼續)
5. 第五步:是否要啟用JetPack外掛 (帶路姬建議暫時先不要啟用),直接點選 Skip this step 繼續。
6. 第六步:設定好囉!點選 View Dashboard 回到原本的控制台。

姬密傳授: 如果想要老師親自教你設定金流,建議你先上完這五天課程,到 LINE@ 回報進度獲得折扣碼,就能以超優惠的價格去上進階課程喔!

怎麼把網站先設定為維護中,不要對外公開?暫時不要被搜尋到?

6:30 - 請照著步驟做就可以了喔!

網站目前匯入了很多範例網頁,這些網頁都是假的內容,對外公開不太好,尤其是被Google列入搜尋資料庫更不好,所以我們要做兩個步驟來暫時隱藏你的網站喔!

  • 在 Flatsome > Advanced 可以設定

    1. 請到 Flatsome > Advanced
    2. 請點選 Maintenance Mode
    3. 請勾選「Enable Maintenance Mode for all users except admins
    4. 點選 Save All Changes 儲存

  • 設定「阻擋 Google 來索引」

    請到 Settings > 閱讀,勾選「阻擋搜尋引擎索引這個網站」。

姬密傳授: 等網站做完的時候,請千萬要記得回來設定的地方,取消勾選這個「阻擋搜尋引擎索引這個網站」喔!

要從哪裡修改範例網頁的內容?

3:15 - 先看看帶路姬怎麼做,自己可以開始挑些頁面,觀察一下是不是都有一個編輯的連結!

修改內容的方式有很多,今天先教大家從最簡單的方式開始:

  1. 請在登入WordPress 的狀態下,新開頁籤來打開網站的前台,這時候會看到有一排控制選項在最上方。
  2. 從網站主選單去選擇你想編輯的頁面。
  3. 在最上面的控制選項的靠左側,可以找到「編輯頁面」、「編輯文章」、「Edit Portfolio Post」等等,就可以點選開始編輯該頁的內容。

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

4:38 - 先看看帶路姬怎麼做,自己可以開始挑些商品分類,觀察一下是不是都有一個編輯分類的連結!

修改分類的方式有兩種:

第一種:

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

第二種:

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

從編輯「About」開始...

14:59 - 先學一點基本觀念喔!下課後,大家可以開始試試看修改其他頁面。

這個影片的學習重點:

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

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

5:26 - 先學一點基本觀念喔!下課後,大家可以開始試試看修改其他商品。

這個影片的學習重點:

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

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

9:24 - 先學一點基本觀念喔!下課後,大家可以開始試試看多修改幾篇文章喔!

文章內容的編輯方式有兩種:

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

文章內容以外的設定,請在 Gutenberg 古騰堡編輯器的右手邊做設定喔!

  • 文章標題
  • 文章永久網址
  • 文章分類
  • 文章標籤
  • 文章摘要
  • 文章精選圖片等...

第二天的課程結束囉!

趕快到 LINE@ 領取今天的完成獎勵喔!明天我們要來學習新增更多的內容!

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

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

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

"Lacinia neque platea ipsum amet est odio aenean id quisque."

— KELLY MURRY
ACME Inc.

"Aliquam congue lacinia turpis proin sit nulla mattis semper."

— JEREMY LARSON
ACME Inc.

"Fermentum habitasse tempor sit et rhoncus, a morbi ultrices!"

— ERIC HART
ACME Inc.
標籤

網站帶路姬 / Erin Lin

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

發佈留言

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

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

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

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