การสร้างเว็บไซต์หน่วยงานด้วย-Wordpress

1 เวิรด์ เพรส (Wordpress) WordPress เป็นเว็บไซต์สำเร็จรูปสำหรับใช้ในการจัดการเนื้อหาต่างๆ ในเว็บไซต์ หรือที่เรียกว่า Content Management System (CMS) ซ่ึงข้อดีหลักของโปรแกรม CMS คือช่วยจัดรูปแบบหน้าเว็บเพจ และเนื้อหาในเว็บไซต์ โดยท่ีผู้ใช้งานไม่จำเป็นต้องเขียนโคด้ เอง แตกต่างจากการสร้างเว็บไซต์โดยการเขยี นโค้ด เอง ซ่ึงเราจะต้องมีความรู้ในการเขียนโค้ดต่างๆเช่น HTML, PHP, CSS หรือ Java Script เพ่ือสร้างรูปแบบ หน้าเวบ็ เพจต่างๆ ข้ึนมา หรอื อาจใช้โปรแกรม เช่น Adobe Dreamweaver สรา้ งเว็บเพจ จากนน้ั จึงใส่เน้ือหา แล้วทำการลิงค์หน้าต่างๆ เข้าด้วยกันจนเป็นเว็บไซต์ แล้วค่อยอัพโหลดไฟล์ลงเว็บเซิร์ฟเวอร์ (Web Server) หรอื เว็บโฮสตง้ิ (Web Hosting) ท่ีใชบ้ ริการอยู่ รปู ท่ี 1.1 แสดงหน้าจอเวบ็ ไซตข์ องเทศบาลเมอื งเขลางคน์ ครซึง่ สร้างดว้ ย Wordpress

2 WordPress เป็นโปรแกรม CMS ที่นิยมใช้งานเป็นอันดับหน่ึงในการใช้สร้างเว็บไซต์ โดยประมาณ 36% หรือกว่าสามแสนหกหม่ืนล้านเว็บไซต์ท้ังหมดบนโลก ต้ังแต่เว็บเล็กๆ ไปจนถึงเว็บไซต์ใหญ่ๆ เช่น Bloomberg, Walt Disney, Angry Birds, Harvard University, Mercedes Benz เป็นต้น ต่างก็สร้างบน แพลตฟอรม์ ของ WordPress ท้งั สิ้น โดยประเทศไทยมีเว็บไซต์ที่ใช้โปรแกรม CMS ประมาณ 29,000 เว็บไซต์ และใช้งาน Wordpress ประมาณ 20,000 เว็บไซต์ หรือคิดเป็น 70% ของเว็บไซต์ประเภท CMS ทั้งหมดใน ประเทศไทย (ท่ีมา https://trends.builtwith.com/cms) รูปที่ 1.2 แสดงสถิตเิ ว็บไซต์ประเภท CMS (กรกฎาคม 2563) การใช้ WordPress สร้างเวบ็ ไซต์ หรอื เวบ็ ไซต์ร้านขายของออนไลน์นั้น WordPress จะจัดการในเรือ่ ง ของการเขียนโค้ดสำหรับสร้างรูปแบบหน้าเว็บเพจให้ทั้งหมด เราเพียงเลือกรูปแบบเว็บไซต์ธีม (Theme) ที่ สวยงามและเหมาะสม ซ่ึงมีให้เลือกมากมายจากใน WordPress หรือโหลดจากเว็บอ่ืนๆ ก็ได้ ซึ่งเราสามารถ ปรับแต่งรายละเอียดรูปแบบธมี และจัดหนา้ เว็บเพจของเราได้อยา่ งงา่ ยดายจากเมนตู า่ งๆ ท่มี ีใหเ้ ลือกอีกด้วย นอกจากธีมแล้ว เรายังสามารถติดตั้ง ปล๊ักอิน (Plugins) เพ่ือเพิ่มฟังก์ช่ันการใช้งาน รวมถึงลูกเล่น ตา่ งๆให้แก่เว็บไซต์ของเรา เช่น ร้านขายของออนไลน์ ตะกร้าสินค้า ระบบสมัครสมาชิก กราฟิก การเล่นสไลด์ รูปภาพและข้อมูล แบบฟอร์มต่างๆ เป็นต้น โดยการติดตั้ง หรือลบออกน้ันง่ายและสะดวกรวดเร็วเพียงคลิก เมาส์ไมก่ ่คี รั้ง คลา้ ยกับการติดตงั้ โปรแกรมลงบนเครือ่ งคอมพวิ เตอร์ของเรา การเขียนโพสต์บน WordPress คือการสร้างเร่ืองราวต่างๆ ในเว็บไซต์ ซ่ึงอาจเรียกว่า ข่าวสาร ก็ได้ โดยการสร้างโพสต์ออกแบบมาให้ผู้ใช้งานสามารถสร้าง แก้ไข เนื้อหา ข้อความ รูปภาพต่างๆ ได้อย่างสะดวก รวดเร็วโดยไม่ต้องเขียนโค้ดใดๆ เหมือนเราทำงานอยู่บนหน้า PowerPoint ซ่ึงมีเคร่ืองมือต่างๆ ให้เรา ปรับเปลย่ี นรูปแบบตัวอักษร ใสร่ ูปภาพ สพี นื้ หลงั จดั รปู แบบหน้า เป็นตน้ จุดเด่นของ WordPress คือความง่ายในการใชง้ าน มีความปลอดภยั สูง ใช้สร้างเว็บไซต์ได้หลากหลาย การใช้งาน ต้ังแต่เว็บบล็อกธรรมดา ไปจนถึงร้านขายของออนไลน์ โดยออกแบบมาให้ผ้ใู ช้งานสามารถปรับแต่ง

3 หน้าตาเว็บเพจ จัดหน้าเว็บ จัดเน้ือหา ใส่ลูกเล่น และจัดการไฟล์ผ่านเคร่ืองมือและเมนูต่างๆ ได้อย่างง่ายดาย สะดวก และรวดเร็ว นอกจากนั้นเว็บไซต์ท่ีสร้างด้วย WordPress น้ัน จะมีโครงสร้างคอนเทนต์ของเว็บไซต์ท่ีถูกออกแบบ มาเพ่ือรองรบั การทำ Search Engine Optimization (SEO) ได้เป็นอย่างดอี กี ดว้ ย การสร้างเว็บไซต์ด้วย WordPress ยังรองรับการทำให้เว็บไซต์สามารถแสดงผลบนอุปกรณ์ที่มีขนาด หน้าจอต่างกัน ตั้งแต่ PC, Tablet และ Smart Phone หรือที่เรียกกันว่า Responsive Design ซ่ึงจำเป็น อย่างยิ่งในยุคท่ีผู้ใช้งานสามารถเลือกเข้าเว็บไซต์ของเราจากอุปกรณ์หลากหลายแบบ อีกท้ังตั้งแต่ในปี 2018 (พ.ศ. 2561) เป็นต้นมา Google ได้ให้น้ำหนักอันดับแรกในการจัดอันดับเว็บไซต์โดยเน้นเว็บท่ีรองรับการ แสดงผลบนมือถือ (Mobile-First Indexing) อกี ด้วย ส่วนประกอบของเวบ็ ไซต์ การสร้างเวบ็ ไซต์จะต้องรจู้ ักส่วนประกอบสำคัญต่างๆ ของเวบ็ ไซต์ เพ่ือจะไดร้ ู้ค่าใช้จ่ายเบ้ืองต้นหรือ เพอ่ื ให้นำเสนอให้กับผอู้ ่นื ในการจดั ทำเวบ็ ไซต์ไดเ้ ข้าใจ 1. โดเมน โดเมน (Domain) คือช่อื เว็บไซต์ของเรา ใชแ้ ทน IP Address ทเี่ ปน็ ตวั เลขและจดจำยาก ซง่ึ IP Address ได้มาจากการเชื่อมต่ออนิ เตอรเ์ นต็ ของหนว่ ยงานหรือการเชือ่ มตอ่ อินเตอรเ์ นต็ ทบี่ า้ น จะได้ IP Address มาหนงึ่ ไอพี กรณีการเชอ่ื มตอ่ อินเตอรเ์ นต็ ที่ไม่ได้รับไอพีจรงิ ไอพีกจ็ ะเปลยี่ นไปเรือ่ ยๆ ทุกคร้งั ที่มีการ เชื่อมต่ออนิ เตอรเ์ นต็ ของอปุ กรณ์ Router สำหรบั การใชง้ านไอพีจรงิ (จะต้องขอใช้งานจากผู้ใหบ้ ริการ อินเตอรเ์ น็ต ISP โดยตรง) จะมคี ่าใช้จา่ ยในส่วนของไอพีจรงิ ด้วย ซ่งึ ไอพจี ริงน้ีเราสามารถนำมาทำเปน็ เว็บไซต์ ของเราได้ เช่น 119.59.10.21 เป็นตน้ โดยหากไม่มโี ดเมน การเข้าเว็บไซต์ก็จะตอ้ งเข้าเวบ็ ผา่ นไอพจี รงิ เทา่ น้นั ดงั นัน้ โดเมนจะชว่ ยให้เราไม่ตอ้ งจำไอพแี ละใช้ชอ่ื เวบ็ ไซต์ทีเ่ ราต้องการได้ ยกตวั อย่างโดเมน เชน่ kelangnakorn.go.th การตั้งชือ่ โดเมนควรบง่ บอกถึงหน่วยงานหรือเนอ้ื หาของเวบ็ ไซต์และจดจำง่าย ซึ่งการ จดโดเมนมคี า่ ใชจ้ ่ายเป็นรายปี แตล่ ะนามสกลุ ของโดเมนราคาแตกต่างกันไป เช่น โดเมนนามสกลุ .com ราคา ประมาณ 289 – 400 บาทต่อปี 2. โฮสตง้ิ โฮสตง้ิ (Hosting) หรือ เว็บโฮสติ้ง (Web Hosting) คือ ผู้ใหบ้ ริการพนื้ ท่ีบนเครื่องคอมพิวเตอร์ แม่ข่าย (Server) สำหรบั ฝากไฟล์เวบ็ ไซต์ โดย Server จะแสดงผลเว็บไซต์ให้ออนไลน์อยูบ่ นอินเทอร์เน็ตตลอด 24 ชวั่ โมง การใหบ้ รกิ ารโฮสต้ิงมที ง้ั หมด 4 ประเภท ดงั นี้ 1) Shared Host เป็น Server ที่แชร์กันให้ผู้ใช้งานได้หลายคน เหมาะกับเว็บไซต์ ธรรมดาทั่วไป ไปถึงเว็บไซต์สว่ นตวั ขององค์กร ราคาจะถกู ท่สี ุด 2) VPS ย่อมาจาก Virtual Private Server เป็น Server ท่ีผู้ใช้งานสามารถใช้งาน โปรแกรมหรอื แอพพลเิ คชั่นเสรมิ

4 3) Dedicated Server เป็น Server เพียง Server เดียวสำหรับเรา โดยอาจใช้ฝาก เว็บไซต์ท่ีเราดูแลหลายๆ เว็บไซต์ หรือจะแบ่งพ้ืนท่ีขายเป็นบริการ Shared Hosting ก็ได้ Dedicated เหมาะ กับเว็บไซตข์ นาดใหญท่ ีต่ ้องการความเสถียรและปลอดภัยมาก เช่นเว็บไซตข์ ององค์กรขนาดใหญ่ 4) Cloud Hosting เป็นการใช้ Server หลายเครื่องซ่ึงทำงานพร้อมกัน เมื่อ Serverใด มีปญั หา กจ็ ะย้ายไปยงั เคร่อื งใหม่ เวบ็ ไซตจ์ งึ ไมล่ ่ม เหมาะกบั เวบ็ ไซตท์ ต่ี อ้ งการความเสถยี รสงู ผู้ท่ีทำเว็บไซต์ด้วยตนเอง จำเป็นต้องใช้บริการ Hosting แต่ถ้าใช้บริการเว็บไซต์สำเร็จรูปหรือ ร้านค้าออนไลน์ก็อาจไม่มีค่าบริการโฮสต้ิง แต่จะมีค่าใช้จ่ายเป็นรายเดือนหรือรายปีแทน สำหรับหน่วยงาน บางแห่งท่ีมี Server ของตนเองและมีอนิ เตอรเ์ น็ตท่ีมไี อพีจริง และมีความพรอ้ มดา้ นบุคลากรในการติดต้ังระบบ Web Hosting อาจติดต้งั Server เพ่อื ทำ Web Hosting เองทงั้ หมดก็ได้ 3. ไฟลเ์ วบ็ ไซต์ ไฟล์เว็บไซต์ อาจเป็นไฟล์ที่เขียนขึ้นมาเองด้วยภาษา HTML, PHP, ASP, JAVA, JavaScript, Python ฯลฯ ไฟล์รูปภาพและสื่อต่างๆ หรือไฟล์เว็บไซต์ประเภท CMS ฐานข้อมูล หรือไฟล์อื่นๆ ที่ประกอบ เป็นเว็บไซต์ ทัง้ หมดเหล่านจี้ ะอยู่บนพื้นที่ Hosting โดยเรียกใช้งานผ่านโดเมนหรือไอพีแอดเดรสกไ็ ด้ คำศพั ทท์ ีเ่ ก่ยี วขอ้ ง 1. SSL (https) SSL ย่อมาจาก Secure Socket Layer คือเทคโนโลยีที่เพ่ิมความปลอดภัยในการส่งข้อมูลผ่าน อินเทอร์เน็ตโดยการเขา้ รหสั สังเกตได้งา่ ยๆ จากเวบ็ ไซตธ์ นาคารต่างๆ ว่า URL จะเป็น HTTPS ไม่ใช่ HTTP ที่ อาจถูกดักขโมยข้อมลู ได้ ส่วนค่าบริการ SSL จะแตกตา่ งกันไปตามระดับ ถ้าระดับเว็บไซตท์ ัว่ ไปที่มีข้อมูลบุคคล มีราคาประมาณ 1,000 บาทต่อปี ถ้าระดับองค์กรขนาดใหญ่จะมีราคาประมาณ 10,000 – 20,000 บาทต่อปี ขึ้นอย่กู ับผ้ใู หบ้ ริการด้วย 2. HTML HTML ย่อมาจาก Hypertext Markup Language คือภาษาคอมพิวเตอร์ที่ใช้เขียนในเว็บไซต์ ซ่ึง Hypertext หมายถึงข้อความที่เชื่อมต่อกันผ่านลิงค์ สามารถทำโดยใช้โปรแกรม Text Editor ต่างๆ เช่น Notepad หรือโปรแกรมสำหรับสร้างเว็บไซต์ สามารถทดสอบการทำงานของ HTML ได้ผ่านเบราเซอร์ต่างๆ เชน่ Google Chrome, Internet Explorer (ปัจจุบันเร่ิมเปลี่ยนเปน็ Microsoft Edge) เปน็ ต้น 3. UX & UI UX ย่อมาจาก User Experience คอื ประสบการณ์ของผ้ใู ช้งาน เป็นส่วนทอ่ี อกแบบใหผ้ ู้ใช้รสู้ ึกพึง พอใจ เช่น ใช้งานง่าย มีลำดับข้ันตอนชัดเจน รู้ว่าเม่ือคลิกตรงนี้แล้วจะไปที่หน้าไหนต่อ เป็นต้น ถ้าเว็บไซต์มี UX ทไ่ี ม่ดกี จ็ ะทำใหผ้ ู้ใช้ไมอ่ ยากกลบั มาใช้งานอีก UI ย่อมาจาก User Interface เป็นส่วนที่ทำให้ UX มีความสวยงาม เช่น เร่ืองการแสดงผลบน เว็บไซต์ท่ีดสู วยงาม ตัวอักษรชัดเจน โดดเดน่ ชอ่ งวา่ งระหวา่ งปมุ่ ตา่ งๆ ไมแ่ ออดั จนเกนิ ไป

5 4. CSS CSS ย่อมาจาก Cascading Style Sheet คือภาษาท่ีใช้จัดรูปแบบแสดงผลของเอกสาร HTML หรือใช้ตกแต่งให้มีหน้าตาสวยงามข้ึน ทั้งสีสัน ระยะห่าง พ้ืนหลัง เส้นขอบ ประเภทตัวอักษร และอ่ืนๆ ซึ่งการ แยกเอกสาร HTML และ CSS ออกจากกนั จะทำให้ง่ายตอ่ การจดั รปู แบบการแสดงผลนั่นเอง 5. Content Content หรอื เนื้อหาของเว็บไซต์ ท้ังรูปภาพและบทความ เป็นสิ่งที่สำคัญมากอีกอย่างหนึง่ ไม่ว่า จะเป็นเว็บไซต์หน่วยงาน เว็บไซต์ท่ีเป็นหน้าร้านออนไลน์ ล้วนต้องมีข้อมูลให้ครบถ้วน รายละเอียดอ่านเข้าใจ ง่าย มีรูปภาพประกอบที่ชัดเจนสวยงามดูน่าใช้งาน ถ้าทำให้ Content ภายในเว็บไซต์มีเนื้อหาท่ีเป็นสาระ ความรู้ อ่านสนุก น่าติดตาม มีการอัพเดตเน้ือหาอยู่เสมอ ก็จะทำให้ยอดผู้เข้าชมเพิ่มมากข้ึน ส่งผลให้ SEO ดี และเว็บไซตจ์ ะติดอนั ดับแรกๆ ของ Search Engine ได้งา่ ยขน้ึ 6. SEO ย่อมาจาก Search Engine Optimization หมายถึง การจัดทำหรือปรับปรุงเว็บไซต์ให้แสดงผล เป็นอันดับต้นๆ ของการค้นหาใน Search Engine ใน Keyword ที่เหมาะสมและตรงตามวัตถุประสงค์ของ เว็บไซต์ เพ่ือให้อยู่ในระดับสายตา และสามารถดึงดูดความสนใจจากผู้เข้าชมได้อย่างรวดเร็ว เว็บไซต์ Search Engine ทีส่ ำคัญได้แก่ Google นนั่ เอง การติดตงั้ WordPress สามารถทำได้ 2 วิธี ดงั น้ี 1. ตดิ ต้ัง WordPress บน Hosting การติดต้ัง WordPress บนเว็บโฮสติ้ง คือการติดต้ัง WordPress ให้พร้อมใช้งานจริงเลย หมายความวา่ คนสามารถเข้ามาดเู ว็บไซต์ของเราไดเ้ ลย หลงั จากท่เี ราตดิ ตง้ั และเผยแพร่ขอ้ มูลของเรา 2. ตดิ ตัง้ WordPress บนเคร่อื งตวั เอง (Local host) การติดต้ังบนเคร่ืองตัวเอง จะเป็นการทดลองใช้งานหรือเตรียมเว็บไซต์ให้พร้อมก่อนทำการอัพ โหลดทั้งหมดไปไว้บนเว็บโฮสติ้ง ดังน้ี ก่อนอื่นเราต้องเข้าใจก่อนว่า WordPress จะทำงานได้ก็ต่อเมื่อ ทำงาน บน Web Server เท่าน้ัน ซึ่งในระบบของเว็บโฮสติ้ง มีการติดตั้ง Web Server อยู่แล้ว WordPress จึงจะ ทำงานได้ แต่ถ้าเราต้องการจะให้ WordPress ทำงานได้ท่ีเคร่ืองของเราเอง เราจะต้องจำลองเครื่องของเรา เป็น Web Server ก่อน ซ่ึงวิธีการจำลองจะใช้ Software สำเร็จรูปมาช่วยแปลงให้เคร่ืองคอมพิวเตอร์เป็น Web Server ได้ ตวั อยา่ ง Software ได้แก่ - Xampp เป็น Software Free ที่มีผู้นิยมอันดับต้นๆ ในการจำลอง Server ของ นักพัฒนาเวบ็ ไซต์ - AppServ เปน็ Software ทส่ี ร้างมานานแล้ว แต่ยงั คงมีการใชง้ านเรอ่ื ยมา - Mamp มีท้ัง Version Free และ Version Pro ใช้งานไม่ต่างกับ Xampp มากนัก แต่ Version Pro จะมโี ปรแกรมใช้งานเพิ่มเติมเพือ่ ชว่ ยในการทำงานมากขนึ้ - LocalWP เปน็ Software ทส่ี รา้ งข้ึนมาใหม่ จำลอง Web Server ใชไ้ ดฟ้ รเี ชน่ กัน

6 - Bitnami WordPress Stack เหมาะสำหรับผู้เร่ิมต้น เพราะติดตั้ง WordPress มาให้ พรอ้ มใช้งานเลย ไม่ต้อง Download WordPress มาติดต้ังเองเหมือน Software ตวั อื่น การติดต้ังบนเคร่ืองตัวเอง เมื่อจะนำไปใช้งานจริงบนโฮสติ้ง จะต้องต้ังค่าคอนฟิกของ Wordpress ใหม่ และอัพโหลดฐานข้อมลู ท่ีปรบั ปรุงล้ิงค์ใหต้ รงกบั โฮสติ้ง เนือ่ งจากล้ิงค์รูปภาพและล้ิงคข์ ้อมลู ตา่ งๆ จะถูกตั้ง ค่าเป็น /localhost เม่ือใช้งานบนเครื่องตัวเอง โดยในที่น้ีจะขออธิบายการติดตั้งเว็บไซต์ Wordpress บน เคร่ืองตัวเองเป็นหลกั การติดตัง้ โปรแกรมจำลองเครือ่ งคอมพิวเตอรเ์ ป็น Web Server ก่อนจะติดตั้งเว็บไซต์ Wordpress บนเครื่องคอมพิวเตอร์ของเรา จะต้องจำลองเคร่ืองคอมพิวเตอร์ ของเราให้เป็น Web Server กอ่ น ดงั นี้ 1. การติดตั้ง Software สำหรับแปลงเครื่องคอมพิวเตอร์เป็น Web Server ด้วยโปรแกรม XAMPP โดยให้ดาวน์โหลดโปรแกรม XAMPP เวอร์ชั่นที่เหมาะสมกับเครื่องคอมพิวเตอร์ของเรา โดยดูว่าเครื่อง คอมพิวเตอร์ของเราติดต้ังระบบปฏิบัติการกบ่ี ิต โดยให้เปิด Windows Explorer ขึ้นมา และคลิกขวาที่ไอคอน Computer (Windows 10 จะเปน็ ไอคอน This PC) เลอื กทีเ่ มนคู ำวา่ “Properties” ดงั รูป 1. คลกิ ขวา 2. คลกิ เลอื ก รปู ที่ 1.1 แสดงหน้าจอแรกของการตดิ ตัง้ โปรแกรม XAMPP จะไดห้ นา้ จอ Properties ของระบบ ดังรูป

7 รูปที่ 1.2 แสดงหน้าตา่ ง Properties ของระบบ จากหน้าต่าง Properties ของระบบ จะเหน็ ไดว้ ่าเครื่องคอมพิวเตอร์ของเราเป็นแบบ 64 บิต จากนั้นให้ดาวนโ์ หลดโปรแกรม XAMPP โดยเข้าเว็บไซต์ Google เพ่อื คน้ หาคำวา่ xampp และเลือกเว็บไซต์ แรกท่ีพบ หรอื เข้าเวบ็ ไซต์ www.apachefriends.org โดยตรงก็ได้ ซ่ึงจะให้ดาวน์โหลดเวอร์ชั่น 64 บิต (หาก เครื่องคอมพวิ เตอร์เปน็ แบบ 32 บิต จะต้องคน้ หาคำวา่ xampp 32bit และเขา้ เวบ็ ไซต์แรกที่พบ) ดงั รูป ดาวนโ์ หลดแบบ 64 บิต รปู ท่ี 1.3 แสดงเวบ็ ไซต์แรกท่ีพบจากการค้นหาใน Google ดว้ ยคำว่า xampp

8 ดาวนโ์ หลดแบบ 32 บิต รูปที่ 1.4 แสดงเวบ็ ไซต์แรกที่พบจากการค้นหาใน Google ดว้ ยคำว่า xampp 32bit 2. เมอ่ื ดาวน์โหลดไฟลม์ าแลว้ ให้ดบั เบล้ิ คลกิ ไฟลเ์ พอ่ื ตดิ ตง้ั จะไดห้ นา้ จอแรกของการตดิ ตง้ั ดงั รปู รูปที่ 1.1 แสดงหนา้ จอแรกของการติดต้ังโปรแกรม XAMPP ให้คลกิ ปุ่ม Next จะได้หนา้ จอดังรปู

9 รูปที่ 1.2 แสดงหน้าจอเลือกโปรแกรมสว่ นประกอบในการติดต้งั โปรแกรม XAMPP ใหเ้ ลือกโปรแกรมสว่ นประกอบที่จะใชง้ าน อย่างน้อยตอ้ งมี Apache, MySQL, PHP, และ phpMyAdmin เพื่อใหส้ ะดวกตอ่ การใช้งาน Web Server จากน้ันคลิกปมุ่ Next จะได้หนา้ จอดงั รปู ควรเปลีย่ นไดรฟ์เป็น D รปู ที่ 1.3 แสดงหน้าจอเลือกโฟลเดอรใ์ นการตดิ ตัง้ โปรแกรม XAMPP ใหเ้ ลอื กโฟลเดอร์ที่ต้องการติดตง้ั ในท่ีนจ่ี ะเกบ็ ไวท้ ไี่ ดร์ฟ D เพ่ือป้องกันขอ้ มูลเวบ็ ไซตเ์ สยี หาย กรณี หากมกี ารตดิ ตัง้ Windows ใหม่ จากนั้นคลกิ ปุ่ม Next จะไดห้ น้าจอดังรูป

10 รูปท่ี 1.4 แสดงหน้าจอการเรยี นรูเ้ พ่ิมเติมเก่ยี วกับ CMS บน Bitnami ในการตดิ ต้ังโปรแกรม XAMPP หน้าจอการเรยี นรูเ้ พ่ิมเติมเกีย่ วกับ Drupal, Joomla, Wordpress และอน่ื ๆ บน Bitnami ในทีน่ ้ี จะไม่เช็คเคร่ืองหมายถกู จากน้นั คลิกป่มุ Next จะได้หน้าจอดังรูป รูปท่ี 1.5 แสดงหน้าจอพร้อมทจ่ี ะตดิ ต้ังโปรแกรม XAMPP คลกิ ปมุ่ Next จะไดห้ น้าจอดังรูป

11 รูปท่ี 1.6 แสดงหนา้ จอในการติดตัง้ โปรแกรม XAMPP รอจนกว่าจะติดตั้งเสร็จ จะได้หนา้ จอดังรปู รปู ที่ 1.7 แสดงหน้าจอในการติดตั้งโปรแกรม XAMPP หนา้ จอแสดงว่าติดตงั้ เสรจ็ แล้ว และให้เชค็ เครอ่ื งหมายถกู ในชอ่ ง Do you want to start the Control Panel now เพ่ือเปิดหน้าจอการโปรแกรม XAMPP จากนน้ั คลิกปุ่ม Finish จะได้หนา้ จอดงั รปู

12 เลอื กภาษาองั กฤษ กด Save รูปที่ 1.8 แสดงหน้าจอในการติดตงั้ โปรแกรม XAMPP หนา้ จอเลือกภาษาเร่มิ ตน้ ให้เชค็ เครอื่ งหมายรูปแรกคือภาษาองั กฤษ จากนน้ั คลิกป่มุ Save จะได้ หนา้ จอดังรปู คลกิ 2 ปมุ่ รูปท่ี 1.9 แสดงหนา้ จอ XAMPP Control Panel ในหน้าจอน้ี Web Server ของเรายงั ไม่ทำงาน จะต้องคลิกทปี่ มุ่ Start ในข้อ Apache สำหรบั เร่มิ ใชง้ าน Web Server และคลกิ ป่มุ Start ในหัวข้อ MySQL สำหรบั ใช้งานฐานข้อมูลด้วย จะไดห้ น้าจอดงั รูป แสดงว่าทำงานแล้ว รปู ท่ี 1.10 แสดงหน้าจอเม่ือเริม่ ใช้งาน Apache และ MySQL

13 เมื่อคลิกปมุ่ Start ทงั้ สองปมุ่ แล้ว เครอื่ งคอมพวิ เตอร์ของเราจะพร้อมใช้งานเป็น Web Server ได้ เรียบรอ้ ยแล้ว ทุกคร้ังทีเ่ ปดิ เครื่องคอมพิวเตอร์ หากต้องการใช้งาน Web Server จะต้องเปิดโปรแกรม XAMPP Control Panel และคลกิ ปุ่ม Start ดังกล่าวทกุ ครงั้ เพ่ือเร่ิมใช้งาน Web Server กรณีที่ตอ้ งการให้รัน Apache และ MySQL อตั โนมตั ทิ ุกคร้ังทเ่ี ปิดโปรแกรม XAMPP Control Panel (รันอัตโนมัติโดยไมต่ ้องคลกิ ปุ่ม Start) ให้คลิกทีป่ ุ่ม Config ท่อี ยูต่ รงมุมขวาบนสดุ ในหนา้ จอ XAMPP Control Panel จะไดห้ น้าจอดังรปู เชค็ ถกู 2 รายการ กด Save รปู ท่ี 1.11 แสดงหน้าจอการตั้งคา่ XAMPP Control Panel ให้ทำเครื่องหมายถูกที่ช่อง Apache และ MySQL จากนั้นคลิกที่ปุ่ม Save ในคร้ังต่อไปท่ีเปิด โปรแกรม XAMPP Control Panel จะทำการรัน Apache และ MySQL โดยอัตโนมัติ ให้ทำการทดลองใช้งาน web Server โดยเปิดโปรแกรมประเภท Web Browser เช่น Google Chrome ขึ้นมา จากนั้นเข้าไปที่เว็บไซต์ http://localhost หรือ http://127.0.0.1 (แนะนำให้ใช้แบบแรกจะ เข้าใจไดง้ า่ ยกว่า) จะได้หน้าจอดงั รปู

14 รปู ท่ี 1.12 แสดงหน้าจอการใช้งาน Web Server หากไดห้ น้าจอข้างต้น แสดงว่า Web Server ในเครื่องคอมพวิ เตอร์ของเราสามารถใชง้ านได้แลว้ หาก ใช้งานไม่ได้อาจเกดิ จากพอรต์ ของ Apache หรอื MySQL ไปชนกับพอรต์ ท่ีใช้งานไวแ้ ล้วบนเคร่ืองคอมพิวเตอร์ ของเรา จะต้องทำการปิดโปรแกรมที่ใชพ้ อรต์ ทช่ี นกัน หรือเปลี่ยนพอร์ตของ Apache ไมใ่ ห้ชนกบั โปรแกรมอื่น ตอ่ ไป การตดิ ต้ัง Wordpress บนเครอ่ื งตัวเอง (Local host) 1. ให้ดาวน์โหลดไฟล์จากเว็บไซต์ https://th.wordpress.org/download/ ซึ่งเป็น Wordpress ท่ีมี ภาษาไทยมาให้ดว้ ย จะได้ไม่ต้องเพมิ่ ภาษาไทยในภายหลังอีก ช่วยอำนวยความสะดวกในการติดตั้งไดม้ าก โดย ดาวน์โหลดเวอร์ช่ันลา่ สดุ ท่พี บ ดังรูป

15 รปู ท่ี 1.13 แสดงหนา้ จอเวบ็ ไซต์ https://th.wordpress.org/download/ คลกิ ปุ่ม “ดาวนโ์ หลดเวริ ด์ เพรส 5.4.2” (เวอร์ช่ันปัจจบุ ัน) จากนัน้ จะไดไ้ ฟลท์ ี่ยอ่ และรวมเป็นไฟล์เดียว คือ wordpress-5.4.2-th.zip โดยให้วางไฟล์ดังกล่าวไว้ที่โฟลเดอร์ D:\\xampp\\htdocs เพ่ือให้ง่ายต่อการ ตดิ ตง้ั 2. เปดิ โฟลเดอร์ D:\\xampp\\htdocs จากน้ันทำการขยายไฟล์ทั้งหมดไว้ทีโ่ ฟลเดอร์นี้เลย ซ่ึงในเคร่ืองท่ี ใช้งานน้ีตดิ ต้ังโปรแกรม WinRAR สำหรับย่อ/ขยายไฟลไ์ วแ้ ล้ว (หากใช้โปรแกรม WinZip ก็ใช้งานเช่นเดียวกนั ) โดยให้คลิกขวาท่ีไฟล์ wordpress-5.4.2-th.zip จากน้ันหาเมนูคำว่า “แยกไฟล์ลงที่นี่” (ภาษาอังกฤษใช้คำว่า “Extract Here”) รอสักครู่จนกว่าจะขยายและแยกไฟล์ทั้งหมดเสร็จจะได้โฟลเดอร์เพ่ิมข้ึนมาคือ Wordpress ดังรปู

16 รปู ที่ 1.14 แสดงหน้าจอโพลเดอร์ D:\\xampp\\htdocs สามารถเปล่ียนชือ่ โฟลเดอร์ wordpress ตามที่ตอ้ งการได้ ในทน่ี จ้ี ะใช้ชือ่ โฟลเดอร์เดิมเปน็ หลัก 3. สร้างฐานข้อมูลสำหรับใช้งานเว็บไซต์ ให้เปิดโปรแกรมประเภท Web Browser เช่น Google Chrome ขน้ึ มา จากน้นั พมิ พ์ชื่อเว็บไซต์ http://loalhost กด Enter จะไดห้ นา้ จอดงั รูป รูปท่ี 1.15 แสดงหน้าจอการใชง้ าน Web Server ใหค้ ลิกที่ phpMyAdmin จะได้หนา้ จอการบรหิ ารจัดการฐานข้อมลู MySQL ดังรูป

17 รปู ที่ 1.16 แสดงหน้าจอการใชง้ าน Web Server ให้คลิกท่ีคำว่า New ในแถบรายช่ือฐานข้อมูลด้านซ้ายมือ เพ่ือสร้างฐานข้อมูลสำหรับใช้งานเว็บไซต์ จะไดห้ น้าจอดงั รูป รปู ท่ี 1.17 แสดงหนา้ จอการสรา้ งฐานข้อมลู MySQL ให้พิมพ์ช่ือฐานข้อมูลที่ต้องการ ในตัวอย่างข้างต้นใช้ช่ือว่า mywebsite และเลือก Encode (การเข้า รหัสตัวอกั ษร) เป็นแบบ utf8mb4_unicode_ci ซ่ึงรหัสตัวอกั ษร utf8mb4 สามารถใช้งานกับ Wordpress

18 ได้ดีท่ีสุด เนื่องจากใช้พื้นที่ 4 byte ต่อหนึ่งตัวอักษร แต่ utf8 ธรรมดาใช้ 3 Byte ต่อหนึ่งตัวอักษร ทำให้ ตัวอกั ษรประเภท Emoji สูญหายได้ unicode_ci เป็นการเรียงลำดับตามภาษาท้องถิ่น เหมาะกับภาษาอื่นท่ีไม่ใช่ภาษาอังกฤษ ส่วน general_ci สามารถเรียงลำดับตัวอักษรได้เร็วมากกว่า unicode_ci แต่การเรียงลำดับภาษาไทยสำหรับ general_ci และ unicode_ci อาจมคี วามแตกต่างกัน จากนั้นใหค้ ลกิ ท่ีปุม่ Create จะไดห้ นา้ จอดังรปู รูปที่ 1.18 แสดงหน้าจอฐานข้อมูล mywebsite แสดงวา่ เราได้สรา้ งฐานขอ้ มูลเสรจ็ เรยี บร้อยแลว้ 4. เรม่ิ ตน้ ตดิ ตัง้ Wordpress ใหเ้ ข้าเวบ็ ไซต์ http://localhost/wordpress จะได้หน้าจอดังรูป รปู ท่ี 1.19 แสดงหนา้ จอการสร้างฐานข้อมลู MySQL

19 ใหค้ ลกิ ปุ่ม “เร่ิมทำงานได”้ จะได้หนา้ จอดังรปู รูปที่ 1.20 แสดงหนา้ จอการกำหนดค่าฐานข้อมลู ของ Wordpress ให้พิมพ์แต่ละชอ่ ง ดงั น้ี ชอื่ ฐานข้อมูล = mywebsite ช่ือผูใ้ ช้ = root รหสั ผา่ น = (ปล่อยว่างไว้ เนอื่ งจาก MySQL ท่ตี ดิ ต้ังมาพรอ้ มกับ XAMPP ไมไ่ ดถ้ ูกกำหนดรหัสผา่ นไว)้ โฮสตฐ์ านขอ้ มูล = localhost (เนือ่ งจากตดิ ต้งั ในเครือ่ งตนเอง) คำหน้าหน้าตาราง = wp_ (แกไ้ ขไดต้ ามต้องการ ค่าเร่ิมต้นคือ wp_) จากนัน้ คลกิ ที่ป่มุ “ส่ง” จะไดห้ น้าจอดงั รูป รปู ท่ี 1.21 แสดงหนา้ จอการกำหนดคา่ ฐานข้อมูลของ Wordpress

20 Wordpress จะทำการตรวจสอบการเช่ือมต่อฐานข้อมูล MySQL หากถูกต้องจะได้หน้าจอข้างต้น แต่ หากไม่ถูกต้องจะแสดงหนา้ จอท่ีแจ้งว่า “การเชื่อมตอ่ กับฐานขอ้ มูลผิดพลาด” จะตอ้ งใสข่ ้อมูลให้ถกู ต้องอีกครั้ง จากนน้ั คลิกท่ปี ่มุ “เร่มิ การติดตั้ง” จะไดห้ นา้ จอดังรปู รูปที่ 1.22 แสดงหนา้ จอการกำหนดคา่ ฐานขอ้ มลู ของ Wordpress ใหพ้ ิมพร์ ายละเอยี ดแตล่ ะชอ่ ง ดงั น้ี ชอ่ื เว็บ = (ชอื่ เว็บตามตอ้ งการ) ชอ่ื ผใู้ ช้ = admin (ชอ่ื ผดู้ ูแลระบบตามตอ้ งการ ในทนี่ ้จี ะใช้ช่ือ admin) รหัสผ่าน = (รหัสผ่านตามต้องการ หากเป็นรหัสที่ไม่ปลอดภัย จะต้องทำเครื่องหมายถูกวา่ ยืนยันการ ใชง้ านรหัสผา่ นท่ไี ม่ปลอดภัย ด้วย) อีเมล์ของคุณ = (อีเมล์จริงของเรา ซ่ึงจะช่วยในการรีเซ็ตรหัสผ่าน กรณีจำรหัสผ่านไม่ได้ รวมทั้งเป็น อีเมลห์ ลกั ของ Wordpress ด้วย) ตัวอย่างดงั รปู

21 รูปท่ี 1.23 แสดงตัวอย่างการกำหนดค่าเว็บไซต์ จากนั้นให้คลกิ ป่มุ “ตดิ ต้งั เวิรด์ เพรส” รอสกั ครู่ จะได้หนา้ จอดังรูป รปู ที่ 1.24 แสดงตัวอย่างการกำหนดคา่ เวบ็ ไซต์

22 แสดงว่าเราได้ติดตั้งเว็บไซต์ Wordpress เสร็จเรียบร้อย พร้อมใช้งานแล้ว หากคลิกท่ีปุ่ม “เข้าสู่ ระบบ” จะเป็นการล็อกอินเข้าไปจัดการเว็บไซต์ของเราต่อไป เราสามารถทดลองเข้าเว็บไซต์ที่เราติดต้ังได้ที่ http://localhost/wordpress จะไดห้ นา้ จอดังน้ี รปู ที่ 1.25 หน้าแรกของเวบ็ ไซตท์ ี่ไดต้ ดิ ตั้งเสรจ็ แล้ว เว็บไซต์ Wordpress ท่ีได้ติดต้ังไปยังแทบไม่มีข้อมูลอะไรท้ังส้ิน มีเพียงข้อมูลค่าเร่ิมต้นท่ี Wordpress ให้มาเทา่ น้นั

23 ข้อมูลในเว็บไซต์ Wordpress การแสดงข้อมลู ต่างๆ ที่อยู่ในเว็บไซต์ Wordpress แบ่งได้เป็น 2 ประเภท คือ โพสต์ (post) และ เพจ (page) อธิบายได้ดงั น้ี 1. Posts อาจเรียกว่า เร่ืองหรือบทความ จัดได้ว่าเป็น page ประเภทหน่ึง เป็นลักษณะของการเขียน บทความทว่ั ไป มีการจดั หมวดหมู่ (categories) มีแทก็ (tags) ในการจัดกลุ่มของบทความ ซึง่ บทความประเภท น้ีก็จะเรียงตามวันท่ีมีการ publish (เผยแพร่) สามารถเรียกดูบทความทั้งหมดได้จาก ผู้เขียน หมวดหมู่ แท็ก วันที่ เดอื น ปี เรยี กได้ว่า Post น้นั มีความเชื่อมโยงกันภายใน ยกตัวอยา่ งเช่น เว็บไซต์มเี นอ้ื หาหลกั เก่ยี วกับการ ประชาสมั พนั ธอ์ งค์กร เราอาจสรา้ ง categories ดงั นี้ - ข้อมูลองคก์ ร - ขา่ วประชาสัมพนั ธ์ - ขา่ วกจิ กรรมขององค์กร หลังจากท่ีสร้าง categories แล้ว เวลาท่ีเขียนบทความใหม่ ก็แค่ระบุ category ของบทความ น้ันๆ ว่าอยู่ใน category ไหน (เลือกได้มากกว่า 1 หมวดหมู่) การทำแบบนี้จะทำให้ผู้ชมเข้าถึงเน้ือหาของ เว็บไซต์ได้สะดวกข้นึ และส่ิงหน่ึงที่ posts กับ pages แตกต่างกัน คือ ผู้ชมเว็บไซต์สามารถคอมเม้นท์ posts ได้ ในขณะท่ี pages จะไม่มคี วามสามารถนี้ เนือ้ หาที่เหมาะกับการใช้ posts เช่น บทความท่วั ไป, บทความทีเ่ ป็นสาระความรู้, บทความท่ีเป็น ลักษณะ diary (บนั ทกึ เรอื่ งราว), ประกาศ/ขา่ วสารตา่ งๆ เปน็ ตน้ 2. Pages คือหน้าเว็บโดดๆ ที่ไม่มีการเรียงลำดับวันที่ ไม่มี categories และไม่สามารถคอมเม้นท์ได้ จะไม่มกี ารเชื่อมโยงกับบทความใดๆ เลย ไมว่ ่าจะด้วย Post หรือ Page ด้วยกันเอง ไม่มี categories หรอื แท็ก ไม่เรียงตาม วัน เดือน ปี ใดๆ ท้ังสิ้น การจะดึง Page ข้ึนมาแสดงน้ัน ต้องสร้างลิงค์เพื่อเชื่อมโยงไปท่ี page น้ันๆ เอง ส่วนใหญ่มักใช้สำหรับทำหน้าเว็บไซต์ที่ไม่มีการเปล่ียนแปลงหรือหน้าเว็บน่ิง ๆ เท่านั้น เช่น about (เกย่ี วกับเรา), contact (การติดต่อ), Privacy Policy (นโยบายความเป็นส่วนตัว) ซึ่งไมจ่ ำเป็นต้องมี tags และ categories รวมทง้ั ไมต่ อ้ งการให้รวมอยกู่ บั บทความประเภทอนื่ ๆ แต่สิ่งที่ page ทำได้ และเป็นสิ่งที่สำคัญเป็นอย่างมาก นั่นก็คือ Template เพราะ page นั้น สามารถกำหนด Template พิเศษข้ึนมาเพ่ือแสดงผลพิเศษเฉพาะตัวได้ เช่น การสร้างเทมเพลตแบบ full width ก็จะแสดงหน้าเพจแบบเต็มความกว้างของหน้าจอ โดยที่ไม่มี sidebar ด้านข้าง เป็นต้น และมีอีก หลากหลายมากโดยเฉพาะธีมแบบพรเี มี่ยม (ซื้อ) บางครั้ง Page ก็ทำงานร่วมกับ Post ด้วย เช่น การดึงข้อมูล โพสตม์ าแสดงใน page

24 ก่อนการปรบั เปลย่ี นขอ้ มลู การปรับเปลย่ี นข้อมลู ตา่ งๆ จะต้องล็อกอนิ เข้าใชง้ านระบบเพอ่ื บรหิ ารจัดการเวบ็ ไซต์กอ่ น โดยให้ คลิกที่คำว่า “เข้าสู่ระบบ” ด้านล่างบริเวณบล็อก Meta ในรูปที่ 1.27 หรือจะพิมพ์ช่ือเว็บไซต์โดยตรงว่า http://localhost/wp-login.php หรือ http://localhost/wp-admin ก็ได้ จะได้หนา้ จอดังรปู รูปที่ 1.26 หน้าลอ็ กอนิ ของเว็บไซต์ทไ่ี ด้ติดต้งั เสรจ็ แล้ว ให้ปอ้ นชอ่ื ผ้ใู ช้ และรหสั ผ่านทกี่ ำหนดไวต้ ามรปู ที่ 1.25 แลว้ คลิก “เข้าสู่ระบบ” จะไดห้ น้าจอดงั รูป รูปที่ 1.27 แสดงหน้าควบคุมหลักของเว็บไซต์

25 หน้าจอน้ีจะเป็นหน้าจอสำหรับผู้ควบคุมระบบเว็บไซต์ เรียกว่า หน้าควบคุม ผู้เข้าชมเว็บทั่วไปจะไม่ เห็นและไม่สามารถใช้งานหน้าเว็บควบคุมนี้ได้ ผู้เข้าชมเว็บท่ัวไปจะเห็นหน้าเว็บตามรูปที่ 1.27 เท่านั้น เราสามารถดูหน้าเว็บไซตไ์ ด้โดยคลิกท่ีชือ่ เว็บไซต์บริเวณแถบสีดำซ้ายมือด้านบนสุด ทีม่ ีรปู (และสามารถ สลับหน้ากลับมายงั หนา้ ควบคมุ เวบ็ ไซตโ์ ดยคลิกทีเ่ ดียวกนั ) ดังรปู รูปท่ี 1.28 แสดงการคลิกสลับหนา้ เวบ็ ไซตืไปยังหน้าเว็บไซต์จริง การดโู พสต์ทัง้ หมด การปรับปรงุ รปู แบบเวบ็ ไซต์ (ธีม : Theme) การปรบั แต่งหน้าเว็บไซต์ หรือเรยี กวา่ การเปลี่ยนธมี (Theme) จะทำใหห้ น้าเว็บไซตข์ องเราดูนา่ สนใจ มากข้ึน ซงึ่ ธีมที่มาพร้อมก็การตดิ ต้ังก็จะเป็นธีมมาตรฐานของ Wordpress ดงั นั้น เราควรติดตั้งหรือเพิ่มธมี ใหม่ โดยในที่นี้จะใช้ธีม NewsPaper ซึ่งเหมาะกับการใช้งานในหน่วยงานราชการท่ีต้องการเผยแพร่ข้อมูลข่าวสาร โดยจัดระบบเป็นหมวดหมู่ เป็นบล็อก เพ่ือให้ใช้งานได้ง่ายและสะดวกสำหรบั ผู้เข้าชมเว็บไซต์ การปรับเปล่ียน ธีมหรือข้อมูลอ่ืนๆ จะต้องล็อกอินเข้าใช้งานระบบเพื่อบริหารจัดการเว็บไซต์ก่อน โดย ให้คลิกท่ีคำว่า “เข้าสู่ระบบ” ด้านล่างบริเวณบล็อก Meta หรือจะพิมพ์ช่ือเว็บไซต์โดยตรงว่า http://localhost/wp-admin กไ็ ด้ จะได้หนา้ จอดงั รูป รปู ท่ี 1.1 หนา้ ลอ็ กอินของเว็บไซต์ทไ่ี ด้ติดตัง้ เสร็จแลว้ ให้ปอ้ นชอ่ื ผ้ใู ช้ และรหัสผ่านที่กำหนดไว้ตามรูปที่ 1.25 แลว้ คลกิ “เขา้ สูร่ ะบบ” จะไดห้ นา้ จอดังรปู

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

27 รปู ที่ 1.3 แสดงเมนู “ธมี ” เม่อื คลิกแลว้ จะไดห้ น้าจอดงั รูป รปู ที่ 1.4 แสดงหนา้ จดั การธีม จะพบว่ามีธีมมาตรฐานที่มาพร้อมกับการติดตั้งเว็บไซต์ Wordpress ในครั้งแรก จำนวน 3 ธีม สำหรับธีมท่ีมีการอัปเดตใหม่ จะมีคำว่า “มีรุ่นใหม่ออกมาแล้ว อัปเดตตอนน้ี” (คำว่า Update เขียนทับศัพท์ วา่ อัปเดต ตามสำนักงานราชบัณฑิตยสภา) เราสามารถอัปเดตได้โดยคลิกที่คำว่า อัปเดตตอนนี้ บริเวณธีมท่ีมี การแจ้งเตือน ซ่ึงตามรูปข้างต้น มีธีม 2 รายการที่จะต้องอัปเดตใหม่ สามารถคลิกพร้อมๆ กันได้ เม่ือคลิกแล้ว จะแสดงการอัปเดต ดังรปู

28 รูปท่ี 1.5 แสดงหน้าจอท่ีอยูร่ ะหว่างการอปั เดตธมี เมือ่ อปั เดตเสร็จแล้ว จะแสดงดังรูป รูปท่ี 1.6 แสดงการอัปเดตธีมทเ่ี สรจ็ แล้ว การเปล่ียนธีม จะต้องเลือกใช้งานจากธีมที่มีอยู่แล้ว เร่ิมต้นมีจำนวน 3 ธีม (สามารถเพิ่มได้) โดยธีมที่ แสดงอันแรก คือ ธมี ท่ีเราใชง้ านอยู่ในปัจจุบัน ชื่อว่า Twenty Twenty การเปล่ียนธมี ให้เราเอาเม้าสไ์ ปชี้ที่ธีม ท่ีต้องการ จะมีปุ่มเมนู 3 ปุ่ม ได้แก่ รายละเอียดธีม, ใช้งาน และดูตัวอย่างแบบสด การคลิกท่ีคำว่า ดูตัวอย่าง แบบสด จะช่วยให้เราตัดสินใจก่อนจะเปล่ียนธีม หากเราต้องการเปล่ียนเป็นธีมน้ี ให้คลิกปุ่มเมนูคำว่า “ใช้งาน” ดงั รูป รูปท่ี 1.7 แสดงหนา้ จอเม่ือมีการชเี้ ม้าส์ทีธ่ ีม Twenty Nineteen

29 หลงั จากคลิก “ใช้งาน” แลว้ จะไดห้ น้าจอ ดงั รูป รูปที่ 1.8 แสดงหนา้ จอเมื่อใชง้ านธมี Twenty Nineteen จะพบว่าธีม Twenty Nineteen จะย้ายมาอยู่เป็นรายการแรก เราสามารถดูหน้าเว็บไซต์ท่ีเปล่ียนธีม ใหม่ได้โดยคลิกที่ชื่อเว็บไซต์บริเวณแถบสีดำด้านบนสุด ท่ีมีรูป (และสามารถสลับหน้ากลับมายังหน้า ควบคมุ เว็บไซตโ์ ดยคลกิ ทีเ่ ดียวกัน) จะได้หนา้ จอดังรปู รูปที่ 1.9 แสดงการคลิกไปยังหน้าเวบ็ ไซต์จริง รปู ท่ี 1.10 แสดงหนา้ เว็บไซต์จรงิ ทไ่ี ด้มกี ารเปล่ยี นเป็นธมี Twenty Nineteen

30 การเพิ่มธีมใหม่ การเพิ่มธีมใหม่ จะต้องเข้าไปหน้าควบคุมก่อน โดยคลิกช่ือเว็บไซต์บริเวณแถบสีดำด้านบนสุด ที่มีรูป และเข้าไปท่ีหน้า จัดการธีม (ตามรูปท่ี 1.30) จากน้ันให้คลิกที่ปุ่ม “เพ่ิมใหม่” (หรือเครื่องหมาย + ที่ รูปแสดงธมี กไ็ ด้) ดงั รปู รูปที่ 1.11 แสดงหนา้ จอเม่ือจะคลิกเพิ่มธีม เมอื่ คลิกแลว้ จะได้หน้าจอดังรูป รูปที่ 1.12 แสดงหนา้ จอเม่ือจะคลิกเพิ่มธีม จะพบว่าธีมให้สามารถนำมาใช้งานได้หลากหลายธีม โดยแสดงรายการธีม ประเภท “พิเศษ” นอกจากนั้นก็ยังมีธีม “ยอดนิยม”, ธีม “ล่าสุด”, ธีม “ชื่นชอบ” และยังสามารถค้นหาธีมที่ต้องการได้ด้วย

31 เม่ือเราเอาเมา้ ส์ไปช้ี (แค่ช้)ี ที่ธีมที่ตอ้ งการ จะมีปุ่มเมนู 3 ปุ่ม ไดแ้ ก่ รายละเอยี ด&ดกู ่อน, ติดตั้ง และปุ่มดูก่อน เราอาจคลกิ ที่ปุ่มรายละเอยี ด&ดกู อ่ น หรอื ปุ่มดกู อ่ น เพอื่ ช่วยในการตัดสินใจได้ ดงั รปู รูปที่ 1.13 แสดงหนา้ จอเมื่อชีเ้ มา้ ส์ทีธ่ มี Screenr ธมี บางรายการเมื่อติดตัง้ แล้ว อาจต้องให้ติดตงั้ ปล๊ักอนิ เพิ่มเพ่ือให้สามารถใช้งานธีมกับเว็บไซต์ของเรา ได้ ซ่ึงหากไมต่ ิดต้ังปลัก๊ อินเพิ่มอาจจะไม่สามารถใช้งานกับเวบ็ ไซตเ์ ราได้ ให้ทำการทดลองเพ่ิมธีมท่ีชื่อว่า Colormag ซ่ึงเป็นธีมท่ีมีการอำนวยความสะดวกในการใช้งานเป็น อย่างมาก เหมาะสำหรับผู้ใช้งานใหม่ (ทำให้ไม่ท้อท่ีจะสร้างเว็บไซต์ด้วย Wordpress) โดยพิมพ์คำว่า colormag ในช่องค้นหาธมี ดงั รูป รูปท่ี 1.14 แสดงหนา้ จอคน้ หาธีมท่ชี ่ือวา่ colormag ระหว่างทีพ่ ิมพ์ Wordpress จะทำการคน้ หาธมี ให้อตั โนมัติ เม่อื เจอแลว้ เราจะทำการติดต้ัง โดยเอา เม้าส์ไปชีท้ ธี่ ีม Colormag แล้วคลิกป่มุ “ตดิ ต้ัง” ดงั รูป

32 รปู ท่ี 1.15 แสดงการคลิกปุ่มติดตั้งธีม Colormag เม่ือคลิกติดตั้งธีม ปุ่มติดตั้งจะเปลี่ยนเป็นคำว่า “กำลังติดตั้ง...” ให้รอจนกว่าจะตดิ ตั้งธีมแล้วเสร็จ จะ ไดห้ นา้ จอดังรูป รปู ท่ี 1.16 แสดงธมี colormag ทีต่ ดิ ต้ังเสรจ็ แล้ว ใหค้ ลิกทป่ี ุ่ม “ใช้งาน” เพ่อื ใช้งานธมี Colormag ในเว็บไซตข์ องเรา จะไดห้ น้าจอดงั รูป รปู ที่ 1.17 แสดงหน้าจอการจัดการธมี ที่มกี ารใชง้ านธมี colormag

33 โดยระบบจะแจง้ วา่ เราจะตอ้ งตดิ ตัง้ ปล๊กั อินเพิ่มเติมท่ีธีม Colormag แนะนำอกี 2 ปล๊ักอิน ไดแ้ ก่ Everest Forms - Easy Contact Form and Form Builder และ ThemeGrill Demo Importer ซง่ึ เราจะ ยงั ไมต่ ดิ ต้ังปล๊กั อินเพ่ิมในตอนนี้ และยงั มีช่องทตี่ ้อนรับในการใชง้ านธีม Colormag ด้วย ซง่ึ ในชอ่ งนี้มีปุ่มเมนู “Get started with Colormag” เปน็ ปุม่ ทจี่ ะชว่ ยนำทางใหเ้ ราสามารถใช้งานธีมน้ีได้อย่างสะดวก (เนื่องจาก ขณะนเี้ รายังไมม่ ขี ้อมูลเผยแพร่ในเวบ็ ไซต์เลย จึงทำใหเ้ พื่อเข้าไปดูท่ีหน้าเวบ็ ไซตเ์ ราจะโล่งๆ) ใหค้ ลกิ ทป่ี มุ่ “Get started with Colormag” ดงั รูป รูปที่ 1.18 แสดงหนา้ จอคำแนะนำธีม colormag เม่อื คลิกแล้วรอสักครู่ โดยจะเป็นการเพ่ิมและใชง้ านปลก๊ั อิน ThemeGrill Demo Importer อตั โนมตั ิ และจะเขา้ สู่หนา้ จอ Demo Importer ของธมี Colormag ซึง่ จะเปน็ การนำเข้าข้อมูลตัวอย่างตา่ งๆ ของ Colormag ชว่ ยอำนวยความสะดวกให้กับเรา โดยเราไมต่ ้องเพิม่ ข้อมูลดว้ ยตนเอง ใหเ้ ลอื กใช้งานไดต้ าม ตอ้ งการ โดยหากชีเ้ ม้าส์ที่ตัวอย่างเว็บรายการใดก็ตามทไ่ี ม่มีสญั ลักษณ์ Pro ซ่ึงเป็นข้อมูลตวั อย่างเว็บไซต์ (Demo) ท่ีให้ใช้งานไดฟ้ รี จะมีปมุ่ เมนู 2 ปุ่ม ไดแ้ ก่ ปุ่ม “Import” และปุ่ม “Preview” ใหเ้ ลอื กตามต้องการ ในทีน่ เ้ี ลือกรายการแรกท่ีชอ่ื ว่า Main จากนน้ั คลิกปุม่ “Import” ดังรปู รปู ที่ 1.19 แสดงหน้าจอเมื่อจะตดิ ต้ัง Demo เวบ็ ไซตข์ องธีม colormag ท่ีช่อื ว่า Main เมือ่ คลิกแลว้ จะมีคำแนะนำในการ Import โดยแจ้งว่า การ Import เหมาะกบั เว็บไซตท์ ่ียังไมม่ ีขอ้ มูล หรือเนือ้ หาในเวบ็ ไซต์ ให้ทำการคลกิ ท่ปี ุ่ม “CONFIRM!” ดงั รูป

34 รปู ท่ี 1.20 แสดงหน้าจอเมื่อจะติดตง้ั Demo เวบ็ ไซต์ของธีม colormag ทชี่ ื่อวา่ Main เมื่อคลิกแล้ว ปมุ่ คำวา่ Import จะเปลยี่ นเปน็ “กำลงั ติดต้ัง...” หรอื “Importing…” รอสักครจู่ นกวา่ จะติดตัง้ Demo แลว้ เสร็จ (อาจใช้เวลาบา้ ง) หากไมส่ ำเรจ็ จะมีข้อความแจง้ เตือน กใ็ ห้คลกิ ปมุ่ เดมิ อกี ครั้ง จนกวา่ จะสำเร็จ หลงั จากเสร็จแล้วจะแสดงข้อความวา่ “Imported” ดงั รปู แสดงว่าImport ขอ้ มูล เสรจ็ แลว้ รูปท่ี 1.21 แสดงหน้าจอ Import ข้อมลู Demo เวบ็ ไซตข์ องธีม colormag เสร็จแลว้ ให้คลิกไปดหู น้าเว็บไซต์ โดยคลกิ ท่ชี ือ่ เว็บไซต์ท่ีอยบู่ นแถบเมนูสีดำด้านซา้ ยบนสดุ จะสลับหนา้ ไปยงั เวบ็ ไซตข์ องเรา จะไดห้ น้าจอดงั รูป

35 รูปที่ 1.22 แสดงเว็บไซต์ท่ีมขี ้อมลู Demo ของธมี colormag

36 เพียงเทา่ นี้ เว็บไซต์ของเราก็จะมหี นา้ จอใกล้เคยี งกับความต้องการของการใชง้ านแล้ว เม่ือคลกิ เข้าไป อา่ นรายละเอียดของเร่ือง เช่น เรอ่ื งท่ีเป็นรูปสไลด์ จะได้หน้าจอรายละเอียดเร่ืองดงั รปู รปู ท่ี 1.23 แสดงรายละเอียดเรอ่ื ง Inventionฯ การใชง้ านธีมท่ีมีใหต้ ดิ ตง้ั ใน Wordpress จะเป็นแบบไมเ่ สียค่าใชจ้ ่าย แต่หากเราตอ้ งการประสทิ ธิภาพ ที่เพมิ่ ขน้ึ สามารถปรบั แตง่ ธมี ไดม้ ากขน้ึ จะต้องเสียคา่ ใช้จ่าย โดยแต่ละธมี มีคา่ ใชจ้ า่ ยแตกตา่ งกนั ไป