Transcript สไลด์แนะนำ word press

Wordpress & Server2Go
บุญเลิศ อรุณพิบล
ู ย์
นั กวิชาการ
ศูนย์บริการความรู ้ทางวิทยาศาสตร์และเทคโนโลยี
สานั กงานพัฒนาวิทยาศาสตร์และเทคโนโลยีแห่งชาติ (สวทช.)
[email protected]
http://stks.or.th
http://slideshare.net/boonlert
http://facebook.com/boonlert.aroonpiboon
1
บุญเลิศ อรุณพิบล
ู ย์

2536 – 2551

NECTEC






เจ ้าหน ้าทีร่ ะบบคอมพิวเตอร์
วิทยากร ศูนย์ฝึกอบรม
คอมพิวเตอร์เนคเทค
รักษาการหัวหน ้างานสนั บสนุน
ทางเทคนิค
รักษาการหัวหน ้างานวิชาการ
ื่
รักษาการหัวหน ้างานพัฒนาสอ
สาระดิจท
ิ ัล
นั กวิชาการ

2551 – ปั จจุบน
ั

STKS / NSTDA


นั กวิชาการ
รักษาการหัวหน ้างานพัฒนาและ
ื่ สาระดิจท
บริการสอ
ิ ัล
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
http://trends.google.com
5
http://cmsmatrix.org
6
Web 2.0

ิ ธิจ
ทุกคน (ตามเงือ
่ นไข/ข ้อกาหนด) มีสท
์ ัดการเนือ
้ หาในเว็บ






่ ู ้ชมเว็บแต่เพียงอย่างเดียว
ไม่ใชผ
ควรให ้ความสาคัญกับ พรบ.การกระทาความผิดทางคอมพิวเตอร์,
ิ ธิ์ และ พรบ. อืน
พรบ.ลิขสท
่ ๆ ทีเ่ กีย
่ วข ้องด ้วย
เนือ
้ หาเป็ นมากกว่าข ้อความ – รูปภาพ ภาพเคลือ
่ นไหว Flash
Animation Online Slide i-Paper Sound/Audio Video …
ทางานกันเป็ นชุมชน (Communities) ผสานเทคโนโลยีรว่ มกัน
(Mash-up)
ไม่ถก
ู จากัดด ้วยอุปกรณ์
ึ ษา วิเคราะห์พฤติกรรมผู ้ชมเว็บได ้มากขึน
ติดตาม ศก
้
7
Mash-up
B lo g
R SS
G o o g le
HTM L
CM S
W e b P ro g ra m m in g
8
9
ความสาค ัญของ Web 2.0
การมีสว่ นร่วม (Participation)
คือ
ห ัวใจ
สาค ัญ
การให้บริการของ 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
สท
เชา่ พืน
้ ที่ ISP
ิ ธิใ์ นการเข ้าถึง Server
สท
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
จากนัน
้ คลิกปุ่ ม “สร ้าง”
4
1
2
3
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$+n
KamPaengSaen#
28
ติดตงั้ Wordpress # 7

การติดตัง้ สมบูรณ์
29
การเรียกชมเว็บไซต์

้
เปิ ดใชงาน
Server2Go
30
ื่ เว็บไซต์
ชอ
สโลแกนเว็บ
เมนูจาก Pages
เนือ
้ เรือ
่ ง (Post)
กลุม
่ วิตเจ็ต
31
การเข้าสูร่ ะบบเว็บไซต์ – Log in

เข ้าสูเ่ ว็บไซต์ เลือ
่ นหาคาสงั่ Log in จากกลุม
่ รายการ Meta

ป้ อนบัญช ี Admin เพือ
่ เข ้าสูร่ ะบบ
32
จอภาพ
่ น
ในสว
ควบคุม
ระบบ
33
ปร ับแต่งระบบเว็บไซต์ - Config

้
คลิกคาสงั่ Settings จากรายการเมนูด ้านซาย
1
34
ปร ับแต่งระบบเว็บไซต์ - Config

Site Title


Tagline


ิ ได ้หรือไม่
อนุญาตให ้ผู ้ชมเว็บสมัครสมาชก
Time Zone


สโลแกนของเว็บ
Membership


ื่ เว็บไซต์ควรเป็ นภาษาอังกฤษ ตามด ้วยภาษาไทยได ้ มีความหมาย
ชอ
ั เจน ผู ้ใชนึ้ กถึงได ้ง่าย (คาค ้น) มีความยาวรวมไม่เกิน 64 ตัวอักษร
ชด
ให ้เลือกเป็ น 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) ให ้เป็ นภาษาอังกฤษ และ/หรือผสม
กาหนดชอ
้
ตัวเลข ห ้ามใชภาษาไทย
ฟอร์แมตภาพ





สาหรับภาพวาด ภาพลายเสน้ ภาพทีม
่ ส
ี ไี ม่มาก
ี าก
สาหรับภาพสม
ี ากทีต
สาหรับภาพสม
่ ้องการพืน
้ โปร่งใส (Transparent)
ควรย่อภาพให ้มีขนาดทีเ่ หมาะสม และ/หรือลดความละเอียดของภาพ
(Resolution) ระหว่าง 72 – 96 dpi
ิ ธิ์
รูปภาพ/แบบอักษร/ข ้อความไม่ควรละเมิดลิขสท



.gif
.jpg/.png
.png
http://openclipart.org
ค ้นหาภาพจาก Google, Flickr ด ้วยเงือ
่ นไข CreativeCommons
ระบุ Metadata ของภาพให ้เหมาะสมในระดับดิจท
ิ ล
ั
49
50
Progressive & Interlaced
รูปภาพทีแ่ สดงในโหมดปกติ
การแสดงผลภาพ
แบบ Progressive
การแสดงผลภาพแบบ Interlaced
51
PNG & GIF Transparent
52
ิ ธิข
ปัญหาลิขสท
์ องเมืองไทย
53
54
(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) ป้ อนชอ
่ ง
5) Publish
2) พิมพ์เนือ
้ หา
4) เลือกรูปแบบ
และลาดับ
การนาเสนอ
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) ป้ อนชอ
่ ง
7) กาหนดเงือ
่ นไข
การเผยแพร่และ Publish
2) พิมพ์เนือ
้ หา
3) พิมพ์เนือ
้ หาสรุป
4) สร ้าง/เลือกหมวดหมู่
6) ระบุ URL เพือ
่ อ ้างอิง
5) พิมพ์ป้ายกากับ
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
4
1
5
6
2
3
80
ติดตงั้ Plug-ins # 2


การติดตัง้ เสร็จสมบูรณ์
คลิกรายการ Activate Plugin เพือ
่ ให ้ Plug-in ทีต
่ ด
ิ ตัง้
ทางาน
1
81
การยกเลิก Plug-ins


เลือก Dashboard, Plugins
คลิก Deactivate รายการ Plug-in ทีไ่ ม่ต ้องการ
82
การจ ัดการตาราง (Table) # 1


ื่ WP-Table
ติดตัง้ Plug-in ชอ
สร ้างแม่แบบตารางจากคาสงั่ Dashboard, Posts, Tables
83
การจ ัดการตาราง (Table) # 2



เมือ
่ สร ้างแม่แบบตารางแล ้ว สามารถเข ้าไปแก ้ไขรูปแบบการแสดงผล
โดยคลิก Edit
ป้ อนข ้อมูล ปรับแต่งรูปแบบการแสดงผล แล ้ว Updated
้
ป้ อนคาสงั่ [table=ลาดับทีข
่ องตาราง] ใน Post เพือ
่ ใชงาน
84
การจ ัดการตาราง (Table) # 2
85
ิ ธิภาพ
ใช ้ Wordpress ให้เต็มประสท
ต้องเตรียมพร้อมอย่างไร
การติดตั้ง
Server
& Security ปรับแต่งโปรแกรม
เนื้อหา
ทุกคน ภายใต้ข้อกาหนดร่วมกัน
(มาตรฐานสื่อดิจิทัลต่างๆ)
- Web Master การติดตั้งและปรับแต่ง การจัดการสมาชิก
การจัดการหมวดเนื้อหา การติดตั้ง Plug-ins และเปิดใช้งาน
การแก้ไขแม่แบบเว็บไซต์ด้วยเทคนิคแทนที่
- Web Master การแก้ไข CSS, HTML, PHP ระดับที่ 1
- Web Master & Web Programmer การแก้ไข CSS, HTML, PHP ระดับสูง
- Web Programmer การพัฒนาต่อยอดด้วย web programming ต่างๆ
System Administrator
การบริหารจัดการ Server ระบบรักษาความปลอดภัย การจัดการฐานข้อมูล
การจัดการ Log file การจัดการสิทธิ์ของการเข้าถึงระบบ
86
แหล่งข้อมูล


http://stks.or.th/wiki
http://slideshare.net/boonlert
87