การสร้างเว็บไซต์การจัดการการเรียนรู้ (LMS) ด้วย Divi

ฉันชอบเรียนคอร์สออนไลน์ มีบางอย่างเกี่ยวกับการเริ่มต้น e-course ที่ออกแบบมาอย่างดีและมีการจัดการอย่างดีพร้อมเนื้อหาที่ยอดเยี่ยม หากทำได้ดี e-courses เหล่านี้สามารถกระตุ้นให้คุณรู้สึกได้ถึงความสำเร็จ แต่การเรียนรู้จาก e-course ที่ยอดเยี่ยมและการสร้างหนึ่งเป็นประสบการณ์ที่แตกต่างกันโดยสิ้นเชิง และจากประสบการณ์ของผม การสร้างเว็บไซต์การจัดการการเรียนรู้หรือ E-Course อาจเป็นกระบวนการที่ท่วมท้น

ในโพสต์นี้ ฉันหวังว่าจะได้หลบเลี่ยงการข่มขู่ในการสร้าง e-course ของคุณเองโดยแสดงให้คุณเห็นถึงวิธีใช้แพ็คเลย์เอาต์การจัดการการเรียนรู้ที่สร้างไว้ล่วงหน้าของ Divi เพื่อสร้างเว็บไซต์ e-course ที่ใช้งานได้อย่างสมบูรณ์

ก่อนที่เราจะเข้าสู่การสร้าง นี่คือรายละเอียดของสิ่งที่เราจะทำสำเร็จร่วมกัน:

1. สร้างหน้าบทเรียนโดยใช้ชิ้นส่วนของเค้าโครงที่มีอยู่
2. สร้างเมนูหลักสูตรเพื่อแสดงในแต่ละหน้าบทเรียนที่แสดงบทเรียนทั้งหมดสำหรับหลักสูตร
3. ใช้ WP Complete Plugin เพื่อให้ผู้ใช้สามารถติดตามความคืบหน้าของแต่ละหลักสูตรได้
4. ใช้ปลั๊กอินจำกัดเนื้อหา Pro เพื่อตั้งค่าระดับสมาชิกทั้งแบบฟรีและแบบชำระเงิน
5. เรียนรู้วิธีออกแบบหน้าสมาชิกอย่างรวดเร็วเพื่อให้ตรงกับเว็บไซต์โดยใช้องค์ประกอบจากเค้าโครงที่มีอยู่
และอื่น ๆ…

และเพื่อสนองความอยากรู้ของคุณ นี่คือตัวอย่างย่อของหน้าบทเรียนที่คุณจะสร้างขึ้นด้วยปุ่มที่สมบูรณ์และแถบความคืบหน้าเหนือเมนูหลักสูตรในแถบด้านข้าง...

แต่ก่อนอื่น มาตั้งค่ากันก่อน

การสร้างเว็บไซต์การจัดการการเรียนรู้ (LMS) ด้วย Divi

สมัครสมาชิกช่อง Youtube ของเรา

กำลังตั้งค่าทุกอย่าง

#1 – ติดตั้ง Divi

ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง Divi เวอร์ชันล่าสุด และเป็นเรื่องดีเสมอที่จะมีธีมลูกที่ใช้งานได้เช่นกัน

#2 – อัปโหลด Layout Pack ไปยัง Divi Library ของคุณ

เราจะใช้ชุดเค้าโครงการจัดการการเรียนรู้ของ Divi (LMS) ดาวน์โหลดชุดเค้าโครง แตกไฟล์ และติดตั้งไฟล์ coding-school_All.json ลงในไลบรารี Divi ของคุณ จากนั้นสร้างหน้าใหม่เก้าหน้าโดยใช้เค้าโครงที่เกี่ยวข้องกันแต่ละหน้า

#3 – ติดตั้งและเปิดใช้งานปลั๊กอิน Restrict Content Pro

นี่คือปลั๊กอินที่เราจะใช้สำหรับฟังก์ชันการเป็นสมาชิกของไซต์ e-course เราจะใช้ข้อมูลนี้เพื่อตั้งค่าการสมัครสมาชิกหลักสูตรฟรีและพรีเมียม (ชำระเงิน)

#4 – ติดตั้งและเปิดใช้งานปลั๊กอิน WP Complete Pro

ปลั๊กอินนี้จะใช้เพื่อให้สมาชิก (หรือนักเรียน) ทราบถึงความคืบหน้าของพวกเขาเมื่อเรียนจบแต่ละบทเรียนของแต่ละหลักสูตร มีภาพวงกลมและกราฟแท่งสุดเจ๋งเพื่อแสดงความคืบหน้า ตลอดจนเครื่องหมายถูกข้างเมนูการนำทางที่เรียนเสร็จแล้วแต่ละบทเรียน

เมื่อคุณพร้อมแล้ว คุณก็พร้อมที่จะสร้าง e-course ของคุณแล้ว

มาเริ่มกันเลย.

เปลี่ยนชื่อหน้าหลักสูตร

ชุดเค้าโครงของคุณมาพร้อมกับเค้าโครงหน้าหลักสูตร

แต่ละหลักสูตรที่ระบุไว้ในเค้าโครงนั้นควรลิงก์ไปยังหน้าหลักสูตรเฉพาะซึ่งใช้เค้าโครงหน้าหลักสูตร (หากคุณวางแผนที่จะสอนหลักสูตรเหล่านั้นทั้งหมด)

หมายเหตุ: ขอให้สังเกตว่าฉันแทนที่ปุ่มในส่วนหัวของหน้าหลักสูตรด้านบนด้วยโมดูลวิดีโอ ด้วยวิธีนี้ฉันไม่ต้องเปลี่ยนเส้นทางไปยังหน้าอื่นเพื่อแสดงตัวอย่างหลักสูตร แค่ความคิด

ดังที่คุณเห็น ในตัวอย่างนี้ เลย์เอาต์ของหน้าหลักสูตรใช้หลักสูตรการออกแบบ UX ดังนั้นให้แก้ไขหน้าและเปลี่ยนชื่อหน้าหลักสูตรจาก "หลักสูตร" เป็น "การออกแบบ UX" และอัพเดท Permalink ของคุณด้วย

การสร้างหน้าบทเรียน

หน้าหลักสูตรใหม่ของคุณ ซึ่งปัจจุบันมีชื่อว่า “UX Design” จะแบ่งออกเป็นส่วนๆ (คุณสามารถคิดว่าเป็นบทเรียนได้) พร้อมคำอธิบายสั้นๆ ของแต่ละบท แต่ละบท/บทเรียนเหล่านี้จะต้องเปลี่ยนเส้นทางไปยังหน้าบทเรียนของตนเอง ในการสร้างหน้าบทเรียนนี้ เราจะใช้เค้าโครงหน้าหลักสูตรและทำการปรับเปลี่ยนบางอย่าง

บทที่/บทเรียนแรกที่ระบุไว้ในหน้าหลักสูตรการออกแบบ UX เรียกว่า “บทที่ 1 : บทนำสู่พื้นฐาน” มาสร้างหน้าบทเรียนสำหรับหน้านี้กันเถอะ

ไปข้างหน้าและเพิ่มหน้าใหม่และป้อน "บทที่ 1 : บทนำสู่พื้นฐาน" สำหรับชื่อ

เนื่องจากบทเรียนนี้เป็นหน้าย่อยของหน้าหลักสูตรการออกแบบ UX ให้คลิกเมนูแบบเลื่อนลงหลักภายในช่องแอตทริบิวต์ของหน้าในแถบด้านข้างทางขวาและเลือก UX Design เป็นพาเรนต์

คลิกถัดไปเพื่อใช้ Divi Builder คลิก เพิ่มจากไลบรารี แล้วเลือกเค้าโครงหลักสูตร

บันทึกร่าง

ปรับเค้าโครงส่วนหัว

ตอนนี้คลิกเพื่อใช้ Visual Builder เพื่อทำการปรับเปลี่ยนเค้าโครงหน้า ขั้นแรก ให้เปลี่ยนเลย์เอาต์ของส่วนหัวของเราในส่วนบนเล็กน้อย จากตัวสร้างภาพ ให้ลบโมดูลรูปภาพในคอลัมน์ด้านขวาและปุ่มสีเขียวที่ด้านล่างของคอลัมน์แรก

คลิกถัดไปเพื่อแก้ไขการตั้งค่าของโมดูลข้อความบนสุดในคอลัมน์แรกและเปลี่ยนข้อความส่วนหัว h1 เป็น "บทที่ 1 : บทนำสู่พื้นฐาน"

จากนั้นเปลี่ยนโครงสร้างคอลัมน์ของแถวเป็นหนึ่งคอลัมน์แทนที่จะเป็นสองคอลัมน์

ตอนนี้ส่วนหัวของคุณควรมีลักษณะเช่นนี้

เปลี่ยนเนื้อหานำเสนอ

ในส่วนพิเศษด้านล่าง แก้ไขการตั้งค่าของประกาศแรกในส่วนเนื้อหาด้านซ้ายและอัปเดตต่อไปนี้:

แท็บเนื้อหา

ชื่อเรื่อง: Part 1
เนื้อหา: [สิ่งนี้จะกลายเป็นเนื้อหาของคุณสำหรับหลักสูตร ฉันทิ้งเนื้อหาจำลองไว้ที่นั่นในตอนนี้]
ใช้ไอคอน: ใช่
ไอคอน: เลือกไอคอนลูกศรขวา

หมายเหตุ: สีของไอคอนจะถูกนำมาจากชุดสีเน้นธีมในตัวปรับแต่งธีม ดังนั้นตรวจสอบให้แน่ใจว่าคุณได้อัปเดตสีที่นั่นด้วยสีที่ตรงกับไซต์

บันทึกการตั้งค่า

ตอนนี้คุณได้สร้างโมดูลการนำเสนอหนึ่งโมดูลแล้ว เราสามารถใช้โมดูลนี้เป็นเทมเพลตสำหรับแบ่งส่วนต่างๆ ของบทเรียนบนหน้าได้ ไปข้างหน้าและทำซ้ำโมดูลที่คุณเพิ่งสร้างสองครั้ง (หรือหลายส่วนเท่าที่คุณต้องการ) และอัปเดตแต่ละส่วนด้วยชื่อที่แตกต่างกัน (เช่น ส่วนที่ 2, ส่วนที่ 3, ect…)

จากนั้นลบคำประกาศอื่นๆ ที่เราไม่ต้องการอีกต่อไป

ตอนนี้เลย์เอาต์ของคุณควรมีลักษณะเช่นนี้

การเพิ่มวิดเจ็ตแถบด้านข้าง

เพิ่มโมดูลแถบด้านข้างใต้โมดูลปุ่มในแถบด้านข้างขวาของส่วนพิเศษ และสำหรับตอนนี้ เพียงปล่อยให้การตั้งค่าเนื้อหาเริ่มต้นที่ดึงเนื้อหาพื้นที่วิดเจ็ตแถบด้านข้าง ในที่สุดเราจะเปลี่ยนสิ่งนั้นทันทีที่เราสร้างพื้นที่วิดเจ็ตแบบกำหนดเองที่มีเมนูสำหรับหลักสูตร

ใต้แท็บเนื้อหา เพิ่มพื้นหลังสีขาวให้กับโมดูลของคุณ

หากต้องการให้โมดูลแถบด้านข้างของคุณตรงกับการออกแบบของเพจ ให้อัปเดตการตั้งค่าในแท็บการออกแบบดังนี้:

ระยะขอบที่กำหนดเอง: -80px ด้านบน
ช่องว่างภายในที่กำหนดเอง: ด้านบน 30px, ด้านขวา 40px, ด้านล่าง 30px, ด้านซ้าย 40px
กล่องเงาตำแหน่งแนวนอน: 0px
กล่อง Shadwo ตำแหน่งแนวตั้ง: 0px
ความแรงของกล่องเงาเบลอ: 60px
ความแรงของการกระจายเงาของกล่อง: 0px
เงาสี: rgba(71,74,182,0.12)

สไตล์แอนิเมชั่น: Zoom
ทิศทางของแอนิเมชั่น: ขึ้น
ความเข้มของแอนิเมชั่น: 20%
ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%

บันทึกการตั้งค่า

หมายเหตุ: เป็นความคิดที่ดีที่จะดำเนินการต่อและทำให้โมดูลนี้เป็นโมดูลสากล เพื่อให้คุณต้องทำการปรับเปลี่ยนเพียงโมดูลเดียวสำหรับการอัปเดตในอนาคต เมื่อต้องการทำสิ่งนี้ ให้เลือกเพิ่มในไลบรารี ตั้งชื่อเป็น "โมดูลแถบด้านข้างเมนูบทเรียน" เลือกเพื่อทำให้เป็นโมดูลสากล แล้วคลิกบันทึก

สุดท้าย ให้ลบโมดูลการนำเสนอด้วยผู้สอนและโมดูลปุ่ม "โปรไฟล์แบบเต็ม" หน้าของคุณควรมีลักษณะดังนี้:

บันทึกหน้า

ตอนนี้เราได้สร้างหน้าบทเรียนหน้าหนึ่งแล้ว ให้บันทึกหน้านั้นในห้องสมุดเพื่อนำไปใช้ในบทเรียนอื่นๆ จากตัวสร้างภาพ ให้คลิกปุ่ม "เพิ่มในไลบรารี" ในเมนูปุ่ม ป้อน "เค้าโครงหน้าบทเรียน" สำหรับชื่อของเทมเพลต แล้วบันทึก

ดำเนินการต่อและทำซ้ำขั้นตอนข้างต้นเพื่อเพิ่มหน้าบทเรียนอีกสองหน้า เฉพาะครั้งนี้ แทนที่จะใช้เค้าโครงหน้าของหลักสูตร ให้ใช้เค้าโครงใหม่ที่คุณสร้างขึ้นที่เรียกว่า “เค้าโครงหน้าบทเรียน”

เมื่อคุณทำเสร็จแล้ว คุณควรสร้างหน้าบทเรียนสามหน้าด้วยชื่อต่อไปนี้:

1. บทที่ 1 : บทนำสู่พื้นฐาน
2. บทที่ 2 : สถาปัตยกรรมสารสนเทศ
3. บทที่ 3 : การออกแบบที่ตอบสนอง

การสร้างเมนูหลักสูตร

เมื่อคุณสร้างบทเรียนแล้ว เราก็สามารถสร้างเมนูหลักสูตรของเราได้ จากแดชบอร์ด WordPress ให้ไปที่ ลักษณะที่ปรากฏ > เมนู

จากหน้าเมนู ให้ทำตามขั้นตอนต่อไปนี้:

1. เลือก “สร้างเมนูใหม่”
2. ตั้งชื่อว่า “UX Design”
3. เลือกหน้า/บทของบทเรียนสามหน้าในเมนูที่คุณเพิ่งสร้างขึ้น
4. คลิกเพิ่มในเมนู
5. บันทึกเมนู

สร้างพื้นที่วิดเจ็ตที่กำหนดเอง

ในการเพิ่มเมนูในหน้าบทเรียน ขั้นแรกเราต้องสร้างพื้นที่วิดเจ็ตที่กำหนดเอง จากแดชบอร์ด WordPress ไปที่ ลักษณะที่ปรากฏ > วิดเจ็ต ภายใต้พื้นที่วิดเจ็ตที่มีอยู่ ให้ค้นหากล่องที่ใช้สร้างพื้นที่วิดเจ็ตใหม่ ป้อนชื่อ "UX Design" แล้วคลิก "สร้าง" ตอนนี้รีเฟรชหน้า ตอนนี้คุณควรเห็นพื้นที่วิดเจ็ต "UX Design" ที่กำหนดเองใหม่ ลากวิดเจ็ตเมนูแบบกำหนดเองไปไว้ด้านในของพื้นที่วิดเจ็ต “UX Design” ในวิดเจ็ตเมนูแบบกำหนดเอง เลือกเมนู “การออกแบบ UX” จากนั้นคลิกบันทึก

อัปเดตโมดูลแถบด้านข้างของหน้าบทเรียนด้วยพื้นที่วิดเจ็ตใหม่

เมื่อคุณสร้างพื้นที่วิดเจ็ตด้วยเมนูหลักสูตรแล้ว ให้กลับไปที่หน้าหลักสูตรที่คุณสร้างและอัปเดตโมดูลแถบด้านข้างเพื่อเลือกพื้นที่วิดเจ็ต "UX Design" ตอนนี้เมนูของคุณควรปรากฏในแถบด้านข้าง

หมายเหตุ: หากคุณทำให้โมดูลแถบด้านข้างเป็นสากล คุณจะต้องทำการปรับนี้เพียงครั้งเดียวสำหรับโมดูลนี้ อีกสองโมดูลจะได้รับการอัปเดตโดยอัตโนมัติ

ณ จุดนี้ เรามีพื้นฐานที่ดีพอสมควรสำหรับการสร้างหลักสูตรและบทเรียนของเรา ดังนั้นมาปรับปรุง UX ของเราโดยผสมผสานการติดตามความก้าวหน้าของหลักสูตร

เพิ่มการติดตามความก้าวหน้าของหลักสูตร

การเพิ่มการติดตามความก้าวหน้าของหลักสูตรลงในเว็บไซต์ e-course ของคุณเป็นวิธีที่ยอดเยี่ยมในการเพิ่มประสบการณ์ของผู้ใช้ การมีส่วนร่วม และแรงจูงใจในการลงเรียนหลักสูตรของคุณ เพื่อแสดงความคืบหน้าของแต่ละหลักสูตร ฉันจะใช้ปลั๊กอิน WP Complete Pro หากคุณยังไม่ได้ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้งและเปิดใช้งานปลั๊กอินแล้ว

เมื่อเปิดใช้งานปลั๊กอินแล้ว จากแดชบอร์ด WordPress ของคุณ ให้ไปที่การ ตั้งค่า > WPComplete ซึ่งจะนำคุณไปสู่การตั้งค่าปลั๊กอิน

อัปเดตการตั้งค่าต่อไปนี้:

ประเภทบทบาทนักศึกษา: สมาชิก
ประเภทเนื้อหาบทเรียน: ประเภทหน้า (เนื่องจากเรากำลังสร้างบทเรียนด้วยหน้าแทนการโพสต์)
ยกเลิกการเลือกตัวเลือกเพื่อ "เพิ่มปุ่มสมบูรณ์โดยอัตโนมัติในโพสต์และเพจที่เปิดใช้งานสำหรับฉัน" (เราจะเพิ่มปุ่มเหล่านั้นด้วยรหัสย่อด้วยตนเอง)
ทำเครื่องหมายสีปุ่มที่สมบูรณ์: #7377fc
การตั้งค่ากราฟ สีหลัก: #7377fc

จากนั้นคลิกบันทึกการเปลี่ยนแปลง

เปิดใช้งานปุ่มที่สมบูรณ์ไปยังหน้าบทเรียน

ตอนนี้เรามีการตั้งค่า WP Complete แล้ว มาเพิ่มปุ่ม "สมบูรณ์" ของเราในหน้าบทเรียนกันเถอะ

ไปที่หน้าแรกของบทเรียนที่เราสร้างชื่อ “บทที่ 1: บทนำสู่พื้นฐาน” และคลิกเพื่อแก้ไขหน้า จากตัวแก้ไขเพจเริ่มต้น ให้ค้นหากล่อง WPComplete ที่ด้านล่างของหน้า ในกล่องให้คลิกที่ตัวเลือกเพื่อ "เปิดใช้งานปุ่มสมบูรณ์" สิ่งนี้จะบอกปลั๊กอินว่าคุณต้องการติดตามหน้านี้สำหรับผู้ใช้ ถัดไป ในช่องป้อนข้อมูลหลังจากที่ระบุว่า "นี่เป็นส่วนหนึ่งของ:" ให้ป้อน "การออกแบบ UX" ซึ่งเป็นชื่อหลักสูตรที่คุณต้องการติดตาม นี่คือวิธีที่คุณจัดกลุ่มบทเรียนในแต่ละหลักสูตร ตัวอย่างเช่น หากคุณมีสามบทเรียนและในแต่ละหน้าบทเรียนที่คุณเลือก “การออกแบบ UX” เป็นหลักสูตร เมื่อผู้ใช้กรอกหน้าโดยคลิกปุ่มสมบูรณ์ ปลั๊กอินจะสามารถบันทึกว่าผู้ใช้ทำเสร็จแล้ว 33% (1 ใน 3 บทเรียน) ของหลักสูตรนั้น หากคุณมีหลายหลักสูตร คุณสามารถป้อนชื่อหลักสูตรใหม่ลงในช่องได้โดยง่าย จากนั้นระบบจะเริ่มกลุ่มหลักสูตรใหม่

เพิ่มปุ่มที่สมบูรณ์ในหน้าบทเรียน

หากต้องการเพิ่มปุ่ม "เสร็จสิ้น" ในหน้าบทเรียนของคุณ ให้ปรับใช้เครื่องมือสร้างภาพในหน้าบทเรียนเดียวกับที่คุณเพิ่งแก้ไข

เพิ่มโมดูลข้อความใต้โมดูลประกาศล่าสุดที่ด้านล่างของหน้า ในการตั้งค่าข้อความ ให้ป้อนรหัสย่อต่อไปนี้ในกล่องเนื้อหา:

[wpc_button text=”คลิกฉันให้เสร็จ!” เสร็จแล้ว_text=”เย้! สมบูรณ์"]

หมายเหตุ: คุณสามารถเปลี่ยนข้อความและข้อความที่สมบูรณ์ที่แสดงบนปุ่มได้โดยแก้ไขข้อความในรหัสย่อ

บันทึกการตั้งค่า

รหัสย่อนี้สร้างปุ่มที่อนุญาตให้ผู้ใช้คลิกและบันทึกบทเรียนว่าเสร็จสมบูรณ์

โปรดสังเกตว่าเมื่อคุณคลิกที่ปุ่มเพื่อจบบทเรียน รายการเมนูในแถบด้านข้างของบทเรียนที่เกี่ยวข้องจะจางลงเล็กน้อยและแสดงเครื่องหมายถูกที่ด้านขวาของบทเรียน

ดำเนินการต่อและบันทึกโมดูลข้อความที่คุณเพิ่งสร้างลงในห้องสมุดโดยใช้ชื่อ "ปุ่มสมบูรณ์" ตอนนี้คุณสามารถใช้รายการไลบรารีนั้นเพื่อเข้าสู่โมดูลเดียวกันบนหน้าทั้งหมดของคุณได้ตามต้องการ

หมายเหตุ: คุณอาจต้องการดำเนินการต่อและบันทึกรูปแบบหน้าบทเรียนเวอร์ชันใหม่ลงในห้องสมุดโดยรวมปุ่มที่สมบูรณ์เพื่อที่คุณจะได้ไม่ต้องเพิ่มเป็นรายการรองเมื่อสร้างหน้าบทเรียนในอนาคต

เพิ่มกราฟแท่งความคืบหน้าในแถบด้านข้างของคุณ

ปลั๊กอิน WPComplete ยังช่วยให้คุณสามารถแสดงกราฟที่แสดงความคืบหน้าในหลักสูตรเฉพาะแก่ผู้ใช้ เราจะเพิ่มกราฟแท่งเพื่อแสดงความคืบหน้าของหลักสูตรการออกแบบ UX ในแถบด้านข้างของบทเรียนของเรา

จำได้ไหมว่าเราสร้างพื้นที่วิดเจ็ตที่กำหนดเองสำหรับหลักสูตรการออกแบบ UX ของเราเพื่อแสดงเมนูหลักสูตรในแถบด้านข้างของหน้าบทเรียนได้อย่างไร ตอนนี้เรากำลังจะเพิ่มกราฟแท่งความคืบหน้าด้านบนเมนูหลักสูตรของเรา ด้วยวิธีนี้ผู้ใช้สามารถเห็นความคืบหน้าในการแสดงผลด้วยภาพที่ยอดเยี่ยม

หากต้องการเพิ่มกราฟแท่ง ให้ไปที่แดชบอร์ด WordPress และไปที่ Appearence > Widgets จากนั้นสลับเปิดวิดเจ็ตแบบกำหนดเอง “การออกแบบ UX” ที่คุณสร้างไว้ก่อนหน้านี้ และลากวิดเจ็ต HTML ลงในพื้นที่วิดเจ็ตที่ด้านบนของวิดเจ็ตเมนูแบบกำหนดเองที่มีอยู่ในปัจจุบัน ในกล่องเนื้อหา HTML ให้ป้อนรหัสย่อต่อไปนี้:

[หลักสูตร wpc_progress_bar =” การออกแบบ UX”]

รหัสย่อนี้จะแสดงกราฟแท่งความคืบหน้าสำหรับหลักสูตรเฉพาะ “การออกแบบ UX” ชื่อหลักสูตรนี้สอดคล้องกับสิ่งที่คุณใส่ในกล่องตัวเลือก WPComplete ถัดจาก “นี่เป็นส่วนหนึ่งของ:” หากคุณมีหลักสูตรอื่นในอนาคต เพียงป้อนชื่อหลักสูตรใหม่แทน "การออกแบบ UX" เมื่อเพิ่มรหัสย่อสำหรับหลักสูตรนั้น

หมายเหตุ: สำหรับรายการรหัสย่อทั้งหมดที่มีให้สำหรับปลั๊กอินนี้ ให้ไปที่แผ่นโกงรหัสย่อ

ไปที่ "บทที่ 1: บทนำสู่พื้นฐาน" เพื่อดูว่ามีลักษณะอย่างไร

คลิกที่ปุ่ม Complete ที่ด้านล่างของหน้า ตรวจสอบแถบด้านข้างเพื่อดูว่ามีอะไรเปลี่ยนแปลงบ้าง กราฟแท่งแสดงให้เห็นว่าคุณเรียนครบ 33% ของหลักสูตรแล้ว และรายการเมนูสำหรับหน้าบทเรียนตอนนี้จะแสดงเป็นสีจางพร้อมเครื่องหมายถูกทางด้านขวาเพื่อแสดงว่าบทเรียนนั้นเสร็จสมบูรณ์แล้ว

เจ๋งมากใช่มั้ย?

มาทบทวนสิ่งที่เรามีกัน:

1. เรามีเทมเพลตหน้าบทเรียนใหม่เพื่อใช้เป็นเทมเพลตสำหรับบทเรียนในอนาคต
2. เรามีระบบการสร้างเมนูแบบกำหนดเองสำหรับแต่ละหลักสูตร
3. เรามีระบบสำหรับตั้งค่าพื้นที่วิดเจ็ตที่กำหนดเองสำหรับแต่ละหลักสูตรเพื่อแสดงเมนูที่กำหนดเองสำหรับหลักสูตรนั้นๆ ในหน้าบทเรียน
4. เรามีความสามารถในการเพิ่มปุ่มที่สมบูรณ์ในหน้าบทเรียนของเรา ซึ่งเมื่อคลิกแล้ว จะแสดงถึงความคืบหน้าในกราฟแท่งและในลิงก์เมนูที่เกี่ยวข้อง

ขั้นตอนสุดท้ายของการเปลี่ยนไซต์ของเราให้เป็น e-course ที่ใช้งานได้คือการรวมระดับการเป็นสมาชิกเพื่อจำกัดเนื้อหาของเราเฉพาะกับลูกค้าที่ชำระเงิน

การสร้างหน้าสมาชิก

หากคุณยังไม่ได้ดำเนินการ ให้ติดตั้งและเปิดใช้งานปลั๊กอินจำกัดเนื้อหา Pro เมื่อติดตั้งแล้ว ปลั๊กอินจะสร้าง 5 หน้าโดยอัตโนมัติเพื่อจัดการกระบวนการเป็นสมาชิก

หากคุณดูที่แต่ละหน้าในตัวแก้ไขหน้าเริ่มต้น คุณจะเห็นว่าสิ่งเดียวที่เพิ่มลงในเนื้อหาสำหรับแต่ละหน้าคือรหัสย่อ ตัวอย่างเช่น หากคุณไปที่หน้าลงทะเบียน คุณจะเห็นว่าสิ่งเดียวที่ในตัวแก้ไขเนื้อหาคือรหัสย่อ “[register_form]” ซึ่งจะแสดงแบบฟอร์มการลงทะเบียน

เนื่องจากสิ่งที่คุณต้องใช้ในการแสดงเนื้อหาสำหรับหน้าที่สร้างขึ้นอัตโนมัติแต่ละหน้าคือรหัสย่อ คุณจึงสร้างเค้าโครงสำหรับหน้าเหล่านี้ได้อย่างง่ายดายโดยใช้ Divi Builder ตัวอย่างเช่น หากคุณต้องการวิธีปรับแต่งหน้าลงทะเบียนของคุณอย่างรวดเร็วและง่ายดาย ให้ไปที่หน้าหลักสูตรและปรับใช้เครื่องมือสร้างภาพ บันทึกส่วนบนของเลย์เอาต์ลงในห้องสมุดของคุณด้วยชื่อ “e-course page header” (หรืออะไรทำนองนั้น)

จากนั้นคลิกที่ข้อความแจ้งที่แสดงหลักสูตรและบันทึกโมดูลนั้นลงในห้องสมุดของคุณด้วยชื่อ "กล่องเนื้อหาประกาศ e-course" (หรืออะไรทำนองนั้น)

ไปที่หน้าลงทะเบียนของคุณ คัดลอกรหัสย่อไปยังคลิปบอร์ดของคุณ (เน้นรหัสย่อแล้วคลิก ctrl + c) จากนั้นปรับใช้ Divi Builder จากนั้นจึงปรับใช้ตัวสร้างภาพ เพิ่มส่วนที่บันทึกไว้ใหม่ของคุณที่เรียกว่า "e-course page header" จากห้องสมุดของคุณ

อัปเดตโมดูลข้อความที่มีชื่อเป็น "ลงทะเบียน" แทน "หลักสูตร"

จากนั้นคลิกเพื่อเพิ่มโมดูลจากไลบรารีของคุณภายใต้โมดูลปัจจุบันในส่วน เลือกโมดูล “e-course blurb content box” ที่คุณเพิ่งบันทึกไว้ในห้องสมุด

จากนั้นอัปเดตการตั้งค่าดังนี้:

ใต้แท็บเนื้อหา...

ลบชื่อเรื่อง
เนื้อหา: ป้อนรหัสย่อ [register_form] ที่คุณบันทึกไว้ในคลิปบอร์ดของคุณโดยกด ctrl + v
ลบ URL รูปภาพ

บันทึกการตั้งค่า

หมายเหตุ: นั่นเป็นวิธีที่ง่ายและรวดเร็ว ฉันใช้โมดูลการนำเสนอเพราะนั่นเป็นวิธีที่รวดเร็วที่สุดในการนำสไตล์ของโมดูลมาใช้ คุณอาจต้องการใช้โมดูลข้อความแทน

ตอนนี้ดูที่หน้าการลงทะเบียนของคุณในเบราว์เซอร์ที่ไม่ระบุตัวตน

คุณยังต้องปรับแต่งการออกแบบของแบบฟอร์ม (จะไม่ทำอย่างนั้นในบทช่วยสอนนี้) แต่สามารถทำได้ง่ายด้วยการตรวจสอบและ CSS แบบกำหนดเอง

คุณสามารถทำตามขั้นตอนเดียวกันนั้นเพื่ออัปเดตหน้าสมาชิกทั้งหมด 5 หน้าที่สร้างโดยปลั๊กอิน หากต้องการดูว่าหน้าใดถูกใช้เพื่อจัดการกับการเป็นสมาชิก ให้ไปที่แดชบอร์ดและการนำทางของ WordPress เพื่อ จำกัด > การตั้งค่า แล้วคุณจะเห็นรายการของหน้าทั้งหมดที่ใช้ภายใต้แท็บทั่วไป

เพิ่มระดับการสมัครสมาชิกฟรี

การเพิ่มระดับการสมัครรับข้อมูลฟรีใน e-course ของคุณเป็นวิธีที่ยอดเยี่ยมในการดึงดูดลูกค้าเป้าหมาย เพิ่มพวกเขาในแคมเปญการตลาดทางอีเมล และเพิ่มยอดขายให้กับสมาชิกระดับพรีเมียม หากต้องการเพิ่มระดับการสมัครสมาชิกฟรี ให้ไปที่แดชบอร์ด WordPress และไปที่ จำกัด > ระดับการสมัครสมาชิก จากนั้นกรอกการตั้งค่าเพื่อสร้างสมาชิกฟรีของคุณ ต่อไปนี้คือตัวอย่างสิ่งที่ต้องป้อนสำหรับระดับการสมัครรับข้อมูลฟรี:

ชื่อ: FREE
คำอธิบาย: นี่คือการสมัครสมาชิก Coding School ฟรี
บทบาทของผู้ใช้: สมาชิก

ปล่อยให้ตัวเลือกอื่นๆ เป็นการตั้งค่าเริ่มต้น

จากนั้นคลิก เพิ่มระดับสมาชิก

การเพิ่มระดับการสมัครสมาชิกพรีเมียม

การเป็นสมาชิกระดับพรีเมียมมักจะเป็นที่ที่คุณสามารถเรียกเก็บเงินเพื่อเข้าถึงเนื้อหาระดับสูงกว่าที่ไม่สามารถเข้าถึงได้ด้วยการเป็นสมาชิกฟรี เช่นเดียวกับการเป็นสมาชิกฟรี ผู้ใช้จะต้องลงทะเบียนในแบบฟอร์มลงทะเบียน ข้อแตกต่างเพียงอย่างเดียวคือพวกเขาจะถูกนำไปยังแบบฟอร์มการชำระเงินเพื่อซื้อการสมัครสมาชิก หากผู้ใช้เป็นสมาชิกฟรีอยู่แล้ว พวกเขาสามารถอัปเกรดเป็นการสมัครสมาชิกแบบพรีเมียมได้โดยใช้ข้อมูลการลงทะเบียนปัจจุบัน จากนั้นจึงชำระเงินสำหรับการอัปเกรด

หากต้องการเพิ่มระดับการสมัครสมาชิกพรีเมียม ให้ไปที่แดชบอร์ด WordPress และไปที่จำกัด > ระดับการสมัครสมาชิก จากนั้นกรอกการตั้งค่าเพื่อสร้างการสมัคร Premium ของคุณ ต่อไปนี้คือตัวอย่างสิ่งที่ต้องป้อนสำหรับระดับการสมัครสมาชิกพรีเมียม:

ชื่อ: พรีเมี่ยม
คำอธิบาย: นี่คือการสมัครสมาชิกระดับพรีเมียมของ Coding School
Duration: 1 year
ราคา: 29
บทบาทของผู้ใช้: สมาชิก

จำกัดบทเรียนตามระดับการสมัครสมาชิก

ตอนนี้เราได้สร้างระดับการสมัครสมาชิกฟรีและพรีเมียมแล้ว เราสามารถเลือกที่จะจำกัดหน้า/โพสต์ หรือแม้แต่เนื้อหาเฉพาะตามระดับการสมัครรับข้อมูลของผู้ใช้ ปลั๊กอินทำให้กระบวนการนี้ง่ายมาก มาเริ่มกันเลย และจำกัดการเข้าถึงบทเรียนแรกที่เราสร้างขึ้นเป็นการสมัครสมาชิกฟรี ในการทำเช่นนั้น ให้ไปที่แก้ไขหน้าบทเรียนชื่อ “บทที่ 1: บทนำสู่พื้นฐาน” สังเกตช่อง "จำกัดเนื้อหานี้" ที่ด้านบนของตัวแก้ไขหน้า ในกล่องจะมีช่องป้อนข้อมูลแบบเลื่อนลงที่ให้คุณเลือกว่าใครควรมีสิทธิ์เข้าถึงเนื้อหา คุณจะเลือก สมาชิกของระดับการสมัครสมาชิก เมื่อเลือกแล้ว คุณจะเห็นตัวเลือกเพิ่มเติมปรากฏขึ้น เลือกตัวเลือกแรกที่ระบุว่า “สมาชิกทุกระดับการสมัครสมาชิก นั่นเป็นเพราะเราต้องการให้สมาชิกที่มีการสมัครสมาชิกระดับพรีเมียมสามารถเข้าถึงเนื้อหานี้ได้เช่นกัน

หมายเหตุ: การตั้งค่านี้จะซ่อนทั้งหน้าจากผู้ใช้ที่ไม่ได้สมัครรับข้อมูล หากคุณต้องการซ่อนเนื้อหาบางส่วนบนหน้าและทำให้ใช้ได้เฉพาะกับสมาชิกแบบฟรีหรือพรีเมียม คุณสามารถใช้รหัสย่อเพื่อห่อเนื้อหาที่คุณต้องการซ่อนได้ เนื่องจากเราใช้ตัวสร้าง Divi การใช้รหัสย่อเพื่อตัดเนื้อหาอาจเป็นเรื่องที่ท้าทาย แต่สิ่งหนึ่งที่คุณอาจพิจารณาทำคือการห่อเฉพาะเนื้อหาในกล่องเนื้อหาจริงของการนำเสนอด้วยรหัสย่อและปล่อยให้ชื่อปรากฏให้เห็น

สำหรับบทเรียนถัดไปที่ชื่อว่า “บทที่ 2: สถาปัตยกรรมสารสนเทศ” เราจะจำกัดหน้าเว็บให้เฉพาะสมาชิกพรีเมียมเท่านั้น ในการทำเช่นนั้น ให้ไปที่แก้ไขเพจ และในกล่อง "จำกัดเนื้อหานี้" ที่ด้านบนของตัวแก้ไขเพจ ให้เลือก สมาชิกของระดับการสมัครรับข้อมูล จากนั้นเลือกตัวเลือก “สมาชิกของระดับการสมัครสมาชิกเฉพาะ จากนั้นเลือก "พรีเมี่ยม" ตอนนี้เฉพาะผู้ที่สมัครสมาชิกแบบพรีเมียมเท่านั้นที่จะสามารถเข้าถึงหน้านั้นได้

บันทึกการเปลี่ยนแปลงของคุณโดยอัปเดตหน้า

เปลี่ยนหน้าเปลี่ยนเส้นทางของคุณสำหรับเนื้อหาที่ถูกจำกัด

เมื่อผู้ใช้พยายามเข้าถึงเนื้อหาที่ถูกจำกัด คุณสามารถเปลี่ยนเส้นทางผู้ใช้ไปยังหน้าที่ต้องการได้ เนื่องจากเราต้องการให้ผู้ใช้ลงทะเบียนเพื่อเข้าถึงหลักสูตร เราจึงเปลี่ยนเส้นทางผู้ใช้ไปยังหน้าลงทะเบียน โดยไปที่แดชบอร์ดของ WordPress และไปที่ Restrict > Settings แล้วคลิกแท็บ Misc ค้นหาตัวเลือก Redirect Page และเลือกหน้า Register จากช่องป้อนข้อมูลแบบเลื่อนลง

บันทึกตัวเลือก

ตอนนี้ทุกครั้งที่ผู้ใช้ที่ไม่ได้สมัครพยายามเข้าถึงหน้าที่จำกัด พวกเขาจะถูกเปลี่ยนเส้นทางไปยังหน้าลงทะเบียนโดยอัตโนมัติ

คุณสามารถทดสอบสิ่งนี้ได้อย่างรวดเร็วจริงๆ บันทึกหน้าและเปิดหน้าในเบราว์เซอร์ที่ไม่ระบุตัวตนเพื่อดูว่าผู้ใช้เห็นอะไรเมื่อยังไม่ได้ลงทะเบียน

หมายเหตุ: หากคุณต้องการ คุณสามารถสร้างหน้าลงทะเบียนเพิ่มเติมสำหรับกรณีการใช้งานนี้ เพื่อให้คุณสามารถใส่คำกระตุ้นการตัดสินใจที่เจาะจงมากขึ้น เช่น “ขออภัย คุณไม่สามารถเข้าถึงเนื้อหานี้ได้ โปรดลงทะเบียนด้านล่าง” โดยมีแบบฟอร์มลงทะเบียนด้านล่างว่า

การเพิ่มเกตเวย์การชำระเงินของคุณ

ณ จุดนี้ คุณจะต้องตรวจสอบให้แน่ใจว่าเกตเวย์การชำระเงินของคุณถูกรวมเข้ากับ Restrict Content Pro คุณสามารถทำได้โดยไปที่ จำกัด > การตั้งค่า และคลิก แท็บการชำระเงิน คุณสามารถเลือกเกตเวย์ที่คุณต้องการเปิดใช้งานและป้อนข้อมูลที่จำเป็นสำหรับการรวมเกตเวย์ได้จากที่นั่น คุณมีเก้าตัวเลือกให้เลือก ได้แก่ Stripe และ Paypal

ฉันจะไม่ลงรายละเอียดที่เกี่ยวข้องกับการตั้งค่าเหล่านั้น แต่คำแนะนำของฉันคือการตรวจสอบและทดสอบเกตเวย์การชำระเงินของคุณอย่างละเอียดเพื่อให้แน่ใจว่าใช้งานได้ คุณไม่ต้องการที่จะเสียเงิน

การปรับแต่งการแจ้งเตือนอีเมลของคุณ

จำกัดเนื้อหา Pro ช่วยให้คุณปรับแต่งอีเมลแจ้งเตือนทั้งสำหรับสมาชิกใหม่และผู้ดูแลระบบเมื่อใดก็ตามที่สมาชิกใหม่ลงทะเบียน ใช้ประโยชน์จากตัวเลือกนี้โดยใส่คำกระตุ้นการตัดสินใจที่ดีลงในเนื้อหาอีเมลที่สนับสนุนให้ผู้ใช้เริ่มหลักสูตรด้วยลิงก์ไปยังบทเรียนแรก คุณสามารถค้นหาการตั้งค่าอีเมลได้โดยไปที่ จำกัด > การตั้งค่า แล้วคลิกแท็บ อีเมล

การรวมการตลาดผ่านอีเมลเสริม

คุณอาจมีบัญชี Mailchimp หรือ Aweber ที่คุณต้องการเพิ่มสมาชิกเมื่อพวกเขาลงทะเบียน คุณสามารถทำได้โดยใช้หนึ่งในโปรแกรมเสริมที่มีให้พร้อมกับปลั๊กอินจำกัดเนื้อหา Pro เพียงไปที่ จำกัด > ส่วนเสริม และค้นหาแพลตฟอร์มอีเมลที่คุณต้องการ

อะไรตอนนี้?

เมื่อคุณตั้งค่าเว็บไซต์ e-course แล้ว คุณจะต้องตั้งค่าเนื้อหาทั้งหมดสำหรับแต่ละหน้าให้เสร็จ เพิ่ม url ให้กับปุ่มต่างๆ และปรับแต่งอื่นๆ อีกมากมาย แต่วางรากฐานไว้แล้ว หวังว่านี่จะทำให้คุณตั้งค่าด้วยแพลตฟอร์มที่คุณสามารถสร้างได้อย่างง่ายดาย

ความคิดสุดท้าย

อาจมีคนโต้แย้งว่าด้วยเครื่องมือที่ยอดเยี่ยมทั้งหมดในโลกของ WordPress คุณสามารถเริ่มต้นหลักสูตรออนไลน์และดำเนินการได้อย่างง่ายดาย แต่มีความท้าทายในการออกแบบ การทำให้ไซต์เหล่านั้นดูดีไม่ใช่เรื่องง่ายหากการออกแบบไม่ใช่มือขวาของคุณ โชคดีที่เลย์เอาต์ Divi ที่สร้างไว้ล่วงหน้า เช่น “ชุดเลย์เอาต์การจัดการการเรียนรู้” เสนอวิธีแก้ปัญหาที่ยอดเยี่ยมสำหรับปัญหาการออกแบบ เลย์เอาต์ใช้งานได้จริงและสวยงามตั้งแต่แกะกล่อง

แต่แล้วก็มีปัญหาในการค้นหาปลั๊กอินที่เหมาะสมเพื่อเปลี่ยนเลย์เอาต์ที่สวยงามของคุณให้เป็นหลักสูตรออนไลน์ที่ใช้งานได้จริง มีปลั๊กอินสำหรับสมาชิกและระบบการจัดการการเรียนรู้ที่ยอดเยี่ยมมากมาย โดยมีระดับค่าใช้จ่ายและความซับซ้อนที่แตกต่างกันออกไป เป้าหมายของโพสต์นี้คือเพื่อให้คุณเริ่มต้นใช้งานไซต์ e-course ที่ดูดีพร้อมการเป็นสมาชิกที่เรียบง่ายในราคาประหยัด สำหรับผู้ที่หวังว่าจะสร้างสิ่งนี้โดยใช้ปลั๊กอินฟรี ขออภัยที่ทำให้ผิดหวัง ฉันเกี่ยวกับปลั๊กอินฟรีทั้งหมด แต่ฉันคิดว่าควรใช้เวอร์ชัน Pro สำหรับบทช่วยสอนนี้เพราะผลลัพธ์ที่ได้จะคุ้มค่าทุกเพนนีในความคิดของฉัน

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!