คู่มือการพัฒนาเว็บไซต์ระดับหลักสูตรด้วย W

1

2 คู่มอื การพฒั นาเวบ็ ไซตร์ ะดับหลกั สตู รดว้ ย WordPress QR คมู่ ือการพฒั นาเวบ็ ไซต์ระดบั หลักสูตรด้วย WordPress

3 คำนำ ตามที่ คณะครุศาสตร์ได้ดาเนินการตามเกณฑ์คุณภาพการศึกษาเพื่อการดาเนินการท่ีเป็นเลิศ EdPEx ย่อมาจาก “Education Criteria for Performance Excellence” ในปีการศึกษา 2563 คณะกรรมก าร ผู้รับผิดชอบ หมวด 4 การวดั การวเิ คราะห์ และการจัดการความรู้ มภี ารกจิ ในการดแู ลและพัฒนาจดั การโครงสรา้ ง พนื้ ฐาน (Infrastructure) ระบบเครอื ขา่ ย ระบบสารสนเทศ พัฒนาระบบสารสนเทศเพ่ือสนับสนนุ การบรหิ ารและ การปฏบิ ัติงานของคณะครศุ าสตรใ์ ห้มปี ระสิทธผิ ลและเกิดประสทิ ธภิ าพ ทั้งนี้ฝ่ายงานบริหารและการประกันคุณภาพการศึกษา คณะครุศาสตร์ มีแนวทางในการพัฒนาเว็บไซต์ ระดับคณะ และระดับหลักสูตรด้วย Wordpress ซ่ึงแนวทางท่ีสาคัญคือ คณะกรรมการผู้รับผิดชอบหลักสูตร สามารถนาไปพัฒนาเว็บไซตร์ ะดบั หลักสูตร เพื่อนาเสนอข้อมูลต่างๆ และประชาสัมพนั ธ์กจิ กรรมของหลกั สูตร ในการน้ี คณะกรรมการผูร้ บั ผดิ ชอบ หมวด 4 การวดั การวเิ คราะห์ และการจัดการความรู้ ไดจ้ ดั ทา คมู่ ือ ปฏิบัติการ “คู่มือการพัฒนาเว็บไซต์ระดับหลักสูตรด้วย Wordpress” เพ่ือนาไปใช้เป็นสื่อนิเทศในการพัฒนา บุคลากรของคณะครุศาสตร์ และเป็นการพัฒนาระบบตามแนวทางตามเกณฑ์คุณภาพการศึกษาเพ่ือ การดาเนินการที่เป็นเลิศ ถ้ามีขอ้ เสนอแนะประการใด โปรดกรุณาแจง้ ใหท้ ราบ จะน้อมรับดว้ ยความยนิ ดี

สำรบญั 4 บทท่ี หน้ำ 1 1 ความรู้เบื้องต้นเกย่ี วกับ WordPress 4 2 การเข้าใช้งาน WordPress 9 14 3 การสรา้ งหนา้ เวบ็ เพจ 21 4 การจดั การเมนู 24 5 การตกแต่ง Theme 26 6 การเพิ่มข้อมลู ในหนา้ หลัก 7 Widget

1 บทท่ี 1 ควำมรู้เบื้องตน้ เกยี่ วกับ WordPress WordPress คอื อะไร? WordPress คือ เคร่ืองมือที่เป็นตัวช่วยในการสร้างเว็บไซต์ ที่มีระบบจัดการข้อมูล และสร้างเนื้อหา (Content Management System: CMS) ที่สามารถให้เราเพ่ิมเตมิ บทความ รูปภาพ ไดเ้ องแบบงา่ ยๆ โดยไม่ต้อง มีความรู้เร่ือง Code หรือความรู้ด้านโ ปร แกร มมิง (ท่ีมา : https://padveewebschool.com/learn- wordpress/) WordPress คือ แอพพลิเคชั่นหรือระบบโปรแกรมสาเร็จรูปท่ีใช้สาหรับการสร้างเว็บไซต์แบบ CMS (Content Management System) ที่ได้รับความนิยมและมีชื่อเสียงมากในปัจจุบัน สาเหตุเป็นเพราะโปรแกรม WordPress ช่วยให้ผู้ใช้งานไม่จาเป็นท่ีจะต้องเรียนรู้ถึงภาษาหรือวิธีการเขียนโค้ดในการทาเว็บไซต์ เนื่องจาก ระบบของ WordPress ได้ทาการสนับสนุนการทางานท้ังหน้าบ้านและหลังบ้านของเว็บไซต์อยู่แล้ว ทาให้ผู้ใช้ สามารถสร้างเว็บไซต์ของตัวเองได้ง่าย มีหน้าตาสวยงามตามท่ีต้องการ และมีความรวดเร็วขึ้น (ท่ีมา : https://www.themevilles.com/wordpress-is/) WordPress คอื โปรแกรมทชี่ ว่ ยในการสร้างและบริหารเว็บไซต์แบบสาเรจ็ รูป ที่เราสามารถติดต้ังบนเว็บ server เพื่อสร้างเว็บไซต์, blog หรือ community ซึ่งจะมีระบบจัดการบทความ (Content Management System : CMS) หรือมรี ะบบหลงั บา้ นไวช้ ่วยในการจัดการขอ้ มลู ทาใหง้ ่ายต่อการใชง้ านยิ่งข้นึ ถือเป็นอกี ทางเลอื ก ที่น่าสนใจมาก สาหรับคนท่ีต้องการสร้างเว็บไซต์ ไม่ว่าจะเป็นกลุ่มธุรกิจขนาดเล็กจนถึงกลุ่มธุรกิจขนาดใหญ่ เพราะ WordPress มีฟังก์ชั่นมากมายที่สามารถตอบโจทย์ความต้องการต่ างๆของเราได้ (ที่มา : https://blog.metrabyte.cloud/manual-wordpress/) สรุป WordPress คอื เคร่อื งมือทชี่ ่วยในการสรา้ งและบรหิ ารจดั การเว็บไซด์ที่ทางานผ่านเวบ็ เบราเซอร์ โดยทผี่ ู้สรา้ งสามารถออกแบบ พัฒนา และบรหิ ารจัดการเนอื้ หาได้โดยไมจ่ าเปน็ ตอ้ งใช้ความรทู้ างดา้ นโปรแกรมมิง ข้อดีในกำรใช้งำน WordPress (ที่มา : https://www.cz.co.th/) 1. WordPress สามารถใช้งานได้ฟรเี พยี งแค่ดาวนโ์ หลด ติดตัง้ กส็ ามารถใชง้ านได้ทันที 2. WordPress ง่ายตอ่ การเรยี นร้แู ละใชง้ าน การใช้งานบนหนา้ เว็บไซต์ไม่จาเปน็ ตอ้ งจ้างนกั เขียนโปรแกรม คอมพวิ เตอร์ ไมว่ ่าจะเปน็ เว็บไซต์ธรุ กจิ , บลอ็ ก, เว็บไซต์รปู ภาพ หรือร้านค้าอคี อมเมิรซ์ ก็สามารถใช้งานไดอ้ ย่าง งา่ ยดาย 3. WordPress ทางานได้ในทกุ ขนาดของหน้าจอและอุปกรณ์ การเข้าถงึ เวบ็ ไซตใ์ นการแสดงผลทีส่ ามารถข้ึน แสดงผลไดด้ ี 4. WordPress ลงเนื้อหาได้เรว็ และสามารถตกแตง่ ไดต้ ามทีเ่ ราตอ้ งการ ใหค้ วามเป็นอสิ ระตอ่ การออกแบบ เวบ็ ไซต์ 5. WordPress ชว่ ยปกปอ้ งเวบ็ ไซต์ของคุณจากเฮกเกอร์และมลั แวร์ ทั้งน้ี การใช้งานควรศกึ ษาคู่มอื การใช้ งาน WordPress กอ่ นทกุ เมื่อ

2 6. ลขิ สิทธิ์ของเน้อื หาบนเว็บไซต์ท่สี ามารถควบคมุ ได้เอง ดว้ ยการโอนถ่ายไฟล์ เพ่ือเผยแพรไ่ ปยังแพลตฟอรม์ อื่น ๆ โดยการย้ายขอ้ มูลออกจาก WordPress 7. Plugin (รปู แบบเสรมิ ) ใหเ้ ลอื กใช้งานไดฟ้ รมี ากมาย ปลัก๊ อนิ เพ่มิ คุณสมบัตแิ ละฟงั กช์ ่ันการทางานทกุ ประเภท แตม่ ขี อ้ เสยี คอื ยิ่งมปี ล๊กั อนิ มากก็ทาใหเ้ ว็บไซตไ์ ด้รับความเสยี่ งของปัญหาทเี่ กิดขน้ึ มากข้นึ เท่านนั้ ปัญหา เกี่ยวกับปลั๊กอนิ อาจเป็นแบบสุ่มหรือมปี ัญหาเฉพาะเพ่มิ เตมิ เกย่ี วกบั การอัพเกรดปล๊กั อนิ นน้ั 8. Theme (รปู แบบการแสดงผล) ทีห่ ลากหลาย ท่ีสามารถตดิ ต้งั ไดใ้ นคล๊ิกเดียว เพยี งเลือกซอื้ หรือดาวน์ โหลดมาใช้งาน ตวั อยำ่ งเว็บไซต์ทพ่ี ฒั นำจำก WordPress เวบ็ ไซต์คณะครศุ าสตร์

3 https://www.tedxmelbourne.com/ https://thewaltdisneycompany.com/

4 บทท่ี 2 กำรเข้ำใชง้ ำน WordPress กำรเข้ำส่เู วบ็ ไซตร์ ะดับหลกั สูตร คณะครุศาสตร์ ได้ดาเนินการสนับสนุนให้มีการพัฒนาเว็บไซต์ในระดับหลักสูตร ดังน้ันจึงได้ดาเนินการ สร้าง URL เว็บไซตข์ องหลักสตู รดังตอ่ ไปน้ี URL สำขำวชิ ำ http://edu.vru.ac.th/ech การศกึ ษาปฐมวยั http://edu.vru.ac.th/eel การประถมศึกษา http://edu.vru.ac.th/thai ภาษาไทย http://edu.vru.ac.th/china ภาษาจนี http://edu.vru.ac.th/eng ภาษาองั กฤษ http://edu.vru.ac.th/engep ภาษาองั กฤษ EP http://edu.vru.ac.th/math คณติ ศาสตร์ http://edu.vru.ac.th/mathep คณติ ศาสตร์ EP http://edu.vru.ac.th/chem เคมแี ละวทิ ยาศาสตร์ทัว่ ไป http://edu.vru.ac.th/bio ชีววิทยาและวทิ ยาศาสตรท์ ่วั ไป http://edu.vru.ac.th/sciep วิทยาศาสตรท์ ั่วไป (EP) โดยผูบ้ รหิ าร คณาจารย์ นกั ศึกษา และบุคคลทว่ั ไปสามารถเขา้ ชมเว็บไซต์ในระดบั หลกั สูตรผา่ น URL ทีก่ าหนดใหข้ ้างต้น โดยแต่ละหลักสูตรจะมีหน้าที่ในการพัฒนาและปรบั ปรุงเว็บไซตใ์ หม้ ีความเป็นปัจจุบันอย่าง สม่าเสมอ

5 ตัวอยา่ งเวบ็ ไซตห์ ลักสูตรภาษาไทย http://edu.vru.ac.th/thai/ กำรเข้ำสเู่ วบ็ ไซต์ระดบั หลักสูตรเพอื่ ปรับปรงุ แกไ้ ขเวบ็ ไซต์ ในการออกแบบ พัฒนา และบริหารจดั การเน้อื หาดว้ ย WordPress จะต้องมกี ารเขา้ สู่ระบบบริหารจดั การ โดยมีการล็อกอินด้วย Username และ Password ทคี่ ณะกาหนดให้ ดงั ต่อไปนี้ 1. พิมพ์ชือ่ URL ของหลกั สตู ร ตามดว้ ย wp-admin เชน่ หลกั สตู รประกาศนียบัตรบัณฑิตสาขาวิชาชีพครู ให้พมิ พ์ wp-admin ตอ่ ทา้ ย URL ดงั น้ี http://edu.vru.ac.th/dip/wp-admin/ ดังภาพ

6 2. ใส่ Username และ Password 1. ใส่ admin 2. ใส่ Password 3. กดปุ่ม เข้าสูร่ ะบบ 3. เข้าสู่หน้า WordPress สาหรับสาหรบั การออกแบบ พัฒนา และบริหารจดั การเน้อื หาดว้ ย WordPress

7 4. การเปลยี่ นรหัสผ่าน เพอื่ ความปลอดภยั ในการใช้งาน ผู้ดูแลระบบสามารถเปล่ียนรหัสผา่ นได้ดงั น้ี 1. เลือกผู้ใช้ 2. เล่ือนลงด้านล่าง 3. เปลย่ี นรหัสผ่าน

8 5. การเพม่ิ ผู้ใชง้ าน เราสามารถเพ่มิ ผู้ใช้งานเพ่อื ชว่ ยดาเนินการพฒั นาปรับปรุงเวบ็ ไซตไ์ ด้ ดังน้ี 2. ใสข่ ้อมูลผู้ใชง้ านท่ีต้องการเพ่มิ 1. เลอื ก เพ่ิมผู้ใช้งาน 3. กดปุ่มเพิ่มผใู้ ชง้ าน

9 บทท่ี 3 กำรสรำ้ งหน้ำเวบ็ เพจ 1. การสร้างหนา้ เว็บเพจ มีขั้นตอนดังน้ี 1. เลอื ก หนา้ 2. เลือก เขียน หน้าใหม่ 3. ใสร่ ายละเอยี ดหัวขอ้ 4. ใสร่ ปู 6. กดปุม่ เผยแพร่ 5. พมิ พ์เนื้อหาทีต่ ้องการ

10 7. กด ดหู น้า เพอื่ ดูผลลัพธ์ ตรวจสอบผลลพั ธ์

11 8. เลือก Edit หากตอ้ งการกลับไปแก้ไข 2. การปิดชอ่ งแสดงความคดิ เห็น ในการสรา้ งเวบ็ เพจดว้ ย WordPress จะทาให้เกดิ ช่องแสดงความคิดเหน็ ดงั ภาพ ชอ่ งแสดงความคิดเหน็ ซงึ่ จะทาให้มีโปรแกรมอัตโนมตั ทิ ่ีไม่พึงประสงคเ์ ขา้ มาแสดงความคิดเหน็ ดงั น้นั จึงตอ้ งปิดช่องแสดงความ คดิ เหน็ ดังนี้

12 1. เลอื กหน้าทงั้ หมด 2. เลอื ก แก้ไขอย่างรวดเรว็ 3. เลอื ก เครอ่ื งหมายถกู สฟี ้าออก 4. กดปมุ่ อพั เดท

13 ดูผลลพั ธจ์ ะพบว่าช่องแสดงความคดิ เห็นหายไป 3. การลบหนา้ หากเราตอ้ งการลบหน้าทไ่ี ม่ต้องการออกสามารถทาได้ดังนี้ 1. เลอื กหนา้ ทั้งหมด 2. เลอื ก ถังขยะ

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

15 1. เลือกรปู แบบบล็อก 2. เลือกเมนู 3. พมิ พ์คาว่า “เมนหู ลกั ” 4. กดปุม่ สร้างเมนู

16 5. เลอื ก “เมนูหลกั ” 6. ใสเ่ คร่ืองหมาย “#” ในช่อง URL 8. กดปมุ่ เพ่ิมลงเมนู 7. ใสป่ ้ายช่อื เมนู ในที่น้กี าหนดให้เปน็ “อาจารยผ์ ู้รบั ผดิ ชอบหลักสูตร” 9. กดปุ่ม บนั ทกึ เมนู

17 10. เลือกทาเครื่องหมายถูก หน้าเวบ็ เพจทีต่ อ้ งการนาเข้าสู่เมนู 11. กดปุ่ม เพิ่มลงเมนู 12. ใช้เมาสเ์ ล่ือนเวบ็ เพจ ย่อยเข้าไปด้านขวาให้เหล่อื ม กบั เมนูหลักทต่ี ้องการ

18 14. สามารถใชเ้ มาส์เลือ่ นเว็บเพจ ตามลาดบั ที่ต้องการได้ 13. เลอ่ื นเวบ็ เพจรายช่อื อาจารยใ์ ห้ครบทกุ ท่าน 15. กดป่มุ บันทึกเมนู 17. เม่ือนาเมาสไ์ ปวางจะปรากฏ เมนเู พอื่ นาไปสู่เวบ็ เพจทต่ี อ้ งการ 16. ดผู ลลัพธ์ จะพบว่ามีเมนู “อาจารย์ผ้รู บั ผดิ ชอบหลักสตู ร ปรากฏขน้ึ ”

19 18. เราสามารถเพม่ิ เมนูตา่ งๆตามท่ี ตอ้ งการได้ในชอ่ ง ปรบั แตง่ ลิงค์ 20.ทกุ คร้ังทม่ี กี ารเพมิ่ เติมหรอื แกไ้ ขเมนู จะต้องกดป่มุ บันทกึ เมนทู กุ คร้งั

20 การจัดเรยี งเมนูนนั้ เมนูท่ีเราวางไว้ในระดับบนสดุ จะปรากฏอยู่ในหน้าเวบ็ เพจในบนแถบเมนดู า้ นซ้ายสุด เรียงกนั ไปดังภาพ

21 บทที่ 5 กำรตกแต่ง Theme การตกแตง่ Theme เป็นการปรบั แต่งหนา้ ตาของเว็บไซตโ์ ดยภาพรวม ใหม้ ีรปู ภาพ และโทนสีท่ตี ้องการ ซ่งึ มีวิธีการดงั ต่อไปนี้ 1. เลือกรปู แบบบล็อก 2. เลอื ก Themes 3. กดป่มุ Customize กำรปรับแต่ง Site Title & Tagline สามารถพิมพแ์ กไ้ ขไดท้ นั ที กำรปรับแต่งสีในส่วนตำ่ งๆของหนำ้ เว็บไซต์

22 สามารถเลือกได้จากส่วนนี้ กำรเปลย่ี นรปู ภำพสว่ นหัว สามารถเปล่ียนรูปภาพได้จากสว่ นน้ี

23 ทุกคร้งั ทีม่ กี ารปรับแต่ง Theme จะตอ้ งกดป่มุ Save & Publish ทุกครั้งภายหลังการ ปรับแตง่ เรียบรอ้ ยแล้ว

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

25 ขอ้ มูลทนี่ าเสนอจะปรากฏบนหนา้ หลัก

26 บทที่ 7 Widget Widget คือ โมดูลนึงที่อยู่ในเวริ ์ดเพรส หรือ จะเรียกว่าเป็น “ช้ินส่วน” บ้างก็เรียกว่า Block ที่ถูกเขียน ขึ้นมาให้มีฟังก์ชันการทางานเฉพาะด้าน เตรียมให้เราหยิบไปวางในตาแหน่งวิดเจ็ตต่างๆ ตัวอย่างเช่น ปฏิทิน, ช่องค้นหา, โพสล่าสุด, ข้อความ, รูปภาพ ฯลฯ ซึ่งเราสามารถหยิบวิดเจ็ตเหล่าน้ีไปวางในตาแหน่งต่างๆ ได้เลย (ท่มี า : https://tumweb.co/widget-wordpress/) การแทรก Widget สามารถทาไดด้ ังนี้ 1. เลือก รปู แบบบลอ็ ก 2. เลือก Widget บทที่ 7 กำรเพ่ิมขอ้ มลู ในหนำ้ หลกั

27 ใชเ้ มาสล์ าก Widget ที่ต้องการไปไว้ในส่วนของ Main Sidebar เช่น ตอ้ งการเลอื ก ปฏิทิน ให้ใช้เมาส์ลาก ปฏิทินไปไว้ในสว่ นของ Main Sidebar ดังภาพ 3. ใส่หวั ขอ้ 5. จะปรากฏปฏิทนิ ท่ี 4. กดปมุ่ บนั ทึก หน้าเว็บไซต์