線上課程平台架設 :如何製作線上教學網站(詳細流程+推薦工具)

線上課程平台架設 :如何製作線上教學網站(詳細流程+推薦工具)

這是一篇完整的「 線上課程平台架設 」教學,我們將使用 WordPress+WooCommerce 強大的架站軟體,量身打造客製化的網站。

不論是何種性質的教學平台,想建置:影音、文章、圖片等 .. 多種媒體形式的課程網站。以及想擁有:新增+管理線上課程、作業上傳、學生(會員)系統、評分測驗、接受付款等 .. 功能。更多 線上課程平台推薦

這篇教學文章都能夠一一幫助你完成:)

本次教學,會從架設網站(網域購買、主機選擇) > 基本主題 / 外掛安裝 > 線上課程外掛操作 > 網站上線,一步步帶領各位站長完成線上課程網站建置~

★☆ — 重要資訊 — ☆★

犬哥網站與 A2 Hosting 主機有長期合作關係,點擊網站上任一個 A2 Hosting 連結 前往官網(包含點擊此連結),最高可享有 3 折的讀者優惠,請一定要把握:)

我們將使用 WordPress 線上課程外掛: LearnDash 架設線上課程網站。更多 課程外掛推薦清單

全文章節如下:


1. 如何自架網站?

架設網站 3 要素
1. 網域申請
(申請門牌)
2. 主機租用
(租一塊地)
3. 網頁設計
(搭建房子)

網站能正常運作,就需有「 個人網域 」+「 虛擬主機 」,這是基本配備。

這也是每個站長都需負擔的小投資,沒有例外。

差別是,跟著我的架站教學,你可用最少的預算,建置你的網站:)

網域如何取名呢?

網域是什麼?「 網域 」是網站組成的第一步,就像家的門牌一樣,讓人可以順利找到你的網站。

  • 簡單好記:越簡單的網域名稱越方便使用者查詢和記憶。例:蘋果 – https://www.apple.com/
  • 品牌名稱:網域名稱以品牌為名,打算發展品牌的公司,可用這個方式。例:愛迪達 – https://www.adidas.com/
  • 與服務 or 產品有關:與服務或產品有關聯。例:博客來 – https://www.books.com.tw/
  • 去除 www:目前大部分新網址都不太會在前面加上 www,這是比較舊式的用法。
  • .com 優先:.com 是大多數人的直覺印象,主要方便好記,增加搜尋率。
  • 勿用中文:網址傳輸是以英文為主,所以網址上有中文,就會轉成一長串的特殊符號+數字,除了難記外,對排名也不太理想。

網域取名完成後,接下來可以看一下網域後綴部分(或稱為頂級域名),要如何選擇呢?

一般最常選擇的就是 .com 類型的頂級域名,它適用於任何場合或服務,通常也是最熱門的選擇(會建議優先選擇)。

但有時候喜歡的網域名字,剛好偏偏被註冊走了,就能用更換頂級域名的方法,還是有機會註冊到自己喜愛的名字。

有關於網域後綴名(頂級域名),有哪些常見的類型呢?下面僅列出一些分享。

  • tw / cn / jp:代表不同國家,如台灣、中國、日本等 ..(選擇這類型的網域,可挑選網站主要訪客的居住地)。
  • co:可解讀為公司或企業的英文縮寫,但基本上適用於任何情況,可當作 com 申請不到的替代方案(簡單好記)。
  • net:網路相關行業可使用,但無明確限制。
  • info:資訊性類型網站可使用,但無明確限制。
  • org:organization(組織)縮寫,適合非營利組織、基金會、人文組織、宗教組織等 ..,但無明確限制。

虛擬主機是什麼?

「 虛擬主機 」是主機公司在自管的實體主機上,切分成多個虛擬空間,並把這些空間,租給一般使用者使用。

這樣可大幅降低使用者的費用,因為養實體主機是很貴的,所以絕大部分的站長,通常都是租用現成的。

另一個比喻,如果把網址比喻成「 門牌 」,那虛擬主機就是「 家 」的角色。

如果網頁製作完成了,就需放置在優質的虛擬主機,才能確保網站不會受到攻擊,和速度穩定。

如何挑選虛擬主機?

  • 公司規模:國外知名虛擬主機公司,都是全球性服務,不論公司規模、營運歷史、主機性能、規格服務,通常優於國內主機。
  • 主機性能&功能性:主機穩定度&安全性是重要的,網站才會安全有保障。還有主機的方案規格是否理想。
  • 方案價位:通常國外的價格,會比國內便宜,但建議不要都價格取向,如果主機因此性能不好,之後你也會選擇離開的。

WordPress 是什麼?

WordPress 網站使用人數(持續增加中)
WordPress 網站使用人數(持續增加中)

WordPress 是全球知名的網頁設計軟體,全球有 40 % 以上的網站,都來自於 WordPress。更多 WordPress 是什麼

擁有上萬個佈景主題(樣板)和功能外掛,只需一鍵安裝即可成為多功能網站。或許你不知道怎麼選,請參考 優質佈景主題優質外掛推薦,會給你應該的幫助。

WordPress 可完成多種網頁設計,如:部落格架設個人品牌或公司企業官網購物網站架設 等 ..

最大好處是,它是免費開源的軟體,可完全掌握自己網站資料,不需被任何網路平台、網頁設計公司牽制。

且不會因為任一網頁製作平台的營運問題,造成網站消失(舉例來說,無名小站結束營運,原來的內容也隨著關站而消失,但這不會發生在 WordPress 身上)。

因為你就是網站的擁有者!


2. 虛擬主機推薦

A2 Hosting 是一家全球知名的虛擬主機和網域託管服務商,它從 2001 年就開始提供相關服務,由於創辦人本身有程式相關背景,所以主機速度優化上,一直是它們的服務重點。

它在虛擬主機上提供多種服務項目,像是共享主機、WordPress 專業主機、VPS 主機、獨立主機,隨著你的網站規模越大(流量越多)可同步升級服務,滿足不同時期的需求。

搭配 24 / 7 / 365 全年無休的線上客服,遇到任何問題能在第一時間幫助解決。

不需擔心語言不通問題,因為 A2 Hosting 客群來自世界各地,用簡單的英文程度(Google 翻譯),他們都聽得懂唷。

A2 Hosting 正常運行時間和安全性

根據過去 24 個月的數據,A2 全年有 99.9% 以上的正常運行時間(沒任何一家能保證 100%),這代表你網站幾乎不會異常斷線,都是穩定的在線上運作。

這使它成為主機穩定度、安全性的有力競爭者。

A2 hosting :主機正常運行時間
A2 hosting :主機正常運行時間

A2 Hosting 網站速度表現好嗎?

A2 Hosting 在全球各地有多個數據基地台,滿足不同地點的主機連線速度,像是台灣用戶就可到連線最近的新加坡基地

這是我之前主機放置在 A2 Hosting 所做的記錄(評測紀錄是 A+),網站加載速度大約 83 毫秒,是優質的主機速度。

A2 hosting :虛擬主機響應速度
虛擬主機響應速度(來自 bitcatcha 評測)

Google 建議的響應時間是 200 毫秒(越短越好)。所以低於 180 毫秒的網站內容會被評為A +。

A2 Hosting 的 Turbo Boost 以上方案,有針對主機速度做特別優化,官方表示會比一般常規站點最多快上 20 倍,這是它的特別優勢。

配上 A2 Hosting 任一個共享主機方案,全部皆使用 SSD 存儲,這確實有助於其快速加載速度(SSD的速度比普通硬碟快 30%)。

每降低一秒的網站速度,這代表能保留更多訪客留存,進而轉化成網站訂單。


3. A2 Hosting 方案選擇

這章節會進行「 A2 Hosting 」的主機方案選擇,帶你選擇適合自己的方案。

首先,點擊前往 A2 Hosting 官網,會直接來到 Web Hosting 主機頁面,或是點選 Hosting > Web Hosting 前往也可以。

前往 A2 Hosting 主機
前往 A2 Hosting 主機

接著往下滑,會看到不同的主機方案,如果你正猶豫如何選擇,下面我會給你一些選擇建議。

A2 Hosting 方案費用

小備註:方案價格會隨著主機廠商有所調整,以 A2 Hosting 官網呈現價格為主。

要選擇哪種 A2 Hosting 主機方案?

A2 Hosting 共享主機提供 4 種方案選擇,分別是 Ignite(點燃)、Accel(加速)、Turbo Velocity(渦輪)、Turbo Nitro(增大渦輪)

它的任一種方案,全都享有 WordPress 一鍵安裝、大量網路 SSD 儲存空間、不計網站流量、 SSL 免費憑證、A2 速度優化軟體 、免費網站搬家、CloudFlare CDN 服務、CPanel 多功能介面、數據中心選擇等 ..,這是超值的功能服務。

隨著方案提升又提供更多進階功能,這邊我簡單的統整,方便你找到適合自己的方案。

  • 只需架設一個網站,且有預算考量:Ignite 方案
  • 需架設多個網站,且有預算考量:Accel 方案
  • 需架設多個網站,且預算還算足夠,對主機速度有進一步追求者:Turbo Velocity 方案

如果是 WordPress 新手入門,會建議選擇 Ignite 或是 Accel 方案,能讓你用最少預算開始,也不會一開始負擔就太多。

Accel 方案以上,都能架設無限網站、無限網路儲存空間,所以整體會比 Ignite 划算一點(但還是要看你的預算)。

不管選擇的是哪種主機方案,A2 Hosting 本身賣點就是注重主機速度,所以表現基本都會在水準之上(不會因為你是否選擇 Turbo 方案)。

如果你有現成或是較多的穩定流量,會建議直接選擇 Turbo Velocity 方案。此方案大幅優化了主機速度,它們表示 Turbo Velocity 方案以上的主機速度,比一般常規站點快上 20 倍,比較不會遇到速度上的問題。

至於 Turbo Nitro 方案不太建議使用,因為費用比較高(同樣費用有更好的選擇),且和 Turbo Velocity 方案功能差不多。

希望可以幫助大家選擇最適合自己的主機方案:)

購買 A2 Hosting 完畢後,剩下的流程可以參考 A2 Hosting 教學,完成後續的 WhoIs 信件認證、WordPress 網站建置、SSL 憑證申請、主機相關設定等 ..。

安裝主題+網站外掛

購買完主機+網域後,我們還需要安裝主題+基礎外掛,才能有一個完整的 WordPress 網站。

如何安裝主題,主題是什麼,怎麼找到最優質的 WordPress 主題,可以觀看教學文章 10 個最推薦的 WordPress 主題

也可以參考我們最推薦的 Astra 免費主題 介紹。

WooCommerce外掛推薦 :多款網路開店平台,外掛推薦
不知道如何找到最佳主題+外掛?我們已經幫你整理了最佳推薦清單!

外掛部分,WordPress 必備外掛有非常多款,可以看看我們的 WordPress 推薦外掛清單 來進行挑選:)


4. Astra 主題安裝+套用課程模板

這章節,會教如何安裝 WordPress 佈景主題+套用模板,讓網站看起來美觀且功能性更強。

Astra 是一款熱門多功能的輕量級主題,主題執行速度快速,可拿來建立多種類型的網站。

為了方便接下來教學,建議先跟我一起安裝 Astra 主題,有免費版可安裝。更多可參考 Astra 主題入門Astra Pro 進階教學

WordPress 佈景主題安裝

首先,前往 WordPress 後台 > 外觀 > 佈景主題,點選 安裝佈景主題

前往 WordPress 主題安裝
前往 WordPress 主題安裝

在搜尋欄位輸入 Astra,我們安裝 Astra 提供的免費版本,安裝完成後請記得 啟用,才會真正套用主題。

建立Blog :wordpress 佈景主題安裝
建立Blog :wordpress 佈景主題安裝

主題啟用完成,前往網站前台看一下成果,看起來還不錯的 WordPress 主題,成功出現啦。

WordPress 佈景主題安裝成功
WordPress 佈景主題安裝成功

使用 Astra 形象模板

Astra Theme 有多種風格模板可一鍵套用,再從現有的樣板修改,架站速度會很快。但使用 Astra 風格模板之前,需安裝相關外掛。

點選左側 Astra > 最右側 Useful Plugins > Starter Templates,點 Install,就會自動安裝 Astra 模板外掛。

安裝 Astra 起始樣板外掛

或是可在 WordPress 外掛 > 安裝外掛,搜尋 Astra 找到下圖的外掛並安裝,都是一樣的。(兩個方法 2 選 1 就好)

安裝 Astra 起始模板外掛
安裝 Astra 起始模板外掛

安裝完成後,進入初始設定頁面,模板外掛會詢問常用的頁面編輯器是哪個,這邊選擇 Elementor 作為教學範例。更多 Elementor 基礎教學

備註:上面如果是用第二種方法安裝,需自行前往外掛設定項,才會有下圖流程。

選擇頁面編輯器相關的模板

接著就會看到非常多種 Astra 使用 Elementor 編輯器做的起始模板。

找到喜歡的模板點入,可進行全站安裝 or 單一頁面安裝,就看自己的需求囉。

備註:右上角有標註 Premium 是 Astra 進階版才能使用,可參考 Premium Starter Templates 教學

Astra 多種起始模板,可供挑選

套用課程主題模板

我們搜尋 Learn Baking 進行安裝。(建議先跟我安裝一樣的,方便接下來教學,學會後都能再更換)。

選擇「 Import Complete Site 」完整匯入該模板。

線上課程平台架設 :安裝 Learn Baking 樣板

匯入完成,到前台檢查,恭喜大家完成簡單的網站外觀設置,之後也可以找到自己喜歡的模板來製作唷:)

線上課程平台架設 :套用 Learn Baking 樣板成功~

5. LearnDash 是什麼?

LearnDash:最全面的架設線上課程網站外掛

LearnDash 是一款老牌且強悍的 WordPress 線上課程外掛,目前有許多 500 強公司及大學正在使用,雖只有付費版本,但它強大且完整的功能,是我想推薦它的主因。更多 LearnDash 完整教學

LearnDash 具備所有線上課程外掛必備功能,包含:上傳各種檔案形式的課程文件、課程內容下載、銷售課程、學生獎勵積分、老師管理、作業及測驗等 .. 。

設有自動電子郵件通知,以及後台詳細的課程相關數據報告,且前台網站可客製化樣式,並且具備響應式設計,一次設計便可適用於任何裝置。

WordPress線上課程外掛 :LearnDash 可自訂義多方面樣式
LearnDash 可自訂義多方面樣式

在課程設計方面, LearnDash 帶有簡單的區塊式編輯器,可在頁面上嵌入,在設計上更直觀。更多 如何使用區塊編輯器新增頁面

還可建置多層級課程,並且有課程計時器,紀錄學生的閱讀時間。

也可為課程設置學習條件,例如:解鎖 B 課程,必須先學習 A 課程。

除此之外,測驗系統也有多種不同問題類型可設置,如:問答、選擇、多選、對錯等 .. ,讓測驗卷變得更豐富。

WordPress線上課程外掛 :LearnDash 設置多種問答類型測驗
LearnDash 設置多種問答類型測驗

學生及教師方面, 可設置學生及老師群組,讓教師可在群組中配置作業、額外課程、管理等 .. 多功能。

LearnDash 也設有學習論壇,方便教師以及學生討論問題。

課程學習至某個段落,可向學生顯示成績、排行榜、課程積分,與證書和徽章系統有良好搭配,增加學生的成就感。

LearnDash:後台新增教師及學生群組

最重要的付款方面, LearnDash 提供了大量的付款方案相關設置,包括:訂閱、一次性購買、會員資格、線上課程購物車等 .. 。

且 LearnDash 與 WooCommerce 串接,讓台灣的站長可使用線上付款的相關功能。更多 WooCommerce 教學

WordPress線上課程外掛 :LearnDash 可使用 WooCommerce 相關購物車、付款功能
LearnDash 可使用 WooCommerce 相關購物車、付款功能

方案評論

LearnDash 是目前最推薦使用的線上課程外掛,它適用於 WordPress 熱門主題,可以更完整且全面的功能來管理線上課程網站,適合建置不同類型的課程網站。查看 付費方案

且 LearnDash 與許多第三方外掛串接,可以安裝許多額外的外掛、附件來擴充其功能。

能與 WooCommerce 串接,是我最主要推薦的原因之一,台灣的站長可以不用煩惱付款的問題。

課程銷售也有許多方案供站長選擇,像是:先免費試閱後付費、一次性付款、訂閱會員制、課程組合包等 ..,可以更好地銷售你的線上課程:)

上述的這些都是 LearnDash 強大的功能範圍。

如果你正在考慮使用哪款 WordPress 線上課程外掛,那 LearnDash 應該會是最優質的選擇之一:)


6. LearnDash 方案如何選擇?

瞭解了什麼是 LearnDash 之後,這個章節,我們就要來開始安裝+啟用 LearnDash 啦!

首先,前往 LearnDash 官網 ,點擊右上角「 Get LearnDash(取得 LearnDash )」按鈕,前往 LearnDash 方案購買頁面。

LearnDash 線上課程外掛

LearnDash 目前只提供年租制的方案,所以下面所有的價格,都是按年付費

下圖分為三個方案:「 1 Site 」1 個站點、「 10 Sites 」10 個站點、「 Unlimited 」無限個站點。

站長們依據需求做選擇即可。

LearnDash 年租方案一覽

新手建議先選擇 1 Site 一個站點方案入門,因為價格較低。若有超過一個站點的需求,再選擇 10 Sites 方案,可架設多達 10 個線上課程網站。

方案下方還有許多附加功能可以加購,比較推薦的是 ProPanel 功能,大家可視自身預算選擇是否加購:)

小備註:ProPanel 可供站長分析現有學生、學習狀況、課程的訂購成長等 .. 數據,在後面我們也會介紹。

選好方案後,我們直接進行結帳,會跳到購物車頁面,讓站長們確認購買方案。

LearnDash 結帳頁面確認購買方案

確認購買方案無誤,按下「 Proceed to checkout 」,繼續往下填寫結帳資訊。

使用者資訊建議都填寫英文,姓名可到 外交部 查詢,地址可用 中華郵政 查詢。

密碼長度須至少 12 個字元,並包含大小寫字母、數字和特殊符號(例如:!@#$%^)。

LearnDash 結帳頁面輸入訂購資訊

接著在下方可以再次確認本次購買金額,沒有問題的話,就可以輸入付款資訊,最後按下 Purchase。

LearnDash 結帳付款方式

這樣我們就完成 LearnDash 的購買流程啦:)


7 . LearnDash 安裝+啟用憑證

完成購買, LearnDash 會寄送多封電子郵件,包含:收據、歡迎使用信件、會員後台登入路徑及資訊等 .. 。

從郵件中的網址可直接連結到 LearnDash 會員後台。

Step 1:安裝 LearnDash 課程外掛

進入 LearnDash 會員後台,我們使用信件中官方給予的帳號+密碼登入。

登入 LearnDash 會員後台

登入以後,我們會看見會員後台有:LearnDash、ProPanel 的下載點+憑證,還有演示站點。

選擇「 Download 」按鈕,下載 LearnDash 。

LearnDash 後台下載檔案包

下載完成,我們會獲得一個檔案包。

接著前往 WordPress 後台,找到外掛 > 安裝外掛 > 上傳外掛,把 LearnDash 外掛檔案包上傳安裝+啟用。

上傳 LearnDash 外掛檔案包

這樣 LearnDash 外掛就完成安裝囉:)

Step 2:啟用憑證

接著我們啟用 LearnDash 使用憑證。

前往 LearnDash 會員後台,選擇 LearnDash > License Details 按鈕,前往購買憑證頁面。

找到「 License Key 」,複製你的啟用憑證。

複製 LearnDash 啟用憑證

小備註:Authorized Domain Usage 區域可管理已使用該憑證的網域。

接著前往 WordPress 後台 > LearnDash > Setting 頁籤 > LMS License 區塊 ,填入購買時填寫的電子郵件,並將憑證複製貼上。

最後選擇「 Update License 」上傳購買憑證。

輸入+啟用 LearnDash 憑證

這樣就完成 LearnDash 啟用憑證囉,恭喜大家,我們可以開始使用 LearnDash 的功能了~


全站設定

安裝+啟用 LearnDash 之後,我們馬上開始架設線上課程網站的第一步:進行全站設定吧:)

LearnDash 的全站設定相對簡單好上手,我也會一步步帶領大家操作。

準備好的話,我們就開始囉~

General 一般設定

前往 WordPress 後台 > LearnDash > Setting 頁籤 > 「 General (一般設定)」區塊。

因為一般設定有較多區塊面板,所以我會分小章節,分別講解。

Design & Content Elements 設計&內容元素

進入「 General (一般設定)」面板後,首先,我們會先看到「 Design & Content Elements 」區域 。

在這裡,我們可以調整:全站色彩、Logo、課程顯示的相關選項。

依照圖片順序,將「 焦點模式 」、「 LearnDash 會員註冊功能 」、「 變更 Logo 」、「 影片響應式大小 」,一一做相對應的開啟+變更。

線上課程平台架設 :變更「 Design & Content Elements 」區域設定
  • Accent Color:主視覺色,整個課程主題+列表使用的主要顏色。
  • Progress Color:用於所有進度條相關項目的顏色設定。
  • Notifications Warnings , etc…:警告、重要信息時會顯示此顏色。
  • Focus Mode:焦點模式。提供無干擾的課程體驗,讓學生可以專注在課程頁內容,啟用後會一次適用於所有課程。
  • Login & Registration:啟用 LearnDash 模版的登錄和註冊頁面。
  • Logo Upload:變更全站顯示 Logo 。
  • Video Responsive CSS:讓全站影片呈現響應性設定。如果後續發現影片無法正常顯示問題,再關閉該選項。

這邊我想特別讓大家看一下開啟「 Focus Mode 」焦點模式的課程面板。

焦點模式會在前台的課程頁面上,新增一塊課程進度控制面版,若關閉此功能,就不會出現下圖的控制面板。

線上課程平台架設 :「 Focus Mode 」焦點模式

全部設定完成,按下「 Save(保存)」即可。

Global Pagination Settings 全局分頁設置

往下滑我們會看見「 Global Pagination Settings 」區域,這邊可為各種列表指定每頁顯示的課程、測驗項目數量。

若沒有特別需求,維持原設定即可。

線上課程平台架設 :「 Global Pagination Settings 」區域預設設定

Admin User Settings 管理員用戶設置

接著往下,看到「 Admin User Settings 」區域,這裡可控制管理員在課程頁面的權限。

若無特別需求,維持預設設定即可,詳細說明如下圖:

線上課程平台架設 :「 Admin User Settings 」區域預設設定
  • Course Auto-enrollment:允許管理員訪問課程頁面時不需註冊課程。
  • Bypass Course limits:允許管理員以任意順序訪問課程內容,繞過所有進度及訪問限制。
  • Include in Reports:在數據分析報告中包含管理員的使用資料。

Custom Labels 標籤設定

接著我們切換到 Setting 頁籤 > 「 Custom Labels 」區塊,這裡可以設定後台的全部標籤。

沒有一定要輸入什麼,依照站長習慣填入標籤,或是使用預設設定也可以:)

如果在變更之後,想切換回預設的英文標籤,設定為空白後儲存即可。

線上課程平台架設 :Custom Labels 後台標籤設定

小提醒:此區塊是更改後台的標籤字,如果前台有英文字需要進行翻譯、調整,可參考 Loco Translate 外掛教學 來進行前台字串調整~

因為後面的幾項設定區塊,台灣的站長不太會使用到,也不會影響到線上課程網站的架設,我就不一一介紹了。

若在其他設定區塊有使用上的疑問,歡迎留言詢問唷:)

恭喜大家完成了第一步的全站設定,我們一起前進下一章節!


課程面板完整設定

這個章節,我會教大家認識課程面板的相關使用設定,並帶領大家新增一門完整的課程。

這些功能介紹會包含:課程總覽、課程章節、單堂小課程、作業上傳、測驗等 .. 重要功能唷,所以大家要好好學習這一章節!

準備好的話,我們就馬上開始吧~

課程總覽(Course)

第一步,我們要先來新增課程總覽,也就是課程總簡介的部分。

課程總覽新增

我們先到 LearnDash LMS > Courses > 選擇「 Add New 」新增一個課程總覽(培訓班)。

LearnDash 新增第一個課程總覽

進入編輯頁面,填入課程主標題、課程內容大綱。

這邊還需調整:永久連結的網址代稱(需設置英文或數字,否則前台網站會無法正常顯示)、課程分類、課程標籤。

LearnDash 輸入課程簡介、修改永久連結等 .. 設定
LearnDash 輸入課程簡介、修改永久連結等 .. 設定

接著設定精選圖片,因為精選圖片之後會呈現在前台課程列表上,所以尺寸以及設計很重要唷

全部變更完成,可先按「 發布 」或是「 更新 」儲存課程總覽設定。

LearnDash 變更課程總覽精選圖片

我們前往課程總覽的網址檢查前台網站,發現成功新增第一門大課程囉:)

線上課程平台架設 :成功新增第一門課程總覽!

太好了~我們距離課程網站的建置成功邁出第一大步,那我們先回到後台,繼續相關設定吧!

課程總覽設定

切換到「 Settings 」面板,這邊我們可以為這堂課程設定:內容顯示權限、付款設定、課程先決條件等 .. 。

先看第一個區塊:「 Display and Content Options 」。這個區塊可以設定課程教材說明、顯示權限,如下圖所示:

Display and Content Options 內容顯示設定
  • Course Materials:課程教材,可選擇是否顯示課程所需材料供學員參考。
  • Course Certificate:證書,設定完成該門課程學員可獲得的證書。
  • Course Content:閱覽該門課程的權限,是否對外開放 / 只限註冊會員預覽。
  • Custom Pagination:在底頁顯示的章節+單堂課程數量,若無特別需求維持預設即可。

若是有設定課程教材 / 其餘資料,會在前台網站新增一個「 Materials 」切換按鈕,可查看該課程需要準備的物品:)

線上課程平台架設 :前台顯示切換教材按鈕

我們回到 Course 設定,往下看第二個區塊:「 Course Access Settings 」。

這裡可操作訪問者 / 會員對課程的訪問相關權限等 .. 設定。

Course Access Settings 設定課程付費、此門課程的先決條件
  • Access Mode:可設定訪問這門課程的權限,新增付款方式(後續章節會有詳細教學)。
  • Course Prerequisites:開啟訪問這門課程必須先學習某些課程的功能。
  • Any Selected:學習任一門被選擇課程,即可學習此門課。
  • All Selected:學習所有被選中課程,才可學習此門課。
  • Courses to Complete:選擇必須先學習的課程。

訪問課程權限關乎到付款設置,會在後面的章節進行詳細說明,這邊我們先跳過不談。

往下的選項是「 課程先決條件 」,開啟過後可設定學習此堂課程的必要條件,也就是學員必須先學習某些課程,才可開始學習此堂課。

以烘焙教室來舉例,可能有站長希望學生在學習「 蛋糕食譜 」之前,必須先學會「 揉麵團 」、「 打發奶油 」課程,那便可以在這裡設定先決課程。

接著往下可以設置:課程積分、課程訪問期限,如下圖。

Course Access Settings 設定課程積分、課程訪問期限

課程積分可以當獎勵學生學習的額外項目,是否設置可依照站長的需求。

付費 / 註冊後幾天刪除課程訪問權限,可以結合多種課程促銷方案,例如:免費試用、期間限定課程等 .. 銷售方式,讓站長自由發揮:)

接著我們往下看到:「 Course Navigation Settings 」區塊,這裡可設定該堂課程的學習形式,分為:自由、線性兩種模式。

「 自由 」模式可讓學員自由選擇學習課程的順序,而「 線性 」模式則是必須照著章節順序學習。

Course Navigation Settings 設定學生學習進展方式

以上就是課程總覽(Course)的全面設定,完成設定後,我們選擇「 更新 」儲存,繼續進行下一步驟!

主課程 / 課程章節(Lesson)

建立+設定好課程總覽後,我們的下一步就是建立+設定主課程,也就是課程章節的部分。

課程章節新增

我們一樣在 Course > 切換「 Builder 」面板 > 「 New Lesson 」按鈕 > 輸入主課程(課程章節)名稱 > 按下「 Add Lesson 」。

成功新增一個附屬於課程總覽下的課程章節。

LearnDash 新增第一堂主課程章節

記得每次新增章節過後,都要按下「 更新 」儲存設定唷。

接著,我們示範如何填寫課程章節的內容~

按下課程章節旁邊的「 Edit 」。

LearnDash 準備變更課程章節內容

我們會跳轉到此項課程章節的編輯頁面,輸入課程章節介紹,設定永久連結(不設定永久連結會無法連結至課程章節頁面)。

同樣也可設定標籤+分類(不一定要設定,各站長可自行決定)。

LearnDash 變更課程章節內容+永久連結設定

記得要按下「 更新 」儲存剛剛填寫的課程章節內容。

成功新增~我們可以到前台查看剛剛新增的課程章節。

線上課程平台架設 :成功新增第一個課程章節!

可以看到「 01. 馬卡龍烘焙方法 」課程章節,附屬於「 如何製作馬卡龍 」課程總覽之下,還出現有標記學習完成的按鈕「 Mark Complete 」。

當學生學習完整個章節,按下完成按鈕,總進度便會前進一格。

在成功新增第一個課程章節後,我們馬上來學習如何設定課程章節吧!

課程章節設定

回到 Lesson 頁面 > 切換到「 Settings 」面板,我們可以對該課程章節進行細節設定。

第一個區塊,同樣是「 Display and Content Options 」,也就是內容及顯示設定,不過課程章節與課程總覽的設定項目是不同的唷~

詳細如下圖說明:

Display and Content Options 課程章節教材、影片相關設定

教材部分,與課程總覽( Course )一樣,可新增該章節所需要教材 / 資料。

影片部分,我們可以使用網址、上傳 iFrame 、短代碼等 .. 形式,將影片嵌入至章節,設定完成章節及附屬單堂課程之前或之後必須閱覽影片,以及各種播放設定。

往下的設定還有:作業上傳、課程計時器功能。

Display and Content Options 課程章節作業上傳、課程計時器功能

作業上傳功能開啟後,學員可以在課程章節處上傳作業,在設定裡可調整:檔案格式及大小、積分獎勵、自動 / 手動批改,作業上傳次數、學生可否刪除作業等 .. 設定。

課程計時器是限定學生在一定時間內,不能按下完成按鈕,將該章節標記為學習完成。

小備註:影片、作業、時間限制這三個功能,每個課程章節只能選擇一項設定唷!

最後一個區塊「 Lesson Access Settings 」,可調整:課程章節附屬、訪問者閱覽權限、發布日期。

Lesson Access Settings 調整課程章節附屬、訪問者閱覽權限、發布日期。
  • Associated Course:指定該課程章節附屬於某項課程總覽下。
  • Sample Lesson:範例課程。即使課程設定付費,也可讓未付費的使用者學習,作為參考。
  • Lesson Release Schedule:課程章節發布日期,可設定三個時間點:立即發布、會員註冊幾天後發布、指定日期統一發布。

這些設定可以配合銷售方案,來進行更細節的操作唷;)

全部設定完成,記得點選「 更新 」儲存課程章節內容設定。

接著我們回到 Course > 找到現在正在設定的課程總覽 > Builder ,來新增附屬在課程章節(Lesson)下的單堂小課程(Topic)。

單堂小課程(Topic)

回到 Builder ,開始新增+設定課程章節裡的單堂小課程吧!

單堂小課程新增

我們找到想新增單堂小課程的課程章節 > 選擇下箭頭打開 > 按下「 New Topic 」> 輸入小課程名稱 > 「 Add Topic 」新增。

LearnDash 新增附屬於課程章節下的單堂小課程

我們可以持續加入單堂小課程,這邊我依序新增了兩堂小課程。

LearnDash 持續新增附屬於課程章節的單堂小課程

接著我們可移動到想編輯內容的小課程上,選擇「 Edit 」進行內容變更。

點選「 Edit 」進入變更單堂小課程內容頁面

進入變更頁面後,我們同樣輸入單堂課程內容,並且記得變更永久連結,都完成之後,記得要按「 更新 」儲存。

課程分類、課程標籤,同樣新增與否站長自行決定即可:)

新增單堂小課程內容、設定永久連結代稱

其他的單堂小課程,也可以依照上面教學,將內容編輯填寫完成。

單堂小課程設定

接著我們切換 Settings 面板,來查看單堂課程的設定。

單堂課程的設定與課程總覽、課程章節基本上功能重複,大致如下圖:

單堂小課程相關設定

因為相關功能與課程章節大致相同,我就不再贅述,站長們可以對照課程章節的設定功能去做相對應調整唷:)

設定完成,可以按「 更新 」儲存,接著一一去設定其他單堂小課程。

測驗(Quiz)

回到 Course > Builder,我們一樣使用 Builder 面板新增測驗功能。

測驗&題目新增

點開下箭頭 >「 New Quiz 」按鈕 > 輸入測驗題目 >「 Add Quiz 」成功新增一項測驗!

LearnDash 新增測驗

新增測驗後,我們可以隨意拖動測驗的位置,按住拖曳到「 1-1 準備材料 」小課程底下。

測驗不一定要附屬在小課程裡,也可以在小課程之外,可依照自己使用習慣做調整。

可拖曳測驗至任意位置

接著我們同樣按下「 Edit 」變更測驗內容+新增題目,填寫測驗內容、修改永久設定,接著按下「 更新 」儲存。

填寫測驗內容+修改永久連結

新增一份空白的新測驗後,我們還要為這份測驗新增題目。

LearnDash 題目類型有許多種,大致分為:單選題、多選題、簡答題、排序題等 .. 多達 8 種題目類型可讓測驗卷有多樣化的變化。

在測驗中新增題目:切換到「 Builder 」面板 > 「 New Question 」按鈕 > 輸入題目 > 「 Add Questuon 」新增。

新增測驗底下的第一個題目

成功新增第一道題目後,我們就來設定題目的類型以及選項、答案吧!

新增題目後,選擇下三角打開題目,找到「 Question 」旁邊的藍色鉛筆輸入題目,最右邊的下拉選單可以選擇題目類型,以及答完題目可或得的積分。

答案的部分,按下「 New answer 」可以新增答案,旁邊的「 Correct 」可設置該題目的正確答案。

題目+答案新增及設置

都設定及儲存完成後,我們可以繼續新增題目,直到整份測驗卷都完成:)

測驗卷完成後,我們到前台查看測驗卷吧!

測驗新增成功!

太好了,測驗卷成功新增~

以上就是新增+設定一門完整的課程功能介紹,相信看完這個章節,你一定對如何新增多層課程得心應手啦:)

小備註:除了在課程總覽(Course)的 Builder 建立課程章節、單堂小課程、測驗外,也可以在 LearnDash 後台進入相對應的頁面來調整這些物件唷~


課程頁面風格化設計

預設的課程頁面使用古騰堡頁面編輯器,本身的頁面編排就很精美。

不過,我們也可以使用別款頁面編輯器,來更加美化課程頁面。更多 頁面編輯器推薦清單

這邊我以 Elementor 做一些簡單示範:)

我們重複一樣的步驟,新增課程總覽(Course)頁面,輸入標題及內容,設定永久連結、新增精選圖片等 .. 。

完成後我們選擇「 使用 Elementor 」按鈕進行編輯。

新增新課程總覽頁面

進入 Elementor 以後,我們可以依照喜好添加多種欄位、元素設計,讓課程頁面變得更豐富精美:)

使用 Elementor 製作更精美的課程頁面

如何使用 Elementor 進行更精緻的頁面設計,可以參考教學文章:Elementor 全面中文指南


首頁課程列表上線

逐步建立好課程,相信你一定會很好奇,我們該如何顯示課程列表在前台網站供訪問者 / 學員預覽呢?

就跟商品陳列一樣,我們需要製作一個陳列課程的頁面。

我們可以安裝 LearnDash 附件,並且使用 Elementor 在頁面上新增課程列表短代碼,來完成精美的課程列表頁面:)

Setp 1:安裝 LearnDash Course Grid 附件

第一步,我們先安裝 LearnDash 提供的附件:LearnDash Course Grid 。

LearnDash > Adds-on > 找到 LearnDash Course Grid > 選擇「 Install Now 」,安裝+啟用 LearnDash Course Grid 。

LearnDash Course Grid 附件安裝+啟用

完成安裝+啟用後,我們可以到現在使用模板的首頁檢查,發現課程列表變成精緻的網格排版囉:)

線上課程平台架設 :首頁課程列表成功轉變成精美的網格形式~

如果不是使用同組模板的站長不用擔心,下一個步驟,我會教大家使用短代碼 / 小工具,將課程列表新增至頁面。

你可以將課程的網格列表依據喜好,放置在頁面上任意位置。

Setp 2:添加短代碼 / 小工具至頁面

到 WordPress 後台 > 頁面 > 新增頁面 ,我們輸入標題為課程列表。

接著打開區塊小工具,在「 LearnDash LMS Blocks 」列表中,找到「 LearnDash Course List 」小工具,拖曳進去頁面。

線上課程平台架設 : WordPress 頁面新增課程列表小工具

別忘記新增完還要修改永久連結,接著就可以儲存+發布頁面囉!

我們到前台檢查,發現已經新增了一個精美的課程列表頁面:)

線上課程平台架設 : WordPress 頁面新增課程列表成功!

除了使用「 LearnDash Course List 」區塊小工具以外,我們還可以使用短代碼: [ld_course_list col=3 order="asc"]

這組代碼可以應用在 Elementor 等相關的頁面編輯器,在各個不同頁面裡嵌入課程列表。更多 Elementor Pro 自訂程式碼功能

Step 3:課程網格設計

我們可以修改網格中的課程介紹文字、標籤字、報名按鈕文字,讓課程列表更符合中文使用者的使用習慣。

首先,到 LearnDash > Course > Settings 面板,滑到最下面,會發現多了一個「 Course Grid Settings 」區域。

在這個區域,我們可以填入:介紹文字、標籤文字、按鈕文字。都填寫完畢,按「 更新 」儲存。

線上課程平台架設 :Course Grid Settings 修改網格課程列表設計

我們可以到前台檢查,發現網格列表文字修改成功,右邊則是未修改過的網格課程;)

線上課程平台架設 :修改網格課程列表成功!

小備註:除了 LearnDash Course List ,還有其他好用的 LearnDash 附件或第三方外掛,可以在 LearnDash 的 Adds-on 列表裡找到更多唷~


課程付款設定(串接 WooCommerce 金流)

線上課程平台架設最重要的一個功能,就是付款功能啦。

LearnDash 關聯的付款方式有:PayPal、Stripe、WooCommerce 等 .. 。但因為地理位置的關係,前兩項金流服務非歐美地區的網站可能較少用到,因此我們就以 WooCommerce 來做付款功能。

這個章節,我會帶領大家下載 WooCommerce 外掛、LearnDash 與 WooCommerce 的附件、並且新增商品+連結課程,完成整堂課的付款設定。

準備好的話,就開始囉:)

Step 1:安裝+啟用 LearnDash 與 WooCommerce 的關聯附件

首先到 LearnDash > Adds-on ,找到「 WooCommerce for LearnDash 」安裝+啟用。

安裝+啟用 WooCommerce for LearnDash

Step 2:安裝+設定 WooCommerce

接著我們到外掛 > 安裝外掛 > 找到 WooCommerce 安裝+啟用。

安裝+啟用 WooCommerce

接著到 WooCommerce > 設定,找到「 一般 」面板,貨幣選項設置為新台幣。

調整 WooCommerce 貨幣設定為新台幣

切換到「 付款 」面板,這邊的設定可依照站長的習慣自行調整。更多 WooCommerce 金物流設定

WooCommerce教學 :WooCommerce 金流設定(付款方式)
線上課程平台架設 :WooCommerce 金流設定(付款方式)

小備註:台灣站長可以參考 WooCommerce 綠界外掛RY WooCommerce Tools 外掛 教學,來新增更貼近台灣消費者習慣的金物流唷!

接著切換「 帳號及隱私權 」面板,關閉「 允許客戶免帳號下訂單 」。

並開啟以下選項:「 允許顧客在結帳過程中登入現有的帳號 」、「 允許客戶在結帳過程中建立帳號 」、「 允許客戶在『我的帳號』頁面上建立帳號 」。

剩下選項可依據站長需求評估開啟或關閉,這些是與後續的會員功能有關的設定。

開啟及關閉會員相關設定選項

全部設定完成,記得按「 儲存設定 」更新。

小備註:關於 WooCommerce 其他詳細設定,可以參考:WooCommerce 中文完整教學

Step 3:新增+設定 WooCommerce 商品

WooCommerce 設定完成後,我們可以來新增課程商品囉。

到 WorcPress 後台 > 商品 > 新增 > 輸入課程商品資訊及價錢、設定商品永久連結、新增商品圖片。

線上課程平台架設 :新增+設定 WooCommerce 商品

接著最重要的兩步驟:「 商品資料 」下拉選單選擇「 Course 」「 LearnDash Courses 」選擇相對應的課程。更多 WooCommerce 商品種類介紹

這兩個步驟千萬不能漏掉唷,否則課程就無法找到這個商品結帳頁面。

線上課程平台架設 :商品類別選擇「 Coursr 」、連結要販售的課程

設定完成後,我們就可以選擇「 發布 」新增此 WooCommerce 課程商品。

我們查看商品頁面,發現成功新增:)

線上課程平台架設 :課程商品頁面新增成功!

Step 4:課程串接 WooCommerce 商品

成功新增課程商品後,我們需要將這個商品頁面連結到我們的課程,那該怎麼做呢?

首先,到 Course > 找到想串接的課程進行編輯。

前往 Course 找到想要串接的課程總覽

進入編輯頁面後,切換「 Settings 」面板 > 下滑找到「 Course Access Settings 」區塊。

將「 Access Mode 」選項切換為「 Closed 」> 「 Course Price 」填入課程金額 > 「 Button URL 」貼上該課程商品連結,設定完畢後按「 更新 」儲存設定。

Course Access Settings 區塊進行課程與 WooCommerce 商品串接

我們前往課程頁面檢查(記得使用無痕頁面或登出管理員模式),發現課程成功被鎖住,並且新增了金額、付款按鈕~

線上課程平台架設 :完成課程結帳設定~

太棒了,我們成功完成課程頁面的付款設置囉~

小備註: WooCommerce 結帳頁面的修改,可以參考: WooCommerce 自訂結帳表單教學


會員 / 學生介面

先恭喜大家完成課程+付款的所有設置,我們離成功建置線上課程網站只差一點點啦;)

線上課程平台架設還有一個重點,就是提供已付費會員 / 學生頁面及面板,供學生查看個人資料、已購買課程、課程進度等 .. 。

這個章節,我會帶領大家新增一個 WordPress 頁面,並將會員頁面新增至主選單,接著再讓大家了解我們如何使用 WordPress 後台管理會員。

新增會員頁面

LearnDash 提供會員面板小工具,可添加至頁面,完成會員專區的頁面設置。

Step 1:新增頁面+會員小工具

首先,到 WordPress 後台 > 頁面 > 新增頁面,填入頁面標題。

在區塊的「 LEARNDASH LMS BLOCKS 」列表裡,找到「 LearnDash Profile 」區塊小工具,拖曳或點選新增至頁面。

線上課程平台架設 :使用 WordPress 內建頁面+區塊小工具新增會員專區頁面

接著還有一個重要的區塊小工具,就是會員的登錄 / 註冊、登出按鈕。

我們找到「 LearnDash Login 」,將此區塊小工具新增在會員個人資料的下方,確保會員可以隨時登入 / 登出。

線上課程平台架設 :新增會員登入 / 登出按鈕至會員專區頁面

最後修改永久連結代稱,其餘設定站長可依照需求自行調整,按下「 發佈 」新增頁面。

線上課程平台架設 :設定頁面永久連結+發布會員專區頁面

Step 2:新增主選單

新增完會員專區頁面,我們就可以讓頁面上線囉。

WordPress 後台 > 選單 > 勾選「 會員專區 」頁面 > 選擇「 新增至選單 」> 「 儲存選單 」即可。

別忘記確認自己修改的是否為主選單唷。

線上課程平台架設 :會員專區頁面新增至主選單

Step 3:檢查前台頁面

設定完成,我們到前台觀看+檢視成果吧:)

線上課程平台架設 :成功新增會員專區頁面+主選單~

來檢查看看登入按鈕功能。

使用無痕頁面連結進會員專區頁面,發現出現會員登入按鈕,點下後跳出會員登入面板:)

線上課程平台架設 :會員專區登入按鈕

如何管理會員

在新增了會員專區以後,你會不會好奇,站長該如何去管理這些會員呢?有了會員頁面,可是會員該如何進行註冊?

這個章節,我會先帶領大家進行 WordPress 後台設定,新增註冊頁面,並且讓大家了解 LearnDash 與 WordPress 會員是如何串接,又該如何管理。

如何新增註冊頁面

我們在全站設定章節中提到,必須將「 一般設定 」中的「 LearnDash 會員註冊功能 」開啟。

確定開啟該功能之後,我們還要再開啟 WordPress 的相關設定。

在 WordPress > 設定 > 一般,找到並開啟「 任何人均可註冊 」選項。

線上課程平台架設 :開啟「 任何人均可註冊 」選項

接著我們到前台登入頁面檢查,發現成功跳出註冊頁面:)

線上課程平台架設 :登入彈跳頁面成功出現註冊欄位

小提醒:有時會無法跳出註冊欄位,可以刪除各項快取重新讀取網頁。

如何管理註冊會員

當會員一一建立後,我們該如何去管理這些會員呢?

LearnDash 的會員系統是直接串接 WordPress 的,所以我們可藉由 WordPress 的使用者管理頁面,管理學生會員。

前往 WordPress > 使用者 > 全部使用者,我們選擇其中一位學員(訂閱者)進行編輯。

線上課程平台架設 :前往 WordPress 使用者編輯+新增會員

往下滑可以看見該名使用者的課程相關進度,如下圖:

線上課程平台架設 :在 WordPress 中可以檢視+修改會員(使用者)資訊

在使用者系統,我們還可以修改使用者名稱、信箱、密碼等 .. 資訊,詳細教學可以參考: WordPress 後台教學 使用者相關章節唷!


安裝+啟用 ProPanel(分析數據)

前面我們提過,選擇 LearnDash 的「 PLUS PACKAGE 」方案以上的站長,會多出一個「 ProPanel 」功能。

這個功能可以分析學生數量、購買課程數、現在需要批改的作業、學生學習情況等 .. 數據,幫助站長更好的管理線上課程平台。

那具體該如何使用呢?

這個章節,我們會帶領大家安裝啟用+簡單說明面板功能:)

Step 1:安裝+啟用 ProPanel

前往 LearnDash 會員專區,進行登入,找到「 ProPanel 」選項,選擇「 Download 」。

前往 LearnDash 會員面板下載 ProPanel

下載完成後,前往 WordPress 後台 > 外掛 > 安裝外掛 > 上傳+啟用 ProPanel 檔案包。

前往 WordPress 後台上傳 ProPanel 檔案包

Step 2:啟用 ProPanel 憑證

啟用完成,我們需要啟用 ProPanel 憑證才能夠觀看數據。

在 LearnDash 會員後台我們先找到 ProPanel 憑證,這是等等要貼到 WordPress 後台啟用的。

LearnDash 會員面板找到 ProPanel 憑證

下一步,我們前往 LearnDash > Settings > ProPanel License ,填入購買 Email 以及 ProPanel 憑證。

填寫+啟用 PraoPanel 憑證

這樣就完成 ProPanel 啟用囉。

Step 3:查看 ProPanel 提供數據

安裝+啟用 ProPanel 完成,那麼我們要如何找到 ProPanel 提供數據呢?

可以前往 WordPress 後台 > 控制台,往下滑會看見多出了四個面板:Overview Widget、Activity Widget、Reporting Widget 以及 Chart Widget。

除了可以查看學員人數、總課程數量,還能夠實時查看哪一堂課程最近的學習人員,個別學生的學習狀態、成績,需批改作業數量等 .. 多功能。

ProPanel 可以觀看各項分析數據

小備註: ProPanel 是 LearnDash 「 PLUS PACKAGE 」方案以上才可使用的功能,會分享此功能是希望可以讓站長依照自身需求,來決定如何購買方案~

以上就是完整的 LearnDash 教學,大家都學會了嗎;)


常見問題

自架網站需要準備什麼?

網站能正常運作,就需有「 個人網域 」+「 虛擬主機 」,這是基本配備。更多 WordPress 優質主機

這也是每個網站主都需負擔的小投資,沒有例外。

差別是,跟著我的架站教學,你可用最少的預算,建置你的網站:)

LearnDash 是什麼?

LearnDash 是一款老牌且強悍的 WordPress 線上課程平台架設外掛,目前有許多 500 強公司及大學正在使用,是需要付費使用的功能外掛。

LearnDash 具備所有線上課程外掛必備功能:課程、作業、測驗、會員等 .. ,同時具備多樣化且直覺的功能設計。

最重要的一點, LearnDash 結合 WooCommerce 可供串接,方便台灣的站長進行付款設定:)

LearnDash 適合所有類型的線上課程平台嗎?

是的, LearnDash 適合所有類型的線上課程平台,這也是為什麼我推薦它的原因。

除了 LearnDash 本身多元的功能外,我們還可以找到豐富的附件、外掛,讓線上課程平台變得更豐富多元。

只要善加利用 LearnDash 功能,沒有你架不出來的線上課程平台:)

LearnDash 有付費功能嗎?

LearnDash 設置有 WooCommerce 串接附件,可以使用 WooCommerce 完成線上付款功能方式。更多 WooCommerce 是什麼 、 WooCommerce 基礎教學指南 。

台灣的站長還可以選擇在 WooCoomerce,連結 綠界官方外掛 或是 RY WooCommerce Tools 外掛 ,讓付款變得更加方便。


WordPress 學習資源

學習網站架設+網路行銷的過程中,或許會遇到一些解決不了問題,可以在下方留言給我,我會盡力協助解答!

接下來,額外分享 3 項實用資源,可有效幫助大家做學習。

資源一:WP 高手架站課(線上課程)

這門 WordPress 高手架站課 濃縮了犬哥多年在網頁設計的實戰經驗,從網頁設計觀念、WordPress / WooCommerce 後台操作、熱門主題.外掛教學、品牌網站 / 部落格 / 電商網站,3 大類型網站建置方法等 .. 豐富內容,一次教會你。

課程內容非常的紮實(長度超過 20 小時)。如果你剛學習自架網站,這門課程可以讓你用最快的速度,就學會這項技能!

點擊下面了解課程,立馬擁有自己的品牌網站,並增加網路曝光度!

WordPress 高手架站課|一堂課讓你變架站高手!
WordPress 高手架站課|一堂課讓你變架站高手!

資源二:SEO 排名飆升課(線上課程)

網站建立完畢後,但卻沒有流量怎麼辦?或是只能靠花錢投廣告才會有訂單?

這門 SEO 排名飆升課,教你掌握關鍵字策略、SEO 文章撰寫、多種實戰 SEO 技巧、透視對手 SEO 策略、SEO 必備軟體教學、最新 AI SEO 應用等 ..,大幅提升行銷能力。

點擊下面了解課程,帶你衝上 Google 排名第一頁,大量提升網站營收和訂單!

SEO 排名飆升課|帶你衝上 Google 第一頁!
SEO 排名飆升課|帶你衝上 Google 第一頁!

資源三:犬哥數位(專業 WordPress 網頁設計公司)

如果你沒時間自己架站、或是遇到解決不了的網站問題。歡迎洽詢 犬哥數位(WordPress 網頁設計公司),請專家製作會更有效率!

WordPress 網頁設計公司|犬哥數位

資源四:更多犬哥教學資源

如果你在操作過程中遇到問題,可以加入 犬哥研討社(目前有超過 9000+ 團員)。除了有網友一同幫你解惑外,犬哥團隊也會同步在社團幫助大家。

如果你想學更多網頁設計、數位行銷知識,可關注 YouTube 頻道,或是歡迎追蹤 犬哥網站 IG

犬哥網站社團
犬哥網站社團

關於作者

犬哥網站:網頁設計 x 網路行銷教學平台

犬哥網站

我們分享 WordPress 架站 x 網路行銷知識,不需會任何程式技術,就能自己建立各種網站。 搭配豐富的網路行銷教學,幫助你被更多人看到。 趕快跟著我們的腳步,開始學習吧:)

在〈線上課程平台架設 :如何製作線上教學網站(詳細流程+推薦工具)〉中有 32 則留言

  1. 您好 站長
    我想架設學習語言的網站
    想要知道如何加入zoom這個軟體
    購買課程結帳頁面可否加入教材一起販售一起結帳
    若是使用信用卡美金結帳 除了先設立公司銀行帳戶 信用卡金額要如何入公司帳戶 是像匯款一樣匯入帳戶嗎
    老師開放選課的時間表格如何設置
    如何設定教師頁面供學生看教師自我簡介包含youtube影片和文章自我介紹等等
    如何連結youtube或上傳影片。很多地方不懂 請您解惑。謝謝您

    1. 犬哥網站

      嗨,Eliza,

      關於如何將 LearnDash 與 Zoom 串接,可以參考看看 LearnDash 官方開發的附件:

      LearnDash 與 Zoom 串接附件

      教材的部分,可以參考組合商品試試看,或是尋找相關的商品銷售外掛,具體操作,可以參考網站上的 WooCommerce 常見商品類型介紹+設定操作

      信用卡相關問題,因為這是外幣匯入,可能需要諮詢你的第三方金流或者是你所使用的銀行唷。

      如果想要開放老師選課,可以參考: 預約網站設計教學 或者參考 LearnDash 與 Google 日曆 的官方串接附件

      教師頁面可以自行新增 WordPress 頁面設計,具體可以使用頁面編輯器,藉由編輯器加入影片、自我介紹區塊來完成,這邊有一份 WordPress 頁面編輯器推薦清單 可以參考。

      上傳影片的部分,在本文的「 課程章節(Lesson) 」小章中有教學唷。

      在 Lesson 的設定中,找到影片選項,將網址貼上即可,需要特別注意的是,如果有選擇上傳影片在課程章節,就無法在該章節中設置限時、上傳作業功能唷。

      希望我的回答有幫助到你:)

  2. 站長您好,
    想請問如果已經有一個一般的部落格wordpress網站,可以直接安裝learndash並將網站更改成線上課程網站頁面嗎?
    謝謝您!

    1. 犬哥網站

      嗨,jeffin,

      我的理解是,你希望網站保留部落格功能同時新增線上課程,

      可以但不太建議這麼做。

      原因是,後續兩邊的內容持續新增,可能會使網站內容過於肥大,會使加載速度變慢,降低速度評分,從而拉低網站整體 SEO 分數。

      比較建議的做法是,將部落格跟線上課程網站分開兩個網站建置,就像我們網站一樣,部落格以及架站服務是分開的兩個網站:)

      如果虛擬空間方案有購買多個網站服務,可以參考: Bluehost 教學 的「如何新增子網域」章節學習新增多個網站~

  3. 犬哥!謝謝你的攻略~ 非常實用!!!!
    我有一個延伸問題 ,因為我商品很少,所以加了直接結帳“Direct Checkout for WooCommerce”的外掛,想要縮短結帳流程,但是卻因為購物車是空的,所以無法直接結帳 ,彷彿是在鬼打牆…. 請問有解決方法嗎? 感謝!!

    1. 犬哥網站

      嗨,TAKO,

      蠻有可能是外掛衝突的,建議你可以安裝 Health Check 健康檢查外掛來進行檢查,

      或是詢問 Direct Checkout for WooCommerce 外掛開發者能否支援你唷:)

  4. 犬哥您好,

    很喜歡你整理的教學,收穫很多。

    現況:
    公司的線下課程原本是使用商務版+WooCommerce做銷售,目前除了線下實體課程,還開發了很多線上課程。

    提問:
    想請問犬哥LearnDash適合同時放置線上及線下課程嗎?若這樣可行的話,是不是要取消商務版+WooCommerce,改用LearnDash會比較好呢?

    以上,再請解惑了,謝謝喔。

    1. 犬哥網站

      嗨,Ady,

      看起來你的公司目前應是使用 WordPress.com,如果需要使用 LearnDash,建議你使用 WordPress.org,

      因為 LreanDash 的功能,無法在 .com 實現。

      可以參考:WordPress.com 和 WordPress.org 比較,了解兩者差異唷!

      如果確定要使用 WordPress.org 搭配 WooCommerce + LearnDash ,是可以做到線下+線上銷售課程的,

      將線上課程放置於 LearnDash,線下課程放置在 WooCommerce 商品即可。

      1. 非常感謝回覆,也謝謝提醒,原來公司用的是WordPress.com (@@”)。

        另外有延伸問題想再詢問您喔:

        Q1|如用WordPress.org架站,每年固定產生的費用,是不是指以下這樣呢?
        個人網域(年付)+虛擬主機(年付)+WordPress.org(買一年或買三年)

        Q2|
        現況:目前公司有兩個WP網站
        a|WordPress.com 進階版 > 形象網站 > 作品 / 文章 / 門市…等相關品牌資料。
        b|WordPress.com 商務版 > 教學網站 > 銷售線下課程+學院活動等。
        問題:如確定需要使用 WordPress.org 搭配 WooCommerce + LearnDash解決線上及線下課程問題,那我們還有一個形象網站(之前好像是因為功能受限才分開),搬家後是放在跟線上及線下同一個網站就可以嗎?這部分會怎麼建議我們呢?

        以上,不好意思,因為是新手問題有點多,非常感謝您。

        1. 犬哥網站

          嗨,ADY,

          問題一,如果選用 WordPress.org,只需要付出:個人網域+虛擬主機的租用費用即可,

          WordPress.org 本身是完全免費的開源軟體唷,

          具體費用可參考:WordPress 費用介紹

          問題二的部分,

          這部分完全是看你們的需求,可以只建立線上及線下課程的購物網站,將形象網站放在原本的網址,也可以兩者整合為一個網站,

          只是需要注意網站搬家的問題,以及網域的設置問題,

          以長遠來看,建議你把兩個網站都挪到 WordPress.org,申請一個主網域即可,第二個網站可以使用子網域建置,

          主網域可以使用品牌名稱,例如:apple.com,用於你的形象網站;

          主網域之下的子網域,可以命名為:shop.apple.com,用於你的課程購物網站,

          這樣既方便管理,也可讓消費者更易於辨別你的品牌,

          具體教學可以參考:

          如何從 WordPress.com 搬家至 WordPress.org

          在 Bluehost 設置子網域教學

          1. 謝謝Luna的解說,有方向了。

            另外再請問在搬家的過程,如申請主機、網域(或延伸的子網域)等這些,在申請上面是註冊完繳完費用就以直接使用的嗎?有沒有什麼中間要天數的等待期呢?

            因為在預估搬家的時程,以上,謝謝喔。

          2. 犬哥網站

            不用客氣唷~

            虛擬主機搬家+網域申請基本上都會很順利,不過有時搬家過程可能會遇到資料搬移不完全的問題,

            如果是資料越大的網站,越需要注意資料是否完整轉移,

            建議你可以依照原本網站大小,自行評估,不過會建議留 7 ~ 10 天好好完成網站搬家唷!

  5. 犬哥好,謝謝您寫的文章,真的獲益良多
    想請問一下,線上課程的影片檔案,會建議直接放在主機裡,還是另外找其他串流平台放置呢?看Learndash內建的presto player,影片放置的方式只有從媒體庫上傳,或是從Youtube或Vimeo上傳,但是YT會有被外傳連結的風險,而Vimeo又需要額外再收費,所以一直在思考要放在哪天比較推薦,畢竟線上課程的影片檔案大小也是好幾十G以上呀⋯⋯
    最近還有看到Cloudflare Stream Video的串流平台似乎收費蠻便宜的,不知道犬哥有沒有研究,希望可以獲得您的一些建議~非常感謝🙏

    1. 犬哥網站

      嗨,Sean,

      長遠來看,確實是不建議直接將影片放在媒體庫中,因為這樣會增加主機負擔,長久下來,網站速度就會減緩,

      我們沒有使用過 Cloudflare Stream Video,不過 Cloudflare 是一家不錯的 CDN 服務商,相信他的影音串流平台跟保護連結服務也會做得非常好,

      可以多方參考評價,再決定放上哪個第三方影音串流平台唷:)

      1. 感謝犬哥回覆,我後來研究跟多方考慮後,應該會傾向用Vimeo作為串流平台,原因是如果用Cloudflare的串流,是1,000分鐘的影片會每月收費5美金,而不是以影片大小計算,但是我看了國外論壇中他們團隊人員似乎有提到,影片大小不建議放超過200mb,所以看起來只能作為短影片的串流,另外他們有wordpress的外掛,但已經快一年沒更新而且介面是在很陽春又有不少問題。

        而Vimeo是最低每個月收費210台幣,價格沒比Cloudflare貴多少,UI跟後台又做得比較好而且還能很好地跟Presto player配合,更重要的是能夠限制在特定網域播放,又多了一個防拷的優點,所以看來可能還是以Vimeo作為串流比較好,所以也跟犬哥分享一下我的心得供參考~

        1. 犬哥網站

          嗨,Sean,

          太好啦!很開心你找到適合的串流平台,心得整理的部分也很詳細,謝謝你願意在犬哥網站部落格分享,相信一定能幫助到不少人~

          祝你架設網站順利,架站完成,若你願意,也歡迎到 FB 社團 跟大家分享架設成果唷~

  6. 站長 你好
    照著你的方式製作網站 十分受益良多 非常感謝
    在此有相關幾個架設線上課程平台的問題想詢問~
    1.上面你有建議使用learndash course grid作為產品頁面的element ,不過我發現這個外掛style變化無法有更多調整,想詢問是否有建議的其他外掛或是可以用woo commence 的pruduct 方式建立出較多變化的course boxes (串接部分是否會有難度?
    2.請問如果客戶要增加募資的功能,是否有推薦的外掛呢?謝謝(能串接woocommence 為佳)
    再麻煩你幫我解惑一下~謝謝

    1. 嗨,Katy,

      關於第一個問題,LearnDash 的顯示方式確實不多,可以參考 其他課程外掛推薦,找到適合的外掛進行設置。

      第二個問題,目前我們還沒有對募資功能進行研究教學,不過網路上有許多不錯的 推薦清單,都可以參考看看唷:)

  7. 犬哥好,謝謝發表這麼詳細的架站過程,讓我這新手獲益匪淺~~
    最近學著用learndash進行線上課程的設定時,遇到了沒法解決的問題,
    如果可以的話,再麻煩犬哥幫幫忙,感恩謝謝,
    (1)新會員在learndash的註冊頁面中完成註冊後,系統無法發出確認信
    learndash –> setting –> emails –> new user registration (該選項已勾選)
    理論上是不是勾選後,新會員註冊完成後就會發送信件通知設定密碼,但系統並不會自動送信
    (2)另外,新會員在learndash的前台註冊頁面中僅有出現user name與email的填寫欄位
    試著在以下路徑設定註冊者密碼設定欄位,然前台仍無法顯現
    learndash –> registration –> registration fields

    以上兩個問題,如果可以的話,再請您不吝解惑啊~~~謝謝~~~

    1. 犬哥網站

      嗨,Hsin,

      實際測試,發現是可以收到註冊信件的,有可能是你的系統註冊信進入垃圾郵箱,建議你可以再檢查一下,

      如果確實是進入垃圾郵箱,可參考 SMTP 外掛教學,進行信件設置,防止類似情況再發生。

      另外,LearnDash 內建似乎沒有你在問題二提供的路徑,LearnDash 本身的內建註冊欄位,也只有用戶名稱和帳號,如需變更,可參考 User Registration 外掛 幫助你更改表單欄位,這邊也有 外掛官方教學,供你參考使用唷:)

      1. 謝謝站長的回應啊,
        第一個問題,好像也不知道是甚麼原因,
        不過後來確實是加裝外掛WP MAIL SMTP解決的
        而第二個問題則是加裝外掛checkout field editor for woocommerce
        也是可以順利修改註冊者欄位,
        也跟各位分享,也再次謝謝犬哥網站的幫助。

        1. 犬哥網站

          嗨,HSIN,

          第一個問題,可能跟主機有關,如果你使用共享主機,就可能會不小心受到與你共用 IP 的使用者影響,

          若同一 IP 一次發送大量信件,會導致該 IP 的發信暫時被投入垃圾信箱,

          安裝 SMTP 外掛,就是告訴收信者你並不是會投地大量垃圾信件的一個好幫手。

          最後,感謝你的分享,沒想到這款外掛也可以變更 LearnDash 欄位,也恭喜你順利解決,相信這則留言一定也可以幫助不少有相似困擾的站長,再次感謝~

  8. 您好:
    您的資訊讓我受益良多非常感謝!
    想請問目前我的頁面在預覽時顯示課程是「一個一個直的排下來」,但在Elementor編輯時畫面卻是像您文章內那樣一格一格排列,想請問這個問題如何解決呢,謝謝~

    1. 犬哥網站

      嗨,Crimson,

      有時在後台的預覽畫面,跟前台顯示的不一樣,有許多原因,你可以先刷新快取試試看,

      但看文字不太理解你的意思,若有需求,也可前往 FB 社團,截圖貼上你的疑問,讓我們跟廣大網友更好幫助你進行解答唷:)

  9. 犬哥你好,我是wordpress新手,全靠你的文章我才能一步一步建立自己的網站,非常感謝你!不過最近遇到了一些關於Learndash問題,就是我跟著上面的指示有成功做出會員專區,但是不曉得可以在哪裡設置登出/登入以及我的賬號這些頁面,也怕用其他會員插件會跟learndash無法串聯,希望犬哥有時間可以解答一下,再次感謝!

    1. 犬哥網站

      嗨,Mandy,

      可以參考 Ultimate Member 外掛,新增登入、登出、我的帳號頁面,並新增在選單中,

      Ultimate Member 外掛跟 LearnDash 不會有衝突,可以放心使用,希望有幫助到你解決問題:)

  10. 犬哥您好,想問一下learndash
    前台顯示,只有英文嗎?
    因為照您的步驟,設定完成後,發現前台完成課程後,
    只有英文?有可能轉成中文嗎?對使用者比較友善

  11. 犬哥您好,我是Wordpress超級新手,想請問「永久連結的網址代稱」沒有出現該怎麼辦呢?我有爬了「WordPress永久連結 :對 SEO 優化良好的設定?」這篇文,按了「儲存成草稿」還是沒出現,是否有其他的地方可以更改呢? 感謝

發佈留言

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

返回頂端