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
ติดตั้ง Wordpress # 2
� คลิกปุม Create a Configuration File
1
23
ติดตั้ง Wordpress # 3
� เขาสูจอภาพเริ่มตนการติดตั้ง คลิกปุม Let’s go!
1
24
ติดตั้ง Wordpress # 4
� ปอนขอมูลการติดตั้งดังนี้� Database Name : wordpress� User Name : root� Password : ไมตองระบุ� Database Host : localhost� Table Prefix : wp_� คลิกปุม submit
25
ติดตั้ง Wordpress # 5
� หากโปรแกรมตรวจสอบแลวขอมูลตามขั้นตอนที่ 4 ถูกตอง จะปรากฎขอมูลดังภาพ ใหคลิกปุม Run the install
26
ติดตั้ง Wordpress # 6
� ปอนขอมูลเกี่ยวกับเว็บไซต� 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
ติดตั้ง Wordpress # 7
� การติดตั้งสมบูรณ
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
เปลี่ยนกราฟกหัวเรื่องเว็บ # 2
� เขาสูสวนทํางาน Dashboard� คลิกคําสั่ง Appearance, Header
42
เปลี่ยนกราฟกหัวเรื่องเว็บ # 3
� เลือกรูปแบบกราฟกที่ตองการ แลว Save Change
43
เปลี่ยนกราฟกหัวเรื่องเว็บ # 4
� สามารถนําภาพที่สราง/จัดเตรียมเปนภาพหัวเรื่องเว็บไดโดยคลิกปุม 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
นําเขารูปภาพ # 2
� จากหนาจอสราง/แกไขเนื้อหา คลกิเมาส ณ ตาํแหนงที่ตองการวางภาพ คลิกปุม ใสรูปภาพ
� คลิกเลือกภาพจากปุม Select Files
61
นําเขารูปภาพ # 3
� ปอนชื่อภาพในรายการ 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
Slideshare ผาน Wordpress
1
2
74
Slideshare ผาน Wordpress
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
การจัดการตาราง (Table) # 2
� เมื่อสรางแมแบบตารางแลว สามารถเขาไปแกไขรูปแบบการแสดงผลโดยคลิก Edit
� ปอนขอมูล ปรับแตงรูปแบบการแสดงผล แลว Updated� ปอนคําสั่ง [table=ลําดับที่ของตาราง] ใน Post เพื่อใชงาน
84
การจัดการตาราง (Table) # 2
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
Recommended