การสร้างเว็บบล็อกออนไลน์ด้วย wordpress...

การสรางเวบบลอกออนไลนดวย Wordpress (ตอนท 1)

1. ทาความรจกกบเวบบลอก! บลอก (Blog) หรอ เวบบลอก (Weblog) เปนเวบไซตสาหรบเขยนบนทกเลา เรองราวประจาวนเพอสอสารความรสกนกคด มมมอง ประสบการณ ความร และขาวสาร เสมอนการเขยนไดอาร แตเปนการเขยนและนาเสนอใหผอน ไดเขามาอาน และรวมแสดงความคดเหนในเรองนนๆได

1.1 ลกษณะของเวบบลอก

1. มการเขยนบนทกเรองราว ไมวาจะเปนความร ความบนเทง ขาวสารหรอประสบการณทพบเหน โดยเจาของบลอกอยางสมาเสมอ

2. บนทกทใสในเวบบลอกสามารถเปนไดทงรปแบบขอความ รปภาพ ไฟลเสยง ไฟลวดโอ ตลอดจนขอมลจากเวบ Youtube เพอเพมความนาสนใจและดงดดใหผอานเขามาอานเวบบลอกของ

3. ขอมลมการเรยงลาดบตามรายการลาสดทเขยนนาเสนอ

3. ผทเขามาเยยมชมเวบบลอก สามารถแสดงความคดเหนหรอแชรขอมลรวมกนได ทาใหเกดการตอยอดองคความร แลกเปลยนความคดเหนระหวางผเขยนบลอกและผอานได

4. มการสรางลงคทสนใจไปยงเวบไซตอนๆได

5. ขอมลบนทกทเขยนในเวบบลอก สามารถจดกลมความนาสนใจดวย Category ได ซงจะชวยอานวยความสะดวกใหกบผอานได

1.2 ฟรเวบลอกออนไลน

! ปจจบนไดมการผใหบรการสรางเวบบลอกไวใหฟรสาหรบผทตองการมเวบเปนของตนเอง ไดเขามาสมครและใชงาน ซงในประเทศไทยกมเวบบลอกมากมายใหเลอกใชฟร เชน Wordpress, Blognone, go2know เปนตน ซงในทนเราไดเลอกนาเสนอการสมครและใชงานเวบบลอก Wordpress ซงมคนไทยนยมใชงานสงสด มขนตอนการใชงาย ไมซบซอน คมอมจานวนมาก เหมาะกบผทเรมตนสรางเวบเปนของตนเอง

วชาคอมพวเตอรสำหรบบณฑตศกษา อ.ชรนทรญา กลาแขง (aj.charinya@gmail.com)

1

2. ขนตอนการสมครใชงาน

2.1 เตรยมความพรอมกอนสมครใชงาน! ตรวจสอบเครองคอมพวเตอรวาสามารถใชงานอนเทอรเนตได! ตองอเมลลทใชงานไดจรง (ตองใชในการสมครใชเวบบลอก)

2.2 เขาไปยงลงค http://th.wordpress.com/

คลกปม “สมครตอนนเลย” 2.3 กรอกขอมลเพอใชในการสมคร ดงน

วชาคอมพวเตอรสำหรบบณฑตศกษา อ.ชรนทรญา กลาแขง (aj.charinya@gmail.com)

2

ขอแนะนา:

ชอผใช: เปนภาษาองกฤษพมพเลกทงหมด หรอตวเลขกได 4 ตวอกษรขนไป (*จา)

รหสผาน: ขนอยกบผสมคร (*จา)

ยนยนรหสผาน: พมพรหสผานอกครง

Email Address: อเมลลทมอยจรงของผสมคร และสามารถเขาไปใชงานได

คลกเลอก I have read and agree..

คลกเลอก Gimme a blog

กด “ตอไป”

สงทจะตองจา : ชอผใช และรหสผาน (จะตองนาไปใชตอนแกไขเนอหาบนเวบบลอก)

4. การตงคาใหเวบบลอก กอนการใชงาน

2.5. คลกสมครใชบลอก

2.6. หลงจากนน จะมขอความขนวา Complete Registration สมครเสรจสมบรณแลว ดงภาพ

วชาคอมพวเตอรสำหรบบณฑตศกษา อ.ชรนทรญา กลาแขง (aj.charinya@gmail.com)

3

อะไรกได ชอหวขอ blog ของเรา สามารถแกไขไดภายหลง

4.1 ใสชอเวบทตองการ (หากซา ขนตอนนจะไมผานตองกลบมาแกไขชอ URL ใหม) จะเปนชอเวบของเรา ถาเลอกแลว จะไมสามารถเปลยนแปลงไดในทนจะใช http://charinyak.wordpress.com

ขามไปได ไมตองใสขอมลตรงน

สมครสาเรจ

URL เวบบลอก

2.7. ไปยนยนการสมครอกครง ในอเมลลของเรา ! ระบบจะสงลงคเขาไปในอเมลลเรา ใหเรา ไปคลกลงคนน เพอยนยน!! 7.1 เปดอเมลลของทาน ทใชในการสมครใชงานในขอท “2.3”

วชาคอมพวเตอรสำหรบบณฑตศกษา อ.ชรนทรญา กลาแขง (aj.charinya@gmail.com)

4

คลกลงคน เพอยนยนกลบ

เปดอาน เมลลจาก WordPress.com

ขอมลเวบบลอกของทาน (กรณสมครใชงานแลว):URL Weblog: http:// ............................... .wordpress.com

Username (ชอผใช): ......ตอนสมครขอ 2.3 ..................................................

Password (รหสผาน): ........... ตอนสมครขอ 2.3...........................................

URL เวบบลอกเรา

URL เวบบลอก

2.8 หลงจากคลกลงค ดงกลาว ระบบจะเปดลงคอตโนมตใหเรา เปนอนเสรจสมบรณ

2.9 ทดสอบการใชงาน เปดดเวบบลอกของทาน จาก URL เวบบลอกททานสมครเอาไว

URL Weblog: http:// ............................... .wordpress.com

! จะเหนหนาเวบบลอกของเรา เราสามารถเขาไปเขยนขอความเรองราว upload รปภาพ วดโอ ใสเนอหาทนาสนใจ ใสเพลง และจดรปแบบการนาเสนอเวบบลอกนได

วชาคอมพวเตอรสำหรบบณฑตศกษา อ.ชรนทรญา กลาแขง (aj.charinya@gmail.com)

5

URL เวบบลอก

3. วธการเพมและปรบปรงเนอหาใหกบเวบบลอก Wordpress

3.1 การ Login เขาระบบ

เปดเวบบลอก โดยการพมพ URL เชน http://xxxxxxx.wordpress.comxxxxxxx เปนชอเฉพาะของแตละทาน เมอครงทกาหนดตอนลงทะเบยน

2. กดลงค “เขาสระบบ” (อยทเมนฝงขวามอ ดานลาง)

วชาคอมพวเตอรสำหรบบณฑตศกษา อ.ชรนทรญา กลาแขง (aj.charinya@gmail.com)

6

คลกเขาสระบบ

3. กรอก Username และ Password ของทาน

และกดปม

4. จะพบกบหนาจอ สาหรบปรบแกไขและปรบแตงเวบบลอกของทาน

วชาคอมพวเตอรสำหรบบณฑตศกษา อ.ชรนทรญา กลาแขง (aj.charinya@gmail.com)

7

5. เรมเขยนเรองราว

ใน Blog Wordpress มวธการเขยนเนอหาบนเวบไซต 2 แบบ ซงรายละเอยดวธการใชงาน จะแนะนาในเอกสารฉบบถดไป

(1) เขยนแบบเรอง (จะแสดงเนอหาบนหนาแรกของเวบ)(2) เขยนแบบหนา (จะแสดงเนอหาเปนลงคบนเมน)

วชาคอมพวเตอรสำหรบบณฑตศกษา อ.ชรนทรญา กลาแขง (aj.charinya@gmail.com)

8

เขยนเรองใหม

เขยนหนาใหม

แบบฝกหดทายบท

! ใหนกศกษาสมครใชงานเวบบลอกออนไลน โดยใชบรการฟรเวบบลอกของ Wordpress เพอเรมตนสรางเปนเวบไซตสวนตวของนกศกษาแตละคน ! (ในสวนน นกศกษาเพยงสมครใชบรการและได URL เวบบลอกมาใหไดเทานน ยงไมจาเปนตองใสเนอหาบนเวบกได ซงอาจารยจะสอนใสเนอหาในเอกสารถดไป)! ตวอยางเวบบลอกทสรางมาจาก Wordpress: http://charinyak.wordpress.com

! ขอแนะนา: นกศกษาจาเปนจะตองมอเมลลทใชงานไดและใชเครองคอมพวเตอรทมอนเทอรเนต

ขอมลเวบบลอกของทาน

URL Weblog: http:// .............................. .wordpress.com

Username (ชอผใช): ............................................................

Password (รหสผาน): ..........................................................

วชาคอมพวเตอรสำหรบบณฑตศกษา อ.ชรนทรญา กลาแขง (aj.charinya@gmail.com)

9

การสรางเวบบลอกออนไลนดวย Wordpress (ตอนท 2)

!วตถประสงคการเรยนร! เพอใหนกศกษามความร ความเขาใจ เกยวกบการพฒนาเวบบลอกสวนตวได โดยใชบรการของ Wordpress ทใชงานงาย ไดรบความนยมในอนดบตนๆในประเทศไทย

วตถประสงคนาทาง! 1. สามารถสรางและแกไขเนอหาบนเวบบลอกได ! 2. สามารถสรางลงคเมนไปยงเนอหาบนบลอกได! 3. สามารถแทรกไฟลมลตมเดยตางๆ (ไฟลภาพ, ไฟลเพลง, ไฟลวดโอ) ลงในเวบบลอกได! 4. สามารถแทรกไฟลเอกสารตางๆ (ไฟล .doc,.docx, pdf) ลงในเวบบลอกได! 5. สามารถสรางลงคเมนไปยงหนาเวบอนได (เวบลงค)! 6. สามารถแทรกรปภาพใหกบ Profile ของตนเองได! 7. สามารถเขาใจการทางานของคยเวรด (Tag cloud) และนามาใสบนเวบบลอกได! 8. สามารถเขาใจการทางานของคอมเมนท (Comment) และนามาใสบนเวบบลอกได! 9. สามารถบอกขอด-ขอเสยของการใชเวบบลอกได

วชาคอมพวเตอรสำหรบบณฑตศกษา อ.ชรนทรญา กลาแขง (aj.charinya@gmail.com)

10

1. เขาสหนาจอการแกไขขอมลเวบบลอก (หนาจอ Admin)

หนาเวบบลอกของเรา:! ! http://charinyak.wordpress.com/หนาเวบบลอกทใชในการแกไข:! http://charinyak.wordpress.com/wp-login.php (พมพ /wp-login.php ตอทาย)

* ใสชอผใชทใชในการสมคร พรอมรหสผานทไดตงคาไว

ภาพท 6-2.1 หนาจอการเขาสระบบ

2. เรยนรวธการใชงานผานเมนหนาจอ Admin

2.1 เมนหนาหลก: จะประกอบไปดวยเมนยอยทใชตงคาขอมลทวไป, ดความคดเหนลาสด, ดสถตการเขาชม เปนตน

ภาพท 6-2.2 หนาจอเมนหลก

วชาคอมพวเตอรสำหรบบณฑตศกษา อ.ชรนทรญา กลาแขง (aj.charinya@gmail.com)

11

2.2 การใสเนอหาลงบนเวบบลอก (เมนเรอง)! เปนหวขอทใชในการเขยนเรองราวลงบนเวบบลอก สงทเขยนจะปรากฏอยบนเวบหนาหลกตรงกลาง ตอยาวไปเรอยๆ ซงขอมลจะถกเรยงลาดบตามวนเวลาทเขยน (เขยนทหลงจะถกนามาเผยแพรอยบนสด)

2.2.1 การเขยนเรองใหมลงบลอก หรอการโพสขอมลลงเวบบลอก:! 1). เลอกเมน “เขยนเรองใหม”

ภาพท 6-2.3 หนาจอเมนเรอง

! 2). กรอกขอมลลงไปหวขอ และเนอหาทตองการ! ! เลอกกลมขอมล หรอ Categories (ดานลาง) ! ! กรณทยงไมเคยม Categories มากอนใหเลอก “Uncategorize” ! ! กดปม “เผยแพร”

ภาพท 6-2.4 พมพขอมลลงบลอก!

วชาคอมพวเตอรสำหรบบณฑตศกษา อ.ชรนทรญา กลาแขง (aj.charinya@gmail.com)

12

! 3). เนอหาทสรางใหม จะถกนาเสนอทหนาแรกของเวบบลอก

ภาพท 6-2.5 หนาแรกของเวบบลอก

2.2.2 การแกไข/ลบเรองเดมทมอยบนเวบบลอก

! 1). ไปทเมนเลอก “เรอง”

ภาพท 6-2.6 ภาพเมนเรอง

วชาคอมพวเตอรสำหรบบณฑตศกษา อ.ชรนทรญา กลาแขง (aj.charinya@gmail.com)

13

! 2). จะแสดงหวขอเรองทมอยบนเวบบลอกทงหมด! ตารางนจะรายละเอยด เชน ชอหวขอบลอก ชอผเขยนเรอง หมวดหม สถตในการเขาชม และวนทในการเผยแพรเปนตน

ภาพท 6-2.7 แสดงหวขอเรองทมอยบนเวบบลอกทงหมด!! เราสามารถเลอกเรองทตองการแกไข ลบ หรอเลอกดมมมองได โดยใชเมาสไปวางไวบนชอหวขอบลอก กจะปรากฏเมนทซอนอยขนมาดงภาพดานลาง

ภาพท 6-2.8 แสดงเมนทใชในการแกไขบลอก

2.2.3 การแทรกไฟลภาพลงในเวบบลอก! การแทรกขอมลภาพ เสยง และลงควดโอในเวบบลอกสามารถทาไดงายมาก

! 1). คลกทไอคอนดานบนรป และเลอกรปทอยบนเครองของเราใสเขาไป

ภาพท 6-2.9 แสดงเมนทใชในการแทรกรปภาพ

วชาคอมพวเตอรสำหรบบณฑตศกษา อ.ชรนทรญา กลาแขง (aj.charinya@gmail.com)

14

! 2. เลอกรปภาพทตองการทเมน “เลอกไฟล”

ภาพท 6-2.10 แสดงเมนทใชในการอพโหลดภาพ

! 3. จะปรากฏภาพวารปได Upload เรยบรอยแลว ใหเลอกขนาดภาพและกดปม เพอใหเวบบลอกนารปภาพไปแทรกในททเราตองการ หลงจากนนกดาเนนการตามปกตคอกดปม “เผยแพร” หรอ “อพเดต”

ภาพท 6-2.11 แสดงขนตอนในการอพโหลดรปภาพ

ภาพท 6-2.12 แสดงผลลพธจากการแทรกรปภาพ

วชาคอมพวเตอรสำหรบบณฑตศกษา อ.ชรนทรญา กลาแขง (aj.charinya@gmail.com)

15

2.2.4 การแทรกไฟลหรอลงควดโอลงในเวบบลอก

ภาพท 6-2.13 แสดงผลลพธจากการแทรกวดโอจาก Youtube

! 1). เลอกไอคอน จากเมนดานบน

! 2). ใสลงคของวดโอ Youtube ทตองการลงไป ดงตวอยาง ! ! [youtube=http://www.youtube.com/watch?v=KIq6bnZJOqc&feature=topvideos]

! 3). กดอพเดตหรอเผยแพร กจะไดผลลพธดงภาพดานบน

2.2.5 การแทรกไฟลเอกสารลงในเวบบลอก ! การใหบรการของ Wordpress นจะกาหนดชนดไฟลทอนญาต ไดแก jpg, jpeg, png, gif, pdf, doc, ppt, odt, pptx, docx, pps, ppsx, xls, xlsx เทานน (หากตองการแทรกไฟลอนลงไป หรอมจนาดทใหญเกน 1GB ตอไฟลจะตองเสยคาบรการเพมเตม) ดงนนไฟลเอกสารทเราจะนามาแนบในทน ควรจะตองเปนไฟลทมนามสกล .doc, .docx, .ppt, .pptx, .xls, .xlsx, .pdf เทานน

ภาพท 6-2.14 นามสกลไฟลทอนญาตใหเพมลงในเวบบลอกได

วชาคอมพวเตอรสำหรบบณฑตศกษา อ.ชรนทรญา กลาแขง (aj.charinya@gmail.com)

16

! 1). เลอกไอคอนเพมสอ จากเมนดานบน

! 2). เลอกไฟลทมนามสกลตามเงอนไขทกาหนด รออพโหลด

! 3). กดปม เพอใสลงคในเนอหาบลอก มายงไฟลเอกสารของเรา และกดอพเดต

ภาพท 6-2.15 การเพมไฟลเอกสารลงในเวบบลอก

ภาพท 6-2.16 ผลลพธจากการสรางลงคไปยงเอกสาร

2.3 การสรางเนอหาบนลงคดานบนบลอก (เมนหนา)! เปนเมนทใชในการเนอหาบนบลอก เชนเดยวกบเมนเรองดานบน แตรปแบบการนาเสนอจะแตกตางกนตรงทหากเราเขยนเนอหาเวบบลอกทเมนน ผลลพธทไดจะไปปรกฏทเมนดานบนของเวบบลอก ดงน

ภาพท 6-2.17 ผลลพธจากการสรางเนอหาเวบบลอกในเมนหนา

วชาคอมพวเตอรสำหรบบณฑตศกษา อ.ชรนทรญา กลาแขง (aj.charinya@gmail.com)

17

ภาพท 6-2.18 เมนเขยนหนาใหมในเวบบลอก

2.4 การลบไฟลสอ (เมนสอ)! เราสามารถดและเลอกลบไฟลเอกสารสอตางๆทเราไมตองการ เพอประหยดเนอทบนเวบบลอกได เนองจากผใหบรการเวบบลอกสวนใหญจะมการกาหนดพนทบนเวบบลอก ดงนนหากเราตองการลบไฟลเอกสาร

ภาพท 6-2.19 เมนในการลบไฟลสอตางๆ

2.5 การเปลยนรปแบบบลอก (เมนรปแบบบลอก)! การเปลยนรปแบบบลอกหรอธม (Theme) ไปทเมน “รปแบบบลอก” > “Theme” > เลอก “ใชงาน”

ภาพท 6-2.20 การเปลยนรปแบบธม

วชาคอมพวเตอรสำหรบบณฑตศกษา อ.ชรนทรญา กลาแขง (aj.charinya@gmail.com)

18

2.6 การเพม Widget หรอหนาตางเมน (เมนรปแบบบลอก)! เราสามารถเพมความสามารถในการนาเสนอขอมลบนเวบบลอก โดยการเพมหนาตา (Widget) เขามา โดยการเลอกจากเมนดานซายมายงเมนดานขวา ยกตวอยางทนาสนใจ ไดแก ปฏทน เรองลาสด ความคดเหนลาสด Tag Cloud ลงค ลงทะเบยนบลอก เปนตน

ภาพท 6-2.21 การเพม Widget เขาในเวบบลอก

ภาพท 6-2.22 ผลลพธจากการเพม Widget เขาในเวบบลอก

วชาคอมพวเตอรสำหรบบณฑตศกษา อ.ชรนทรญา กลาแขง (aj.charinya@gmail.com)

19

2.7 การสรางเวบลงค (เมน)! 1). สรางหมวดหม เพอทาการสรางกลมของลงคไวกอน เชน ลงคการศกษา, ลงคบนเทง, ลงคเพอนๆ เปนตน

ภาพท 6-2.23 สรางหมวดหมลงค

!! 2). สรางลงค ใหพมพชอทตองการแสดงผล และทอยเวบ ดงภาพ พรอมทงเลอก Categories ของลงค เพอจดหมวดหมตามทตองการ

ภาพท 6-2.24 สรางลงคใหม

ภาพท 6-2.25 ผลลพธทไดจากการสรางลงค

วชาคอมพวเตอรสำหรบบณฑตศกษา อ.ชรนทรญา กลาแขง (aj.charinya@gmail.com)

20

แบบฝกหดทายบท

! ใหนกศกษาสรางเวบบลอกสวนตว โดยจะตองประกอบไปดวยเนอหาดงน

! 1. มการนาเสนอเรองราวทนาสนใจตางๆ ลงบนเวบบลอก! 2. มการนาเสนอเนอหา โดยการสรางเแนเมนดานบน (เมนหนา)! 3. มการนาเสนอขอมลประวตของตนเอง ทมรปแบบและขอความ! 4. มการนาเสนอขอมลมลตมเดย เชน นาเสนอวดโอทชนชอบ (ลงคไปยง Youtube)! 5. มการปรบปรงเปลยนแปลงรปแบบของธมหรอพนหลงของเวบบลอกใหมความสวยงาม !! 6. มการเพม Widget หรอหนาตางพเศษใหกบเวบบลอก เชน ปฏทน ลงค เรองลาสด ความคดเหนลาสด เปนตน!

! ตวอยางผลงาน: http://www.sarintra.wordpress.com http://seetasang.wordpress.com/ http://natnicha001.wordpress.com/ http://natnicha001.wordpress.com/

วชาคอมพวเตอรสำหรบบณฑตศกษา อ.ชรนทรญา กลาแขง (aj.charinya@gmail.com)

21