หลักสูตร ปวส. เทคโนโลยีธุรกิจดิจิทัล (2567)

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

อย่างไรก็ตาม การสร้างเว็บไซต์ไม่ได้หมายความว่าเราจะต้องเขียน HTML, CSS, JavaScript หรือภาษาโปรแกรมทั้งหมดด้วยตนเองเสมอไป เพราะปัจจุบันมี ระบบจัดการเนื้อหา หรือ CMS (Content Management System) ที่ช่วยให้เราสามารถสร้างและบริหารเว็บไซต์ได้สะดวกมากขึ้น

หนึ่งใน CMS ที่เป็นที่รู้จักอย่างแพร่หลายคือ WordPress

1. WordPress คืออะไร?

WordPress เป็นระบบจัดการเนื้อหา หรือ Content Management System (CMS) แบบ Open Source ที่ใช้สำหรับสร้างและบริหารจัดการเว็บไซต์

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

ตัวอย่างเช่น เราสามารถใช้ WordPress เพื่อ

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

WordPress เริ่มต้นขึ้นในปี ค.ศ. 2003 และพัฒนาจากแพลตฟอร์มสำหรับสร้าง Blog จนกลายเป็น CMS ที่สามารถนำไปพัฒนาเว็บไซต์ได้หลายประเภท

WordPress เป็นซอฟต์แวร์แบบ Open Source ซึ่งหมายความว่านักพัฒนาสามารถศึกษา แก้ไข และต่อยอดซอร์สโค้ดของระบบได้ตามเงื่อนไขของสัญญาอนุญาต

อ้างอิง: WordPress.org Documentation

2. CMS คืออะไร?

ก่อนเรียน WordPress เราควรเข้าใจคำว่า CMS – Content Management System

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

ลองเปรียบเทียบการสร้างเว็บไซต์ 2 รูปแบบ

การสร้างเว็บไซต์แบบเขียน Code เอง

นักพัฒนาอาจต้องสร้าง

HTML → CSS → JavaScript → Backend → Database

เช่น ต้องการเพิ่มหน้า “เกี่ยวกับเรา” นักพัฒนาอาจต้องสร้างไฟล์ HTML หรือสร้าง Route และ Template สำหรับหน้านั้น

การสร้างเว็บไซต์ด้วย CMS

ผู้ดูแลระบบสามารถเข้าสู่ระบบหลังบ้าน แล้วเลือก

Pages → Add New

จากนั้นเพิ่มข้อความ รูปภาพ หรือองค์ประกอบต่าง ๆ และกดเผยแพร่ได้

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

อย่างไรก็ตาม การใช้ CMS ไม่ได้หมายความว่าไม่จำเป็นต้องมีความรู้ด้านการเขียนเว็บไซต์เลย

หากต้องการพัฒนาเว็บไซต์ WordPress ในระดับสูง ความรู้เกี่ยวกับ HTML, CSS, JavaScript, PHP, Database, HTTP และ Web Server ยังคงมีประโยชน์อย่างมาก

3. WordPress สามารถสร้างเว็บไซต์อะไรได้บ้าง?

WordPress ไม่ได้ใช้สำหรับสร้าง Blog เท่านั้น แต่สามารถประยุกต์สร้างเว็บไซต์ได้หลายประเภท เช่น

เว็บไซต์บริษัท

ใช้แสดงข้อมูลบริษัท บริการ ผลงาน ข่าวสาร และช่องทางการติดต่อ

เว็บไซต์สถานศึกษา

ใช้เผยแพร่ข้อมูลหลักสูตร ข่าวประชาสัมพันธ์ บุคลากร ดาวน์โหลดเอกสาร และกิจกรรมต่าง ๆ

เว็บไซต์ Portfolio

ใช้แสดงประวัติ ผลงาน ทักษะ และประสบการณ์ของเจ้าของเว็บไซต์

เว็บไซต์ข่าว

สามารถสร้างหมวดหมู่ข่าว ผู้เขียน Tag และระบบค้นหาได้

เว็บไซต์ร้านค้าออนไลน์

สามารถเพิ่ม Plugin เช่น WooCommerce เพื่อเพิ่มระบบสินค้า ตะกร้าสินค้า คำสั่งซื้อ และระบบอื่น ๆ ที่เกี่ยวข้องกับ E-Commerce

เว็บไซต์ Blog

ใช้เผยแพร่บทความ ความรู้ รีวิว หรือประสบการณ์ต่าง ๆ

นอกจากนี้ยังสามารถนำ WordPress ไปประยุกต์สร้างเว็บไซต์รูปแบบอื่นได้อีกมาก ขึ้นอยู่กับ Theme, Plugin และการพัฒนาเพิ่มเติม

4. WordPress.com กับ WordPress.org ต่างกันอย่างไร?

ผู้เริ่มต้นมักสับสนระหว่าง

WordPress.com

และ

WordPress.org

แม้ว่าทั้งสองจะเกี่ยวข้องกับ WordPress แต่รูปแบบการใช้งานแตกต่างกัน

WordPress.com

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

เหมาะสำหรับผู้ที่ต้องการเริ่มต้นสร้างเว็บไซต์โดยไม่ต้องดูแล Server มากนัก

WordPress.org

เป็นเว็บไซต์ของโครงการ WordPress ซึ่งเราสามารถดาวน์โหลดซอฟต์แวร์ WordPress เพื่อนำไปติดตั้งบน Server หรือ Hosting ของตนเองได้

รูปแบบนี้มักเรียกว่า

Self-hosted WordPress

ผู้พัฒนาจะสามารถควบคุมเว็บไซต์และสภาพแวดล้อมของ Server ได้มากกว่า แต่ก็ต้องรับผิดชอบเรื่อง Hosting, การติดตั้ง, การอัปเดต และความปลอดภัยมากขึ้น

ในการเรียนวิชาการสร้างเว็บไซต์ เราจะเน้นการศึกษา WordPress ในลักษณะ Self-hosted WordPress เพื่อให้ผู้เรียนได้เข้าใจการทำงานของเว็บไซต์มากขึ้น

อ้างอิง: WordPress.com vs WordPress.org

---

5. WordPress ทำงานอย่างไร?

เว็บไซต์ WordPress ไม่ได้ประกอบด้วยไฟล์ HTML เพียงอย่างเดียว แต่เป็นเว็บไซต์แบบ Dynamic Website

โครงสร้างอย่างง่ายสามารถมองได้ดังนี้

ผู้ใช้งาน

↓

Web Browser

↓

Web Server

↓

WordPress / PHP

↓

MySQL หรือ MariaDB

↓

สร้างหน้าเว็บไซต์

↓

ส่งกลับไปยัง Browser

ตัวอย่างเช่น เมื่อผู้ใช้เปิด

https://example.com/news

Server จะประมวลผล WordPress และค้นหาข้อมูลข่าวที่เกี่ยวข้องจาก Database จากนั้นจึงสร้างหน้าเว็บไซต์และส่งผลลัพธ์กลับไปยัง Browser

ดังนั้นข้อมูลของเว็บไซต์ WordPress จึงไม่ได้อยู่ในไฟล์ HTML เพียงอย่างเดียว

---

6. WordPress ใช้เทคโนโลยีอะไร?

ในภาพรวม WordPress เกี่ยวข้องกับเทคโนโลยี Web หลายส่วน เช่น

PHP

ใช้สำหรับการทำงานฝั่ง Server และเป็นเทคโนโลยีหลักส่วนหนึ่งของ WordPress

MySQL / MariaDB

ใช้เป็นระบบฐานข้อมูลสำหรับจัดเก็บข้อมูล เช่น Posts, Pages, Users, Comments และ Settings

HTML

ใช้กำหนดโครงสร้างของหน้าเว็บไซต์

CSS

ใช้กำหนดรูปแบบการแสดงผล เช่น สี ขนาด ระยะห่าง และ Responsive Design

JavaScript

ใช้เพิ่มการทำงานและ Interaction บนหน้าเว็บไซต์

WordPress.org แนะนำให้สภาพแวดล้อม Hosting ปัจจุบันรองรับ PHP 8.3 ขึ้นไป, MariaDB 10.11 ขึ้นไป หรือ MySQL 8.0 ขึ้นไป และ HTTPS

รายละเอียดเพิ่มเติม: WordPress Requirements

---

7. ส่วนประกอบสำคัญของ WordPress

ในการเรียน WordPress จะพบคำศัพท์สำคัญอยู่บ่อยครั้ง

Dashboard

Dashboard คือหน้าจอสำหรับบริหารจัดการเว็บไซต์

เมื่อเข้าสู่ระบบ Administrator แล้ว ผู้ดูแลเว็บไซต์สามารถจัดการส่วนต่าง ๆ เช่น

Posts
Pages
Media
Comments
Appearance
Plugins
Users
Settings

เราสามารถมอง Dashboard เป็น หลังบ้านของเว็บไซต์ (Back Office) ได้

---

8. Posts คืออะไร?

Post คือเนื้อหาที่มีลักษณะเป็นบทความหรือข้อมูลที่เผยแพร่ตามช่วงเวลา

ตัวอย่างเช่น

• ข่าวประชาสัมพันธ์
• บทความ
• ข่าวกิจกรรม
• Blog
• เทคนิคการใช้งาน
• ข่าวสารบริษัท

โดยทั่วไป Post สามารถจัดกลุ่มด้วย Category และ Tag ได้ และการแสดงผล Blog ตามค่าเริ่มต้นมักเรียงตามเวลาโดยนำเนื้อหาใหม่ขึ้นก่อน

ตัวอย่าง

Category: ข่าวประชาสัมพันธ์

• เปิดรับสมัครนักศึกษาใหม่
• ประกาศผลการแข่งขัน
• กิจกรรมวันวิทยาศาสตร์

---

9. Pages คืออะไร?

Page ใช้สำหรับเนื้อหาที่ค่อนข้างคงที่และไม่ได้ขึ้นอยู่กับลำดับเวลาเหมือน Post

ตัวอย่างเช่น

• Home
• About Us
• Services
• Portfolio
• Contact

สำหรับเว็บไซต์สถานศึกษาอาจเป็น

• หน้าแรก
• เกี่ยวกับวิทยาลัย
• หลักสูตร
• บุคลากร
• ติดต่อเรา

ดังนั้นหลักการจำง่าย ๆ คือ

Post = เนื้อหาที่มีการเพิ่มใหม่เรื่อย ๆ

Page = หน้าหลักหรือข้อมูลค่อนข้างถาวรของเว็บไซต์

---

10. Media คืออะไร?

Media Library คือพื้นที่สำหรับจัดการไฟล์ Media ที่นำมาใช้ในเว็บไซต์ เช่น

• รูปภาพ
• PDF
• เอกสาร
• Video บางรูปแบบ
• Audio

เมื่อเราอัปโหลดรูปภาพเข้า WordPress ไฟล์จะถูกจัดเก็บบน Server และสามารถนำกลับมาใช้ใน Page หรือ Post อื่นได้

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

---

11. Theme คืออะไร?

Theme เป็นส่วนที่ควบคุมรูปลักษณ์และการแสดงผลของเว็บไซต์

เช่น

• Layout
• Typography
• Header
• Footer
• รูปแบบ Blog
• รูปแบบ Page
• สี
• Responsive Design

สามารถเปรียบ Theme เหมือนกับ รูปลักษณ์หรือเสื้อผ้าของเว็บไซต์

เว็บไซต์ WordPress เดิมสามารถเปลี่ยนรูปลักษณ์ได้อย่างมากเมื่อเปลี่ยน Theme โดยที่เนื้อหาหลักยังคงอยู่

WordPress มี Theme ให้เลือกใช้งานจำนวนมาก และนักพัฒนาสามารถสร้าง Theme ของตนเองได้

ศึกษาเพิ่มเติม: WordPress Documentation – Customization

---

12. Plugin คืออะไร?

Plugin คือซอฟต์แวร์ที่ใช้เพิ่มความสามารถให้กับ WordPress

ถ้า Theme เปรียบเสมือน หน้าตาของเว็บไซต์

Plugin สามารถเปรียบได้กับ ความสามารถเพิ่มเติมของเว็บไซต์

ตัวอย่างเช่น ต้องการเว็บไซต์ธรรมดาให้กลายเป็นร้านค้าออนไลน์ ก็สามารถเพิ่ม Plugin สำหรับ E-Commerce ได้

หรือต้องการ

• Contact Form
• SEO
• Backup
• Security
• Cache
• Membership
• LMS
• Booking
• Gallery

ก็สามารถค้นหา Plugin ที่มีความสามารถเหล่านั้นมาติดตั้งได้

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

---

13. Theme กับ Plugin ต่างกันอย่างไร?

สามารถจำง่าย ๆ ได้ว่า

Theme = เว็บไซต์หน้าตาอย่างไร

ส่วน

Plugin = เว็บไซต์ทำอะไรได้บ้าง

ตัวอย่างเช่น

เราต้องการสร้างเว็บไซต์ร้านกาแฟ

Theme อาจกำหนดว่าเว็บไซต์มีโทนสีน้ำตาล มี Header รูปแบบใด เมนูอยู่ตรงไหน และหน้าแรกจัด Layout อย่างไร

ส่วน Plugin อาจเพิ่มระบบ

• แบบฟอร์มติดต่อ
• ระบบจองโต๊ะ
• Google Maps
• SEO
• ร้านค้าออนไลน์

ดังนั้นเว็บไซต์ WordPress หนึ่งเว็บไซต์มักประกอบด้วย WordPress Core + Theme + Plugins + Content

---

14. WordPress Core คืออะไร?

WordPress Core หมายถึงตัวระบบหลักของ WordPress

สามารถมองโครงสร้างอย่างง่ายได้ว่า

WordPress Website

= WordPress Core

• Theme
• Plugins
• Database
• Media
• Content

สิ่งสำคัญคือไม่ควรแก้ไขไฟล์ WordPress Core โดยตรงโดยไม่มีเหตุผล เพราะเมื่อ WordPress มีการ Update การแก้ไขดังกล่าวอาจถูกเขียนทับได้

การปรับแต่งเว็บไซต์ควรทำผ่านกลไกที่ WordPress เตรียมไว้ เช่น Theme, Child Theme, Plugin, Hooks หรือ API ตามความเหมาะสม

---

15. Domain และ Hosting

ก่อนนำเว็บไซต์ WordPress ขึ้น Internet ควรรู้จักอีก 2 คำ

Domain

Domain คือชื่อที่ใช้เข้าถึงเว็บไซต์

ตัวอย่าง

example.com

เปรียบเสมือน ที่อยู่ของเว็บไซต์

Hosting

Hosting คือพื้นที่ Server ที่ใช้จัดเก็บและประมวลผลเว็บไซต์

ภายใน Hosting อาจประกอบด้วย

• WordPress
• PHP
• Database
• รูปภาพ
• Theme
• Plugin
• ไฟล์ต่าง ๆ ของเว็บไซต์

ดังนั้น

Domain = ที่อยู่

Hosting = พื้นที่ที่เว็บไซต์ทำงานอยู่

---

16. แล้ว XAMPP ที่ใช้ในห้องเรียนคืออะไร?

ในช่วงเริ่มต้น เราอาจยังไม่จำเป็นต้องซื้อ Hosting จริง แต่สามารถจำลอง Server บนเครื่องคอมพิวเตอร์ของเราได้

เครื่องมือหนึ่งที่นิยมใช้ในการเรียนคือ XAMPP

XAMPP ช่วยให้เครื่องคอมพิวเตอร์สามารถทำหน้าที่เป็น Local Web Server ได้

หลังติดตั้งแล้ว เราสามารถสร้าง WordPress บนเครื่องของเราและเข้าใช้งานผ่าน URL ลักษณะเช่น

http://localhost/wordpress

การทำงานในลักษณะนี้เรียกว่า Local Development

เหมาะสำหรับการเรียน การทดลอง และการพัฒนาเว็บไซต์ก่อนนำขึ้น Server จริง

---

17. ทำไมเราจึงเรียน WordPress?

เป้าหมายของการเรียน WordPress ไม่ใช่เพียงการเรียนว่า

“ต้องกดปุ่มไหนเพื่อสร้างเว็บไซต์”

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

ผู้เรียนจะได้เรียนรู้ตั้งแต่

วางแผนเว็บไซต์

↓

ออกแบบโครงสร้างเว็บไซต์

↓

ติดตั้ง WordPress

↓

สร้าง Page / Post

↓

เลือกและปรับแต่ง Theme

↓

ติดตั้ง Plugin

↓

ออกแบบ UI

↓

สร้าง Responsive Website

↓

ปรับปรุง SEO

↓

ดูแล Security และ Backup

↓

นำเว็บไซต์ขึ้น Hosting

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

---

18. สิ่งที่เราจะได้เรียนในรายวิชานี้

ในการเรียน WordPress เราจะไม่ได้หยุดอยู่เพียงการติดตั้ง WordPress แต่จะค่อย ๆ พัฒนาเว็บไซต์ตั้งแต่เริ่มต้นจนสามารถเผยแพร่ได้จริง

ตัวอย่างหัวข้อที่จะได้เรียน ได้แก่

1. พื้นฐาน Website และ WordPress
2. Domain, Hosting และ Web Server
3. การติดตั้ง XAMPP
4. การสร้าง Database
5. การติดตั้ง WordPress
6. การใช้งาน WordPress Dashboard
7. การสร้าง Page และ Post
8. การจัดการ Category และ Tag
9. การจัดการ Media
10. การติดตั้งและปรับแต่ง Theme
11. การใช้งาน Plugin
12. การออกแบบหน้าเว็บไซต์
13. Responsive Web Design
14. การสร้าง Menu, Header และ Footer
15. การสร้าง Contact Form
16. การทำ SEO เบื้องต้น
17. การปรับปรุงประสิทธิภาพเว็บไซต์
18. การ Backup เว็บไซต์
19. ความปลอดภัยของ WordPress
20. การย้ายเว็บไซต์จาก Localhost ไปยัง Hosting จริง

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

Company Website / Portfolio / เว็บไซต์สถานศึกษา / เว็บไซต์ประชาสัมพันธ์ / Blog / เว็บไซต์ธุรกิจ

ได้ด้วยตนเอง

---

สรุป

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

WordPress Core – ระบบหลัก

Theme – รูปลักษณ์ของเว็บไซต์

Plugin – ความสามารถเพิ่มเติม

Posts / Pages – เนื้อหาของเว็บไซต์

Media – รูปภาพและไฟล์

Database – จัดเก็บข้อมูล

Hosting – Server ที่ใช้ให้เว็บไซต์ทำงาน

Domain – ชื่อสำหรับเข้าถึงเว็บไซต์

การเข้าใจองค์ประกอบเหล่านี้จะช่วยให้เราไม่ได้เป็นเพียงผู้ใช้งาน WordPress แต่สามารถพัฒนาและแก้ไขเว็บไซต์ได้อย่างเป็นระบบ

---

คำถามทบทวนท้ายบท

1. WordPress คืออะไร และจัดเป็นระบบประเภทใด?
2. CMS ย่อมาจากอะไร และมีหน้าที่อย่างไร?
3. WordPress.com และ WordPress.org แตกต่างกันอย่างไร?
4. Post และ Page แตกต่างกันอย่างไร?
5. Theme มีหน้าที่อะไร?
6. Plugin มีหน้าที่อะไร?
7. Theme และ Plugin แตกต่างกันอย่างไร?
8. WordPress ใช้ Database อะไรในการจัดเก็บข้อมูล?
9. Domain และ Hosting แตกต่างกันอย่างไร?
10. เพราะเหตุใดเราจึงสามารถติดตั้ง WordPress บน XAMPP เพื่อทดลองใช้งานได้?

กิจกรรมท้ายบท

ให้นักศึกษาค้นหาเว็บไซต์ที่สนใจจำนวน 3 เว็บไซต์ และวิเคราะห์ว่าเว็บไซต์แต่ละแห่งประกอบด้วยหน้าอะไรบ้าง เช่น

Home / About / Services / Portfolio / Blog / Contact

จากนั้นให้ออกแบบ Site Map สำหรับเว็บไซต์ของตนเองอย่างน้อย 5 หน้า เพื่อเตรียมสำหรับการสร้างเว็บไซต์ WordPress ในบทเรียนถัดไป

---

แหล่งศึกษาเพิ่มเติม

WordPress.org Documentation
คู่มือการใช้งาน WordPress อย่างเป็นทางการ
ศึกษา WordPress Documentation

Learn WordPress
แหล่งบทเรียนและ Tutorial อย่างเป็นทางการของโครงการ WordPress
เรียนรู้ WordPress สำหรับผู้เริ่มต้น

WordPress Requirements
ข้อมูลเกี่ยวกับ PHP, Database และ Server ที่ WordPress แนะนำ
ตรวจสอบ WordPress Requirements

WordPress.com vs WordPress.org
อธิบายความแตกต่างระหว่าง WordPress.com และ WordPress.org
อ่าน WordPress.com vs WordPress.org

เอกสารอ้างอิงหลักของบทเรียนนี้มาจากเอกสารอย่างเป็นทางการของ WordPress.org และ WordPress.com