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

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

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

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

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 ทำงานได้ในทุกขนาดของหน้าจอและอปุ กรณ์ การเข้าถึงเว็บไซต์ในการแสดงผลทสี่ ามารถขึ้น

2 แสดงผลได้ดี 4. WordPress ลงเนอื้ หาได้เรว็ และสามารถตกแตง่ ไดต้ ามทเี่ ราต้องการ ให้ความเป็นอสิ ระต่อการออกแบบ เวบ็ ไซต์ 5. WordPress ชว่ ยปกป้องเวบ็ ไซตข์ องคุณจากเฮกเกอรแ์ ละมัลแวร์ ทั้งนี้ การใชง้ านควรศึกษาค่มู ือการใช้ งาน WordPress กอ่ นทุกเมื่อ 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) http://edu.vru.ac.th/psy วชิ าชีพครู (จติ วิทยา) http://edu.vru.ac.th/techno วิชาชีพครู (เทคโนโลยแี ละนวัตกรรมทางการศึกษา) http://edu.vru.ac.th/eva วชิ าชีพครู (การวัดและประเมินผล) http://edu.vru.ac.th/cin วิชาชีพครู (หลกั สตู รและการจดั การเรียนรู้) http://edu.vru.ac.th/dip ประกาศนียบัตรบณั ฑติ วชิ าชพี ครู http://edu.vru.ac.th/gradcin หลกั สตู รและการสอน (มหาบัณฑิตและดษุ ฎีบัณฑติ ) http://edu.vru.ac.th/edai นวัตกรรมการบรหิ ารการศกึ ษา (มหาบณั ฑติ และดุษฎบี ณั ฑิต) โดยผูบ้ ริหาร คณาจารย์ นกั ศึกษา และบุคคลทัว่ ไปสามารถเข้าชมเว็บไซตใ์ นระดบั หลักสูตรผ่าน 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. กดปมุ่ บนั ทึก หน้าเว็บไซต์

28