1. คู่มือประกอบการอบรมเรื่อง
การสร้างเว็บไซต์ด้วย WORDPRESS
SK1 ICT Team
สานักงานเขตพื้นการศึกษาประถมศึกษาสระแก้วเขต 1

2. สารบัญ
เรื่อง หน้า
บทที่ 1 : WordPress คืออะไร? 1
- ตัวอย่างเว็บ WordPress ที่น่าสนใจ 2
บทที่ 2 : การติดตั้ง WordPress 5
- โปรแกรมที่ท่านจะได้รับในการอบรมครั้งนี้ 5
- การติดตั้ง AppServ 6
- การติดตั้ง WordPress 11
บทที่ 3 ติดตั้ง Arras Theme 20
- การติดตั้งและปรับแต่ง Theme Arras 20
บทที่ 4 : สร้างหน้าเพจ / เมนู / หมวดหมู่เรื่อง /บทความที่จะทาการ 24
ประชาสัมพันธ์
- การสร้างหน้าเพจ 25
- การสร้าง เมนู 29
- การสร้างหมวดหมู่ของบทความหรือเรื่องที่จะประชาสัมพันธ์ 32
- การสร้าง บทความ หรือ เรื่องที่จะประชาสัมพันธ์ 34
บทที่ 5 : การตั้งค่า Arras Theme 38
- ขั้นตอนการตั้งค่า Arras Theme 38
- ตั้งค่าการแสดงผลหน้า Home 40
บทที่ 6 : การสร้าง Widgets 52
- Widgets (วิดเจ็ต)คืออะไร 52
- ตาแหน่งที่จัดวางวิดเจ็ต (Widget Areas) 52
- การสร้าง Widgets เพื่อใส่รูปหรือข้อความที่ได้สร้างขึ้นเอง 55
- ใส่รูปภาพในวิตเจ็ดแบบข้อความ 56
บทที่ 7 : ใส่ลูกเล่นให้กับเว็บไซต์ด้วย Plug-in 61
- การติดตั้งปลั๊กอิน Akismet 61
- การติดตั้ง SI CAPTCHA Anti-Spam 65
- การติดตั้ง Lightbox Plus 68

3. - เล็กๆน้อยก่อนขึ้นโฮสต์จริง 78
- การลบ แก้ ไข บทความ 70
- การใส่วีดีโอในบทความ 71
- ตรวจสอบว่ามีสื่อประเภทใดบ้างอยู่บนเว็บไซต์เรา 73
บทที่ 8 : Upload ขึ้นโฮส จริง 74
- Export / Import ฐานข้อมูล MySQL เตรียมตัวขึ้นเว็บ 74
- การอัพโหลดไฟล์เว็บขึ้นโฮสต์จริง 80
- ทาการตั้งค่าไฟล์เชื่อมต่อ Server 80
- อัพโหลดไฟล์ขึ้น server หรือ โฮสต์ 82

4. 1
บทที่ 1 : WordPress คืออะไร?
WordPress เป็นโปรแกรมสาหรับทาบล็อก ซึ่งพัฒนาโปรแกรมอยู่บนพื้นฐานของภาษา
โปรแกรมมิ่ง ที่ชื่อว่า PHP ซึ่งมีความยืดหยุ่นและได้รับความนิยมสูง โดยใช้ร่วมกับฐานข้อมูล
MySQL
WordPress เป็น CMS ( Contents Management System ) ที่ได้รับความนิยมอย่างสูง
จากผู้ใช้งานทั่วโลกรวมถึงผู้ใช้งานคนไทย เหมาะสาหรับการนามาสร้างเว็บบล็อกส่วนตัว
สานักงาน หรือแม้กระทั่งเว็บไซต์ขนาดใหญ่หลายๆเว็บไซต์ก็พัฒนามาจาก WordPress
การที่ WordPress ได้รับความนิยมเป็นอย่างสูงก็เพราะว่า WordPress มีระบบการ
จัดการที่ง่ายและสะดวกต่อการใช้งาน โดยมีความง่ายตั้งแต่การติดตั้งโดยใช้เวลาติดตั้งไม่ถึง 5
นาทีด้วยซ้าไป รวมถึงการเขียนบล็อกหรือการเปลี่ยนธีมของบล็อกหรือเว็บไซต์ก็ทาได้อย่างไม่
ยากเย็น ไม่เป็นอุปสรรคที่ยากเกินไปสาหรับนักพัฒนาเว็บไซต์มือใหม่ รวมถึงมีความปลอดภัย
ที่น่าเชื่อถือ มีการอัพเดตเวอร์ชั่นใหม่ๆอยู่อย่างต่อเนื่อง การอัพเดตแต่ละครั้งก็เพิ่ม ฟีเจอร์
ใหม่ๆเข้ามาอยู่เรื่อยๆ ทาให้เว็บไซต์หรือบล็อกของเราไม่หยุดนิ่ง และด้วยความเป็น
OpenSouce ของ WordPress จึงทาให้มีนักพัฒนาสร้าง Plugin (ปลั๊กอิน) รูปแบบบล็อก
(Theme) อย่างมากมาย
สรุปข้อดีของ WordPress
1. เป็น CMS แบบ OpenSouce
2. ปรับแต่งหน้า (Theme) ได้ง่าย มีความสวยงาม แสดงผลได้ทุกบราวเซอร์ และ
เปลี่ยนได้ตลอดเวลา
3. มีการอัพเดตอย่างต่อเนื่อง ทาให้หมดกังวล ด้านความปลอดภัย ไวรัสและสแปม

5. 2
4. มีปลั๊กอิน ลูกเล่นเสริมมากมายทาให้เว็บไซต์มีลูกเล่นต่างๆหลากหลาย
5. สามารถเชื่อมต่อกับระบบ Social Network อื่นๆได้อย่างมากมาย
6. สามารถต่อยอดเป็น เว็บบล็อกส่วนตัว เว็บไซต์หน่วยงาน ได้อย่างง่ายดาย
อื่นๆ อีกมากมายครับ แต่ว่าท่านจะได้รู้ระดับความสามารถของตัวโปรแกรมเมื่อได้ใช้
งานจริงๆ ซึ่งจะทาให้รู้สึกทึ่ง อย่างไม่ยากเย็น
ตัวอย่างเว็บ WordPress ที่น่าสนใจ
เพื่อเป็นการการันตีว่า WordPress สามารถทาอะไรได้หลายอย่างๆจริงๆ จึงของนาเอา
เว็บไซต์ต่างๆที่สร้างขึ้นจาก WordPress มานาเสนอในครั้ง เพื่อประกอบการตัดสินใจว่า
หลังจากที่ท่านได้อ่านคู่มือฉบับนี้แล้ว ท่านจะเปลี่ยนใจไปใช้ WordPress หรือไม่ หรือจะทา
ให้เว็บไซต์ท่านเป็นแบบเดิม พูดง่ายๆก็คือล่อใจท่าน ในการเปลี่ยนแปลงเว็บไซต์มาใช้
WordPress นั่นเอง
ขอโชว์เว็บที่สร้างเองก่อนแล้วกันนะครับ
เว็บไซต์ โรงเรียนมหาธิคุณวิทยา www.mahathikun.ac.th

6. 3
เว็บไซต์โรงเรียนไทรเดี่ยววิทยา
ต่อไปเว็บไซต์ระดับมืออาชีพครับ
เว็บของคุณเม่น คนนี้ระดับเชี่ยวชาญเลยครับ

7. 4
จริงๆแล้ว มีอีกมากมายหลายเว็บไซต์ที่สร้างด้วย Wordpress ลองเสิร์ซหาคาว่า
เว็บไซต์ที่สร้างด้วย Wordpress ก็จะพบได้อย่างไม่ยากเย็น

8. 5
บทที่ 2 : การติดตั้ง WordPress
โปรแกรมที่ท่านจะได้รับในการอบรมครั้งนี้
1. Appserv โปรแกรมจาลองเครื่องคอมพิวเตอร์ให้มีสถานะเป็น Server ซึ่งได้บรรจุ
Apache PHP5 Mysql PhpMyadmin และตั้งค่าให้สามารถทางานร่วมกันเรียบร้อยแล้ว
2. Wordpres3.2.2 สคริปค์ wordpressgเวอร์ชั่น 3.2.2 ภาษาไทย
3. Theme Arras 1.5.1.2 ซึ่งเป็น Theme ที่เราจะใช้เพื่อเป็นตัวอย่างในการปรับแต่ง
เว็บครั้งนี้
4. โปรแกรม Edit+ เป็นโปรแกรมแก้ไขโค๊ด ของ Wordpress ซึ่งถ้าในเครื่องท่านมี
Dreamwaver หรือ Editor อื่นอยู่แล้วก็ไม่จาเป็นต้องลงใช้ตามความถนัดได้เลยครับ
5. โปรแกรม FileZilla สาหรับ อัพโหลดเว็บไซต์ขึ้นสู่โฮสต์จริงๆ

9. 6
การติดตั้ง AppServ
Appserv เป็นโปรแกรมที่จาลองเครื่องคอมพิวเตอร์ ของผู้พัฒนาโปรแกรมเองให้มี
สถานะเป็น Web Server หรือ localhost
ขั้นตอนการติดตั้ง (อ้างอิงจากเว็บไซต์ผู้พัฒนาโปรแกรม)
1. ดับเบิ้ลคลิกไฟล์ appserv-win32-x.x.x.exe เพื่อทาการติดตั้งจะปรากฏหน้าจอ
ตามรูปที่ 1
รูปที่ 1 ขั้นตอนการติดตั้งโปรแกรม AppServ
2. เข้าสู่ขั้นตอนเงื่อนไขการใช้งานโปรแกรม ยอมรับเงื่อนไขให้กด Next เพื่อเข้าสู่การติดตั้ง
ในขั้นต่อไป
รูปที่ 2 แสดงรายละเอียดเงื่อนไขการ GNU License

10. 7
3. เข้าสู่ขั้นตอนการเลือกปลายทางที่ต้องการติดตั้ง โดยค่าเริ่มต้นปลายทางที่ติดตั้งจะเป็น
C:AppServ หากต้องการเปลี่ยนปลายทางที่ติดตั้ง ให้กด Browse แล้วเลือกปลายทางที่
ต้องการ ตามรูปที่ 3 เมื่อเลือกปลายทางเสร็จสิ้น ให้กดปุ่ม Next เพื่อเข้าสู่ขั้นตอนการติดตั้งขั้น
ต่อไป
รูปที่ 3 เลือกปลายทางการติดตั้งโปรแกรม AppServ
4. เลือก Package Components ที่ต้องการติดตั้ง โดยค่าเริ่มต้นนั้นจะให้เลือกลงทุก
Package แต่หากว่าผู้ใช้งานต้องการเลือกลงเฉพาะบาง Package ก็สามารถเลือกตามข้อที่
ต้องการออก โดยรายละเอียดแต่ละ Package มีดังนี้
- Apache HTTP Server คือ โปรแกรมที่ทาหน้าเป็น Web Server
- MySQL Database คือ โปรแกรมที่ทาหน้าเป็น Database Server
- PHP Hypertext Preprocessor คือ โปรแกรมที่ทาหน้าประมวลผลการทางาน
ของภาษา PHP
- phpMyAdmin คือ โปรแกรมที่ใช้ในการบริหารจัดการฐานข้อมูล MySQL ผ่าน
เว็บไซต์
เมื่อทาการเลือก Package ตามรูปที่ 4 เรียบร้อยแล้ว ให้กด Next เพื่อเข้าสู่
ขั้นตอนการติดตั้งต่อไป

11. 8
รูปที่ 4 เลือก Package Components ที่ต้องการติดตั้ง
5. กาหนดค่าคอนฟิกของ Apache Web Server มีอยู่ด้วยกันทั้งหมด 3 ส่วน คือ
Server Name คือช่องสาหรับป้อนข้อมูลชื่อ Web Server กาหนดเป็น localhost
Admin Email คือช่องสาหรับป้อนข้อมูล อีเมล์ผู้ดูแลระบบ เช่น root@localhost
HTTP Port คือช่องสาหรับระบุ Port ที่จะเรียกใช้งาน โดยทั่วไปแล้วนั้นจะมีค่าคือ 80
รูปที่ 5 แสดงการกาหนดค่าคอนฟิกค่า Apache Web Server

12. 9
6. Appserv จะกาหนด User ให้เราอัตโนมัติ คือ root แต่เราต้องสร้างรหัสผ่านเอง
เช่น
Enter root password = 1234
Re- Enter root password = 1234
Character Setes = UTF-8 Unicode
กด Next เพื่อไปที่ขั้นตอนต่อไป
รูปที่ 6 แสดงการกาหนดค่าคอนฟิกของ MySQL Database
7. สาหรับขั้นตอนสุดท้ายนี้จะมีให้เลือกว่าต้องการสั่งให้มีการรัน Apache และ
MySQL ทันทีหรือไม่ จากนั้นกดปุ่ม Finish เพื่อเสร็จสิ้นการติดตั้งโปรแกรม AppServ
รูปที่ 7 แสดงหน้าจอขั้นตอนสิ้นสุดการติดตั้งโปรแกรม AppServ

13. 10
8. โปรแกรมที่
ทรัพยากรที่อยู่ใน โฟลเดอร์ AppServ ทั้งหมด

14. 11
การติดตั้ง WordPress
ดาวน์โหลดและติดตั้ง WordPress
หลังจากติดตั้งผู้ช่วยพระเอก Appserv แล้ว มาถึงขั้นตอนการดาวน์โหลดและติดตั้ง
พระเอกของเราเสียทีครับ
1. โหลด WordPress ภาษาไทยที่ http://th.wordpress.org
แต่ในการอบรมครั้งนี้เราได้เตรียมไว้ให้ท่านพร้อมแล้ว อยู่ใน ซีดี หรือไดร์ที่แจกครับ
2. จะได้ไฟล์ ดังรูป แล้วทาการแตก zip
3. คัดลอก Folder ที่อยู่ใน
ไปที่ไดร์ C:AppServwww

15. 12
4. ดังภาพ
5. ติดตั้งโดยการเปิดโปรแกรม Browser ที่ท่านถนัดขึ้นมา

16. 13
6. สร้างฐานข้อมูลเพื่อรองรับ Wordpress โดยพิมพ์ URL ดังนี้
http://localhost/phpmyadmin
โปรแกรมจะถามหาชื่อผู้ใช้ และ รหัสผ่าน
ชื่อผู้ใช้คือ root รหัสผ่านที่ผมตั้งไว้ก็คือ 1234
พิมพ์เสร็จ คลิก ตกลง

17. 14
7. สร้างฐานข้อมูลชื่อ wordpress แล้ว คลิก ที่ปุ่ม ตกลง

18. 15
8. เปิดบราวเซอร์ขึ้นมาอีกหนึ่งแท็ป พิมพ์ที่ช่องaddress bar ดังนี้
http://localhost/wordpress
แล้ว Enter
9. หน้าจอต้อนรับพร้อมกับแนะนาวิธีตั้งค่าเบื้องต้น

19. 16
10. ตั้งค่าการเชื่อมต่อ WordPress กับฐานข้อมูลที่ได้สร้างไว้ก่อนหน้า
10. 1 ชื่อฐานข้อมูลที่สร้างไว้กับ PhpMyadmin ของผมจะเป็น wordpress
10.2 ชื่อผู้ใช้ ในที่นี้คือ root
10.3 รหัสผ่านที่ตั้งไว้ของวิทยากรจะเป็น 1234
10.4 ชื่อโฮสต์เป็น localhost (ไม่ต้องแก้ไข)
10.5 คานาหน้าตาราง ไม่ต้องแก้ไข
10.6 ติดตั้ง

20. 17
11. หน้าแสดงว่าค่าที่ตั้งทุกอย่างถูกต้องแล้ว
คลิก ปุ่ม ทาการติดตั้ง
12. ทาการตั้งค่าเว็บไซต์ เบื้องต้น

21. 18
12.1 หัวข้อเว็บ คือ ชื่อของเว็บไซต์นั่นเอง กรณีนี้สามารถเปลี่ยนได้ภายหลัง
12.2 ชื่อผู้ใช้ เป็นชื่อของผู้ดูแลระบบ ชื่อนี้จะไม่สามารถเปลี่ยนได้ภายหลัง
12.3 รหัสผ่านสองครั้ง หมายถึงให้เราใส่รหัสผ่านให้เหมือนกันทั้งสองช่อง
12.4 อีเมล์ กรอกอีเมล์ของท่านเอง
12.5 คลิกปุ่ม ติดตั้งเวิร์ดเพรส
13. ติดตั้งสาเร็จ
คลิก ปุ่ม เข้าสู่ระบบ เพื่อทาการตั้งค่า Wordpress ดังภาพ

22. 19
14. หน้าจัดการระบบของ Wordpress
15. หน้าแรกเว็บไซต์ที่ผู้เยี่ยมชมทั่วไปสามารถเห็นได้ (ยังไม่ได้ติดตั้ง Theme Arras )

23. 20
บทที่ 3 : ติดตั้ง Arras Theme
การติดตั้งและปรับแต่ง Theme Arras
ที่จริงแล้วภาพหน้าเว็บไซต์ดังรูปก่อนหน้านั้นคือหน้าสาเร็จรูปของ Wordpress แล้วนะ
ครับ ซึ่งสามารถใช้งานต่างๆ เช่น เพิ่มบทความ เพิ่มรูป เพิ่มการเชื่อมต่อต่างๆ ใส่ลิ้งค์ หรือ
เปลี่ยนรูปแบบเว็บไซต์ให้เป็นแบบที่เราต้องการก็สามารถทาได้ แต่เพื่อให้เราง่ายขึ้นโดยที่ไม่
ต้องเสียเวลาออกแบบ ได้มีผู้สร้างหน้าตาเว็บไซต์หรือที่เรียกว่า Theme ไว้มากมาย ซึ่งเรา
สามารถหาโหลด Theme ที่ชอบได้จาก Google โดยพิมพ์คาว่า Theme Wordpress Free โดย
จะพบผลลัพธ์การค้นหามากมาย แล้วเราก็สามรถเข้าไปโหลด Theme ได้จากเว็บไซต์ของ
ผู้ผลิตได้เลย แต่เพื่อให้เป็นรูปแบบเดียวกันและง่ายในการทาความเข้าใจต่อการอบรมครั้งนี้
จึงเลือกใช้ Theme ที่มีชื่อว่า Arras 1.5.1.2 ซึ่งเป็นของฟรี
เว็บไซต์ผู้ผลิต

24. 21
1. เมื่อโหลดมาแล้ว (ซึ่งได้ทาการโหลดมาให้แล้ว) ก็ทาการแตก zip เพื่อทาการย้าย
Theme ไปไว้ที่ Root Directory ของ เว็บไซต์ของเราได้เลย
แตก Zip ได้โฟลเดอร์ arras.1.5.1.2 ภายในโฟลเดอร์ arras.1.5.1.2
2. ทาการ Copy โฟลเดอร์ arras ที่อยู่ในโฟลเดอร์ arras.1.5.1.2
ไปไว้ที่ไดร์ C:AppServwwwwordpresswp-contentthemes

25. 22
3. เปิดหน้าเว็บ http://localhost/wordpress/wp-admin เพื่อเข้าสู่ระบบ
4. เลือกเมนู รูปแบบบล็อก  แล้วเลือก Themes

26. 23
5. คลิกเลือก Theme Arras
6. เสร็จขั้นตอนการติดตั้ง Theme Arras
รูปแบบหน้าตาของ
Theme Arras เบื้องต้น
ยังไม่ได้ปรับค่าอะไร

27. 24
บทที่ 4 : สร้างหน้าเพจ / เมนู / หมวดหมู่
เรื่อง /บทความที่จะทาการประชาสัมพันธ์
เพื่อให้ผู้อบรมในครั้งนี้มองเห็นภาพ ของการสร้างเว็บไซต์ด้วย Wordpress และการใช้
งาน Arras Theme ซึ่งเป็นภาพที่มองเห็นได้ยากสาหรับมือใหม่ว่าเว็บไซต์จะออกมาในลักษณะ
หน้าตาเป็นอย่างไร ผมจะพาท่านสร้างหน้าที่จาเป็นสาหรับเว็บไซตโรงเรียน หรือหน่วยงาน
ของท่านก่อนครับ
เช่นหน้าต่างๆที่เราต้องการจะให้มี
1. ประวัติโรงเรียน
2. ข้อมูลบุคลากร
3. ข้อมูลนักเรียน
4. กรรมการสถานศึกษา
5. ข้อมูลการเดินทางมาโรงเรียน ฯลฯ
เมนู คือ ส่วนที่ต้องการให้ผู้เยี่ยมชมเลือกว่าต้องการจะเข้าหน้าไหน หรือเรื่องใด
ในที่นี้เราจะต้องสร้างเมนูเพื่อให้หน้าที่เราสร้างนั้นไปแสดงที่หน้าแรก
หมวดหมู่ ที่ต้องการเพิ่มข่างประชาสัมพันธ์ เช่น
1. ข่าวประชาสัมพันธ์
2. กิจกรรมของโรงเรียน
3. กิจกรรมสัมพันธ์ชุมชน
บทความ หรือ เรื่องที่เราจะประชาสัมพันธ์ สามารถสร้างได้โดยอยู่ภายใต้หมวดหมู่

28. 25
การสร้างหน้าเพจ
ขั้นตอนที่ 1 ไปที่ เมนูด้านซ้าย ของหน้าผู้ดูแลระบบ เลือก หน้า  เขียนหน้าใหม่
ขั้นตอนที่ 2 ใส่รายละเอียดหน้า ประวัติโรงเรียน

29. 26
TIP การทางานแบบ WYSIWYG
การทางานแบบ WYSIWYG (ย่อมาจาก Waht You See is What You Get) คือ การทางานที่เราสามารถเห็น
สิ่งที่ปรากฏบนหน้าจอได้เหมือนกับผลที่ได้จากการพิมพ์ออกทางเครื่องพิมพ์ เช่น ตัวอักษรที่เน้นให้เป็นตัวหนา
ตัวเอียง หรือตัวขีดเส้นใต้ จะแสดงผลให้เห็นทางหน้าจอ ดังนั้น สิ่งที่เรากาหนดไว้จะแสดงให้เห็นจริงบนหน้าจอ
โดยตรง และไม่จาเป็นต้องพิมพ์ออกมาทดลองดูก่อน คุณสมบัตินี้ช่วยให้เราสามารถจัดการกับหน้าเอกสารตาม
ความต้องการได้ทันที
ขั้นตอนที3 ใส่รูปในหน้าประวัติโรงเรียน
่
คลิกที่ไอคอน ดังภาพ
จะปรากฏหน้าสาหรับอัพโหลดสื่อขึ้นมา
ต่อมาให้คลิกเลือกรูปที่เราต้องการจะใส่ โดยเลือกรูปจากเครื่องคอมพิวเตอร์

30. 27
เมื่อเลือกรูปที่ต้องการแล้ว จะได้รูปดังภาพด้านล่าง ให้ใส่รายละเอียดรูปแล้วคลิกใส่เข้าในเรื่อง

31. 28
จะได้ดังภาพ
ขั้นตอนที่ 4 เมื่อได้ปรับแต่งข้อความรวมถึงรูปภาพในหน้า ประวัติโรงเรียน เรียบร้อยแล้ว ก็
เตรียมที่จะเผยแพร่หน้านี้ได้แล้ว ครับ

32. 29
การสร้าง เมนู
เพื่อให้เว็บแสดงเมนูหน้า ประวัติโรงเรียน หรือหน้าอื่นๆที่เราสร้างขึ้น
เพื่อให้เราหรือผู้เยี่ยมชมเว็บไซต์สามารถมองเห็นหน้าต่างๆที่เราได้สร้างไว้เราจาเป็นจะต้อง
สร้างเมนูขึ้นมาก่อน โดยขั้นตอนต่อไปนี้
1. ไปที่แถบเมนู รูปแบบบล็อก เลือก เมนู
2. สร้างเมนูชื่อ topmenu

33. 30
3. จะได้หน้าจัดการเมนู ดังภาพ
4. เลือกการแสดงผลของเมนู

34. 31
5. เพิ่มหน้าลงในเมนู
6. จะแสดงผลหน้าเว็บไซต์ดังภาพ เป็นอันเสร็จขั้นตอนการสร้างหน้า และ เมนู ครับ

35. 32
การสร้างหมวดหมูของบทความหรือเรื่องที่จะประชาสัมพันธ์
่
เพื่อให้การประชาสัมพันธ์ข่าวสารของหน่วยงานของท่าน ถูกจัดเรียงให้ตรงหมวดหมู่
และให้ผู้มาเยี่ยมชมสะดวกในการอ่านหรือรับชมข่าวสารจากทางหน้าเว็บนั้น จาเป็นต้องจัด
หมวดหมู่ของบทความให้อยู่ในหมวดหมู่เดียวกันเช่น
เรื่องเด่น /ข่าวประชาสัมพันธ์ / กิจกรรมของโรงเรียน / กิจกรรมสัมพันธ์ชุมชน เป็นต้น
ในตอนนี้ เราจะมาฝึกการสร้างหมวดหมู่ ด้วย wordpress กันครับ
เริ่มจาก ขั้นตอนที่ 1 ล็อกอินเข้าสู่ระบบในฐานะผู้ดูแลเว็บไซต์ แล้วไปที่ เมนู เรื่อง 
หมวดหมู่ ดังภาพด้านล่าง

36. 33
ขั้นตอนที่ 2 สร้างหมวดหมู่โดยกาหนดดังนี้
ช่องที่ 1 ชื่อ ให้ใส่ชื่อหมวดหมู่ที่เราต้องการ
ช่องที่ 2 Slug ให้ใส่คาที่จะสร้าง URL ที่เป็นมิตรกับ search engine ใส่ชื่อเดียวกันกับ
ช่องที่ 1 ก็ได้ครับ
ช่องที่ 3 หลัก หมายความว่า ต้องการให้หมวดหมู่ที่เราสร้างอยู่ภายใต้หมวดหมู่ใด
หรือไม่ หากไม่ใช่ ให้เลือก ไม่มี
ช่องที่ 4 คาขยายความ ใส่เพื่อธิบายหมวดหมู่ที่เราสร้าง เพื่อผลทางด้านการค้นหา
ของ Search Engine
ดังภาพ
เมื่อกาหนดค่าข้างต้นเรียบร้อยแล้วให้คลิกที่ปุ่ม สร้างหมวดหมู่ ดังรูป (หมายเลข 5)
เราก็จะได้หมวดหมู่ตามต้องการ

37. 34
การสร้าง บทความ หรือ เรื่องที่จะประชาสัมพันธ์
ในการสร้างเว็บไซต์เพื่อนาเสนอหน่วยงานนั้นสิ่งที่สาคัญที่สุดก็คือข่าวความเคลื่อนไหว
หรือกิจกรรมของหน่วยงาน เพื่อที่จะให้สาธารณชนภายนอกได้รับรู้ข่าวสารที่หน่วยงานได้จัด
ขึ้นเพื่อเสริมสร้างภาพลักษณ์ที่ดีให้เกิดขึ้นแก่หน่วยงานนั้นๆ โดยขั้นตอนการสร้างบทความมี
ดังนี้
ขั้นตอนที่ 1 ท่านต้องล็อกอินอยู่ในฐานะผู้ดูแลระบบ หรือ ผู้ดูแลเว็บไซต์
ขั้นตอนที่ 2 ไปที่เมนู เรื่อง  เขียนเรื่องใหม่
จะได้ดังภาพ

38. 35
ขั้นตอนที่ 3 เพิ่มเนื้อของข่าวสารลงไป
รายละเอียดดังนี้
หมายเลข 1 เพิ่มข้อมูล เนื้อหา รายละเอียด รวมถึงภาพประกอบลงไป
หมายเลข 2 เลือกหมวดหมู่ของเรื่อง
หมายเลข 3 ใส่ป้ายกากับ หรือ คีเวิร์ด เกี่ยวกับเรื่องนั้น (ใส่หรือไม่ใสก็ได้)
หมายเลข 4 เมื่อเสร็จแล้ว คลิก เผยแพร่
ให้ผู้อบรมลอง เปิดไปที่หน้าเว็บไซต์ที่ท่านสร้างขึ้นเองเช่น http://localhost/wordpress
จะพบการเปลี่ยนแปลงดังภาพด้านล่าง

39. 36
ในที่นี้ ให้ผู้เข้ารับการอบรมลองทดสอบเพิ่มข่าวสารเข้าสู่เว็บไซต์อย่างน้อย
คนละ 5 เรื่อง เพื่อให้มองเห็นภาพรวมของการแสดงผลของเว็บไซต์ และเพิ่ม
ให้มีเรื่องครบทุกหมวดหมู่ที่ได้สร้างไว้

40. 37
ผลลัพธ์ดังภาพ
ทีนี้ท่านพอจะมองออกหรือยังครับเกี่ยวกับการแสดงผลเว็บไซต์ ถ้ายังไม่ออก
เรามาลองตั้งค่าการทางานของ Theme Arras 1.5.2.1 ที่เราได้ลงไว้ตั้งแต่ต้น
ดูก่อนนะครับ

41. 38
บทที่ 5 : การตั้งค่า Arras Theme
Arras Theme เป็น Theme ที่แจกให้ผู้ที่ใช้งาน Wordpress นาไปใช้ได้ฟรีๆ โดย
ไม่มีค่าใช้จ่ายใดโดยมีลิขสิทธิ์เพียงเป็นแบบ GNU Licenses (อ่านว่า กนู ไลเซนส์)
ซึ่ง กนูไลเซนส์ มีเงื่อนไขดังนี้
 เสรีภาพในการใช้งาน ไม่ว่าใช้สาหรับจุดประสงค์ใด
 เสรีภาพในการศึกษาการทางานของโปรแกรม และแก้ไขโค้ด การเข้าถึงซอร์สโค้ด
(Opensouce)
 เสรีภาพในการจาหน่ายแจกจ่ายโปรแกรม
 เสรีภาพในการปรับปรุงและเปิดให้บุคคลทั่วไปใช้และพัฒนาต่อไป การเข้าถึงซอร์สโค้ด
โดยมีเพียงเงื่อนไขว่า การนาไปใช้หรือนาไปพัฒนาต่อ จาเป็นต้องใช้สัญญาอนุญาตเดียวกัน
ขั้นตอนการตั้งค่า Arras Theme
1. เข้าสู่เว็บไซต์ในฐานะ ผู้ดูแลระบบ
2. เลือกเมนู Arras  Theme Option

42. 39
3. จะเข้าสู่หน้าตั้งค่าเบื้องต้นของ Arras Theme ซึ่งเป็นการตั้งค่าการเชื่อมต่อกับระบบ Social
Network เช่น Facebook Twiiter เป็นต้น และยังเป็นส่วนของการตั้งค่าข้อความด้านล่างสุด
ของเว็บไซต์หรือเรียกอีกอย่างหนึ่งว่า Footer นั่นเอง

43. 40
4. ส่วน Home เป็นส่วนตั้งค่าแสดงผลของเว็บไซต์ในหน้า Home หรือหน้าแรกของ
เว็บไซต์นั่นเอง ซึ่งจะทาการดึงบทความหรือเรื่องที่เราได้สร้างขึ้น นามาแสดงที่หน้านี้
4.1 ตั้งค่าการแสดงผลหน้า Home
4.1.1 Post Option จะมี CheckBox ให้เลือก ซึ่งความหมายว่า หากมี
บทความที่มีชื่อ และเนื้อหาคล้ายกันแล้วให้รวมบทความนั้นให้เป็นบทความเดียว

44. 41
4.1.2 Slide Show ส่วนแสดงบทความที่อยู่ในรูปแบบของสไลด์
หมายเลข 1 เลือกว่าจะให้โชว์สไลด์หรือไม่ให้โชว์ โดยการติ๊กเลือกจะทาการโชว์สไลด์
เอาเครื่องหมายถูกออกจะไม่โชว์สไลด์
หมายเลข 2 เลือกว่าจะให้หมวดหมู่บทความไหน โชว์ ที่ สไลด์ ถ้า Check all จะเป็น
การเลือกทั้งหมด Uncheck all ก็ความหมายตรงข้ามครับ
หมายเลข 3 จะให้โชว์กี่เรื่อง
4.1.3 Featured Posts #1 เป็นส่วนที่แสดงเรื่องที่เราสร้างในอีกรูปแบบหนึ่ง โดยเรา
สามารถเลือกหมวดหมู่ที่ต้องการแสดง หรือ นามาแสดงทั้งหมดก็ได้ โดยการตั้งค่าจะคล้ายกัน
กับข้อ 4.1.2 มีข้อแตกต่างเพียงเล็กน้อย ดังนี้

45. 42
หมายเลข 1 ตั้งชื่อส่วนหมวดหมู่แสดงผลหน้าเว็บไซต์ เช่น กิจกรรมของ
โรงเรียนทั้งหมด
หมายเลข 2 เลือกว่าจะให้หมวดหมู่ใดแสดงผลบ้าง
หมายเลข 3 เลือกรูปแบบการแสดงผลของเรื่องหรือบทความ โดยมีรูปแบบ
ดังนี้
หากเลือกเป็น Node Base จะได้การแสดงผลดังรูป
หากเลือกเป็น Per Line จะได้การแสดงผลดังรูป
หากเลือกเป็น Quick Preview จะได้การแสดงผลดังรูป

46. 43
หากเลือกเป็น Traditional จะได้การแสดงผลดังรูป

47. 44
4.1.4 Featured Posts #2 ใช้การตั้งค่าเช่นเดียวกันกับข้อ 4.1.3
4.1.5 News Posts ใช้การตั้งค่าเช่นเดียวกันกับข้อ 4.1.3
เมื่อตั้งค่าเสร็จแล้วให้คลิก Save Change ทุกครั้ง
4.2 หน้า Layout ไม่ต้องตั้งค่าใดๆครับ ปล่อยไว้
โดยมีความหมายดังนี้
Excerpts คือ การตั้งค่าการตัดคา ในการแสดงผลบทความ
Archive/ Search เป็นการเลือกรูปแบบการแสดงผลในหน้า Archive และหน้า Search
Single Post เป็นการตั้งค่าให้หน้าบทความของเราแสดงข้อมูลอะไรบ้าง
Tapestry หมายความว่าต้องการให้มีการตัดคาเนื้อหาด้านล่างหัวข้อบทความในโหมด
Nod Base หรือไม่

48. 45
4.3 หน้า Design เป็นหน้าที่เอาไว้ตั้งค่าการแสดงผลของเว็บไซต์
ดังนี้
4.3.1 Overrall Layout เป็นการตั้งค่าให้เว็บไซต์แสดงผลกี่คอลัมน์หรือกี่สดมน์ เช่น
ตั้งต่าให้เป็น 2 Column Layout(Left Sidebar) หมายความว่า ตั้งค่าเว็บเป็นสองคอลัมน์
โดยให้แถบไซด์บาร์อยู่ด้านซ้าย จะผลลัพธ์ ดังนี้

49. 46
โดยที่ Side Bar จะบรรจุ Widgets อยู่ด้านในอีกที ซึ่งในบทต่อไปเราจะได้กล่าวถึง
4.3.2 ต่อไป default style จะเป็นการเลือกให้เว็บไซต์ใช่ Style Sheet ใด เพื่อแสดผล
เว็บไซต์ ยกตัวอย่างเช่น เลือก Blue.css

50. 47
จะได้ผลลัพธ์ดังภาพ
4.3.3 Custom Logo เป็นการใส่โลโก้ ให้กับเว็บไซต์หน่วยงานของท่าน
เช่น

51. 48
ผลลัพธ์
ทั้งนี้ท่านสามารถใช้รูปแบบและขนาดของโลโก้ตามที่ท่านต้องการได้ บางท่านอาจจะอยากได้
แบนเนอร์ใหญ่เต็มหน้าแทนที่โลโก้ ก็ใช้วิธีการเพิ่มรูปเช่นเดียว โดยค่าที่พอดีกับขอบเว็บคือ
ความกว้าง 980px ส่วนความสูงนั้นแล้วแต่ท่านพอใจครับ
เช่น

52. 49
4.3.4 Custom Blackgroud คือ การตั้งค่าพื้นหลัง
ซึ่งเมื่อทาการคลิกที่ คาว่า Set Custom Blackgroud จะเป็นการลิ้งไปสู่หน้าตั้งค่าพื้น
หลัง
หมายเลข 1 คลิกเลือกเพื่อให้การตั้งค่าทางาน
หมายเลข 2/1 เลือกว่าจะใส่พื้นหลังแบบรูปภาพ หรือ
หมายเลข 2/2 เลือกว่าจะใช้พื้นหลังแบบสี
หมายเลข 3 บันทึกการเปลี่ยนแปลง

53. 50
4.4 Thumbnail คือการตั้งค่าการย่อรูปให้แก่การแสดงผลเว็บไซต์
ซึ่งตั้งเป็นค่าเริ่มต้นก็น่าจะพอดีกัยรูปแบบเว็บไซต์แล้ว แต่ถ้าหากท่านใดอยากเปลี่ยนแปลงก็
สามารถเปลี่ยนได้ตามหัวข้อ เลยครับ

54. 51
4.5 Tools ส่วนนี้สาหรับผู้ที่เข้าใจโค้ดรูปแบบ Theme หากท่านไม่เข้าใจก็อย่าไป
เปลี่ยนแปลงอะไรจะเป็นการดีที่สุดครับ
เป็นอันเสร็จสิ้นการตั้งค่าเบื้องต้นสาหรับ arras theme ส่วนจะสวยงามหรือไม่นั้นก็
ขึ้นอยู่กับฝีมือในการออกแบบรูปภาพ ประกอบเว็บไซต์ของท่าน หรือการดีไซน์เว็บของท่าน
นั่นเองครับ

55. 52
บทที่ 6 : การสร้าง Widgets
6.1 Widgets (วิดเจ็ต)คืออะไร
Widgets เป็นอีกไม้ตายหนึ่งของเวิร์ดเพรส (WordPress) เป็นเหมือนเครื่องประดับของ
เว็บไซต์พวกสร้อยคอ นาฬิกา กาไล แว่นตาของเว็บไซต์ เมื่อเปรียบเทียบดังนี้จะเห็นได้ชัดว่า
วิดเจ็ตบางตัวนั้นนอกจากจะสวยงามแล้วยังเพิ่มความสามารถของเว็บไซต์หรือเป็นประโยชน์
แก่เว็บไซต์ด้วย
ตาแหน่งที่จัดวางวิดเจ็ต (Widget Areas)
จ ะขึ้นอยู่กับThemeของเว็บไซต์ว่าจะมีส่วนใดเป็นส่วนประกอบบ้าง ซึ่งแต่ละThemeจะ
ถูกสร้างขึ้นมาให้มีจานวนพื้นที่แตกต่างกันออกไป ซึ่งโดยทั่วไปอาจจะมีตั้งแต่ 1 ถึง 8 พื้นที่
Header 1 – พบน้อยใน Themeบางแบบ หรือ premium Theme
Header 2 – พบน้อย ในThemeบางแบบ หรือ premium Theme
Header 3 – พบน้อย ในThemeบางแบบ หรือ premium Theme
Sidebar 1 – ต้องมีเป็นอย่างน้อย *
Sidebar 2 – พบบ่อยใน Theme แบบ 3 คอลัมน์ (3 Column Themes)
Footer 1 – พบน้อย ในThemeบางแบบ หรือ premium Themeเท่านั้น
Footer 2 – พบน้อย ในThemeบางแบบ หรือ premium Themeเท่านั้น
Footer 3 – พบน้อยใน Themeบางแบบ หรือ premium Themeเท่านั้น
แต่Themeโดยส่วนมากจะมีเพียง 1 หรือ 2 widgets เท่านั้นคือ Sidebar 1 และ
Sidebar 2 บางThemeอาจจะเรียกต่างกันไปตามลักษณะของThemeซึ่งบางครั้งอาจเรียกว่า
Left Sidebar หรือ Right Sidebar

56. 53
Widgets ของ Arras Theme
เราสามารถลาก Widgets ที่อยู่ทางด้านซ้ายมือไปไว้ที่ช่อง Side Bar ด้านขวาได้ ง่ายๆ เพียง
แค่คลิกลาก Widgets ที่ต้องการแล้วนาไปปล่อยตรงพื้นที่ในกรอบด้านขวามือเท่านั้นเอง เช่น

57. 54
ผลลัพธ์ที่ได้

58. 55
6.2 การสร้าง Widgets เพื่อใส่รูปหรือข้อความที่ได้สร้างขึ้นเอง
จะช่วยให้เราสามารถเพิ่มข้อความหรือรูปภาพลิ้งค์ไปยังที่ต่างๆได้ ทาได้ดังภาพ
แล้วเพิ่มข้อความลงไปในกรอบวิตเจ็ด

59. 56
แล้วกลับไปดูการแสดงผลหน้าแรกเว็บไซต์
จะพบว่าวิตเจ็ด ได้เพิ่มขึ้นมาอีกหนึ่งวิตเจ็ด
6.3 ใส่รูปภาพในวิตเจ็ดแบบข้อความ
ต่อมาเราจะลองเพิ่มวิตเจ็ด ที่เป็นรูปภาพบ้างนะครับ เช่น นโยบาย 9 จุดเน้น
1. ก่อนอื่นท่านต้องเตรียมรูปภาพขนาดความกว้าง 280 px ก่อนครับ ส่วนความสูงแล้วแต่
ชอบครับ
รูปด้านบนนี้ ความกว้าง 280 ความสูง 60 px (พิกเซล) ครับ

60. 57
2. อัพโหลดรูปภาพที่เตรียมไว้ใส่ลงไปในเว็บไซต์ก่อนครับ ตามขั้นตอนดังนี้
2.1 ไปที่เมนู สื่อ  เพิ่มไฟล์ใหม่
2.2 ทาการอัพโหลดสื่อจากแหล่งที่ท่านเก็บไฟล์ที่ได้จัดเตรียมไว้เข้าไปในเว็บไซต์

61. 58
เมื่อเสร็จแล้วคลิก บันทึกการเปลี่ยนแปลงทั้งหมด
สิ่งที่ท่านจะต้องจาเพื่อนาโค้ดไปแปะไว้ในวิตเจ็ด
คือ URL ของรูปภาพที่ จะนาไปใช้ ทาได้โดยการ ไปที่คลังสื่อ แล้ว คลิกแก้ไขทีรูปนั้นๆ
ดังรูป

62. 59
เมื่อคลิกแก้ไขจะได้ดังภาพ
ก็จะได้ URL ดังนี้
http://www.mahathikun.ac.th/wp-content/uploads/2012/08/h9.png
ซึ่งเป็นพาทที่อยู่ของรูป
หลังจากนั้นให้ไปที่ รูปแบบบล็อก  Widgets
แล้วนาวิตเจ็ด ข้อความ ไปวางไว้ในส่วน Side Bar ด้านขวามือ แล้วใส่โค้ดดังนี้
<a href=" ใส่ URL ของลิ้งค์ที่ต้องการให้ไปเมื่อคลิกที่รูป ">
<img src=" ใส่ URL ของรูปภาพที่เราได้ทาการคัดลอกไว้ "></a>
จะได้ดังภาพด้านล่าง

63. 60
เปิดไปหน้าแรกเว็บไซต์เพื่อดูผลลัพธ์

64. 61
บทที่ 7 : ใส่ลูกเล่นให้กับเว็บไซต์ด้วย Plug-in
การที่ Wordpress เป็น OpenSouce จึงทาให้มีนักพัฒนาเว็บไซต์มากมายที่พัฒนา
ส่วนเสริมหรือลูกเล่นหรือ Plugin ซึ่งจะช่วยให้เว็บไซต์ของท่านมีอะไรที่น่าสนใจ น่าติดตาม มี
สิ่งอานวยความสะดวกโดยที่เราไม่ต้องเขียนโค้ดเอง รวมถึงปลั๊กอินเพื่อความปลอดภัยที่ช่วย
ให้เว็บไซต์ของคุณไม่โดนไวรัสหรือสแปมได้ง่ายๆ
ปลั๊กอินที่แนะนาเบื้องต้น
1. Akismet เป็นปลั๊กอินที่ช่วยกรองข้อมูลจากผู้ที่โพสต์บนเว็บไซต์ของเราว่าเป็นสแปม
หรือไม่ คือคอยตรวจสอบการสแปมเว็ไซต์นั่นเอง
2. SI CAPTCHA Anti-Spam เป็นปลั๊กอินที่บังคับให้ผู้ใช้หรือแม้กระทั่งผู้ดูแลระบบทา
การกรอก รหัสตัวอักษร ก่อนโพสต์ หรือเข้าระบบ เพื่อป้องกันสแปม สร้างความปลอดภัยได้อีก
ระดับ
3. Lightbox Plus เป็นปลั๊กอินที่ช่วยให้แสดงผลรูปภาพในรูปแบบที่สวยงาม
เรามาทดสอบและติดตั้งปลั๊กอินกันเลยครับ
1. การติดตั้งปลั๊กอิน Akismet (ข้อมูลจาก http://www.ischool.in.th)
Akismet Plugin เป็นปลั๊กอินที่ติดมาพร้อมกับ wordpress เมื่อตอนเราทาการติดตั้ง
ระบบ โดย Akismet Plugin นี้มีไว้สาหรับตรวจสอบว่ามีสแปมมาที่บล็อกของเราหรือเปล่า การ
ใช้งาน Akismet Plugin นั้นจะใช้ร่วมกับ API key ของ Wordpress โดยเราต้องไปลงทะเบียน
เพื่อขอ API key ก่อน โดยทาการขอ API key ได้ที่ WordPress.com ซึ่งเราต้องลงทะเบียนเป็น
สมาชิกก่อน เมื่อเราลงทะเบียนเสร็จเราก็จะได้ API key และนารหัสที่ได้มาใช้กับ Akismet ได้
ครับ
ขั้นตอนการลงทะเบียนเพื่อขอ API key
1. ลงทะเบียนเพื่อขอ API key ที่นี่ http://en.wordpress.com/signup
2. กรอกรายละเอียดต่างๆ

65. 62
3. ระบบจะทาการส่งตัว activate ให้เราทาการยืนยันมาที่ email ที่เราได้ระบุไว้

66. 63
4. ระบบจะส่งข้อมูลการเข้าสู่ระบบมาให้ พร้อมทั้ง API key ด้วย
ทาการติดตั้ง Akismet Plugin
1. เข้าสู่ระบบ หน้าหลัก ของ wordpress
2. ไปที่ ปลั๊กอิน ปลั๊กอินที่ติดตั้งแล้ว ดังรูป

67. 64
3. ทาการ คลิกใช้งาน
4. ระบบจะแจ้งลิงค์ที่ให้เราใส่ API key ” enter your WordPress.com API key ”
5. ทาการใส่ API key และ กดปุ่ม อัพเดตทางเลือก หากสาเร็จระบบจะแจ้งข้อความกลับมา
ครับ
เท่านี้การติดตั้ง Akismet Plugin เพื่อป้องกัน Spam ก็เป็นอันเสร็จสมบูรณ์แล้วครับ

68. 65
2. การติดตั้ง SI CAPTCHA Anti-Spam
wikipedia.org ได้ให้ความหมายของคาว่า CAPTCHA ดังนี้ CAPTCHA แค๊ปท์ชา คือ
การทดสอบเพื่อเข้าสู่ระบบคอมพิวเตอร์แบบโต้ตอบชนิดหนึ่ง เพื่อทดสอบว่าผู้ใช้งานเป็นมนุษย์
จริงหรือไม่ คาว่าคุณเป็นมนุษย์จริงหรือไม่นั้น ณ ที่นี้อาจจะหมายถึงสิ่งที่ไม่ใช่มนุษย์อาจจะ
เป็น Bot หรือโปรแกรมอัตโนมัติ ที่พยายามจะเข้าสู่ระบบของเราซึ่งอาจจะทาให้ระบบขาด
ความปลอดภัยได้
1. ก่อนอื่นให้เข้าไปที่หน้าติดตั้งปลั๊กอินใน หน้าหลักผู้ดูแลระบบก่อน แล้วทาการค้นหา
ปลั๊กอินชื่อ SI CAPTCHA Anti Spam เมื่อเจอแล้วก็ทาการดาวน์โหลด ดังรูป
2. และจัดการ Activate ให้เรียบร้อย โดยคลิกคาว่า ใช้งานปลั๊กอิน

69. 66
3. เมื่อคลิกใช้งานปลั๊กอินแล้วจะกลับเข้าสู่หน้าปลั๊กอินดังภาพ
4. ให้ตั้งค่าปลั๊กอินโดย คลิกที่คาว่า Setting แล้วตั้งค่าตามภาพได้เลยครับ

70. 67
5. ทดสอบดูในส่วนแสดงความเห็น ของ บทความที่สร้างก็จะพบดังภาพ
* ต้องออกจากระบบได้ Login ไว้ก่อนนะครับ ถึงจะมองเห็น

71. 68
3. การติดตั้ง Lightbox Plus
เป็นการนาเสนอรูปแบบการแสดงผลของรูปภาพบนเว็บไซต์ให้มีความสวยงามมากยิ่งขึ้นดังรูป
วิธีการติดตั้ง
1. ทาการค้นหาและติดตั้งปลั๊กอิน
2. เลือกใช้งานปลั๊กอิน

72. 69
3. ตั้งค่าการใช้งานปลั๊กอิน โดยทาดังรูป
4. ตั้งค่าการใช้ ลองทดสอบดูได้เลยครับ
เมื่อติดตั้งเสร็จแล้วสามารถไปที่หน้าแรกเว็บไซต์แล้วเปิดบทความ คลิกทีรูป เพื่อดูการแสดง
ผลได้เลยครับ..

73. 70
เล็กๆน้อยก่อนขึ้นโฮสต์จริง
เมื่อเราได้ทาการใช้งาน Wordpress มาพอสมควร ตั้งแต่ที่ผมแนะนามาและได้ข้าม
ขั้นตอนเบื้องต้นไปก่อนนั้น ในบทนนี้เราจะได้กล่าวถึง ซึ่งเป็นรายละเอียดปลีกย่อย ที่เรา
สามารถมาบริหารจัดการทีหลังได้
การลบ แก้ ไข บทความ
การลบ หรือแก้ไข บทความที่เราได้สร้างนั้น หากได้ทดสอบโพสต์บทความและแก้ไข
มาพอสมควร ก็คงจะจากันได้ แต่ถ้ายังจาไม่ได้ผมก็จะนาเสนออีกครั้งเพื่อความเข้าใจที่มาก
กว่าเดิมครับ
1. ไปที่เมนู เรื่อง  เรื่องทั้งหมด
2. เอาเมาส์ไปวางบนชื่อเรื่องทีต้องการลบหรือแก้ไข
หมายเลข 1 คือ แก้ไข เมื่อคลิกจะไปที่หน้าแก้ไข
หมายเลข 2 คือ การลบบทความ โดยคลิกที่คาว่า ถังขยะ

74. 71
การใส่วีดีโอในบทความ
การใส่วีดีโอเช่น Youtube จะช่วยเพิ่มบทความของเราให้มีความน่าสนใจมากยิ่งขึ้น ซึ่ง
มีวิธีการอยู่ 2 วิธี ครับ
1. การเพิ่มโดยการใช้ปลั๊กอิน การเพิ่มวิธีนี้จะมีปลั๊กอินให้ท่านพร้อมใช้งานอยู่แล้วโดย
การไปที่เว็บไซต์ wordpress.org ค้นหาปลั๊กอินเกี่ยวกับ Youtube มาติดตั้งลงในเว็บไซต์ ซึ่งวิธี
นี้จะไม่ขอกล่าวถึงแล้วกันนะครับ
2. การเพิ่มโดยการเพิ่มโค้ดลงในหน้าเพิ่มบทความ ซึ่งวิธีนี้เป็นการคัดลอกโค้ดจาก
เว็บไซต์ที่ให้บริการวีดีโอมาแปะลงในส่วนของรายละเอียดบทความ ดังนี้
- ไปที่เรื่อง  เขียนเรื่องใหม่ แล้วตั้งหัวข้อเรื่อง
- เมื่อตั้งหัวข้อเรื่องแล้ว ท่านจะใส่รายละเอียดก่อน หรือ ใส่วีดีโอก่อน ก็ได้ครับ โดย
ทาตามภาพดังนี้
ไปที่เว็บไซต์ที่ให้บริการวีดีโอ ในที่นี้ขอเลือก Youtube.com นะครับ แล้วเลือกวีดีโอที่
ต้องการ ดังภาพ โดยจะอธิบายตามหมายเลขได้ดังนี้

75. 72
หมายเลข 1 เมื่อเจอวีดีโอที่ต้องการแล้ว ด้านล่างของวีดีโอจะมีปุ่ม แบ่งปัน ให้คลิก
ที่ปุ่มแบ่งปัน
หมายเลข 2 เมื่อคลิกที่ปุ่มแบ่งปันจะปรากฏปุ่ม ฝัง ขึ้นมาให้คลิก
หมายเลข 3 เลือกขนาดวีดีโอที่ต้องการโดยเลือกขนาดที่ Youtube กาหนดไว้ หรือตั้ง
ค่าเองก็ได้
หมายเลข 4 คัดลอกโค้ดทั้งหมดที่อยู่ในช่องหมาย 4 ไว้
เมื่อคัดลอกโค้ดตามหมายเลข 4 ไว้แล้วให้สลับไปที่หน้า เพิ่มเรื่อง ของ Wordpress
แล้วคลิกแท็ป HTML ตามสี่เหลี่ยมสีแดง แล้วใส่โค้ดที่คัดลอกมาลงไป

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

77. 74
บทที่ 7 : Upload ขึ้นโฮส จริง
เมื่อเราได้ปรับแต่งเว็บไซต์ด้วย Wordpress จนเป็นที่พอใจแล้ว เราก็มีหน้าที่อีกอย่าง
หนึ่งที่สาคัญ นั่นก็คือ การนาเว็บไซต์ออกเผยแพร่สู่สาธารณชน ซึ่งสามารถเปิดดูที่ไหนก็ได้บน
โลกโลกใบนี้ขอเพียงมี คอมพิวเตอร์ อินเตอร์เน็ต รู้จัก URL เว็บไซต์ หรือถ้าไม่รู้จักเว็บไซต์ขอ
เพียงค้นหาด้วย Google เป็นก็น่าจะไม่มีปัญหาอะไร แต่ปัญหาของเราตอนนี้ก็คือการนา
เว็บไซต์ขึ้นโฮสต์จริงนั่นเอง
สาหรับท่านที่มีความคุ้นเคยอยู่กับการทาเว็บไซต์อยู่แล้ว คงไม่เป็นการยาก ง่ายเหมือน
ปลอกกล้วยเข้าปากเสียด้วยซ้า แต่หากเป็นคุณครูที่จับพลัดจับผลู ต้องมาทาเว็บไซต์ทั้งที่ไม่มี
พื้นฐานเดิมล่ะ อันนี้คงไม่ใช่งานง่ายใช่มั้ยครับ แต่หากผมจะบอกว่า ยุคสมัยโซเซียล
เน็ตเวิร์กครองเมืองอยู่นี้ หากใคร นาเสนอผลงานตัวเอง ผ่านเว็บไซต์ละ (ซึ่งมีอยู่ไม่น้อยเลยที่
ทาอยู่ตอนนี) ใครจะได้เห็นบ้าง อันนี้ฝากเป็นข้อคิดเผื่อท่านจะมีกาลังใจเพิ่มขึ้นครับ เพราะ
้
โดยพื้นฐาน Wordpress ถูกสร้างขึ้นมาเพื่อเป็นเว็บบล็อกส่วนตัว ...!
กระบวนการที่นาเว็บไซต์ที่สร้างจาก Wordpress ขึ้นสู่โฮสต์หรือ Server จริงนั้น มี
ขั้นตอนหลักๆอยู่เพียง 2 ขั้นตอน
1. Export / Import ฐานข้อมูล MySQL เตรียมตัวขึ้นเว็บ
2. การ Upload เว็บ WordPress จาก localhost ขึ้นโฮส จริง
ขั้นตอนหลักที่ 1
Export / Import ฐานข้อมูล MySQL เตรียมตัวขึ้นเว็บ
1. เข้าจัดการฐานข้อมูล MySql ผ่าน PhpMyadmin โดยการพิมพ์ URL ดังนี้
http://localhost/phpmyadmin
จะพบกล่องข้อความขึ้นมาดังรูป แล้วให้เราเข้าสู่ระบบ

78. 75
2. เลือกฐานข้อมูลที่เราสร้างไว้ คือ wordpress แล้วคลิกที่แท็ป ส่งออก ดังรูป
3.จะได้ดังรูป
1 เลือกส่งออก
2 ติ๊กถูก หน้าคาว่า ส่งมาเป็นไฟล์
3 คลิก ลงมือ

79. 76
4. จะได้ไฟล์ ชื่อฐานข้อมูล. sql เช่นฐานข้อมูลของผมคือ wordpress ก็จะได้ไฟล์
ฐานข้อมูลเป็น wordpress.sql เป็นต้น
เก็บไว้ก่อนครับ
5. หลังจากนั้นให้เข้าสู่ URL ที่โฮสต์จริงๆของท่าน เช่น
www.sk1schools.org/phpmyadmin
(กรณี ตัวอย่างเท่านั้นนะครับ)
จะขึ้นกรอบข้อความเช่นเดียวกันกับ phpmyadminใน localhost
ชื่อผู้ใช้ของท่าน
ตามด้วยรหัสผ่าน
6. เมื่อเข้าสู่หน้าจัดการระบบ PhpMyadmin เช่นผมได้ชื่อฐานข้อมูลจากผู้ดูแลระบบโฮสต์เป็น
mahathikun (จาส่วนนี้ไว้ด้วยนะครับ เพราะว่าเราจะได้ใช้มันอีกครั้ง) จะได้ดังภาพ

80. 77
7. คลิกเลือกที่ Import เพื่อเลือกฐานข้อมูลที่ได้สารองไว้ขึ้นมา
8. คลิกลงมือ

81. 78
9. การติดตั้งฐานข้อมูลจากไฟล์ที่สารองไว้เสร็จเรียบร้อยแล้ว
10. ตั้งค่าไซต์ URL ของ Wordpress จากเดิม http://localhost/wordpress เป็นชื่อเว็บไซต์
ของท่านเช่น http://www.sk1schools.org/mahathikun
ตามขั้นตอนดังรูป
10.1 เลือกฐานข้อมูลของท่าน ของผมคือ mahatikun แล้วเลือกตาราง wp_options

82. 79
10. 2 เลือก เปิดดู จะได้ดังภาพ
10.3 หลังจากนั้นเลือกฟิลด์ในตาราง wp_options ที่ชื่อ siteurl โดยคลิกที่ไอคอน
ดินสอ จะได้ดังภาพ
เป็นอันตั้งค่าฐานข้อมูล เรียบร้อย แล้วครับ

83. 80
ขั้นตอนหลักที่ 2 การอัพโหลดไฟล์เว็บขึ้นโฮสต์จริง
ในที่นี้จะสมมติว่าท่านได้ URL ชื่อเว็บโรงเรียนของท่านหลังเว็บไซต์
www.sk1schools.org นะครับ เช่น www.sk1schools.org/mahathikun เป็นต้น
1. ทาการตั้งค่าไฟล์เชื่อมต่อ Server ดังนี้
1.1 เปิดไดร์ C:/AppServ/www/wordpress แล้วเปิดไฟล์ wp-Config.php
ด้วยโปรแกรแก้ไขโค้ดที่ท่านถนัด
1.2 ตั้งค่าการเชื่อมต่อ Server

84. 81
define('DB_NAME', 'ชื่อฐานข้อมูลของท่าน');
define('DB_USER', 'ชื่อผู้ใช้งานฐานข้อมูล');
define('DB_PASSWORD', 'รหัสผ่านฐานข้อมูล');
define('DB_HOST', 'localhost');  ตรงนี้ไม่ต้องเปลี่ยน
ยกตัวอย่าง
เสร็จแล้วทาการบันทึก เตรียมนาไฟล์ขึ้นโฮสต์หรือ Server ได้เลยครับ

85. 82
2. อัพโหลดไฟล์ขึ้น server หรือ โฮสต์
2.1 เปิดโปรแกรมอัพโหลด FileZilla แล้วตั้งค่าการเชื่อต่อ FTP ตามตัวอย่าง (ชื่อผู้ใช้
และรหัสผ่านของท่านเอง)

86. 83
2.2 ทาการเลือกโฟลเดอร์ C:/Appserv/www/wordpress ตามภาพ
แล้วเลือกไฟล์ที่อยู่ในโฟลเดอร์ wordpress ทั้งหมด โยน ขึ้นไปบน Server(โฮสต์)

87. 84
2.3 เปิดเว็บไซต์ www.sk1shools.org/mahathikun ก็จะพบเว็บไซต์ของท่านตามที่ได้
ปรับแต่ง และตั้งค่าไว้ครับ
หมายเหตุ :
1. ชื่อเว็บไซต์ที่เป็น Server หรือโฮสต์เป็นแค่การยกตัวอย่างประกอบซึ่งอาจจะไม่
สามารถใช้งานได้จริง ต้องรอการยืนยันจากเจ้าหน้าที่เขตอีกครั้ง
2. หากท่านอัพโหลดรูปไม่ขึ้น เมื่อเว็บไซต์ขึ้นโฮสต์จริง ต้องไป chmod 777 โฟลเดอร์
upload ที่อยู่ใน wp-content ก่อนครับ
3. รายละเอียดอื่นๆที่เป็นเรื่องที่เล็กๆน้อยจะขอกล่าวถึงในการอบรมอีกครั้งหนึ่งซึ่งจะ
ไม่ลงรายละเอียดมากในคู่มือนี้ เนื่องด้วยข้อจากัดด้านการจัดทาคู่มือ ซึ่งใช้เวลาค่อนข้าง
กระชั้นชิด และอาจจะตกหล่นไปบ้าง ต้องอภัยจริงๆครับ

88. 85
จากใจผู้เขียน
ด้วยการเขียนคู่มือฉบับนี้ เป็นครั้งแรกในการเขียนคู่มือที่ใช้งานอย่างเป็นทางการ กับ
คณะครู จึงมีความกระด้างกระเดื่อง ใช้ภาษาตกหล่นไปบ้าง ต้องขออภัยจริงๆครับ อีกทั้ง
ผู้เขียนเองก็ไม่อยากจะใช้ภาษาที่เป็นทางการ ศัพท์แสง ทางด้านคอมพิวเตอร์มากมายนัก
เพราะเข้าใจดีว่า คุณครูบางท่านไม่ได้จบเอกคอมพิวเตอร์โดยตรง และมาด้วยความจาใจบ้าง
และตัวผมเองก็ไม่ได้เก่งอะไร เพียงแต่ได้มีประสบการณ์ในการปรับแต่งเว็บไซต์ด้วย
Wordpress มาก่อนก็แค่นั้นเอง อาศัยอินเตอร์เน็ตและเว็บไซต์ยอดนิยมอย่าง google ช่วยให้
สามารถทาเว็บไซต์โรงเรียนให้ประสบความสาเร็จ
มีคุณครูหลายท่าน ได้นา Wordpress ไปใช้ในการจัดการเรียนการสอนได้อย่างดีมาก
ไม่เฉพาะการจัดทาเว็บเว็บไซต์สถานศึกษา บริษัทเท่านั้น จริงๆแล้ว wordpress ถูกออกแบบ
มาให้เป็นเว็บไซต์ส่วนตัว หรือที่เรียกกันว่า เว็บบล็อก นั่นเอง ท่านลองดูเถิดครับว่าท่านจะ
สามารถนาไปใช้ประโยชน์ได้อย่าง ลองค้นหาใน google ดูก็ได้ว่าคุณครูท่านอื่นได้ทาอย่างไร
ไว้บ้าง เราก็จะได้มีแนวทางของเรา..(นอกจากเว็บไซต์โรงเรียนแล้วยังได้เว็บบล็อกส่วนตัวสวยๆ
อีกครับ)
มีบางคนบอกว่า ไม่อยากจะเสียเงินตรงทาเว็บไซต์ ค่าโฮสต์ ค่าโดเมน ไปเปล่า
ประโยชน์เพราะว่าพึ่งจะเริ่มทากลัวไปไม่เป็น ขอแนะนา wordpress.com เป็นเว็บให้บริการ
จัดทาบล็อกส่วนตัวฟรี สามารถใช้งานได้ และซึ่งผมคิดว่าได้มีคุณครูหลายท่านได้ลองทา
มาแล้ว หรือเว็บอย่าง goggle site ก็เห็นมีครูในสระแก้วเราทาอยู่เหมือนกัน
การทาเว็บไซต์สมัยนี้มีเครื่องมือให้เรามากมาย ไม่ได้ยากจนเกินไป หรือง่ายจนไม่ต้อง
ทาอะไร ท่านที่จะนาไปต่อยอดต่อ ก็ขอให้ท่านโชคดีครับ ส่วนท่านที่ไม่รู้จะไปต่อยอดยังเพราะ
ไม่มีเวลาและไม่ค่อยชอบ ก็ขอให้คิดซะว่าได้มารู้จัก CMS อีกตัวนึงที่สามารถนาไปสร้าง
เว็บไซต์ได้ชื่อ Wordpress เหมือนกันกับ เรารู้จักผู้นาประเทศๆหนึ่ง ไม่รู้ว่าท่านเหล่านั้น ได้ทา
ประโยชน์อะไรไว้ให้กับประเทศบ้าง เหนื่อยแค่ไหน เพราะเราไม่ได้ใกล้ชิดสนิทกัน แค่ติดตาม
ข่าวสารตามเป็นระยะๆ แบบนั้น วิทยากรก็พึงพอใจแล้วครับ
สุดท้ายนี้อยากจะบอกว่า ในการอบรมครั้งนี้หากมีสิ่งหนึ่งสิ่งใด เป็นการรบกวน
บังคับจิตใจ หรือใช้คาพูดที่ไม่เหมาะสม น่าเบื่อหน่าย ก็ต้องขอกราบขออภัยไว้ ณ ที่นี้ครับ
สวัสดี ../ ชูชาติ โชติเสน