Wordpress2Go

1

Wordpress & Server2Go

บุญเลิศ อรุณพิบูลยนักวิชาการ

ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยีสํานักงานพัฒนาวิทยาศาสตรและเทคโนโลยีแหงชาติ (สวทช.)

[email protected]://stks.or.th

http://slideshare.net/boonlerthttp://facebook.com/boonlert.aroonpiboon

2

บุญเลิศ อรณุพิบูลย

� 2536 – 2551� NECTEC

� เจาหนาที่ระบบคอมพิวเตอร� วิทยากร ศูนยฝกอบรม

คอมพิวเตอรเนคเทค� รักษาการหัวหนางานสนับสนุน

ทางเทคนิค� รักษาการหัวหนางานวิชาการ� รักษาการหัวหนางานพัฒนาสื่อ

สาระดิจิทัล� นักวิชาการ

� 2551 – ปจจุบัน � STKS / NSTDA

� นักวิชาการ� รักษาการหัวหนางานพัฒนาและ

บริการสื่อสาระดิจิทัล

3

Wordpress� ซอฟตแวร/ฟรีบริการในกลุมโอเพนซอรส (Open Source Software)

ที่ทําหนาที่บริการจัดการเนื้อหาสําหรับเว็บ (CMS – Content Management System)

� รูปแบบการนําเสนอเนื้อหาเว็บเปนแบบ Blog � weB + Log� การนําเสนอเนื้อหาที่เรียงตามวัน/ที่เวลาที่เผยแพรผลงาน� เนื้อหาลาสดุ แสดงเปนลําดับแรก� จัดกลุมเนื้อหาตามวันที/่เวลา, หมวดหมู (Category) และปายกํากับ

(Tag)� สามารถประยุกตใชงานไดหลากหลาย

� เว็บสวนตัว/หนวยงาน/กิจกรรม� เว็บแลกเปลี่ยนเรียนรูผานชุมชนนักปฏิบัติ (CoP) เพื่อการจัดการความรู� เว็บไซตบริการวิชาการ ความรู – Online Learning� เว็บเพื่อการคาขาย/พาณิชยอิเล็กทรอนิกส (e-Commerce)

4

เหตุผลที่เลือกใช Wordpress

� ฟรี� ได Source Code และปรับแตงแกไขได� มีผูใชงานและนักพัฒนาจํานวนมาก

� เกิด Community ผูใชและผูพฒันา� ประยุกตใชงานไดหลากหลาย� มีโปรแกรมเสริมความสามารถหลากหลาย และฟรี� เปนมิตรที่ดีกับ Google (Search Engine Friendly

& SEO – Search Engine Optimizer)� สอดรับกับเทคโนโลยีเว็บ 2.0 (Web 2.0)

5

http://trends.google.com

6

Web 2.0

� ทุกคน (ตามเงื่อนไข/ขอกําหนด) มีสิทธิ์จัดการเนื้อหาในเว็บ� ไมใชผูชมเว็บแตเพียงอยางเดยีว� ควรใหความสําคัญกับ พรบ.การกระทําความผดิทางคอมพิวเตอร,

พรบ.ลิขสิทธิ์ และ พรบ. อื่นๆ ที่เกี่ยวของดวย

� เนื้อหาเปนมากกวาขอความ – รูปภาพ ภาพเคลื่อนไหว Flash Animation Online Slide i-Paper Sound/Audio Video …

� ทํางานกันเปนชุมชน (Communities) ผสานเทคโนโลยีรวมกัน (Mash-up)

� ไมถูกจํากัดดวยอุปกรณ� ติดตาม ศึกษา วิเคราะหพฤติกรรมผูชมเว็บไดมากขึ้น

7

Mash-up

HTML

Web Programming

CMS

Blog RSSGoogle

8

การมีสวนรวม (Participation)

คือ หัวใจ สําคัญ

ความสําคัญของ Web 2.0

10

การใหบริการของ Wordpress

� http://www.wordpress.com� บริการฟรีออนไลน

� http://www.wordpress.org� บริการดาวนโหลดซอฟตแวรตนฉบับ Wordpress เพื่อ

การติดตัง้บนเครื่องแมขายเว็บของตนเอง/หนวยงาน

� http://mu.wordpress.org/� บริการดาวนโหลดซอฟตแวรตนฉบับ Wordpress Mu

เพื่อการตดิตั้งบนเครื่องแมขายเว็บของตนเอง/หนวยงาน� มีลักษณะการทํางานแบบกลุม Blog

11

http://www.wordpress.com

12

http://www.wordpress.org

13

http://mu.wordpress.org/

14

ใชจริง ทําอยางไร

องคกร� เตรียม Server

� ติดตั้ง Linux� ฐานขอมูล MySQL� โปรแกรมภาษา PHP

� สิทธิ์ในการเขาถึง Server

สวนตัว� หนวยงานเตรียมพื้นที่ให

� สิทธิ์ในการเขาถึง Server

� เชาพืน้ที่ ISP

15

16

Server2Go

� ซอฟตแวรจาํลองเครื่องแมขายเว็บ (Web Server) แบบพกพา� Apache� PHP� MySQL� PHPMyAdmin� Perl

� ไมตองเสียเวลาตดิตัง้� ดาวนโหลด แลว unzip ก็ใชงานไดทันที

� คัดลอก (Copy) ระบบที่พัฒนาใส Thumb Drive & CD-ROM ไปใชงานที่ใดก็ได

17

http://www.server2go-web.de

18

การเรียกใชงาน Server2Go

ดับเบิลคลิกไอคอนServe2Go.exe

รอสักครู โปรแกรมจะเปด IE Web Browser

19

สรางตารางขอมูล MySQL # 1

� พิมพ http://127.0.0.1:4001/phpmyadmin

20

สรางตารางขอมูล MySQL # 2

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

1 2 3

4

21

ติดตั้ง Wordpress # 1

� พิมพ URL http://127.0.0.1:4001/

22


� คลิกปุม Create a Configuration File

1

23


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

1

24


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

25


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

26


� ปอนขอมูลเกี่ยวกับเว็บไซต� Site Title: ชื่อเว็บไซต� User name: บัญชชีื่อผูควบคมุเว็บ

เชน admin� Password: รหัสผานของ

ผูควบคุมเว็บ� Your e-Mail: e-Mail Address

ของผูควบคุมเว็บ� จากนั้นคลิกปุม

Install WordPress

27

ขอแนะนําการสรางรหัสผาน

� กําหนดเกณฑการสรางรหัสผานใหตนเอง� ใหความสําคญักับการสรางรหัสผาน� หมั่นเปลี่ยนรหัสผาน

� เชน กําหนดอักขระพิเศษใหสระ หรือปดทายดวย #� A $� E +� I ^� O @� U !

kampaengsaen

k$mp$+ngs$+nKamPaengSaen#

28


� การติดตั้งสมบูรณ

29

การเรียกชมเว็บไซต

� เปดใชงาน Server2Go

30

ชื่อเว็บไซต สโลแกนเว็บ

เมนูจาก Pages

เนื้อเรื่อง (Post)

กลุมวิตเจ็ต

31

การเขาสูระบบเว็บไซต – Log in

� เขาสูเว็บไซต เลื่อนหาคําสั่ง Log in จากกลุมรายการ Meta

� ปอนบัญชี Admin เพื่อเขาสูระบบ

32

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

33

ปรับแตงระบบเว็บไซต - Config

� คลิกคําสั่ง Settings จากรายการเมนูดานซาย

1

34

ปรับแตงระบบเว็บไซต - Config

� Site Title� ชื่อเว็บไซตควรเปนภาษาอังกฤษ ตามดวยภาษาไทยได มีความหมาย

ชดัเจน ผูใชนึกถึงไดงาย (คําคน) มีความยาวรวมไมเกิน 64 ตัวอักษร

� Tagline� สโลแกนของเว็บ

� Membership� อนุญาตใหผูชมเว็บสมัครสมาชกิไดหรือไม

� Time Zone� ใหเลือกเปน UTC+7

� คลิกปุม Save Change

35

หนาควบคุมหลัก – Dashboard

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

1

36

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

� คลิกที่ชื่อสมาชิก (user name) ที่มุมบนขวาของจอภาพ1

37

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

38

ชมเว็บไซตที่ปรับแตง

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

1

39

จากหนาเว็บสูหนาควบคุม

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

40

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

41


� เขาสูสวนทํางาน Dashboard� คลิกคําสั่ง Appearance, Header

42


� เลือกรูปแบบกราฟกที่ตองการ แลว Save Change

43


� สามารถนําภาพที่สราง/จัดเตรียมเปนภาพหัวเรื่องเว็บไดโดยคลิกปุม Browse แลวเลือกภาพ จากนั้นคลิกปุม Upload

� โปรแกรมจะใหตัดสวนของภาพตามขนาดที่โปรแกรมกําหนด แลวคลิกปุม Crop and Publish

44

ใสรายละเอียดเว็บ – About # 1

� Wordpress เตรียมเมนูควบคุมหลักให 2 เมนู ไดแก� Home สําหรับการกลับสูหนาหลัก� About สําหรับนําเสนอรายละเอียดของเว็บ

� ในแตละเว็บควรมีการแสดงรายละเอียดตางๆ ของเว็บ ที่เหมาะสมโดยปรับแกไขไดดังนี้� ทํางานในโหมด Dashboard� เลือกเมนู Pages

Page เปนเนื้อหาประเภทหนึ่ง

ของ Wordpressมักจะเรียกวา

Static Content

45

ใสรายละเอียดเว็บ – About # 2

� คลิกที่ชื่อหนา About เพื่อเขาสูการแกไข� เมื่อแกไขแลวใหคลิกปุม Update เพื่อปรับปรุงขอมูล

46

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

47

คัดลอกเนื้อหาจากแหลงอื่นๆ

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

Wordpress

� หากจําเปนตองคดัลอกขอมูล ใหนําขอมูลดงักลาวไปวาง (Paste) บน NotePad กอนแลวจงึคัดลอกจาก NotePad มาวางใน Editor ของ Wordpress

48

นําเขารูปภาพ # 1

� รูปภาพที่นํามาประกอบเนื้อหาของ Wordpress จะตองเตรียมดังนี้� กําหนดชื่อแฟมภาพ (File name) ใหเปนภาษาอังกฤษ และ/หรือผสม

ตัวเลข หามใชภาษาไทย� ฟอรแมตภาพ

� .gif สําหรับภาพวาด ภาพลายเสน ภาพที่มีสีไมมาก� .jpg/.png สําหรับภาพสีมาก� .png สําหรับภาพสีมากที่ตองการพื้นโปรงใส (Transparent)

� ควรยอภาพใหมีขนาดที่เหมาะสม และ/หรือลดความละเอียดของภาพ (Resolution) ระหวาง 72 – 96 dpi

� รูปภาพ/แบบอักษร/ขอความไมควรละเมิดลิขสิทธิ์� http://openclipart.org� คนหาภาพจาก Google, Flickr ดวยเงื่อนไข CreativeCommons

� ระบุ Metadata ของภาพใหเหมาะสมในระดับดิจิทัล

49

50

Progressive & InterlacedProgressive & Interlaced

�� ก��

ก�� Interlacedก�� Progressive

51

PNG & GIF Transparent

52

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

53

54

(cc)(cc)

55

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

(cc)

56

วัน/เวลากลองถายภาพดิจิทัล/อุปกรณดิจิทัล

� พรบ.การกระทําความผิดทางคอมพิวเตอร

57

58

Image Metadata: EXIF: IPTC

59

60


� จากหนาจอสราง/แกไขเนื้อหา คลกิเมาส ณ ตาํแหนงที่ตองการวางภาพ คลิกปุม ใสรูปภาพ

� คลิกเลือกภาพจากปุม Select Files

61


� ปอนชื่อภาพในรายการ Title ใชภาษาไทยได

� ปอนคําบรรยายภาพในรายการ Caption/Descriptions

� หากตองการใหคลิกทีภ่าพเพื่อคลิกไปยังภาพขนาดตนฉบับ ใหคลิกปุม File URL แตถาไมตองการใหคลิกภาพ คลิกปุมNone

� กําหนดตําแหนงการวางภาพจากรายการ Alignment

� กําหนดขนาดภาพจาก Size� คลิก Insert into Post

62

การสรางหนาใหม (New Page)

� การสรางหนาใหม ทําได 2 วิธี � คลิกคําสั่ง Pages, Add New� คลิกรายการ New Page

63

การสรางหนาใหม (New Page)

1) ปอนชื่อเรื่อง

2) พิมพเนื้อหา

4) เลือกรูปแบบและลําดับการนําเสนอ

5) Publish

3) เลือกเงื่อนไข Comment

64

ปรับแตงคาควบคุมของ Page

� อนุญาต/ไมอนุญาตการแสดงความคิดเห็น

� การแสดงผล Page

ปรับเปลี่ยนลําดับดวยคา Order

65

การเผยแพรเนื้อหาแบบ Blog

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

� การทํางานกับ Post ทําไดโดยเลอืกคําสั่ง Posts

1

66

การลบ Post

� เลือกคําสั่ง Posts จาก Dashboard� นําเมาสชีท้ี่รายการ Post ที่ตองการลบ คลิกคําสั่ง

Trash

1

2

67

การสราง Post ใหม

� คลิก Posts, Add New

� หรือคลิกรายการ New Post

68

1) ปอนชื่อเรื่อง

2) พิมพเนื้อหา

3) พิมพเนื้อหาสรุป4) สราง/เลือกหมวดหมู

5) พิมพปายกํากับ

6) ระบุ URL เพื่ออางอิง

7) กําหนดเงื่อนไขการเผยแพรและ Publish

69

การแสดงผล Post

� Post ที่เผยแพรแลวจะแสดงผลผานหนาแรกของเว็บ� Post ที่สรางลาสุด จะแสดงบนสุด� แตละ Post จะถูกจัดกลุมดวย

� วันที่/เวลาเผยแพร (Archives)� หมวดหมู (Categories)� ปายกํากับ (Tagged)

70

เขียนอะไร/อยางไร

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

71

Slideshare ผาน Wordpress

� Slideshare.net เปนแหลงรวมสไลด/เอกสารแหลงใหญบนโลกอินเทอรเน็ต� นํา PPT, PDF, DOC ไปจัดเก็บและแปลงเปน Online Slide,

i-Paper อัตโนมัติในรูปแบบ Flash-based

� คนสื่อจาก slideshare.net แลวคลิกเลือกสื่อที่ตองการ� คลิกรายการ Embed� คัดลอกคําสั่งจากรายการ Embed this presentation มาวางใน Post

ผานโหมดการทํางาน HTML

72

Code ของ Slideshare

1

2

73


1

2

74


75

Youtube ผาน Slideshare

1

2

3

4

76

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

� http://wordpress.org/extend/

77

คนหา Plug-ins

78

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

79

ติดตั้ง Plug-ins # 1

� เลือก Dashboard, Plugins, Add New, Upload� Browse เลือกไฟล (.zip) แลว Install Now

1

2

3

4

5 6

80

ติดตั้ง Plug-ins # 2

� การติดตัง้เสร็จสมบรูณ� คลิกรายการ Activate Plugin เพื่อให Plug-in ที่ติดตัง้

ทํางาน

1

81

การยกเลิก Plug-ins

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

82

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

� ติดตัง้ Plug-in ชื่อ WP-Table� สรางแมแบบตารางจากคําสั่ง Dashboard, Posts, Tables

83


� เมื่อสรางแมแบบตารางแลว สามารถเขาไปแกไขรูปแบบการแสดงผลโดยคลิก Edit

� ปอนขอมูล ปรับแตงรูปแบบการแสดงผล แลว Updated� ปอนคําสั่ง [table=ลําดับที่ของตาราง] ใน Post เพื่อใชงาน

84


85

ใช 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 ตางๆ

ทุกคน ภายใตขอกําหนดรวมกัน(มาตรฐานสื่อดิจิทัลตางๆ)

86

แหลงขอมูล

� http://stks.or.th/wiki� http://slideshare.net/boonlert

Technology

Wordpress2Go