การสร้างเว็บบล็อกออนไลน์ด้วย wordpress...
TRANSCRIPT
การสรางเวบบลอกออนไลนดวย Wordpress (ตอนท 1)
1. ทาความรจกกบเวบบลอก! บลอก (Blog) หรอ เวบบลอก (Weblog) เปนเวบไซตสาหรบเขยนบนทกเลา เรองราวประจาวนเพอสอสารความรสกนกคด มมมอง ประสบการณ ความร และขาวสาร เสมอนการเขยนไดอาร แตเปนการเขยนและนาเสนอใหผอน ไดเขามาอาน และรวมแสดงความคดเหนในเรองนนๆได
1.1 ลกษณะของเวบบลอก
1. มการเขยนบนทกเรองราว ไมวาจะเปนความร ความบนเทง ขาวสารหรอประสบการณทพบเหน โดยเจาของบลอกอยางสมาเสมอ
2. บนทกทใสในเวบบลอกสามารถเปนไดทงรปแบบขอความ รปภาพ ไฟลเสยง ไฟลวดโอ ตลอดจนขอมลจากเวบ Youtube เพอเพมความนาสนใจและดงดดใหผอานเขามาอานเวบบลอกของ
3. ขอมลมการเรยงลาดบตามรายการลาสดทเขยนนาเสนอ
3. ผทเขามาเยยมชมเวบบลอก สามารถแสดงความคดเหนหรอแชรขอมลรวมกนได ทาใหเกดการตอยอดองคความร แลกเปลยนความคดเหนระหวางผเขยนบลอกและผอานได
4. มการสรางลงคทสนใจไปยงเวบไซตอนๆได
5. ขอมลบนทกทเขยนในเวบบลอก สามารถจดกลมความนาสนใจดวย Category ได ซงจะชวยอานวยความสะดวกใหกบผอานได
1.2 ฟรเวบลอกออนไลน
! ปจจบนไดมการผใหบรการสรางเวบบลอกไวใหฟรสาหรบผทตองการมเวบเปนของตนเอง ไดเขามาสมครและใชงาน ซงในประเทศไทยกมเวบบลอกมากมายใหเลอกใชฟร เชน Wordpress, Blognone, go2know เปนตน ซงในทนเราไดเลอกนาเสนอการสมครและใชงานเวบบลอก Wordpress ซงมคนไทยนยมใชงานสงสด มขนตอนการใชงาย ไมซบซอน คมอมจานวนมาก เหมาะกบผทเรมตนสรางเวบเปนของตนเอง
วชาคอมพวเตอรสำหรบบณฑตศกษา อ.ชรนทรญา กลาแขง ([email protected])
1
2. ขนตอนการสมครใชงาน
2.1 เตรยมความพรอมกอนสมครใชงาน! ตรวจสอบเครองคอมพวเตอรวาสามารถใชงานอนเทอรเนตได! ตองอเมลลทใชงานไดจรง (ตองใชในการสมครใชเวบบลอก)
2.2 เขาไปยงลงค http://th.wordpress.com/
คลกปม “สมครตอนนเลย” 2.3 กรอกขอมลเพอใชในการสมคร ดงน
วชาคอมพวเตอรสำหรบบณฑตศกษา อ.ชรนทรญา กลาแขง ([email protected])
2
ขอแนะนา:
ชอผใช: เปนภาษาองกฤษพมพเลกทงหมด หรอตวเลขกได 4 ตวอกษรขนไป (*จา)
รหสผาน: ขนอยกบผสมคร (*จา)
ยนยนรหสผาน: พมพรหสผานอกครง
Email Address: อเมลลทมอยจรงของผสมคร และสามารถเขาไปใชงานได
คลกเลอก I have read and agree..
คลกเลอก Gimme a blog
กด “ตอไป”
สงทจะตองจา : ชอผใช และรหสผาน (จะตองนาไปใชตอนแกไขเนอหาบนเวบบลอก)
4. การตงคาใหเวบบลอก กอนการใชงาน
2.5. คลกสมครใชบลอก
2.6. หลงจากนน จะมขอความขนวา Complete Registration สมครเสรจสมบรณแลว ดงภาพ
วชาคอมพวเตอรสำหรบบณฑตศกษา อ.ชรนทรญา กลาแขง ([email protected])
3
อะไรกได ชอหวขอ blog ของเรา สามารถแกไขไดภายหลง
4.1 ใสชอเวบทตองการ (หากซา ขนตอนนจะไมผานตองกลบมาแกไขชอ URL ใหม) จะเปนชอเวบของเรา ถาเลอกแลว จะไมสามารถเปลยนแปลงไดในทนจะใช http://charinyak.wordpress.com
ขามไปได ไมตองใสขอมลตรงน
สมครสาเรจ
URL เวบบลอก
2.7. ไปยนยนการสมครอกครง ในอเมลลของเรา ! ระบบจะสงลงคเขาไปในอเมลลเรา ใหเรา ไปคลกลงคนน เพอยนยน!! 7.1 เปดอเมลลของทาน ทใชในการสมครใชงานในขอท “2.3”
วชาคอมพวเตอรสำหรบบณฑตศกษา อ.ชรนทรญา กลาแขง ([email protected])
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 รปภาพ วดโอ ใสเนอหาทนาสนใจ ใสเพลง และจดรปแบบการนาเสนอเวบบลอกนได
วชาคอมพวเตอรสำหรบบณฑตศกษา อ.ชรนทรญา กลาแขง ([email protected])
5
URL เวบบลอก
3. วธการเพมและปรบปรงเนอหาใหกบเวบบลอก Wordpress
3.1 การ Login เขาระบบ
เปดเวบบลอก โดยการพมพ URL เชน http://xxxxxxx.wordpress.comxxxxxxx เปนชอเฉพาะของแตละทาน เมอครงทกาหนดตอนลงทะเบยน
2. กดลงค “เขาสระบบ” (อยทเมนฝงขวามอ ดานลาง)
วชาคอมพวเตอรสำหรบบณฑตศกษา อ.ชรนทรญา กลาแขง ([email protected])
6
คลกเขาสระบบ
3. กรอก Username และ Password ของทาน
และกดปม
4. จะพบกบหนาจอ สาหรบปรบแกไขและปรบแตงเวบบลอกของทาน
วชาคอมพวเตอรสำหรบบณฑตศกษา อ.ชรนทรญา กลาแขง ([email protected])
7
5. เรมเขยนเรองราว
ใน Blog Wordpress มวธการเขยนเนอหาบนเวบไซต 2 แบบ ซงรายละเอยดวธการใชงาน จะแนะนาในเอกสารฉบบถดไป
(1) เขยนแบบเรอง (จะแสดงเนอหาบนหนาแรกของเวบ)(2) เขยนแบบหนา (จะแสดงเนอหาเปนลงคบนเมน)
วชาคอมพวเตอรสำหรบบณฑตศกษา อ.ชรนทรญา กลาแขง ([email protected])
8
เขยนเรองใหม
เขยนหนาใหม
แบบฝกหดทายบท
! ใหนกศกษาสมครใชงานเวบบลอกออนไลน โดยใชบรการฟรเวบบลอกของ Wordpress เพอเรมตนสรางเปนเวบไซตสวนตวของนกศกษาแตละคน ! (ในสวนน นกศกษาเพยงสมครใชบรการและได URL เวบบลอกมาใหไดเทานน ยงไมจาเปนตองใสเนอหาบนเวบกได ซงอาจารยจะสอนใสเนอหาในเอกสารถดไป)! ตวอยางเวบบลอกทสรางมาจาก Wordpress: http://charinyak.wordpress.com
! ขอแนะนา: นกศกษาจาเปนจะตองมอเมลลทใชงานไดและใชเครองคอมพวเตอรทมอนเทอรเนต
ขอมลเวบบลอกของทาน
URL Weblog: http:// .............................. .wordpress.com
Username (ชอผใช): ............................................................
Password (รหสผาน): ..........................................................
วชาคอมพวเตอรสำหรบบณฑตศกษา อ.ชรนทรญา กลาแขง ([email protected])
9
การสรางเวบบลอกออนไลนดวย Wordpress (ตอนท 2)
!วตถประสงคการเรยนร! เพอใหนกศกษามความร ความเขาใจ เกยวกบการพฒนาเวบบลอกสวนตวได โดยใชบรการของ Wordpress ทใชงานงาย ไดรบความนยมในอนดบตนๆในประเทศไทย
วตถประสงคนาทาง! 1. สามารถสรางและแกไขเนอหาบนเวบบลอกได ! 2. สามารถสรางลงคเมนไปยงเนอหาบนบลอกได! 3. สามารถแทรกไฟลมลตมเดยตางๆ (ไฟลภาพ, ไฟลเพลง, ไฟลวดโอ) ลงในเวบบลอกได! 4. สามารถแทรกไฟลเอกสารตางๆ (ไฟล .doc,.docx, pdf) ลงในเวบบลอกได! 5. สามารถสรางลงคเมนไปยงหนาเวบอนได (เวบลงค)! 6. สามารถแทรกรปภาพใหกบ Profile ของตนเองได! 7. สามารถเขาใจการทางานของคยเวรด (Tag cloud) และนามาใสบนเวบบลอกได! 8. สามารถเขาใจการทางานของคอมเมนท (Comment) และนามาใสบนเวบบลอกได! 9. สามารถบอกขอด-ขอเสยของการใชเวบบลอกได
วชาคอมพวเตอรสำหรบบณฑตศกษา อ.ชรนทรญา กลาแขง ([email protected])
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 หนาจอเมนหลก
วชาคอมพวเตอรสำหรบบณฑตศกษา อ.ชรนทรญา กลาแขง ([email protected])
11
2.2 การใสเนอหาลงบนเวบบลอก (เมนเรอง)! เปนหวขอทใชในการเขยนเรองราวลงบนเวบบลอก สงทเขยนจะปรากฏอยบนเวบหนาหลกตรงกลาง ตอยาวไปเรอยๆ ซงขอมลจะถกเรยงลาดบตามวนเวลาทเขยน (เขยนทหลงจะถกนามาเผยแพรอยบนสด)
2.2.1 การเขยนเรองใหมลงบลอก หรอการโพสขอมลลงเวบบลอก:! 1). เลอกเมน “เขยนเรองใหม”
ภาพท 6-2.3 หนาจอเมนเรอง
! 2). กรอกขอมลลงไปหวขอ และเนอหาทตองการ! ! เลอกกลมขอมล หรอ Categories (ดานลาง) ! ! กรณทยงไมเคยม Categories มากอนใหเลอก “Uncategorize” ! ! กดปม “เผยแพร”
ภาพท 6-2.4 พมพขอมลลงบลอก!
วชาคอมพวเตอรสำหรบบณฑตศกษา อ.ชรนทรญา กลาแขง ([email protected])
12
! 3). เนอหาทสรางใหม จะถกนาเสนอทหนาแรกของเวบบลอก
ภาพท 6-2.5 หนาแรกของเวบบลอก
2.2.2 การแกไข/ลบเรองเดมทมอยบนเวบบลอก
! 1). ไปทเมนเลอก “เรอง”
ภาพท 6-2.6 ภาพเมนเรอง
วชาคอมพวเตอรสำหรบบณฑตศกษา อ.ชรนทรญา กลาแขง ([email protected])
13
! 2). จะแสดงหวขอเรองทมอยบนเวบบลอกทงหมด! ตารางนจะรายละเอยด เชน ชอหวขอบลอก ชอผเขยนเรอง หมวดหม สถตในการเขาชม และวนทในการเผยแพรเปนตน
ภาพท 6-2.7 แสดงหวขอเรองทมอยบนเวบบลอกทงหมด!! เราสามารถเลอกเรองทตองการแกไข ลบ หรอเลอกดมมมองได โดยใชเมาสไปวางไวบนชอหวขอบลอก กจะปรากฏเมนทซอนอยขนมาดงภาพดานลาง
ภาพท 6-2.8 แสดงเมนทใชในการแกไขบลอก
2.2.3 การแทรกไฟลภาพลงในเวบบลอก! การแทรกขอมลภาพ เสยง และลงควดโอในเวบบลอกสามารถทาไดงายมาก
! 1). คลกทไอคอนดานบนรป และเลอกรปทอยบนเครองของเราใสเขาไป
ภาพท 6-2.9 แสดงเมนทใชในการแทรกรปภาพ
วชาคอมพวเตอรสำหรบบณฑตศกษา อ.ชรนทรญา กลาแขง ([email protected])
14
! 2. เลอกรปภาพทตองการทเมน “เลอกไฟล”
ภาพท 6-2.10 แสดงเมนทใชในการอพโหลดภาพ
! 3. จะปรากฏภาพวารปได Upload เรยบรอยแลว ใหเลอกขนาดภาพและกดปม เพอใหเวบบลอกนารปภาพไปแทรกในททเราตองการ หลงจากนนกดาเนนการตามปกตคอกดปม “เผยแพร” หรอ “อพเดต”
ภาพท 6-2.11 แสดงขนตอนในการอพโหลดรปภาพ
ภาพท 6-2.12 แสดงผลลพธจากการแทรกรปภาพ
วชาคอมพวเตอรสำหรบบณฑตศกษา อ.ชรนทรญา กลาแขง ([email protected])
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 นามสกลไฟลทอนญาตใหเพมลงในเวบบลอกได
วชาคอมพวเตอรสำหรบบณฑตศกษา อ.ชรนทรญา กลาแขง ([email protected])
16
! 1). เลอกไอคอนเพมสอ จากเมนดานบน
! 2). เลอกไฟลทมนามสกลตามเงอนไขทกาหนด รออพโหลด
! 3). กดปม เพอใสลงคในเนอหาบลอก มายงไฟลเอกสารของเรา และกดอพเดต
ภาพท 6-2.15 การเพมไฟลเอกสารลงในเวบบลอก
ภาพท 6-2.16 ผลลพธจากการสรางลงคไปยงเอกสาร
2.3 การสรางเนอหาบนลงคดานบนบลอก (เมนหนา)! เปนเมนทใชในการเนอหาบนบลอก เชนเดยวกบเมนเรองดานบน แตรปแบบการนาเสนอจะแตกตางกนตรงทหากเราเขยนเนอหาเวบบลอกทเมนน ผลลพธทไดจะไปปรกฏทเมนดานบนของเวบบลอก ดงน
ภาพท 6-2.17 ผลลพธจากการสรางเนอหาเวบบลอกในเมนหนา
วชาคอมพวเตอรสำหรบบณฑตศกษา อ.ชรนทรญา กลาแขง ([email protected])
17
ภาพท 6-2.18 เมนเขยนหนาใหมในเวบบลอก
2.4 การลบไฟลสอ (เมนสอ)! เราสามารถดและเลอกลบไฟลเอกสารสอตางๆทเราไมตองการ เพอประหยดเนอทบนเวบบลอกได เนองจากผใหบรการเวบบลอกสวนใหญจะมการกาหนดพนทบนเวบบลอก ดงนนหากเราตองการลบไฟลเอกสาร
ภาพท 6-2.19 เมนในการลบไฟลสอตางๆ
2.5 การเปลยนรปแบบบลอก (เมนรปแบบบลอก)! การเปลยนรปแบบบลอกหรอธม (Theme) ไปทเมน “รปแบบบลอก” > “Theme” > เลอก “ใชงาน”
ภาพท 6-2.20 การเปลยนรปแบบธม
วชาคอมพวเตอรสำหรบบณฑตศกษา อ.ชรนทรญา กลาแขง ([email protected])
18
2.6 การเพม Widget หรอหนาตางเมน (เมนรปแบบบลอก)! เราสามารถเพมความสามารถในการนาเสนอขอมลบนเวบบลอก โดยการเพมหนาตา (Widget) เขามา โดยการเลอกจากเมนดานซายมายงเมนดานขวา ยกตวอยางทนาสนใจ ไดแก ปฏทน เรองลาสด ความคดเหนลาสด Tag Cloud ลงค ลงทะเบยนบลอก เปนตน
ภาพท 6-2.21 การเพม Widget เขาในเวบบลอก
ภาพท 6-2.22 ผลลพธจากการเพม Widget เขาในเวบบลอก
วชาคอมพวเตอรสำหรบบณฑตศกษา อ.ชรนทรญา กลาแขง ([email protected])
19
2.7 การสรางเวบลงค (เมน)! 1). สรางหมวดหม เพอทาการสรางกลมของลงคไวกอน เชน ลงคการศกษา, ลงคบนเทง, ลงคเพอนๆ เปนตน
ภาพท 6-2.23 สรางหมวดหมลงค
!! 2). สรางลงค ใหพมพชอทตองการแสดงผล และทอยเวบ ดงภาพ พรอมทงเลอก Categories ของลงค เพอจดหมวดหมตามทตองการ
ภาพท 6-2.24 สรางลงคใหม
ภาพท 6-2.25 ผลลพธทไดจากการสรางลงค
วชาคอมพวเตอรสำหรบบณฑตศกษา อ.ชรนทรญา กลาแขง ([email protected])
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/
วชาคอมพวเตอรสำหรบบณฑตศกษา อ.ชรนทรญา กลาแขง ([email protected])
21