Page 1
1
Wordpress & Server2Go
บุญเลิศ อรุณพิบูลยนักวิชาการ
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยีสํานักงานพัฒนาวิทยาศาสตรและเทคโนโลยีแหงชาติ (สวทช.)
[email protected] ://stks.or.th
http://slideshare.net/boonlerthttp://facebook.com/boonlert.aroonpiboon
Page 2
2
บุญเลิศ อรณุพิบูลย
� 2536 – 2551� NECTEC
� เจาหนาที่ระบบคอมพิวเตอร� วิทยากร ศูนยฝกอบรม
คอมพิวเตอรเนคเทค� รักษาการหัวหนางานสนับสนุน
ทางเทคนิค� รักษาการหัวหนางานวิชาการ� รักษาการหัวหนางานพัฒนาสื่อ
สาระดิจิทัล� นักวิชาการ
� 2551 – ปจจุบัน � STKS / NSTDA
� นักวิชาการ� รักษาการหัวหนางานพัฒนาและ
บริการสื่อสาระดิจิทัล
Page 3
3
Wordpress� ซอฟตแวร/ฟรีบริการในกลุมโอเพนซอรส (Open Source Software)
ที่ทําหนาที่บริการจัดการเนื้อหาสําหรับเว็บ (CMS – Content Management System)
� รูปแบบการนําเสนอเนื้อหาเว็บเปนแบบ Blog � weB + Log� การนําเสนอเนื้อหาที่เรียงตามวัน/ที่เวลาที่เผยแพรผลงาน� เนื้อหาลาสดุ แสดงเปนลําดับแรก� จัดกลุมเนื้อหาตามวันที/่เวลา, หมวดหมู (Category) และปายกํากับ
(Tag)� สามารถประยุกตใชงานไดหลากหลาย
� เว็บสวนตัว/หนวยงาน/กิจกรรม� เว็บแลกเปลี่ยนเรียนรูผานชุมชนนักปฏิบัติ (CoP) เพื่อการจัดการความรู� เว็บไซตบริการวิชาการ ความรู – Online Learning� เว็บเพื่อการคาขาย/พาณิชยอิเล็กทรอนิกส (e-Commerce)
Page 4
4
เหตุผลที่เลือกใช Wordpress
� ฟรี� ได Source Code และปรับแตงแกไขได� มีผูใชงานและนักพัฒนาจํานวนมาก
� เกิด Community ผูใชและผูพฒันา� ประยุกตใชงานไดหลากหลาย� มีโปรแกรมเสริมความสามารถหลากหลาย และฟรี� เปนมิตรที่ดีกับ Google (Search Engine Friendly
& SEO – Search Engine Optimizer)� สอดรับกับเทคโนโลยีเว็บ 2.0 (Web 2.0)
Page 5
5
http://trends.google.com
Page 6
6
Web 2.0
� ทุกคน (ตามเงื่อนไข/ขอกําหนด) มีสิทธิ์จัดการเนื้อหาในเว็บ� ไมใชผูชมเว็บแตเพียงอยางเดยีว� ควรใหความสําคัญกับ พรบ.การกระทําความผดิทางคอมพิวเตอร,
พรบ.ลิขสิทธิ์ และ พรบ. อื่นๆ ที่เกี่ยวของดวย
� เนื้อหาเปนมากกวาขอความ – รูปภาพ ภาพเคลื่อนไหว Flash Animation Online Slide i-Paper Sound/Audio Video …
� ทํางานกันเปนชุมชน (Communities) ผสานเทคโนโลยีรวมกัน (Mash-up)
� ไมถูกจํากัดดวยอุปกรณ� ติดตาม ศึกษา วิเคราะหพฤติกรรมผูชมเว็บไดมากขึ้น
Page 7
7
Mash-up
HTML
Web Programming
CMS
Blog RSSGoogle
Page 9
การมีสวนรวม (Participation)
คือ หัวใจ สําคัญ
ความสําคัญของ Web 2.0
Page 10
10
การใหบริการของ Wordpress
� http://www.wordpress.com� บริการฟรีออนไลน
� http://www.wordpress.org� บริการดาวนโหลดซอฟตแวรตนฉบับ Wordpress เพื่อ
การติดตัง้บนเครื่องแมขายเว็บของตนเอง/หนวยงาน
� http://mu.wordpress.org/� บริการดาวนโหลดซอฟตแวรตนฉบับ Wordpress Mu
เพื่อการตดิตั้งบนเครื่องแมขายเว็บของตนเอง/หนวยงาน� มีลักษณะการทํางานแบบกลุม Blog
Page 11
11
http://www.wordpress.com
Page 12
12
http://www.wordpress.org
Page 13
13
http://mu.wordpress.org/
Page 14
14
ใชจริง ทําอยางไร
องคกร� เตรียม Server
� ติดตั้ง Linux� ฐานขอมูล MySQL� โปรแกรมภาษา PHP
� สิทธิ์ในการเขาถึง Server
สวนตัว� หนวยงานเตรียมพื้นที่ให
� สิทธิ์ในการเขาถึง Server
� เชาพืน้ที่ ISP
Page 16
16
Server2Go
� ซอฟตแวรจาํลองเครื่องแมขายเว็บ (Web Server) แบบพกพา� Apache� PHP� MySQL� PHPMyAdmin� Perl
� ไมตองเสียเวลาตดิตัง้� ดาวนโหลด แลว unzip ก็ใชงานไดทันที
� คัดลอก (Copy) ระบบที่พัฒนาใส Thumb Drive & CD-ROM ไปใชงานที่ใดก็ได
Page 17
17
http://www.server2go-web.de
Page 18
18
การเรียกใชงาน Server2Go
ดับเบิลคลิกไอคอนServe2Go.exe
รอสักครู โปรแกรมจะเปด IE Web Browser
Page 19
19
สรางตารางขอมูล MySQL # 1
� พิมพ http://127.0.0.1:4001/phpmyadmin
Page 20
20
สรางตารางขอมูล MySQL # 2
� คลิกในรายการ “สรางฐานขอมูลใหม”� ปอนชื่อ เชน wordpress� เลือกตัวเลอืกถัดไปเปน utf8_unicode_ci� จากนั้นคลิกปุม “สราง”
1 2 3
4
Page 21
21
ติดตั้ง Wordpress # 1
� พิมพ URL http://127.0.0.1:4001/
Page 22
22
ติดตั้ง Wordpress # 2
� คลิกปุม Create a Configuration File
1
Page 23
23
ติดตั้ง Wordpress # 3
� เขาสูจอภาพเริ่มตนการติดตั้ง คลิกปุม Let’s go!
1
Page 24
24
ติดตั้ง Wordpress # 4
� ปอนขอมูลการติดตั้งดังนี้� Database Name : wordpress� User Name : root� Password : ไมตองระบุ� Database Host : localhost� Table Prefix : wp_� คลิกปุม submit
Page 25
25
ติดตั้ง Wordpress # 5
� หากโปรแกรมตรวจสอบแลวขอมูลตามขั้นตอนที่ 4 ถูกตอง จะปรากฎขอมูลดังภาพ ใหคลิกปุม Run the install
Page 26
26
ติดตั้ง Wordpress # 6
� ปอนขอมูลเกี่ยวกับเว็บไซต� Site Title: ชื่อเว็บไซต� User name: บัญชชีื่อผูควบคมุเว็บ
เชน admin� Password: รหัสผานของ
ผูควบคุมเว็บ� Your e-Mail: e-Mail Address
ของผูควบคุมเว็บ� จากนั้นคลิกปุม
Install WordPress
Page 27
27
ขอแนะนําการสรางรหัสผาน
� กําหนดเกณฑการสรางรหัสผานใหตนเอง� ใหความสําคญักับการสรางรหัสผาน� หมั่นเปลี่ยนรหัสผาน
� เชน กําหนดอักขระพิเศษใหสระ หรือปดทายดวย #� A $� E +� I ^� O @� U !
kampaengsaen
k$mp$+ngs$+nKamPaengSaen#
Page 28
28
ติดตั้ง Wordpress # 7
� การติดตั้งสมบูรณ
Page 29
29
การเรียกชมเว็บไซต
� เปดใชงาน Server2Go
Page 30
30
ชื่อเว็บไซต สโลแกนเว็บ
เมนูจาก Pages
เนื้อเรื่อง (Post)
กลุมวิตเจ็ต
Page 31
31
การเขาสูระบบเว็บไซต – Log in
� เขาสูเว็บไซต เลื่อนหาคําสั่ง Log in จากกลุมรายการ Meta
� ปอนบัญชี Admin เพื่อเขาสูระบบ
Page 32
32
จอภาพในสวนควบคุมระบบ
Page 33
33
ปรับแตงระบบเว็บไซต - Config
� คลิกคําสั่ง Settings จากรายการเมนูดานซาย
1
Page 34
34
ปรับแตงระบบเว็บไซต - Config
� Site Title� ชื่อเว็บไซตควรเปนภาษาอังกฤษ ตามดวยภาษาไทยได มีความหมาย
ชดัเจน ผูใชนึกถึงไดงาย (คําคน) มีความยาวรวมไมเกิน 64 ตัวอักษร
� Tagline� สโลแกนของเว็บ
� Membership� อนุญาตใหผูชมเว็บสมัครสมาชกิไดหรือไม
� Time Zone� ใหเลือกเปน UTC+7
� คลิกปุม Save Change
Page 35
35
หนาควบคุมหลัก – Dashboard
� เมื่อปรับแตง/ทํางานใด สามารถกลบัสูหนาควบคุมหลักไดโดยคลิกคําสั่ง Dashboard
1
Page 36
36
ปรับแกไขขอมูลสมาชิก
� คลิกที่ชื่อสมาชิก (user name) ที่มุมบนขวาของจอภาพ1
Page 37
37
ปรับแกไขขอมูลสมาชิก
Page 38
38
ชมเว็บไซตที่ปรับแตง
� เมื่อปรับแตง/ทํางานใด สามารถชมหนาเว็บไดโดยคลิกที่ชื่อเว็บไซต
1
Page 39
39
จากหนาเว็บสูหนาควบคุม
� จากหนาเว็บกลับสูหนาควบคุมไดโดย� Log in ใหม หรือคลิกคาํสั่ง Site Admin
Page 40
40
เปลี่ยนกราฟกหัวเรื่องเว็บ # 1
Page 41
41
เปลี่ยนกราฟกหัวเรื่องเว็บ # 2
� เขาสูสวนทํางาน Dashboard� คลิกคําสั่ง Appearance, Header
Page 42
42
เปลี่ยนกราฟกหัวเรื่องเว็บ # 3
� เลือกรูปแบบกราฟกที่ตองการ แลว Save Change
Page 43
43
เปลี่ยนกราฟกหัวเรื่องเว็บ # 4
� สามารถนําภาพที่สราง/จัดเตรียมเปนภาพหัวเรื่องเว็บไดโดยคลิกปุม Browse แลวเลือกภาพ จากนั้นคลิกปุม Upload
� โปรแกรมจะใหตัดสวนของภาพตามขนาดที่โปรแกรมกําหนด แลวคลิกปุม Crop and Publish
Page 44
44
ใสรายละเอียดเว็บ – About # 1
� Wordpress เตรียมเมนูควบคุมหลักให 2 เมนู ไดแก� Home สําหรับการกลับสูหนาหลัก� About สําหรับนําเสนอรายละเอียดของเว็บ
� ในแตละเว็บควรมีการแสดงรายละเอียดตางๆ ของเว็บ ที่เหมาะสมโดยปรับแกไขไดดังนี้� ทํางานในโหมด Dashboard� เลือกเมนู Pages
Page เปนเนื้อหาประเภทหนึ่ง
ของ Wordpressมักจะเรียกวา
Static Content
Page 45
45
ใสรายละเอียดเว็บ – About # 2
� คลิกที่ชื่อหนา About เพื่อเขาสูการแกไข� เมื่อแกไขแลวใหคลิกปุม Update เพื่อปรับปรุงขอมูล
Page 46
46
เครื่องมือแกไขเนื้อหา
Page 47
47
คัดลอกเนื้อหาจากแหลงอื่นๆ
� ไมควรคัดลอก (Copy) เนื้อหาจาก Word หรือแหลงอื่นๆ มาวางใน Editor ของ Wordpress เพราะจะสงผลใหเกิดปญหาการแสดงผลที่ผิดพลาด ปรับแกไขยาก� เพราะมี special code จากโปรแกรมตนทางสงมายัง Editor ของ
Wordpress
� หากจําเปนตองคดัลอกขอมูล ใหนําขอมูลดงักลาวไปวาง (Paste) บน NotePad กอนแลวจงึคัดลอกจาก NotePad มาวางใน Editor ของ Wordpress
Page 48
48
นําเขารูปภาพ # 1
� รูปภาพที่นํามาประกอบเนื้อหาของ Wordpress จะตองเตรียมดังนี้� กําหนดชื่อแฟมภาพ (File name) ใหเปนภาษาอังกฤษ และ/หรือผสม
ตัวเลข หามใชภาษาไทย� ฟอรแมตภาพ
� .gif สําหรับภาพวาด ภาพลายเสน ภาพที่มีสีไมมาก� .jpg/.png สําหรับภาพสีมาก� .png สําหรับภาพสีมากที่ตองการพื้นโปรงใส (Transparent)
� ควรยอภาพใหมีขนาดที่เหมาะสม และ/หรือลดความละเอียดของภาพ (Resolution) ระหวาง 72 – 96 dpi
� รูปภาพ/แบบอักษร/ขอความไมควรละเมิดลิขสิทธิ์� http://openclipart.org� คนหาภาพจาก Google, Flickr ดวยเงื่อนไข CreativeCommons
� ระบุ Metadata ของภาพใหเหมาะสมในระดับดิจิทัล
Page 50
50
Progressive & InterlacedProgressive & Interlaced
���������� �������ก��
ก���� ������� Interlacedก���� ������� Progressive
Page 51
51
PNG & GIF Transparent
Page 52
52
ปญหาลิขสิทธิ์ของเมืองไทยปญหาลิขสิทธิ์ของเมืองไทย
Page 55
55
การสืบคนภาพที่เปน (cc)
(cc)
Page 56
56
วัน/เวลากลองถายภาพดิจิทัล/อุปกรณดิจิทัล
� พรบ.การกระทําความผิดทางคอมพิวเตอร
Page 58
58
Image Metadata: EXIF: IPTC
Page 60
60
นําเขารูปภาพ # 2
� จากหนาจอสราง/แกไขเนื้อหา คลกิเมาส ณ ตาํแหนงที่ตองการวางภาพ คลิกปุม ใสรูปภาพ
� คลิกเลือกภาพจากปุม Select Files
Page 61
61
นําเขารูปภาพ # 3
� ปอนชื่อภาพในรายการ Title ใชภาษาไทยได
� ปอนคําบรรยายภาพในรายการ Caption/Descriptions
� หากตองการใหคลิกทีภ่าพเพื่อคลิกไปยังภาพขนาดตนฉบับ ใหคลิกปุม File URL แตถาไมตองการใหคลิกภาพ คลิกปุมNone
� กําหนดตําแหนงการวางภาพจากรายการ Alignment
� กําหนดขนาดภาพจาก Size� คลิก Insert into Post
Page 62
62
การสรางหนาใหม (New Page)
� การสรางหนาใหม ทําได 2 วิธี � คลิกคําสั่ง Pages, Add New� คลิกรายการ New Page
Page 63
63
การสรางหนาใหม (New Page)
1) ปอนชื่อเรื่อง
2) พิมพเนื้อหา
4) เลือกรูปแบบและลําดับการนําเสนอ
5) Publish
3) เลือกเงื่อนไข Comment
Page 64
64
ปรับแตงคาควบคุมของ Page
� อนุญาต/ไมอนุญาตการแสดงความคิดเห็น
� การแสดงผล Page
ปรับเปลี่ยนลําดับดวยคา Order
Page 65
65
การเผยแพรเนื้อหาแบบ Blog
� การเผยแพรเนื้อหาแบบ Blog จะมีลักษณะที่ควบคุมดวยวันที่/เวลาที่เผยแพร (Published Date) โดยเรียกเนื้อหาลักษณะนี้วา Post� สามารถระบุหมวดหมู (Category) และปายกํากับ (Tag) ได
� การทํางานกับ Post ทําไดโดยเลอืกคําสั่ง Posts
1
Page 66
66
การลบ Post
� เลือกคําสั่ง Posts จาก Dashboard� นําเมาสชีท้ี่รายการ Post ที่ตองการลบ คลิกคําสั่ง
Trash
1
2
Page 67
67
การสราง Post ใหม
� คลิก Posts, Add New
� หรือคลิกรายการ New Post
Page 68
68
1) ปอนชื่อเรื่อง
2) พิมพเนื้อหา
3) พิมพเนื้อหาสรุป4) สราง/เลือกหมวดหมู
5) พิมพปายกํากับ
6) ระบุ URL เพื่ออางอิง
7) กําหนดเงื่อนไขการเผยแพรและ Publish
Page 69
69
การแสดงผล Post
� Post ที่เผยแพรแลวจะแสดงผลผานหนาแรกของเว็บ� Post ที่สรางลาสุด จะแสดงบนสุด� แตละ Post จะถูกจัดกลุมดวย
� วันที่/เวลาเผยแพร (Archives)� หมวดหมู (Categories)� ปายกํากับ (Tagged)
Page 70
70
เขียนอะไร/อยางไร
� เรื่องราวใกลตัว ที่ชอบและถนัด� เขียนแบบเบาๆ� เลาเรื่อง� นําเสนอภาพ พรอมเรื่องประกอบ� เรียนรูรวมกัน� เขียนตามเปาหมายที่วางไว
Page 71
71
Slideshare ผาน Wordpress
� Slideshare.net เปนแหลงรวมสไลด/เอกสารแหลงใหญบนโลกอินเทอรเน็ต� นํา PPT, PDF, DOC ไปจัดเก็บและแปลงเปน Online Slide,
i-Paper อัตโนมัติในรูปแบบ Flash-based
� คนสื่อจาก slideshare.net แลวคลิกเลือกสื่อที่ตองการ� คลิกรายการ Embed� คัดลอกคําสั่งจากรายการ Embed this presentation มาวางใน Post
ผานโหมดการทํางาน HTML
Page 72
72
Code ของ Slideshare
1
2
Page 73
73
Slideshare ผาน Wordpress
1
2
Page 74
74
Slideshare ผาน Wordpress
Page 75
75
Youtube ผาน Slideshare
1
2
3
4
Page 76
76
เพิ่มความสามารถดวยโปรแกรมเสริม : Plug-ins
� http://wordpress.org/extend/
Page 78
78
คนหา/ดาวนโหลด Plug-ins
Page 79
79
ติดตั้ง Plug-ins # 1
� เลือก Dashboard, Plugins, Add New, Upload� Browse เลือกไฟล (.zip) แลว Install Now
1
2
3
4
5 6
Page 80
80
ติดตั้ง Plug-ins # 2
� การติดตัง้เสร็จสมบรูณ� คลิกรายการ Activate Plugin เพื่อให Plug-in ที่ติดตัง้
ทํางาน
1
Page 81
81
การยกเลิก Plug-ins
� เลือก Dashboard, Plugins� คลิก Deactivate รายการ Plug-in ที่ไมตองการ
Page 82
82
การจัดการตาราง (Table) # 1
� ติดตัง้ Plug-in ชื่อ WP-Table� สรางแมแบบตารางจากคําสั่ง Dashboard, Posts, Tables
Page 83
83
การจัดการตาราง (Table) # 2
� เมื่อสรางแมแบบตารางแลว สามารถเขาไปแกไขรูปแบบการแสดงผลโดยคลิก Edit
� ปอนขอมูล ปรับแตงรูปแบบการแสดงผล แลว Updated� ปอนคําสั่ง [table=ลําดับที่ของตาราง] ใน Post เพื่อใชงาน
Page 84
84
การจัดการตาราง (Table) # 2
Page 85
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 ตางๆ
ทุกคน ภายใตขอกําหนดรวมกัน(มาตรฐานสื่อดิจิทัลตางๆ)
Page 86
86
แหลงขอมูล
� http://stks.or.th/wiki� http://slideshare.net/boonlert