1 Wordpress & Server2Go บุญเลิศ อรุณพิบูลย์ นักวิชาการ ศูนย์บริการความรู้ทางวิทยาศาสตร์และเทคโนโลยี สำนักงานพัฒนาวิทยาศาสตร์และเทคโนโลยีแห่งชาติ (สวทช.)

2 Wordpress ซอฟต์แวร์/ฟรีบริการในกลุ่มโอเพนซอร์ส (Open Source Software) ที่ทำหน้าที่บริการจัดการเนื้อหาสำหรับเว็บ (CMS – Content Management System) รูปแบบการนำเสนอเนื้อหาเว็บเป็นแบบ Blog weB + Log การนำเสนอเนื้อหาที่เรียงตามวัน/ที่เวลาที่เผยแพร่ผลงาน เนื้อหาล่าสุด แสดงเป็นลำดับแรก จัดกลุ่มเนื้อหาตามวันที่/เวลา, หมวดหมู่ (Category) และป้ายกำกับ (Tag) สามารถประยุกต์ใช้งานได้หลากหลาย เว็บส่วนตัว/หน่วยงาน/กิจกรรม เว็บแลกเปลี่ยนเรียนรู้ผ่านชุมชนนักปฏิบัติ (CoP) เพื่อการจัดการความรู้ เว็บไซต์บริการวิชาการ ความรู้ – Online Learning เว็บเพื่อการค้าขาย/พาณิชย์อิเล็กทรอนิกส์ (e-Commerce)

3 เหตุผลที่เลือกใช้ Wordpress ฟรี ได้ Source Code และปรับแต่งแก้ไขได้ มีผู้ใช้งานและนักพัฒนาจำนวนมาก เกิด Community ผู้ใช้และผู้พัฒนา ประยุกต์ใช้งานได้หลากหลาย มีโปรแกรมเสริมความสามารถหลากหลาย และฟรี เป็นมิตรที่ดีกับ Google (Search Engine Friendly & SEO – Search Engine Optimizer) สอดรับกับเทคโนโลยีเว็บ 2.0 (Web 2.0)

4

5 Web 2.0 ทุกคน (ตามเงื่อนไข/ข้อกำหนด) มีสิทธิ์จัดการเนื้อหาในเว็บ ไม่ใช่ผู้ชมเว็บแต่เพียงอย่างเดียว ควรให้ความสำคัญกับ พรบ.การกระทำความผิดทางคอมพิวเตอร์, พรบ.ลิขสิทธิ์ และ พรบ. อื่นๆ ที่เกี่ยวข้องด้วย เนื้อหาเป็นมากกว่าข้อความ – รูปภาพ ภาพเคลื่อนไหว Flash Animation Online Slide i-Paper Sound/Audio Video … ทำงานกันเป็นชุมชน (Communities) ผสานเทคโนโลยีร่วมกัน (Mash-up) ไม่ถูกจำกัดด้วยอุปกรณ์ ติดตาม ศึกษา วิเคราะห์พฤติกรรมผู้ชมเว็บได้มากขึ้น

6 Mash-up

7

การมีส่วนร่วม (Participation) คือ หัวใจ สำคัญ ความสำคัญของ Web 2.0

9 การให้บริการของ Wordpress บริการฟรีออนไลน์ บริการดาวน์โหลดซอฟต์แวร์ต้นฉบับ Wordpress เพื่อ การติดตั้งบนเครื่องแม่ข่ายเว็บของตนเอง/หน่วยงาน บริการดาวน์โหลดซอฟต์แวร์ต้นฉบับ Wordpress Mu เพื่อการติดตั้งบนเครื่องแม่ข่ายเว็บของตนเอง/หน่วยงาน มีลักษณะการทำงานแบบกลุ่ม Blog

10

11

12

13 ใช้จริง ทำอย่างไร องค์กร เตรียม Server ติดตั้ง Linux ฐานข้อมูล MySQL โปรแกรมภาษา PHP สิทธิ์ในการเข้าถึง Server ส่วนตัว หน่วยงานเตรียมพื้นที่ให้ สิทธิ์ในการเข้าถึง Server เช่าพื้นที่ ISP

14

15 Server2Go ซอฟต์แวร์จำลองเครื่องแม่ข่ายเว็บ (Web Server) แบบ พกพา Apache PHP MySQL PHPMyAdmin Perl ไม่ต้องเสียเวลาติดตั้ง ดาวน์โหลด แล้ว unzip ก็ใช้งานได้ทันที คัดลอก (Copy) ระบบที่พัฒนาใส่ Thumb Drive & CD- ROM ไปใช้งานที่ใดก็ได้

16

17 การเรียกใช้งาน Server2Go ดับเบิลคลิกไอคอน Serve2Go.exe รอสักครู่ โปรแกรมจะ เปิด IE Web Browser

18 สร้างตารางข้อมูล MySQL # 1 พิมพ์

19 สร้างตารางข้อมูล MySQL # 2 คลิกในรายการ “สร้างฐานข้อมูลใหม่” ป้อนชื่อ เช่น wordpress เลือกตัวเลือกถัดไปเป็น utf8_unicode_ci จากนั้นคลิกปุ่ม “สร้าง” 123 4

20 ติดตั้ง Wordpress # 1 พิมพ์ URL

21 ติดตั้ง Wordpress # 2 คลิกปุ่ม Create a Configuration File 1

22 ติดตั้ง Wordpress # 3 เข้าสู่จอภาพเริ่มต้นการติดตั้ง คลิกปุ่ม Let’s go! 1

23 ติดตั้ง Wordpress # 4 ป้อนข้อมูลการติดตั้งดังนี้ Database Name : wordpress User Name : root Password : ไม่ต้องระบุ Database Host : localhost Table Prefix : wp_ คลิกปุ่ม submit

24 ติดตั้ง Wordpress # 5 หากโปรแกรมตรวจสอบแล้วข้อมูลตามขั้นตอนที่ 4 ถูกต้อง จะปรากฎข้อมูลดังภาพ ให้คลิกปุ่ม Run the install

25 ติดตั้ง Wordpress # 6 ป้อนข้อมูลเกี่ยวกับเว็บไซต์ Site Title: ชื่อเว็บไซต์ User name: บัญชีชื่อผู้ควบคุมเว็บ เช่น admin Password: รหัสผ่านของ ผู้ควบคุมเว็บ Your Address ของผู้ควบคุมเว็บ จากนั้นคลิกปุ่ม Install WordPress

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

27 ติดตั้ง Wordpress # 7 การติดตั้งสมบูรณ์

28 การเรียกชมเว็บไซต์ เปิดใช้งาน Server2Go

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

30 การเข้าสู่ระบบเว็บไซต์ – Log in เข้าสู่เว็บไซต์ เลื่อนหาคำสั่ง Log in จากกลุ่มรายการ Meta ป้อนบัญชี Admin เพื่อเข้าสู่ระบบ

31 จอภาพ ในส่วน ควบคุม ระบบ

32 ปรับแต่งระบบเว็บไซต์ - Config คลิกคำสั่ง Settings จากรายการเมนูด้านซ้าย 1

33 ปรับแต่งระบบเว็บไซต์ - Config Site Title ชื่อเว็บไซต์ควรเป็นภาษาอังกฤษ ตามด้วยภาษาไทยได้ มีความหมาย ชัดเจน ผู้ใช้นึกถึงได้ง่าย (คำค้น) มีความยาวรวมไม่เกิน 64 ตัวอักษร Tagline สโลแกนของเว็บ Membership อนุญาตให้ผู้ชมเว็บสมัครสมาชิกได้หรือไม่ Time Zone ให้เลือกเป็น UTC+7 คลิกปุ่ม Save Change

34 หน้าควบคุมหลัก – Dashboard เมื่อปรับแต่ง/ทำงานใด สามารถกลับสู่หน้าควบคุมหลัก ได้โดยคลิกคำสั่ง Dashboard 1

35 ปรับแก้ไขข้อมูลสมาชิก คลิกที่ชื่อสมาชิก (user name) ที่มุมบนขวาของจอภาพ 1

36 ปรับแก้ไขข้อมูลสมาชิก

37 ชมเว็บไซต์ที่ปรับแต่ง เมื่อปรับแต่ง/ทำงานใด สามารถชมหน้าเว็บได้โดยคลิกที่ ชื่อเว็บไซต์ 1

38 จากหน้าเว็บสู่หน้าควบคุม จากหน้าเว็บกลับสู่หน้าควบคุมได้โดย Log in ใหม่ หรือคลิกคำสั่ง Site Admin

39 เปลี่ยนกราฟิกหัวเรื่องเว็บ # 1

40 เปลี่ยนกราฟิกหัวเรื่องเว็บ # 2 เข้าสู่ส่วนทำงาน Dashboard คลิกคำสั่ง Appearance, Header

41 เปลี่ยนกราฟิกหัวเรื่องเว็บ # 3 เลือกรูปแบบกราฟิกที่ต้องการ แล้ว Save Change

42 เปลี่ยนกราฟิกหัวเรื่องเว็บ # 4 สามารถนำภาพที่สร้าง/จัดเตรียมเป็นภาพหัวเรื่องเว็บได้โดยคลิกปุ่ม Browse แล้วเลือกภาพ จากนั้นคลิกปุ่ม Upload โปรแกรมจะให้ตัดส่วนของภาพตามขนาดที่โปรแกรมกำหนด แล้ว คลิกปุ่ม Crop and Publish

43 ใส่รายละเอียดเว็บ – About # 1 Wordpress เตรียมเมนูควบคุมหลักให้ 2 เมนู ได้แก่ Home สำหรับการกลับสู่หน้าหลัก About สำหรับนำเสนอรายละเอียดของเว็บ ในแต่ละเว็บควรมีการแสดงรายละเอียดต่างๆ ของเว็บ ที่เหมาะสมโดย ปรับแก้ไขได้ดังนี้ ทำงานในโหมด Dashboard เลือกเมนู Pages Page เป็นเนื้อหา ประเภทหนึ่ง ของ Wordpress มักจะเรียกว่า Static Content

44 ใส่รายละเอียดเว็บ – About # 2 คลิกที่ชื่อหน้า About เพื่อเข้าสู่การแก้ไข เมื่อแก้ไขแล้วให้คลิกปุ่ม Update เพื่อปรับปรุงข้อมูล

45 เครื่องมือแก้ไขเนื้อหา

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

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

48

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

50 PNG & GIF Transparent

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

52

53 (cc)

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

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

56

57 Image Metadata : EXIF : IPTC

58

59 นำเข้ารูปภาพ # 2 จากหน้าจอสร้าง/แก้ไขเนื้อหา คลิกเมาส์ ณ ตำแหน่งที่ ต้องการวางภาพ คลิกปุ่ม ใส่รูปภาพ คลิกเลือกภาพจากปุ่ม Select Files

60 นำเข้ารูปภาพ # 3 ป้อนชื่อภาพในรายการ Title ใช้ภาษาไทยได้ ป้อนคำบรรยายภาพใน รายการ Caption/Descriptions หากต้องการให้คลิกที่ภาพ เพื่อคลิกไปยังภาพขนาดต้นฉบับ ให้คลิกปุ่ม File URL แต่ถ้า ไม่ต้องการให้คลิกภาพ คลิกปุ่ม None กำหนดตำแหน่งการวางภาพ จากรายการ Alignment กำหนดขนาดภาพจาก Size คลิก Insert into Post

61 การสร้างหน้าใหม่ (New Page) การสร้างหน้าใหม่ ทำได้ 2 วิธี คลิกคำสั่ง Pages, Add New คลิกรายการ New Page

62 การสร้างหน้าใหม่ (New Page) 1) ป้อนชื่อเรื่อง 2) พิมพ์เนื้อหา 4) เลือกรูปแบบ และลำดับ การนำเสนอ 5) Publish 3) เลือกเงื่อนไข Comment

63 ปรับแต่งค่าควบคุมของ Page อนุญาต/ไม่อนุญาตการแสดงความคิดเห็น การแสดงผล Page ปรับเปลี่ยนลำดับด้วยค่า Order

64 การเผยแพร่เนื้อหาแบบ Blog การเผยแพร่เนื้อหาแบบ Blog จะมีลักษณะที่ควบคุมด้วย วันที่/เวลาที่เผยแพร่ (Published Date) โดยเรียกเนื้อหา ลักษณะนี้ว่า Post สามารถระบุหมวดหมู่ (Category) และป้ายกำกับ (Tag) ได้ การทำงานกับ Post ทำได้โดยเลือกคำสั่ง Posts 1

65 การลบ Post เลือกคำสั่ง Posts จาก Dashboard นำเมาส์ชี้ที่รายการ Post ที่ต้องการลบ คลิกคำสั่ง Trash 1 2

66 การสร้าง Post ใหม่ คลิก Posts, Add New หรือคลิกรายการ New Post

67 1) ป้อนชื่อเรื่อง 2) พิมพ์เนื้อหา 3) พิมพ์เนื้อหาสรุป 4) สร้าง/เลือกหมวดหมู่ 5) พิมพ์ป้ายกำกับ 6) ระบุ URL เพื่ออ้างอิง 7) กำหนดเงื่อนไข การเผยแพร่และ Publish

68 การแสดงผล Post Post ที่เผยแพร่แล้วจะแสดงผลผ่านหน้าแรกของเว็บ Post ที่สร้างล่าสุด จะแสดงบนสุด แต่ละ Post จะถูกจัดกลุ่มด้วย วันที่/เวลาเผยแพร่ (Archives) หมวดหมู่ (Categories) ป้ายกำกับ (Tagged)

69 เขียนอะไร/อย่างไร เรื่องราวใกล้ตัว ที่ชอบและถนัด เขียนแบบเบาๆ เล่าเรื่อง นำเสนอภาพ พร้อมเรื่องประกอบ เรียนรู้ร่วมกัน เขียนตามเป้าหมายที่วางไว้

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

71 Code ของ Slideshare 1 2

72 Slideshare ผ่าน Wordpress 1 2

73 Slideshare ผ่าน Wordpress

74 Youtube ผ่าน Slideshare

75 เพิ่มความสามารถด้วย โปรแกรมเสริม : Plug-ins

76 ค้นหา Plug-ins

77 ค้นหา/ดาวน์โหลด Plug-ins

78 ติดตั้ง Plug-ins # 1 เลือก Dashboard, Plugins, Add New, Upload Browse เลือกไฟล์ (.zip) แล้ว Install Now

79 ติดตั้ง Plug-ins # 2 การติดตั้งเสร็จสมบูรณ์ คลิกรายการ Activate Plugin เพื่อให้ Plug-in ที่ติดตั้ง ทำงาน 1

80 การยกเลิก Plug-ins เลือก Dashboard, Plugins คลิก Deactivate รายการ Plug-in ที่ไม่ต้องการ

81 การจัดการตาราง (Table) # 1 ติดตั้ง Plug-in ชื่อ WP-Table สร้างแม่แบบตารางจากคำสั่ง Dashboard, Posts, Tables

82 การจัดการตาราง (Table) # 2 เมื่อสร้างแม่แบบตารางแล้ว สามารถเข้าไปแก้ไขรูปแบบการแสดงผล โดยคลิก Edit ป้อนข้อมูล ปรับแต่งรูปแบบการแสดงผล แล้ว Updated ป้อนคำสั่ง [table=ลำดับที่ของตาราง] ใน Post เพื่อใช้งาน

83 การจัดการตาราง (Table) # 2

84 ใช้ Wordpress ให้เต็มประสิทธิภาพ ต้องเตรียมพร้อมอย่างไร Server & Security การติดตั้ง ปรับแต่งโปรแกรม เนื้อหา System Administrator การบริหารจัดการ Server ระบบรักษาความปลอดภัย การจัดการฐานข้อมูล การจัดการ Log file การจัดการสิทธิ์ของการเข้าถึงระบบ - Web Master การติดตั้งและปรับแต่ง การจัดการสมาชิก การจัดการหมวดเนื้อหา การติดตั้ง Plug-ins และเปิดใช้งาน การแก้ไขแม่แบบเว็บไซต์ด้วยเทคนิคแทนที่ - Web Master การแก้ไข CSS, HTML, PHP ระดับที่ 1 - Web Master & Web Programmer การแก้ไข CSS, HTML, PHP ระดับสูง - Web Programmer การพัฒนาต่อยอดด้วย web programming ต่างๆ ทุกคน ภายใต้ข้อกำหนดร่วมกัน ( มาตรฐานสื่อดิจิทัลต่างๆ )

85 แหล่งข้อมูล