wordpress.com

1. การพัฒนาเว็บไซต์ในรูปแบบ
Blog ด้วย Wordpress.com
บุญเกียรติ เจตจานงนุช
ศูนย์บริการความรู้ทางวิทยาศาสตร์และเทคโนโลยี
สานักงานพัฒนาวิทยาศาสตร์และเทคโนโลยีแห่งชาติ (สวทช.)
http://stks.or.th/boonkiat

2. Web, Blog, Wiki
 Web
 HTML editor
 HTML Generator
 Macromedia Dreamweaver, MS FrontPage, Adobe GoLive
 CMS – Content Management System
 Joomla, Drupal, PHPNuke, Xoops
 Blog
 Wordpress, b2evolution, Wordpress MU
 Wiki
 MediaWiki, Dokuwiki, TWiki

3. เทคโนโลยี 2.0
 เทคโนโลยีตามแนวคิดของการพัฒนาเว็บไซต์ 2.0
(Web 2.0)
 ยุคใหม่ของการพัฒนาเว็บไซต์
 รูปแบบการพัฒนาเว็บไซต์ที่ให้ความสาคัญกับ “ผู้ใช้เว็บ” มากกว่า
“ผู้พัฒนา” หรือ “เจ้าของเว็บไซต์”
 แนวคิดการพัฒนาเว็บที่ให้ความสาคัญกับการปฏิสัมพันธ์
การทางานร่วมกัน การผสานความร่วมมือทั้งโครงสร้างพื้นฐาน ระบบ
ซอฟต์แวร์ และเนื้อหาเว็บ
 การปรับเว็บไซต์จากการให้ข้อมูลเพียงทางเดียว เป็นการให้บริการและข้อมูล
ที่ “ผู้ใช้” เข้าถึงได้ง่ายและร่วมสร้าง แก้ไข

5. Google & Search Engine Friendly

6. Mash-up
Blog RSS
Google
HTML CMS
Web Programming

7. เริ่มต้นกับ Web 2.0 - Blog
 Blog == weB Log
 Blog เว็บความร่วมมือที่ง่าย ไม่ซับซ้อน
 เครื่องมือเชื่อมความสัมพันธ์ระหว่างบุคคล
ได้เป็นอย่างดี
 สื่อสารได้ง่าย ทันใจ อนุทินชีวิต/การงาน
ฉบับออนไลน์
 จุดเด่น หมวดเนื้อหาและ Tag

8. เครื่องมือทีถูกเลือกใช้ประกอบการจัดการความรู้
่
(KM Tools)
การมีส่วนร่วม
(Participation)
คือ หัวใจ สาคัญ

9. วิธีเริ่มต้นกับ Web 2.0 - Blog
 Free Services
 http://www.wordpress.com
 http://www.blog.com
 http://gotoknow.org
 http://www.ning.com
 Free Software
 http://www.wordpress.org
http://www.weblogmatrix.org/

10. เขียนอย่างไร
 เรื่องราวใกล้ตัว ที่ชอบและถนัด
 เขียนแบบเบาๆ
 เล่าเรื่อง
 นาเสนอภาพ พร้อมเรื่องประกอบ
 เรียนรู้ร่วมกัน
 เขียนตามเป้า/จุดประสงค์ที่วางไว้

11. http://stanglibrary.wordpress.com/

12. http://stks.or.th/ling/attawfikiahschool/

13. http://stks.or.th/wg/dmslib/

14. http://nuttakorn2548.wordpress.com/

15. http://thailandhandmadebuu.wordpress.com

16. Wordpress
 ซอฟต์แวร์ในกลุ่ม Open Source
 พัฒนา Blog (weB + Log)
 เทคนิคการพัฒนาเว็บประเภทหนึ่งทีนาเสนอเนือหา
่ ้
โดยให้ความสาคัญกับวันที่/เวลาที่เผยแพร่เนื้อหา
 รูปแบบการใช้บริการ Wordpress
 Online Free Hosting : www.wordpress.com
 ติดตั้งบนเครื่องแม่ข่ายสานักงาน/ส่วนตัว

17. เริ่มด้วยต้องมี e-Mail
 www.gmail.com
 mail.yahoo.com
 www.hotmail.com

18. การใช้บริการ Wordpress.com

20. ประเด็นสาคัญการสมัครสมาชิก
 เลือกใช้อีเมล์ hotmail, yahoo mail, gmail
 User name ที่ระบุจะต้องเป็นภาษาอังกฤษ ตัวพิมพ์เล็ก
มีความยาวพอสมควร และห้ามใส่เครื่องหมายพิเศษใด
รวมทั้งช่องว่าง
 User name ทีระบุคือ
่
 รหัสผ่าน ควรมีความยาวไม่น้อยกว่า 8 ตัวอักษร และควร
ผสมอักขระพิเศษสัก 1 ตัวเช่น # @ $ %
 จะต้องจารหัสผ่านให้ได้ รหัสผ่าน ทีระบุคือ
่
 เมื่อสมัครผ่านแล้ว จะต้องเช็คเมล์ที่ใช้สมัคร เพื่อยืนยัน
การสมัครด้วยทุกครั้ง

21. ข้อแนะนาการสร้างรหัสผ่าน
 กาหนดเกณฑ์การสร้างรหัสผ่านให้ตนเอง
 ให้ความสาคัญกับการสร้างรหัสผ่าน
 เช่น กาหนดอักขระพิเศษให้สระ ปิดท้ายด้วย #
 A $
 E + kampaengsaen
 I ^
 O @
 U !
k$mp$+ngs$+n#

22. กาหนดชื่อ Blog
เลือกภาษาไทย

23. ยืนยันการสมัคร

24. ยืนยันการสมัคร
เปิดเมล์แล้วคลิก Link นี้ด้วย

25. ณ ขณะนี้ทุกท่านจะมีบัญชีการใช้งาน 2 ชุด
 e-Mail  Wordpress.com
 User name คือ  User name คือ
 Password คือ  Password คือ

26. URL ของเว็บไซต์ Wordpress ของตนเอง
 http://บัญชีที่สมัคร.wordpress.com
 เช่น เว็บของครูน้อง URL คือ
 http://krungnongjb.wordpress.com
 User name คือ
 Password คือ

27. โครงสร้างของหน้าเว็บ
ชื่อเว็บไซต์ สโลแกนเว็บ
เมนูจาก Pages
เนื้อเรื่อง (Post)
กลุ่มวิตเจ็ต

28. Login เข้าสู่ระบบ www.wordpress.com

29. Dashboard ส่วนสาคัญของการใช้งาน

30. Dashboard ส่วนสาคัญของการใช้งาน

31. เปลี่ยนระบบภาษา
 ไทย - > English
 หน้าหลัก, ตั้งค่า, General, ภาษา
 English - > ไทย
 Dashboard, Settings, General, Language
เมนูคาสั่งนี้ยังควบคุมการตั้งค่าของเว็บ
Web Configuration

33. ปรับแก้ไขข้อมูลผู้ใช้/สมาชิก
1
2

35. เปลี่ยนรูปแบบเว็บ (Themes)
 หน้าหลัก, รูปแบบบล็อก, Themes

36. เปลี่ยนรูปแบบเว็บ (Themes)
คลิก “ใช้งาน” ธีมที่ต้องการ

37. ดูหน้าเว็บ
 http://..ชื่อที่สมัคร...wordpress.com
 หรือ คลิกชื่อเว็บ

38. ดูหน้าเว็บ
กลับไปสู่หน้าจัดการ Dashboard ด้วยคาสั่ง ผู้ควบคุมเว็บ
หรือ

39. ปรับแก้ไขกราฟิกของ Themes
 บาง Themes อนุญาตให้ปรับแก้ไขกราฟิกได้
 เลือกคาสั่ง หน้าหลัก, รูปแบบบล็อก, ส่วนหัว (หากมี)
 จะต้องเตรียมภาพต้องข้อกาหนด หรือใช้เทคนิค Crop ภาพด้วยเครื่องมือ
ของ Wordpress

41. กราฟิกของ Themes ที่ปรับเปลี่ยน

42. Widget
 วิดเจ็ต
(Widget) คือ  จัดการวิดเจ็ตได้ด้วยคาสั่ง
โปรแกรมที่เพิ่ม หน้าหลัก, รูปแบบบล็อก,
ความสามารถให้บล็อก Widgets
 ลิงก์ไปที่ต่าง ๆ
 แสดงสถิติเยี่ยมชม
 แสดงหัวข้อเรื่อง
 แสดงข่าวสารจาก twitter

43. วิดเจ็ต
ลากจาก
ซ้ายไปขวา
 Widget จาเป็น
 Meta
 ค้นหา
 ปฏิทิน
 สถิติบล็อก
 หมวดหมู่ จานวน Sidebar
ขึ้นอยูกับ Themes
่
ที่เลือก

44. ประเภทเนื้อหา
 Post – เรื่อง  Page – หน้า
 Dynamic Content  Static Content
 นาเสนอเรียงตามวันที่/เวลา  นาเสนอด้วย Menu, Widget
 จัดเก็บตามวันที่/เวลา
(Archives)
 จัดกลุ่มตามหมวดหมู่
(Category)
 จัดกลุ่มตามป้ายกากับ (Tag)
 มักแสดงผลหน้าแรกของเว็บ
Blog

45. ปรับแก้ไขข้อมูลเกี่ยวกับเว็บ – About
 หน้าหลัก, หน้า
 คลิกหน้า About เพื่อเข้าไปแก้ไขข้อมูล

46. ปรับแก้ไขข้อมูลเกี่ยวกับเว็บ – About
1) ป้อนชื่อเรื่อง
5) อัปเดต
2) ป้อนเนื้อหา
4) ระบุลาดับการแสดงผล
3) เลือกเงื่อนไข
การแสดงความคิดเห็น

47. URL ที่ดีสาหรับเว็บ
 Wordpress.com กาหนดให้ URL ของแต่ละเนือหาเป็นมิตรกับ
้
Search Engine – Search Engine Friendly รวมทั้งกับคน
 URL Friendly จะไม่รองรับภาษาไทย
 แต่ส่วนประกอบของ URL มาจากชือเรื่อง
่
 หากใช้ชื่อเรืองภาษาไทย จะต้องเปลี่ยน Permalink ของเรื่องให้
่
เป็นภาษาอังกฤษ

48. คัดลอกเนื้อหาจากแหล่งอื่นๆ
 ไม่ควรคัดลอก (Copy) เนื้อหาจาก Word หรือแหล่งอืนๆ
่
มาวางใน Editor ของ Wordpress เพราะจะส่งผลให้เกิด
ปัญหาการแสดงผลที่ผิดพลาด ปรับแก้ไขยาก
 เพราะมี special code จากโปรแกรมต้นทางส่งมายัง Editor
ของ Wordpress
 หากจาเป็นต้องคัดลอกข้อมูล ให้นาข้อมูลดังกล่าวไปวาง
(Paste) บน NotePad ก่อนแล้วจึงคัดลอกจาก NotePad
มาวางใน Editor ของ Wordpress

49. เครื่องมือจัดการข้อความ/สื่อ

50. นาเข้ารูปภาพ # 1
 รูปภาพที่นามาประกอบเนื้อหาของ Wordpress จะต้องเตรียมดังนี้
 กาหนดชื่อแฟ้มภาพ (File name) ให้เป็นภาษาอังกฤษ และ/หรือผสม
ตัวเลข ห้ามใช้ภาษาไทย
 ฟอร์แมตภาพ
 .gif สาหรับภาพวาด ภาพลายเส้น ภาพที่มีสีไม่มาก
 .jpg/.png สาหรับภาพสีมาก
 .png สาหรับภาพสีมากที่ต้องการพื้นโปร่งใส (Transparent)
 ควรย่อภาพให้มีขนาดที่เหมาะสม และ/หรือลดความละเอียดของภาพ
(Resolution) ระหว่าง 72 – 96 dpi
 รูปภาพ/แบบอักษร/ข้อความไม่ควรละเมิดลิขสิทธิ์
 http://openclipart.org
 ค้นหาภาพจาก Google, Flickr ด้วยเงื่อนไข CreativeCommons
 ระบุ Metadata ของภาพให้เหมาะสมในระดับดิจิทัล

51. ตัวอย่างการเลือกฟอร์แมตภาพที่ไม่เหมาะสม
ภาพด้านซ้ายสีแตก ไม่สม่าเสมอ

52. Progressive & Interlaced
รูปภาพที่แสดงในโหมดปกติ
การแสดงผลภาพ การแสดงผลภาพแบบ Interlaced
แบบ Progressive

53. PNG & GIF Transparent

54. ปัญหาลิขสิทธิ์ของเมืองไทย

56. (cc)

57. การสืบค้นภาพที่เป็น (cc)
(cc)

58. วัน/เวลากล้องถ่ายภาพดิจิทัล/อุปกรณ์ดิจิทัล
 พรบ.การกระทาความผิดทางคอมพิวเตอร์

60. Image
Metadata
: EXIF
: IPTC

62. นาเข้ารูปภาพ # 2
 จากหน้าจอสร้าง/แก้ไขเนื้อหา คลิกเมาส์ ณ ตาแหน่งที่ตองการ
้
วางภาพ คลิกปุ่ม Add an Image
 คลิกเลือกภาพจากปุ่ม Browse

63. นาเข้ารูปภาพ # 3
 ป้อนชื่อภาพในรายการหัวข้อ
ใช้ภาษาไทยได้
 ป้อนคาบรรยายภาพใน
รายการคาอธิบายสลับหรือ
คาขยายความ
 หากต้องการให้คลิกที่ภาพ
เพื่อคลิกไปยังภาพขนาดต้นฉบับ
ให้คลิกปุ่ม URL ของไฟล์ แต่ถ้า
ไม่ต้องการให้คลิกภาพ
คลิกปุ่มไม่มี
 กาหนดตาแหน่งการวางภาพ
จากรายการจัดแถว
 กาหนดขนาดภาพจากขนาด
 คลิกปุ่มใส่เข้าในเรื่อง

64. สร้างหน้า (Page) ใหม่
 หน้าหลัก, หน้า, เขียนหน้าใหม่ (หน้าใหม่)

65. การจัดการ/เขียนเรื่อง (Post)
 หน้าหลัก, เรื่อง
 หน้าหลัก, เรื่อง, เขียนเรืองใหม่ (เรื่องใหม่)
่

66.  ระบุชื่อเรื่อง
 เขียนเรื่อง
 ใส่เนื้อหาย่อในรายการ
ตัดทอน
 ระบุ URL อ้างอิงใน
รายการ ส่ง Trackbacks
ใช้ , คั่นหากมีหลาย URL
 เงื่อนไขการแสดงความ
คิดเห็นจากรายการ
สนทนา
 เลือกชื่อผู้เขียน จาก
รายการ ผู้เขียน
 กาหนดหมวดหมู่จาก
Categories
 กาหนดป้ายกากับจาก
Post Tags
 ระบุเงื่อนไขการเผยแพร่
จาก เผยแพร่

67. ป้ายกากับ - Tags
 คาค้น
 แสดงปริมาณเนื้อหา
 กรองข้อมูลตามป้ายที่เลือก

68. ตัวอย่างการใส่เนื้อหา
 เนื้อหาที่เป็นข้อความ
 เนื้อหาพร้อมภาพ
 เนื้อหาพร้อมแนบไฟล์เอกสาร
 เนื้อหา Online slide จาก Slideshare
 เนื้อหา Video จาก Youtube

69. Slideshare ผ่าน Wordpress
 Slideshare.net เป็นแหล่งรวมสไลด์/เอกสารแหล่งใหญ่บนโลก
อินเทอร์เน็ต
 นา PPT, PDF, DOC ไปจัดเก็บและแปลงเป็น Online Slide,
i-Paper อัตโนมัติในรูปแบบ Flash-based
 ค้นสื่อจาก slideshare.net แล้วคลิกเลือกสื่อที่ต้องการ
 คลิกรายการ Embed
 คัดลอกคาสั่งจากรายการ Embed this presentation มาวางใน
Post ผ่านโหมดการทางาน HTML

70. Code ของ Slideshare
1
2

71. Slideshare ผ่าน Wordpress
1
2

72. Slideshare ผ่าน Wordpress

73. Youtube ผ่าน Slideshare
1
2
3
4

74. การแสดงความเห็น
 กรณีผู้ชมทั่วไป
 ต้องป้อนข้อมูลส่วนตัว
 ผลจะไม่ปรากฎทันที
 กรณีสมาชิก
 ใส่เฉพาะความเห็น
 ความเห็นที่เผยแพร่ต้อง
ผ่านการอนุมัตจากผู้ดูแลก่อน
ิ

75. การอนุมัติความเห็น
 จากหน้าหลัก จะปรากฎส่วนควบคุม “เนื้อเรื่อง”
แสดงว่ามี 4 ความเห็น
รอพิจารณา
3 ความเห็น
อาจจะเป็น Spam

76. การอนุมัติความเห็น

77. สร้างลิงก์เข้าในเว็บ
 หน้าหลัก, ลิงก์, Add New
 ควรสร้างหมวดหมู่ลิงก์ก่อน
ด้วยคาสั่งหน้าหลัก, ลิงก์,
ลิงก์หมวดหมู่
 การแสดงผลลิงก์ใน
หน้าเว็บให้กาหนดด้วย
Widgets ชื่อ ลิงก์

78. แบบสารวจ (Poll)
 หน้าหลัก, โพลล์

79. เผยแพร่โพลล์
 สร้างเรื่องใหม่ New Post คลิกปุ่ม Add Poll แล้ว
เลือกโพลล์ที่ต้องการเผยแพร่

80. ตอบโพลล์

81. ร่วมเป็นสมาชิกกับ Blog ที่มีอยู่แล้ว
 ติดต่อเจ้าของ Blog ให้เพิ่มบัญชี
 Login เข้าสู่ระบบ
 ป้อนข้อมูล

82. ตั้งค่าการเขียน

83. ตั้งค่า
การอ่าน

86. ตั้งค่าสื่อ

87. การทางานร่วมกับ Web 2.0 อื่นๆ
 ทางานผ่าน Widgets
 กาหนดค่า Widgets แตกต่าง
ตามบริการ Web 2.0
 อาจจะต้องเป็นสมาชิก
บริการ Web 2.0
ที่ต้องการก่อน

88. e-Commerce ด้วย Blog
 ขายอะไรดีผ่าน Blog  ประเด็นสาคัญ
 สินค้าราคาถูกกว่าท้องตลาด
 อย่าลืมประยุกต์ใช้ Web 2.0
 สินค้าเฉพาะกลุ่ม
 สินค้า “ไม่” ยอดนิยม
Tools ให้เหมาะสม หลากหลาย
 สินค้าไม่ต้องการเปิดเผยตัวตน  มีปฏิสัมพันธ์กับผู้ชม ผู้ซื้อ ลูกค้า
 สินค้ามีลักษณะเฉพาะตัว อย่างสม่าเสมอ
 สินค้าที่มีน้าหนักเบา  กาหนดกลุ่มเป้าหมาย และ
 สินค้าที่ไม่ยุ่งยากในการจัดส่ง ลักษณะเฉพาะให้ได้
 สินค้าที่เล่าเรื่องได้
 สินค้าที่หายาก
 Do it yourself – DIY

89. แหล่งข้อมูล
 http://stks.or.th/wiki
 http://slideshare.net/boonlert