คู่มือ WordPress

ใบความรู้ หนา้ ที่
วชิ า สรา้ งเว็บไซต์ eLearning ดว้ ย WordPress เรอื่ ง แนะนำ WordPress

การออกแบบเว็บไซต์

ความหมายของ WordPress

WordPress คอื แอพพลิเคชั่นหรอื ระบบโปรแกรมสำเรจ็ รปู ท่ใี ช้สำหรบั การสรา้ งเว็บไซต์แบบ CMS

(Content Management System) ท่ไี ด้รับความนิยมและมชี อ่ื เสียงมากในปัจจบุ นั สาเหตเุ ป็นเพราะโปรแกรม

WordPress ชว่ ยให้ผู้ใช้งานไม่จำเปน็ ท่ีจะตอ้ งเรยี นรถู้ ึงภาษาหรอื วิธีการเขียนโค้ดในการทำเว็บไซต์ เน่อื งจาก

ระบบของ WordPress ไดท้ ำการสนับสนุนการทำงานท้งั หน้าบ้านและหลงั บ้านของเว็บไซต์อย่แู ล้ว ทำให้ผใู้ ช้

สามารถสร้างเวบ็ ไซต์ของตวั เองได้งา่ ย มีหน้าตาสวยงามตามท่ีตอ้ งการ และมคี วามรวดเรว็ ขนึ้

ตัวอย่างความสามารถของระบบ WordPress ทีจ่ ะไดร้ บั

• สามารถเพิม่ บทความไดเ้ องได้โดยไม่ต้องแก้ไขโคด้ ซ่งึ สว่ นน้ีจะอยุ่ในส่วนของเร่อื ง (Posts) สามารถเพมิ่
บทความไดเ้ องไดโ้ ดยไม่ตอ้ งแก้ไขโค้ด ปัจจุบัน WordPress ไดพ้ ัฒนาระบบการเขียนบทความใหม่ที่ช่ือ
ว่า Gutenberg เขา้ มาชว่ ยให้เราทำงานได้ง่ายข้นึ อกี ด้วย

ใบความรู้ หนา้ ท่ี
วิชา สรา้ งเวบ็ ไซต์ eLearning ด้วย WordPress เรอื่ ง แนะนำ WordPress

• สามารถเปลยี่ นรปู ไดต้ ามต้องการ โดยสามารถทำการปรบั ขนาดรปู พลิกซ้าย พลกิ ขวารปู ได้

• สามารถปรับแต่งเมนูไดต้ ามตอ้ งการ เพียงแคล่ ากจากกลอ่ งทางด้านซ้ายมือมาวางเป็นลำดบั เมนู
ทางดา้ นขวามือ

ใบความรู้ หน้าท่ี
วิชา สรา้ งเวบ็ ไซต์ eLearning ดว้ ย WordPress เรอ่ื ง แนะนำ WordPress

• ตกแต่งส่วนตา่ งๆ ได้งา่ ย เชน่ โครงสร้างเว็บไซต์ sidebar เปลยี่ นสี เปลย่ี นขนาดตวั อกั ษร เป็นตน้

ความแตกตา่ งระหวา่ ง WordPress.com และ WordPress.org
wordpress.com นนั้ กเ็ หมอื นกบั ผู้บริการบลอ็ กฟรีทัว่ ไป เช่น Blogger ของ Google, Tumbr หรอื

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

wordpress.org โดยจะมีลกั ษณะเหมือนกับ WordPress.com แทบทกุ ประการ เพยี งแต่
WordPress.org น้ี จะนำเอาตวั หลักที่อยเู่ บ้ืองหลังการขับเคลื่อน WordPress.com ออกมาให้เราดาวน์โหลด
ไปใช้งาน โดยเราจะตอ้ งไปหาสว่ นประกอบอ่ืนๆ เอง ทง้ั พ้นื ที่ (โฮ้สต)์ โดเมน ธมี และปลัก๊ อนิ แต่ขอ้ ดขี องมนั ก็
คอื เราสามารถท่จี ะปรับแตง่ ไดแ้ บบอิสระ ขน้ึ อยกู่ ับความสามารถของผปู้ รบั แต่งเอง ซึ่งเว็บของเราก็จะพยายาม
ช่วยให้ผอู้ า่ นสามารถปรับแต่ง WordPress ได้โดยใชโ้ ค้ดให้นอ้ ยทสี่ ดุ ซง่ึ แม้ว่าคณุ จะไมไ่ ด้ศึกษามาทางดา้ นโคด้
โปรแกรม คณุ กจ็ ะสามารถมเี วบ็ ไซต์เปน็ ของตัวเองสวยๆ ไดง้ ่ายๆ แนน่ อน

ใบความรู้ หนา้ ท่ี
วชิ า สรา้ งเว็บไซต์ eLearning ด้วย WordPress เรือ่ ง การใชร้ ะบบ E-learning

ความหมายของ E-Learning

การจัดกระบวนการและการใช้ประโยชนจ์ ากสื่อทางอเิ ล็กทรอนิกส์โดยเฉพาะคอมพวิ เตอรแ์ ละระบบ

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

ความก้าวหน้าในการเรียนรู้

ตัวอยา่ งเว็บไซต์E-Learning

ระบบของ E-Learning ควรมีอะไรบา้ ง
1. ส่วนหัว (Header) อยตู่ อนบนสุดของหน้าเวบ็ เพจ เป็นบริเวณท่สี ำคญั ทสี่ ุด เนือ่ งจากผเู้ ข้าเย่ยี มชมเว็บไซตจ์ ะ
มองเหน็ ก่อนบรเิ วณอ่นื สว่ นใหญน่ ยิ มใชว้ างโลโก้ ช่ือเว็บไซต์ ป้ายโฆษณา ลงิ ค์สำหรับการติดต่อ หรอื ลงิ ค์ท่ี
สำคัญ และระบบนำทาง
2. สญั ลกั ษณ์หรอื โลโก้ (Logo) มาจากคำเต็ม Logotype หมายถึง สัญลกั ษณ์ เครื่องหมาย ตวั แทน หรือส่ือ
อยา่ งใด
อยา่ งหนง่ึ ทบ่ี ง่ บอก ประเภท รปู แบบ หรอื รปู พรรณสัณฐานของส่งิ ทเ่ี ปน็ เจา้ ของสัญลกั ษณ์ หรือโลโก(้ Logo) นน้ั
ๆ
3. เมนู (Menu) ส่วนของปมุ่ ตา่ งๆ เมนูหลกั ในหน้าเว็บไซต์ของเรา เพื่อความสะดวกในการใชง้ านของผู้เขา้ ชม
เว็บไซต

ใบความรู้ หน้าที่
วิชา สรา้ งเว็บไซต์ eLearning ด้วย WordPress เรือ่ ง การใช้ระบบ E-learning

4. ส่วนเนือ้ หา (Content) อย่ตู อนกลางหนา้ ใชแ้ สดงเนือ้ หาภายในเว็บเพจซงึ่ อาจประกอบไปดว้ ยข้อความ

ภาพกราฟิก ตารางขอ้ มูล และอน่ื ๆ บางครงั้ เมนหู ลักหรือเมนูเฉพาะกลุม่ อาจอยู่ในส่วนนกี้ ไ็ ด้ โดยมกั วางไว้

ด้านซา้ ยมอื สุด เนือ่ งจากผ้เู ขา้ ชมจะมองเห็นไดง้ า่ ย

5. การออกแบบหน้าเวบ็ ไซต์ Customized Website Design ปรับแต่งหน้าตาเว็บไซตไ์ ด้หลากหลาย มรี ปู แบบ

Layout ให้เลือกมากมาย พรอ้ มรองรับการใช้งานและแสดงผลในทกุ อปุ กรณ์ Desktop, Tablet, Mobile

(Responsive Design) เพอ่ื ให้เว็บไซต์ แสดงความเปน็ ตัวตนและเหมาะกบั ธรุ กจิ ของคณุ อยา่ งแทจ้ รงิ

6. ระบบวีดีโอ ปลอดภัย ลื่นไหล รบั ชมไมม่ ีสะดุด กบั ระบบวีดีโอของเรา ทีจ่ ดั ทำขนึ้ เพือ่ ตอบโจทย์คอร์สเรียน

ออนไลน์

7. ระบบรายงานและวิเคราะห์สถติ มิ ขี ้อมลู สรุปรายงานขอ้ มูลการสั่งซื้อและการชำระเงิน สามารถดูขอ้ มลู สถิติ

การส่งั ซ้ือของผเู้ รยี น รวมถงึ Export ข้อมลู ทั้งหมดอยใู่ นรปู แบบของ Excel เพือ่ นำมาใช้ในการวิเคราะห์

ปรบั ปรุง ต่อยอดทางการตลาด

8. สว่ นทา้ ย (Page Footer) อยู่ด้านลา่ งสุดของหนา้ เว็บเพจ สว่ นใหญจ่ ะนยิ มใชว้ างระบบนำทางภายในเว็บไซต์

แบบท่ีเป็นลงิ คข์ อ้ ความงา่ ย ๆ นอกจากนีก้ อ็ าจจะมชี ่อื ของเจ้าของเวบ็ ไซต์ ขอ้ ความแสดงลิขสิทธิ์ ปัจจบุ ันจะ

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

เว็บไซต์ เปน็ ต้น

การสร้างเวบ็ ไซต์ด้วย E-learning ดว้ ย WordPress ต้องมีอะไรบ้าง

1. ส่วนหัว (Header) อยู่ตอนบนสุดของหนา้ เว็บเพจ เป็นบริเวณที่สำคญั ท่ีสดุ เนอื่ งจากผูเ้ ขา้ เย่ียมชมเว็บไซตจ์ ะ

มองเหน็ กอ่ นบริเวณอื่น สว่ นใหญ่นยิ มใช้วางโลโก้ ช่อื เวบ็ ไซต์ ป้ายโฆษณา ลงิ คส์ ำหรบั การติดตอ่ หรือลิงค์ท่ี

สำคญั และระบบนำทาง

2. สญั ลักษณ์หรอื โลโก้ (Logo) มาจากคำเต็ม Logotype หมายถึง สญั ลกั ษณ์ เครื่องหมาย ตวั แทน หรือส่อื

อย่างใดอย่างหนง่ึ ทบี่ ่งบอก ประเภท รูปแบบ หรือรปู พรรณสัณฐานของส่ิงทเี่ ป็นเจ้าของสญั ลกั ษณ์ หรอื โลโก้

(Logo) นั้น ๆ

3. เมนู (Menu) สว่ นของปมุ่ ตา่ งๆ เมนูหลักในหน้าเว็บไซตข์ องเรา เพื่อความสะดวกในการใช้งานของผู้เข้าชม

เว็บไซต์

4. สว่ นเนอื้ หา (Content) อยู่ตอนกลางหน้า ใชแ้ สดงเนอื้ หาภายในเว็บเพจซ่ึงอาจประกอบไปดว้ ยข้อความ

ภาพกราฟิก ตารางขอ้ มลู และอน่ื ๆ บางครงั้ เมนูหลักหรือเมนูเฉพาะกลมุ่ อาจอยูใ่ นสว่ นน้กี ็ได้ โดยมกั วางไว้

ด้านซา้ ยมอื สดุ เนื่องจากผู้เข้าชมจะมองเหน็ ไดง้ า่ ย

ใบความรู้ หน้าท่ี
วิชา สรา้ งเว็บไซต์ eLearning ดว้ ย WordPress เร่อื ง การใช้ระบบ E-learning

5. การเลือกการใช้สที ำเวบ็ ไซต์ นอกเหนอื จากข้อมูลและรปู ภาพทีค่ วรคำนึงถงึ แล้ว เฉดสีบนหนา้ เว็บไซต์ กถ็ ือ

ว่าเปน็ สิ่งสำคญั เป็นหน้าตาของเว็บไซต์โดยรวมเลยทีเดยี วสำหรบั การเลือกใชส้ ภี ายในเวบ็ ไซต์น้นั ควรเลอื กใช้

เพยี งแค่ 3 - 4 สี กพ็ อ โดยมกี ารใชส้ ตี ามทฤษฎี 60-30-10 โดยเน้นทีส่ ีพ้นื 60%, สีรอง 30% และสเี น้น 10%

6. การลอ็ คอิน เชอื่ มต่อFacebook

7. ระบบรายงานและวิเคราะหส์ ถติ ิมขี อ้ มลู สรปุ รายงานข้อมูลการสงั่ ซ้อื และการชำระเงิน สามารถดูขอ้ มูลสถิติ

การสงั่ ซอ้ื ของผู้เรยี น รวมถงึ Export ขอ้ มลู ท้ังหมดอยใู่ นรปู แบบของ Excel เพ่ือนำมาใชใ้ นการวิเคราะห์

ปรับปรุง ต่อยอดทางการตลาด

8. หลกั ในการออกแบบเว็บไซต์

8.1 การแบง่ เน้อื หาเปน็ หมวดหมูก่ ารออกแบบเวบ็ ไซตแ์ ละแบง่ แยกเนื้อหาให้ชัดเจนนนั้ ทำใหผ้ ใู้ ชง้ านเวบ็ ไซต์

ใชง้ านไดง้ า่ ยขึน้ และไม่สับสน

8.2 การโหลดหนา้ ของเว็บไซตน์ ้ัน จะตอ้ งไมน่ านจนเกินไป

8.3 หมั่นอพั เดทขา่ วสาร และหน้าเวบ็ ไซตอ์ ยสู่ ม่ำเสมอ

8.4 การสะกดคำเราจะต้องเชค็ ขอ้ ความทกุ ครั้งกอ่ นจะเผยแพร่เว็บไซต์สู่สาธารณะ

8.5 การนำทางในเวบ็ ไซต์ หากผใู้ ช้เข้ามาในเว็บของเรา แล้วไมร่ ู้จะไปตอ่ ทางใด อาจจะเปน็ การไมด่ นี กั

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

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

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

ชนื่ ชมเกยี่ วกับเว็บไซตข์ องท่าน ซ่งึ อาจจะเพม่ิ ความเช่อื ถอื ใหแ้ ก่เว็บไซตข์ องท่านด้วย

8.7 มีท่ีอยู่ และเบอร์โทรศพั ทท์ ตี่ ิดตอ่ ได้ แสดงอยา่ งชดั เจนบนหน้าเวบ็ ไซต์

8.8 การคน้ หาในหน้าเว็บไซต์ ในเวบ็ ไซตข์ องทา่ นควรมี ช่องค้นหาท่แี สดงให้เหน็ อยา่ งชดั เจน เพอ่ื ความ

สะดวกในการใชง้ าน

7. สว่ นท้าย (Page Footer) อยู่ดา้ นล่างสุดของหนา้ เวบ็ เพจ สว่ นใหญ่จะนยิ มใช้วางระบบนำทางภายในเว็บไซต์

แบบทเี่ ปน็ ลิงคข์ อ้ ความง่าย ๆ นอกจากนีก้ อ็ าจจะมีช่ือของเจา้ ของเว็บไซต์ ขอ้ ความแสดงลิขสทิ ธ์ิ ปัจจบุ นั จะ

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

เว็บไซต์ เปน็ ต้น

ใบความรู้ หน้าท่ี
วิชา สรา้ งเว็บไซต์ eLearning ด้วย WordPress เรอ่ื ง การใชร้ ะบบ E-learning

ประโยชนข์ อง E-Learning

1.เนอ้ื หาการเรียนการสอนทนั สมัยและมกี ารอปั เดตอยู่เสมอ เรยี กได้ว่าเปน็ ข้อสำคัญทไ่ี ม่ควรมองข้ามเลยทเี ดยี ว

เพราะเนือ้ หาท่ีทันสมัยและอปั เดตอยเู่ สมอ สามารถช่วยให้เด็ก ๆ ไดร้ สู้ ง่ิ ใหม่ ๆ อยเู่ สมอ รเู้ ทา่ ทนั ตอ่

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

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

ด้วย

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

เด็ก ๆ สามารถยอ้ นกลับมาทบทวนไดใ้ หม่ตง้ั แตต่ ้นจนจบได้จนกวา่ จะเข้าใจได้ทกุ เม่ือ

3. ลดความกดดนั ในการเรยี น เวลาเรยี นในห้องเรียนเด็กหลาย ๆ คนอาจรูส้ กึ กดดนั เม่ือถกู ประเมินโดยใหค้ ุณค่า

กับความสำเรจ็ เชงิ วชิ ารวมมากกวา่ ความสนใจและความสขุ ในการเรยี น

4. เวลาเรียน และสถานที่มีความยดื หยุ่น ไมต่ ้องกงั วลเรื่องตารางในการเรียนเพราะเด็ก ๆ สามารถเลอื กเวลา

เรียนท่สี ะดวกไดต้ ามใจผู้เรียน นอกจากนยี้ ังสามารถเลือกสถานทีใ่ นการเรียนที่เดก็ ๆ รู้สกึ สะดวก และมีสมาธิ

ในการเรียนได้อกี ด้วย

ใบความรู้ หนา้ ท่ี
วิชา สรา้ งเวบ็ ไซต์ eLearning ด้วย WordPress เร่อื ง การตดิ ตั้งโปรแกรม

การตดิ ตัง้ โปรแกรม XAMPP และ WordPress

โปรแกรม XAMPP คอื อะไร?
เป็นโปรแกรม Apache web server ไวจ้ ำลอง web server เพื่อไว้ทดสอบ สครปิ หรอื เวบ็ ไซต์ในเครือ่ ง

ของเรา โดยที่ไมต่ ้องเช่ือมตอ่ อนิ เตอรเ์ นต็ และไม่ต้องมคี ่าใช้จา่ ยใดๆ ง่ายตอ่ การตดิ ตัง้ และใชง้ านโปรแกรม
Xampp จะมาพร้อมกบั PHP ภาษาสำหรับพัฒนาเว็บแอพลเิ คชั่นทเ่ี ปน็ ที่นิยม , MySQL ฐานขอ้ มูล, Apache
จะทำหนา้ ท่ีเป็นเว็บ เซิรฟ์ เวอร์, Perl อีกทัง้ ยงั มาพรอ้ มกบั OpenSSL , phpMyadmin (ระบบบรหิ าร
ฐานข้อมูลที่พฒั นาโดย PHP เพ่ือใช้เชอื่ มต่อไปยงั ฐานข้อมลู สนบั สนนุ ฐานขอ้ มูล MySQL และ SQLite
โปรแกรม Xampp จะอยใู่ นรปู แบบของไฟล์ Zip, tar, 7z หรือ exe โปรแกรม Xampp อยู่ภายใตใ้ บอนญุ าต
ของ GNU General Public License แต่บางคร้ังอาจจะมีการเปล่ยี นแปลงเรื่องของลขิ สทิ ธ์ใิ นการใชง้ าน จงึ
ควรติดตามและตรวจสอบโปรแกรมด้วย

โปรแกรม XAMPP สามารถใช้งานได้ 4 OS ได้แก่
1. Windows สามารถใชง้ านได้กบั windows รนุ่ 2000, 2003, xp, vista, windows 7 หรือสงู กวา่
2. Linux สำหรบั SuSE, RedHat, Mandrake, Debian และ Ubuntu
3. Mac OS X
4. Solaris สำหรบั Solaris 8 และ Solaris 9

ในการใชง้ านเบ้ืองตน้ ให้ดบั เบิล้ คลิ๊ก XAMPP Control Panel Application แล้วทำการคล๊กิ ปมุ่ start
จากนนั้ สามารถใชง้ านได้ โดยเปดิ Browser ข้นึ มาพมิ พ์ localhost หรอื 127.0.0.1

ขอ้ จำกัดด้านเทคนคิ
1. เคร่ืองคอมพวิ เตอร์ควรมี RAM ไมต่ ่ำกวา่ 128 MB
2. Hard disk มีพ้ืนทีม่ ากกวา่ 320 MB

ใบความรู้ หนา้ ที่
วิชา สรา้ งเวบ็ ไซต์ eLearning ด้วย WordPress เรอ่ื ง การตดิ ต้งั โปรแกรม
3. CPU ไมก่ ำหนดขั้นตำ่

ขน้ั ตอนการดาวนโ์ หลดและตดิ ตัง้ โปรแกรม XAMPP
1. เปดิ เว็บไซต์ https://www.google.com/
2. ค้นหา XAMPP หรอื ไปยังเวบ็ ไซต์ https://www.apachefriends.org/
3. คลกิ ปมุ่ ดาวน์โหลด XAMPP for Windows หากใช้ระบบปฎบิ ตั ิการอนื่ ก็สามารถเลอื กโหลดใหต้ รงตาม
ระบบปฎิบัติการทีใ่ ชอ้ ยู่ได้

ใบความรู้ หนา้ ที่
วิชา สรา้ งเวบ็ ไซต์ eLearning ดว้ ย WordPress เรื่อง การติดต้ังโปรแกรม

4. หลงั จากดาวนโ์ หลดเสรจ็ สนิ้ เปิดโฟลเดอรท์ ี่ไฟล์ XAMPP ท่ถี กู บันทึกไว้และทำการดับเบลิ คลิกเพ่อื

เริม่ การตดิ ต้งั

5. โปรแกรมจะขน้ึ หน้าต่างลักษณะแบบนมี้ า ใหท้ ำการกด Next

ใบความรู้ หนา้ ท่ี
วชิ า สรา้ งเวบ็ ไซต์ eLearning ดว้ ย WordPress เรือ่ ง การตดิ ตัง้ โปรแกรม

กดปุ่ม Next

เลือกโฟลเดอร์ทีต่ อ้ งการติดตง้ั หลังจากนั้นให้กดปมุ่ Next
ไปจนกว่าโปรแกรมจะเริ่มขน้ั ตอนการตดิ ต้งั ดงั ภาพขา้ งล่าง

ใบความรู้ หน้าท่ี
วิชา สรา้ งเว็บไซต์ eLearning ดว้ ย WordPress เรอ่ื ง การตดิ ตงั้ โปรแกรม

เม่อื โปรแกรมทำการตดิ ตั้งเสร็จแลว้ จะมปี ่มุ Finish ข้นึ มาให้กด ใหท้ ำการกดป่มุ
ก็เป็นอันเสร็จสิ้นการติดต้งั โปรแกรม XAMPP

โปรแกรม WordPress คืออะไร?
WordPress (เวิรด์ เพรสส)์ คือ โปรแกรมสำเร็จรูปทใ่ี ช้สรา้ งและจัดการเนอ้ื หาเวบ็ ไซตป์ ระเภท

Contents Management System หรอื เรยี กย่อๆ วา่ "CMS" ซงึ่ เขียนด้วยภาษา PHP และใชร้ ะบบจดั การ
ฐานข้อมลู MySQL โดยมสี ว่ นประกอบหลกั ๆ คอื

1. WordPress Core เป็นซอฟแวรห์ ลัก ใช้จดั การเว็บไซต์ เนือ้ หาและบทความต่างๆ
2. Theme เปน็ สว่ นทก่ี ำหนดดีไซนห์ รอื รปู แบบการแสดงผล
3. Plugin เป็นสว่ นท่ชี ว่ ยเพิม่ ความสามารถให้กับ WordPress เช่น ระบบสร้างหนา้ เวบ็ ไซต์ ระบบ

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

ใบความรู้ หนา้ ที่
วิชา สรา้ งเวบ็ ไซต์ eLearning ดว้ ย WordPress เรือ่ ง การติดตง้ั โปรแกรม
ข้ันตอนการดาวน์โหลดและตดิ ตง้ั โปรแกรม WordPress

1. ไปยงั เวบ็ ไซต์ https://wordpress.org/download/
2. กดปุ่ม Download WordPress 5.9

3. เมื่อดาวนโ์ หลดเสรจ็ แลว้ ให้ทำการแตกไฟล์ เมอื่ แตกไฟล์เสรจ็ จะได้ไฟลท์ างซ้าย ดังภาพ

ใบความรู้ หน้าที่
วชิ า สรา้ งเว็บไซต์ eLearning ด้วย WordPress เรื่อง การติดตั้งโปรแกรม

4. ก๊อปปไ้ี ฟลท์ ั้งหมดในโฟลเดอร์ทแี่ ตกมาไปวางไวใ้ นโปรแกรม XAMPP \XAMPP\htdocs

และเปลย่ี นชื่อโฟลเดอรต์ ามทเี่ ราต้องการ

5. เปิดไฟลข์ า้ งในโฟลเดอรท์ มี่ ีชอ่ื ว่า wp-config-sample และทำการตัง้ ค่าดงั รูป
จากนั้นทำการ save as ไวท้ ีเ่ ดิมโดยเปลี่ยนชอ่ื ไฟล์เปน็ wp-config.php

ใบความรู้ หนา้ ที่
วิชา สรา้ งเวบ็ ไซต์ eLearning ด้วย WordPress เรื่อง การติดต้ังโปรแกรม

6. เปิด XAMPP ขนึ้ มา แลว้ คลกิ Start ที่ Apache และ MySQL

7. ไปที่ เบาร์เซอร์ แล้วพมิ พ์ http://localhost/phpmyadmin/
จากนนั้ กดปุ่ม Databases แลว้ ใส่ชอื่ ใหต้ รงตามท่เี ราต้ังไวก้ บั โฟลเดอรแ์ ละเปลี่ยนเป็น
Utf8_general_ci และกด Create ทางขวามอื

ใบความรู้ หนา้ ที่
วิชา สรา้ งเว็บไซต์ eLearning ด้วย WordPress เร่อื ง การตดิ ต้ังโปรแกรม

8. จากนน้ั ให้เปดิ แถบ็ browser ใหม่และพมิ พ์ตามภาพ โดยตรง wordpress 5.9 คอื ชอ่ื

โฟลเดอร์ท่เี ราตั้ง จะต้องพมิ พ์ให้เหมือนกนั

จากนั้นจะไดห้ นา้ เวบ็ ลกั ษณะแบบน้ี ให้เราเลือกภาษาตามทีต้องการได้เลย

ใบความรู้ หน้าท่ี
วิชา สรา้ งเวบ็ ไซต์ eLearning ดว้ ย WordPress เรอื่ ง การตดิ ตัง้ โปรแกรม

9. เมอ่ื เข้าสู่หน้าต่างการตงั้ คา่ User และ Password ให้ใส่ชือ่ เป็นของเราลงไป

10. จากนนั้ ทำการ Log in โดยใส่ User กบั Password ทเี่ ราตั้งค่าไว้ แลว้ เข้าสรู่ ะบบ

ใบความรู้

วชิ า สรา้ งเวบ็ ไซต์ eLearning ด้วย WordPress เรอื่ ง แนะนำเคร่ืองมอื ในโปรแกรม หนา้ ที่

WordPress

แนะนำการใช้เครือ่ งมอื WordPress

การใช้งาน WordPress Toolbar สำหรับผู้ดูแลเว็บไซต์ หรือ Admin นั้น เมื่อล็อกอินเข้าสู่

ระบบ ก็จะพบแถบเครื่องมืออยู่ด้านบนสุด เรียกว่า WordPress Toolbar (เมื่อก่อนเรียกว่า

Admin Bar) โดยแถบเครอ่ื งมอื น้จี ะเก็บคำสั่งทีเ่ ราใชง้ านประจำ ข้อมลู ส่วนตัวของผู้ดูแลระบบ

ตวั เลอื กในการเขา้ และออกจากระบบ

Post คือ การจัดการ Blog Post หรือรวบรวมเรื่องราวที่โพสต์ลงบนเว็บไซต์ซึ่ง WordPress จะแสดงให้

ทราบวา่ เรอ่ื งราวเหลา่ นน้ั โพสต์เมอื่ ไหร่ ใครเป็นคนโพสต์

Pages คอื หน้าเว็บไซต์แตล่ ะหนา้

ใบความรู้ หนา้ ท่ี
วิชา สรา้ งเว็บไซต์ eLearning ดว้ ย WordPress เรือ่ ง แนะนำเคร่อื งมอื ในโปรแกรม

WordPress

Appearance คือ โครงสรา้ งพื้นฐานของเวบ็ ประกอบด้วยรูปแบบ ตัวอกั ษร สไตล์ และฟังก์ชันการตงั้ คา่

Plugins คอื สว่ นตดิ ตง้ั เสริมการทำงานของ WordPress

ใบความรู้ หนา้ ที่
วิชา สรา้ งเวบ็ ไซต์ eLearning ดว้ ย WordPress เรือ่ ง แนะนำเครือ่ งมือในโปรแกรม

WordPress

WordPress Plugin
1. Learn Press - Offline Payment = เปน็ Plugin ท่ใี ช้สำหรบั การชำระเงนิ แบบออฟไลน์

2. MiniOrange 2 Factor Authentication = เปน็ Plugin ท่ที ำใหม้ ีการล็อคอินชน้ั ท่ี 2

ใบความรู้ หน้าที่
วชิ า สรา้ งเว็บไซต์ eLearning ด้วย WordPress เร่อื ง แนะนำเครื่องมอื ในโปรแกรม

WordPress
3. NextGEN Gallery

NextGEN Gallery เป็น plugin สำหรับทำภาพอัลบั้มแบบ creative ในบทความที่มีความยืดหยุ่น
ในการใช้งานสูงมาก สามารถปรับแต่งได้หลากหลาย เหมาะสำหรับเว็บไซต์ที่ต้องการความสวยงามในการวาง
ภาพใหม้ ีความโดดเด่นมากกวา่ การแสดงภาพท่วั ไป รูปแบบมคี วามสวยงาม ทันสมยั ดู minimal สะอาดตา
4. Seed Fonts

Seed Fonts เป็น plugin ที่ทำให้เราดึงฟอนต์ที่อยู่บน Google Fonts มาใช้ได้ทันที โดยไม่ต้อง
embed ใหย้ ุง่ ยาก พร้อมทั้งสามารถตงั้ ค่าเบ้ืองตน้ ได้ ทัง้ ความหนา, ตำแหน่งบนเวบ็ ท่ตี ้องการใช้ ซึ่งเปน็ เวบ็ ไซต์
ทีต่ อ้ งการใช้ฟอนตใ์ หด้ ูมคี วามทันสมัยมากข้ึน

ใบความรู้ หนา้ ที่
วชิ า สรา้ งเว็บไซต์ eLearning ดว้ ย WordPress เรอ่ื ง แนะนำเครื่องมือในโปรแกรม

WordPress

5. Social Sharing by miniOrange = เป็น Plugin ที่สามารถแชร์ข้อมูลต่าง ๆ ไปยัง Application ที่อยู่
ภายนอก

6. Broken Link Checker

Broken Link Checker เป็น plugin ที่คอยตรวจสอบลิงก์ใน posts, pages, comments และส่วนอื่น
ๆ บนเว็บไซต์ หากพบลิงกเ์ สียหรือภาพทีไ่ ม่แสดง จะ redirect ไปยังลิงก์ทีเ่ ราตั้งค่าไว้ และมี notify ไปยัง
ผดู้ ูแลเว็บไซตเ์ พื่อให้มาแก้ไข พรอ้ มกบั ฟีเจอรอ์ กี มากมายสำหรบั จดั การลงิ ก์

ใบความรู้ หน้าท่ี
วชิ า สรา้ งเวบ็ ไซต์ eLearning ด้วย WordPress เร่ือง แนะนำเครอื่ งมอื ในโปรแกรม

WordPress
7. Shortlinks by Pretty Links

plugin ตัวนี้จะช่วยให้ URL มีความสั้นกระชับมากยิ่งขึ้น เราสามารถสร้างข้อความบน URL ตาม
ต้องการได้ (แตต่ ้องไม่ซำ้ กับ URL อ่นื ภายในเว็บ) โดยการใช้ URL ทีส่ ร้างใหมเ่ พ่ือ redirect ไปต่ออกี ทหี นง่ึ

8. Smart Slider 3

ใบความรู้

วชิ า สรา้ งเวบ็ ไซต์ eLearning ดว้ ย WordPress เรอ่ื ง แนะนำเครอ่ื งมอื ในโปรแกรม หน้าท่ี

WordPress

Smart Slider 3 เป็น plugin ที่ช่วยให้ผู้ใช้จัด layout ของหน้าเว็บไซต์และคอนเทนต์ได้อย่างยืดหยุ่น

โดยที่มีความง่ายระดับลาก-วาง หลายคนเรียกว่าเป็นตัวจบในการทำ layout ฟีเจอร์ค่อนข้างกว้าง ทำได้ตั้งแต่

เป็น slider, gallery, page, post ไปจนถงึ animation ทีเ่ ล่นอย่บู นเว็บ

ขอ้ เสีย ของ Smart Slider 3 คือ ฟีเจอรแ์ ละการปรับค่ามีเยอะมาก ทำใหต้ ้องใช้เวลาในการเรียนรู้การ
ใชง้ านพอสมควร และเป็น plugin ท่คี อ่ นขา้ งหนัก แต่ก็ยังถือวา่ รบั ได้ถา้ เทยี บกับฟเี จอรท์ เ่ี พยี บพร้อมระดบั น้ี

9. Lazy Load by WP Rocket

lazy load เป็น plugin ที่ช่วยให้ผู้ท่ีเข้าชมเว็บโหลดหน้าได้เร็วขึ้น โดยการโหลดภาพเฉพาะส่วนที่ผู้ใช้เหน็
ตอนที่ scroll ลงมาเจอ ภาพส่วนที่ยังไม่เห็นจะยังไม่ถูกโหลดขึ้นมา ทำให้ลดการโหลดในส่วนที่ยังไม่จำเป็นใน
หน้านั้น Lazy Load by WP Rocket ก็เป็น plugin ประเภท lazy load จากบริษัทนักพัฒนาชื่อดังในวงการ
WordPress ทเ่ี คา้ เคลมเอาไวเ้ ลยวา่ ตัวนี้ทำงานเรว็ มาก และไม่กนิ ทรัพยากรด้วยโค้ดทม่ี ขี นาดนอ้ ยกว่า 10
KB เท่าน้ัน

ใบความรู้ หนา้ ที่
วชิ า สรา้ งเวบ็ ไซต์ eLearning ด้วย WordPress เร่ือง แนะนำเคร่อื งมอื ในโปรแกรม

WordPress
10. Simple Author Box

ฟเี จอร์หลกั ทีน่ ่าสนใจมีตั้งแตเ่ บสิคอยา่ งการแสดง gravatar, name, website, description และ social
icons ไปจนถึงการปรับแต่งสไตล์เพื่อให้เข้ากับตีมเว็บไซต์ สำหรับเว็บคอนเทนต์ที่มีนักเขียนหลายคน มักจะ
ต้องการแสดงความเป็นเอกลักษณ์ของนักเขียนในเว็บไซต์ โดยการวาง Author Box ไว้ในส่วนต้นหรือท้าย
บทความ เพอื่ เปน็ การให้เครดติ แก่ผูเ้ ขียน

การติดตั้ง Themes

1. ไปทเ่ี มนู Appearance
2. กด Add New

ใบความรู้ หนา้ ท่ี
วชิ า สรา้ งเว็บไซต์ eLearning ดว้ ย WordPress เร่อื ง แนะนำเครื่องมอื ในโปรแกรม

WordPress

3. Search themes

4. กด Install

ใบความรู้ หนา้ ที่
วชิ า สรา้ งเวบ็ ไซต์ eLearning ดว้ ย WordPress เรื่อง แนะนำเครือ่ งมือในโปรแกรม

WordPress

5. กด Activate

การตดิ ต้งั Plugin จาก WordPress Repository

1. เขา้ ไปท่ีเมนู Plugin
2. กด Add New

ใบความรู้ หนา้ ท่ี
วชิ า สรา้ งเวบ็ ไซต์ eLearning ด้วย WordPress เรื่อง แนะนำเคร่อื งมือในโปรแกรม

WordPress

3. ค้นหา Plugin ทต่ี ้องการใชง้ าน

4. กด Install
5. กด Activate

ใบความรู้ หน้าท่ี
วชิ า สรา้ งเว็บไซต์ eLearning ด้วย WordPress เรือ่ ง การสร้างหน้า Home

การสร้างหน้า Home
1. ไปยงั เคร่อื งมือ รูปลกั ษณ์ >>> ปรับแตง่

เพอื่ ปรับแตง่ หน้า Home Page ขนึ้ มา

2. เลือกเครื่องมือ อตั ลักษณเ์ ว็บไซต์
เพือ่ แก้ไขเขา้ ไปแก้ไขชือ่ เว็บไซตแ์ ละใสร่ ูปโลโกท้ ี่เราออกแบบไว้

ใบความรู้ หน้าท่ี
วชิ า สรา้ งเวบ็ ไซต์ eLearning ด้วย WordPress เร่ือง การสรา้ งหนา้ Home
3. เลือกเคร่ืองมอื สเี พ่ือตกแต่งสีเว็บไซต์

เพอื่ สีเวบ็ ไซต์ใหส้ วยงาม

4. เลอื กเครื่องมอื รปู ภาพสว่ นหวั
เลือกรูปภาพท่ตี อ้ งการนำมาเป็นรปู โชว์ดา้ นบนของแต่ละหน้า

ใบความรู้ หนา้ ท่ี
วชิ า สรา้ งเวบ็ ไซต์ eLearning ด้วย WordPress เร่ือง การสร้างหนา้ Home
5. เลอื กเมนู Menu เพื่อเขา้ ไปสรา้ งNavigationบนเว็บไซต์

6. Link Navigation ไปยังหน้าต่างๆ

ใบความรู้ หนา้ ท่ี
วิชา สรา้ งเว็บไซต์ eLearning ดว้ ย WordPress เร่อื ง การสรา้ งหนา้ Home
7. เลือก theme option เพื่อแกไ้ ขเค้าโครงของหน้าเว็บไซต์

8. เลือกเครอื่ งมอื วิดเจต็ เพ่อื แก้ไขหัวขอ้ ต่างๆ

ใบความรู้

วิชา สรา้ งเว็บไซต์ eLearning ดว้ ย WordPress เร่อื ง การสร้างและออกแบบ หน้าที่

หนา้ บทเรียน

การสรา้ งและออกแบบหน้าบทเรียน

ขัน้ ตอ่ มา

จะมาทำหน้าบทเรียนนะครบั โดยทีเ่ ราจะเรม่ิ สรา้ งเมนูสำหรับกดเพอื่ เขา้ ไปสู่หนา้ บทเรยี นก่อนนะครับมีขั้นตอน

ดงั นี้

1.ไปที่หนา้ Dashboard

2.กดไปทเี่ มนทู ีช่ อื่ วา่ Pages

ใบความรู้ หน้าท่ี
วชิ า สรา้ งเวบ็ ไซต์ eLearning ด้วย WordPress เรื่อง การสร้างและออกแบบ

หน้าบทเรยี น
3.จะได้หน้าน้ีขน้ึ มาให้กดไปท่ปี ุ่ม Add New มุมบนซ้ายมือ

4.จากนนั้ จะไดห้ นา้ นึ้ขึ้นมา หนา้ นีจ้ ะใชส้ ำหรบั การสร้างแถบเมนูสำหรับลงิ ค์ไปยงั เนื้อหาที่จะลง หรอื ใชใ้ นการ
สร้างหน้าเพจเพมิ่ กไ็ ด้

ใบความรู้

วิชา สรา้ งเว็บไซต์ eLearning ด้วย WordPress เรอื่ ง การสร้างและออกแบบ หนา้ ท่ี

หนา้ บทเรียน

5.หลังจากเข้าไปแล้วให้เราทำการพิมพเ์ รอ่ื งหรอื บทเรียน หรอื รายวิชาที่เราเลือกมาใส่ดังรปู หลังจากใสช่ ่ือแล้ว

ให้กดปมุ่ + สดี ำๆ ขวามอื จากน้นั ไปที่คำส่งั Code

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

ใบความรู้

วิชา สรา้ งเวบ็ ไซต์ eLearning ด้วย WordPress เร่อื ง การสรา้ งและออกแบบ หน้าที่

หนา้ บทเรียน

7.ใหท้ ำการพมิ พ์ช่อื ลิงคท์ เ่ี ราจะใหส้ รา้ งแล้วกด Create Page มันจะทำการสรา้ งหน้า Page ให้เราอตั โนมตั ิ

8.หลังจากนัน้ ให้เรากดทปี่ ุ่ม Piblish ปมุ่ สีนำ้ เงินมมุ บนขวามือเมื่อเราตอ้ งการจะเผยแพรแ่ ล้ว

ใบความรู้ หน้าที่
วิชา สรา้ งเว็บไซต์ eLearning ด้วย WordPress เรอ่ื ง การสรา้ งและออกแบบ

หนา้ บทเรยี น
9.เปน็ อันเสรจ็ ส้ินจะไดห้ น้าดังกล่าวตามรปู ต่อไปนี้

10. เวลากดเขา้ ไปมันก็จะเขา้ ไปหนา้ ทเ่ี ราไดส้ รา้ งไว้แตม่ นั เป็นหน้าว่างเปลา่ เรากท็ ำการกดไปท่ี Edit ดา้ นลา่ ง

ใบความรู้

วิชา สรา้ งเวบ็ ไซต์ eLearning ด้วย WordPress เรอ่ื ง การสร้างและออกแบบ หน้าที่

หน้าบทเรยี น

11. จะปรากฏหนา้ นีข้ ึ้นมาให้เราทำการใสเ่ น้อื หาทต่ี อ้ งการโดยการกดไปท่ปี ุม่ + ดา้ นขวามือกด Browns All

จะขึ้นแถบเมนมู าดา้ นขา้ งแบบน้ถี า้ เราจะแนบรูปกอ่ นให้เรากดเลือกเมนู Image หรอื ถา้ เราจะใสเ่ น้ือหากอ่ นให้

เราเลอื กไปที่ Paragraph หรอื เราจะทำแบบข้างนงึ เป็นรปู ข้างนึงเป็นเนอื้ หาให้เลือกไปที่ Media & Text

12.หลังจากเราใส่เนอ้ื หาแล้วเรากท็ ำการกดทป่ี ุ่ม Publish ทข่ี วามอื ด้านบนเหมือนเดิมเป็นอันเสร็จสนิ้

ใบความรู้ หน้าท่ี
วิชา สรา้ งเว็บไซต์ eLearning ดว้ ย WordPress เร่ือง การสรา้ งและออกแบบ

หน้าบทเรียน
13.จะได้หน้าตาดงั นี้

ตอ่ มาเราสอนสร้างโดยการสร้างหน้าเพจใหแ้ ล้วซงึ่ ในการทำแบบน้มี นั จะไปเพ่มิ ปุ่มท่ี Menu bar ให้ทนั ทแี ตเ่ รา
มอี ีกวธิ นี งึ เพ่ือเพ่มิ เตมิ ลกู เล่นใหอ้ ีกแบบนน้ั คอื การสรา้ งบทเรยี นโดยการ Posts
1.ใหเ้ ราไปท่หี นา้ Dashboard เหมือนเดมิ จากนั้นไปทปี่ มุ่ เมนู Posts กด Add New

ใบความรู้ หน้าที่
วิชา สรา้ งเวบ็ ไซต์ eLearning ดว้ ย WordPress เร่อื ง การสร้างและออกแบบหนา้ บทเรียน

2.จะไดห้ น้าคล้ายๆแบบเดิมที่เราทำไปให้เราทำการใสช่ อื่ รายวิชาหรือหัวเร่ืองท่เี ราจะใช้ลงไปทำตามข้นั ตอนเดิม

กดทปี่ ุ่ม + เลอื กคำส่ัง Code จากน้ันกดที่ Link ตั้งช่อื บทที่ 1 การใชค้ ำศพั ท์ ถ้าเรามี 2 บทเรากเ็ พม่ิ เขา้ ไปอกี

โดยการกด Enter ลงมาแล้วกดคำส่งั Link ใหมแ่ ล้วตัง้ ช่อื กด Create pages

3.ถ้าเราพอใจแล้วกด Publish ไดเ้ ลยครับเปน็ อนั เสรจ็ สิ้นมนั ก็จะทำการโพสไปทีห่ น้า Home ของเรา

ใบความรู้ หน้าท่ี
วิชา สรา้ งเว็บไซต์ eLearning ด้วย WordPress เรื่อง การสรา้ งและออกแบบหน้าบทเรยี น

4.พอเรากดเขา้ ไปจะเป็นดงั รปู จะข้นึ เนอ้ื หาบททเี่ ราจะทำและช่องคอมเม้นสำหรบั รับคำติชมทตี่ ิดมากับตัว ธมี ท่ี

เราใช้โดยถา้ เราจะเพ่ิมบทเรยี นเราก็แค่กด Edit ด้านล่างกรอบส่เี หลีย่ มกส็ ามารถทำได้ง่ายๆแลว้ ครบั

5.พอกดเข้าหนา้ บทเรยี นจะเป็นหนา้ เปล่า เหมอื นเดมิ เลยครับกด Edit แล้วเราไปใส่เนอ้ื หากนั ไดเ้ ลยครบั

ใบความรู้ หนา้ ท่ี
วิชา สรา้ งเว็บไซต์ eLearning ดว้ ย WordPress เรอ่ื ง การจดั การสนิ คา้

การสร้างหลกั สตู ร

1. กดท่ี learnpress จากนั้นกดท่ี courses และกดท่ี Add New

2. จากน้ันใส่ช่อื หลกั สูตรทเี่ ราต้องการสร้างท่ีชอ่ ง “ใสช่ อื่ ”

ใบความรู้ หน้าท่ี
วิชา สรา้ งเว็บไซต์ eLearning ด้วย WordPress เรอ่ื ง การจัดการสินคา้
หากเราต้องการเพิ่มคำอธิบายสามารถใส่ในชอ่ งท่อี ยูภ่ ายใต้ช่องใสช่ ่ือ

3.จากน้ันเราจะเริ่มการสรา้ งบทเรียนแต่ละบทในช่อง Curriculum จากน้ันพมิ พช์ ่อง Create a new section
พมิ พช์ ่ือบทเรยี นทเ่ี ราต้องการ จากนัน้ กด Enter

ใบความรู้ หน้าที่
วิชา สรา้ งเว็บไซต์ eLearning ด้วย WordPress เร่อื ง การจัดการสินคา้

4. หลงั จากท่เี ราสรา้ งบทเรยี นแลว้ จากนน้ั เราจะสรา้ งเน้ือหาภายใตบ้ ทเรียนน้ัน โดยการพิมพ์ใสช่ ่อง

Create a new lesson

5. การสร้างคำถามทำไดโ้ ดยการกดที่ไอคอน นาฬกิ าขา้ งๆรปู หนงั สือ จากนั้นพิมพ์ลงในช่อง Create a new
quiz

ใบความรู้ หน้าท่ี
วชิ า สรา้ งเว็บไซต์ eLearning ด้วย WordPress เรอื่ ง การสรา้ งระบบ Social

Login

การสร้างระบบสมาชิก
การติดตัง้ Plugins ของระบบสมาชกิ

1.ไปท่ี Plugins

ใบความรู้ หนา้ ท่ี
วชิ า สรา้ งเวบ็ ไซต์ eLearning ดว้ ย WordPress เรื่อง การสรา้ งระบบ Social

Login
2. คลกิ ท่ี Add New

3. คลิกท่ีชอ่ ง Search
4. พมิ พ์คำว่า social login

ใบความรู้

วชิ า สรา้ งเว็บไซต์ eLearning ดว้ ย WordPress เรื่อง การสร้างระบบ Social หน้าที่

Login

5. ตอ่ มาหา WordPress Social Login and Register (Discord, Google, Twitter, LinkedIn) และคลกิ

Install Now

6. เมือ่ Install เสรจ็ ส้ิน ตอ่ มาใหค้ ลกิ คำว่า Activate

ใบความรู้ หน้าท่ี
วชิ า สรา้ งเวบ็ ไซต์ eLearning ดว้ ย WordPress เร่อื ง การสร้างระบบ Social

Login
7.เมอ่ื Activate เสร็จสิน้ ก็จะเดง้ มาทีห่ นา้ Plugins ท้ังหมด

ใบความรู้ หนา้ ท่ี
วชิ า สรา้ งเว็บไซต์ eLearning ด้วย WordPress เรื่อง การสรา้ งระบบ Social

Login

การตงั้ คา่ Plugins ของระบบสมาชิก

1.คลกิ ไปท่ี miniOrange Social Login, Sharing

ใบความรู้ หนา้ ท่ี
วิชา สรา้ งเวบ็ ไซต์ eLearning ดว้ ย WordPress เรือ่ ง การสรา้ งระบบ Social

Login
2.เม่ือเข้ามาแล้ว ก็จะขนึ้ หนา้ ตา่ งเตม็ ไปหมด

3.ให้เลอ่ื นเคอร์เซอรไ์ ปท่ี LINKEDIN และ AMAZON แลว้ ทำการคลิกท่ีปมุ่ ดา้ นล่างเพือ่ ปิดการใชง้ าน
4.ต่อมาให้คลกิ ไปท่รี ูป GOOGLE เพอื่ ทำการ Set Up GOOGLE ตามขน้ั ตอนตอ่ ไป