เว็บไซต์รูปแบบ blog ง่ายๆ ด้วย wordpress ·...
TRANSCRIPT
เวบไซตรปแบบ Blog งายๆ ดวย Wordpress.com
บญเลศ อรณพบลย
ฝายบรการความรทางวทยาศาสตรและเทคโนโลย
ส านกงานพฒนาวทยาศาสตรและเทคโนโลยแหงชาต
http://www.stks.or.th, http://www.thailibrary.in.th
http://facebook.com/boonlert.aroonpiboon
สารบญ
รจก Wordpress.com .......................................................................................................................................................... 1
เรมตนสรางเวบดวย Wordpress.com ......................................................................................................................... 1
จอภาพการท างานของเวบไซต ................................................................................................................................... 9
การสลบโหมดการท างาน .................................................................................................................................. 10
การปรบแตงภาษาของระบบเวบไซต ....................................................................................................................... 11
การปรบแตงเวบไซตกอนใชงาน .............................................................................................................................. 13
เนอหาเวบ ................................................................................................................................................................. 15
การท างานกบเนอหา Static....................................................................................................................................... 15
การน าเขารปภาพ ............................................................................................................................................... 19
การท างานกบเนอหา Dynamic ................................................................................................................................. 22
การสรางคลงภาพ ..................................................................................................................................................... 26
การสราง Poll ............................................................................................................................................................ 30
การบรหารจดการเนอหา ................................................................................................................................... 34
การปรบแตงจอภาพหนาเวบ .................................................................................................................................... 35
Widgets .............................................................................................................................................................. 36
สาระนารเกยวกบเวบไซตรปแบบ Blog .......................................................................................................................... 39
ความหมายของ Blog ................................................................................................................................................ 39
เทคนคการเขยน Blog ............................................................................................................................................... 40
Category & Tag ใน Blog ......................................................................................................................................... 41
ค าแนะน าการก าหนดหมวดหม ......................................................................................................................... 42
ค าแนะน าการก าหนด Tag ................................................................................................................................. 42
1 การออกแบบพฒนาเวบไซตรปแบบ Blog ดวย Wordpress
รจก Wordpress.com
Wordpress.com เปนบรการฟรจากมลนธ Wordpress (WordPress Foundation) ทอนญาตให ทกคนสามารถสรางเวบไซตในรปแบบ Blog ไดดวยตนเอง ทงนสามารถปรบแตงเวบไซตทสรางใหรองรบกบการท างานไดหลากหลายรปแบบ ทงการท าเวบประชาสมพนธสนคา เวบกลมสนทนา เวบสวนตว เวบหนวยงาน เวบเพอการบรการ คลงภาพออนไลน เวบเพอการเรยนการสอน เนองจาก Wordpress.com ไดเตรยมเครองมอบรหารจดการเนอหาทงทเปนแบบ Dynamic และเนอหาแบบ Static ฟงกชนการน าเขาภาพ แฟมเอกสารฟอรแมตตางๆ
Wordpress.com ไมไดใหบรการเฉพาะซอฟตแวรหรอเครองมอ แตยงบรการพนทเวบ (Web Hosting) ใหฟรดวย รวมถงบรการจดชอเวบไซต (Domain name) ท าใหการพฒนาเวบไซตดวย Wordpress.com เปนไปไดอยางสะดวก รวดเรวเพยงแคมบญชอเมล (eMail Address) แลวน าบญชอเมลดงกลาวไปสมครผานเวบ Wordpress.com ซงใชเวลาไมนานกสามารถไดเวบทพรอมท างานไดทนท
เรมตนสรางเวบดวย Wordpress.com
การสรางเวบไซตดวย Wordpress.com จะตองเรมจากการมบญชอเมล (eMail Address) กอน จะเปนฟรอเมลอยาง Gmail หรอ Hotmail หรอ Yahoo Mail กได รวมถงบญชอเมลของหนวยงาน เมอมบญชอเมลพรอมแลว กเรมเขาสอนเทอรเนตแลวเขาเวบไซต Wordpress.com ซงจะปรากฏจอภาพการท างาน (จอภาพ Wordpress.com ณ วนท 15 เมษายน 2556) ดงน
รปท 1 จอภาพ Wordpress.com
จอภาพ Wordpress.com อาจจะแตกตางกบภาพไดเนองจากมการปรบรนอยางตอเนอง
2 การออกแบบพฒนาเวบไซตรปแบบ Blog ดวย Wordpress
จากรปท 1 ใหคลกปม Get Started เพอเขาสโหมดการลงทะเบยนสมครสมาชก
รปท 2 เขาสโหมดการลงทะเบยนสมครสมาชก
จอภาพสวนการลงทะเบยนสมครสมาชก จะแสดงผล ดงน
รปท 3 จอภาพลงทะเบยนสมครสมาชก
จอภาพ Wordpress.com อาจจะแตกตางกบภาพไดเนองจากมการปรบรนอยางตอเนอง
3 การออกแบบพฒนาเวบไซตรปแบบ Blog ดวย Wordpress
การลงทะเบยนสมครสมาชก Wordpress.com มรายการทจะตองระบ ดงน
E-mail Address ระบบญชอเมล ทงนควรระมดระวงการปอนบญชอเมลใหถกตอง เพราะระบบจะสงขอมลการยนยนการสมครสมาชกไปยงบญชอเมลดงกลาว
บญชอเมลทใชสมครสมาชก
Username บญชผใช Wordpress.com หรอ username ใหระบไมนอยกวา 4 อกขระ ทผสมอกขระภาษาองกฤษตวพมพเลก และตวเลข 0 – 9
Username
Password รหสผาน ควรก าหนดใหมความแขงแรงพอสมควร โดยควรผสมอกขระภาษาองกฤษตวพมพใหญ ตวพมพเลก สญลกษณ และตวเลข เชน H025649000# หรอ Suratthani*84190 เปนตน
รหสผาน
Blog Address ระบชอเวบไซต โดยหากใชชอเปน http://xxx.wordpress.com จะไมคดคาบรการจดชอเวบไซต ทงน xxx ควรเปนอกขระภาษาองกฤษตวพมพเลก ไมมชองวาง สอความหมายถงเนอหาในเวบอยางชดเจน เชน http://boonlertaroonpiboon.wordpress.com
ชอเวบ
เทคนคการก าหนดรหสผานทมความแขงแรง
ปญหาหนงทหลายๆ ทานพบในการใชงานระบบผานอนเทอรเนตกคอ รหสผาน (Password) ทตงไดยากขน
ท าใหจ ายาก ขอแนะน าวธสรางรหสผานประจ าตวแบบงายๆ ดงน
1. ใชตวแรกของรหสผานเปน ตวพมพใหญ เชน ก าหนดรหสผานเปน joomla2509 ควรเปลยนให
ตวอกษร j เปนตวพมพใหญ J
2. พจารณาวาในรหสผานของทาน มสระภาษาองกฤษ (A E I O U) ผสมอยดวยหรอไม หากม ใหแทนท
สระดงกลาวดวยเครองหมายพเศษ เชน # หรอ * หรอ ( หรอ ) จากตวอยางขอ 1 หากใชเครองหมาย *
แทนอกขระภาษาองกฤษทเปนสระ จะได ดงน J**ml*2509
4 การออกแบบพฒนาเวบไซตรปแบบ Blog ดวย Wordpress
เมอปอนขอมลตางๆ ไดถกตอง ครบถวน สอดคลองกบขอก าหนด และไมซ ากบขอมลทเคยลงทะเบยนแลว ปม Create Blog จะเดนใหคลกได
รปท 4 ป ม Create Blog ทอนญาตใหคลกไดเมอขอมลสมบรณ
ซงเมอคลกยนยนการสมครสมาชก ระบบจะแสดงจอภาพแจงการสงขอความไปยงบญชอเมล ทลงทะเบยน ดงน
รปท 5 ขอความแสดงการสงขอมลไปยงอเมลทลงทะเบยน
จากรปท 5 ใหเขาสระบบอเมลทใชลงทะเบยนไวกบ Wordpress ตวอยางคอเขาสบรการ Gmail นนเอง
5 การออกแบบพฒนาเวบไซตรปแบบ Blog ดวย Wordpress
รปท 6 อเมลเพอยนยนการสมครสมาชกจาก Wordpress.com
จากรปท 6 ใหคลกอานอเมล จะปรากฏขอความในอเมล ดงน
รปท 7 ขอความยนยนการสมครสมาชกจาก Wordpress.com
จากรปท 7 ใหคลกปม Activate Blog เพอยนยนการสมครสมาชก Wordpress โปรแกรมจะเปดหนาเวบใหม ดงน
6 การออกแบบพฒนาเวบไซตรปแบบ Blog ดวย Wordpress
รปท 8 จอภาพการท างาน Wordpress.com
จากรปท 8 แสดงวาการสมครสมาชก Wordpress.com ผานสมบรณ โดยขนตอนนจะเปน การก าหนดรายละเอยดของเวบไซต ไดแก
Blog Title ชอเวบไซต สามารถระบไดทงชอภาษาไทย และชอภาษาองกฤษ ทงนควรสอความหมายเกยวกบเนอหา เชน หากตองการสรางเวบสวนตว กอาจจะใชชอตนเอง หรอหากตองการสรางเวบหนวยงาน กน าชอหนวยงานมาก าหนดไดเชนกน
Tagline ขอความสนๆ อธบายเกยวกบเวบ หรอสโลแกนของเวบ Language เลอกระบบภาษาในการตตดอกบระบบ Wordpress.com เอกสาร
ฉบบนขอใชระบบตดตอเปนภาษาไทย
รปท 9 ตวอยางการระบขอมลเวบไซต
7 การออกแบบพฒนาเวบไซตรปแบบ Blog ดวย Wordpress
จากรปท 8 จอภาพการท างาน Wordpress.com ใหคลกปม Next Step จะเขาสสวนการเลอกรปแบบหนาเวบ หรอ Theme
รปท 10 จอภาพการเลอกรปแบบหนาเวบ
ในสวนการท างานเบองตนกบ Wordpress.com ขอแนะน าใหเลอกรปแบบหนาเวบเปน Twenty Eleven แลวคลกปม Next Step
รปท 11 การสมครสมาชก Wordpress.com เสรจสมบรณ
จากรปท 11 การสมครสมาชก Wordpress.com เสรจสมบรณ ใหคลกปม Finish
8 การออกแบบพฒนาเวบไซตรปแบบ Blog ดวย Wordpress
เมอการลงทะเบยนเปนสมาชก Wordpress.com เสรจสมบรณ สามารถเขาสเวบไซตไดโดยพมพทอยเวบ ดงน
http://ชอเวบ.wordpress.com
ทงนใหน าชอเวบทระบในขนตอนการลงทะเบยนมาใสหนา .wordpress.com เชน
http://mongkolaroonpiboon.wordpress.com/
จะปรากฏหนาเวบ ดงน
รปท 12 ตวอยางหนาเวบของ Wordpress.com
หนาตาของเวบอาจจะแตกตางกนไปจากภาพได
9 การออกแบบพฒนาเวบไซตรปแบบ Blog ดวย Wordpress
จอภาพการท างานของเวบไซต
เวบไซตทลงทะเบยนไวแลว จะมจอภาพการท างาน 3 โหมด ดงน
จอภาพโหมดผใช
จอภาพโหมดผใช จะเปนจอภาพททกคนสามารถเหนเนอหาเวบ โดยมลกษณะจอภาพแบบเดยวกบรปท 12
จอภาพโหมดผดแลเวบ
จอภาพโหมดผดแลเวบ ท าหนาทสราง Blog ใหม หรอการสลบการท างานกบ Blog ทมอย โดยมลกษณะจอภาพ ดงน
รปท 13 จอภาพโหมดผดแลเวบ
จอภาพโหมดบรหารจดการเนอหาเวบ
จอภาพโหมดบรหารจดการเนอหาเวบ จะเปนจอภาพทแสดงปมเครองมอบรหารจดการเวบ และเนอหาเวบ ซงเฉพาะผดแลเวบเทานนทเขาถงได มลกษณะจอภาพ ดงน
รปท 14 จอภาพโหมดบรหารจดการเนอหาเวบ
10 การออกแบบพฒนาเวบไซตรปแบบ Blog ดวย Wordpress
หากมการปดเบราวเซอร หรอปดเครองคอมพวเตอร อาจจะสงผลใหระบบ Log out อตโนมต การเขาสระบบใหม ท าไดโดยการเขาเวบไซต wordpress.com จากนนปอน Username และ Password ทก าหนดในขนตอนการลงทะเบยน
การสลบโหมดการท างาน
การสลบโหมดการท างาน สามารถท าไดโดยการน าเมาสไปคลกทชอบญชผดแลเวบ หรอไอคอนภาพผดแลเวบ ทปรากฏมมบนขวาของหนาตางเวบ ดงรปท 15
รปท 15 ไอคอนผดแลเวบ
จะปรากฏชอเวบ (ตวอยางคอ Courseware2u) จะเปนการเขาสโหมดบรหารจดการเนอหาเวบ และในโหมดบรหารจดการเนอหาเวบ จะมค าสงยอยจากการคลก ดงน
รปท 16 ค าสงเขาสโหมดผดแลเวบ (Manage My Blogs)
11 การออกแบบพฒนาเวบไซตรปแบบ Blog ดวย Wordpress
การปรบแตงภาษาของระบบเวบไซต
เพอใหการใชงาน Wordpress.com เปนไปสะดวกกบเอกสารฉบบน จงขอปรบระบบภาษาในการตดตอกบระบบใหเปน “ภาษาไทย” กอน โดยเรมจากการคลกท “บญชชอผดแลเวบ – Username” ทปรากฏมมบนขวาของจอภาพ
รปท 17 บญชชอผดแลเวบ – Username
จะปรากฏจอภาพปรบแตงการท างานของผใชดงน
รปท 18 จอภาพปรบแตงการท างานของผใช
เลอกระบบภาษาของเวบจากรายการ Interface Language เปน “TH ไทย” แลวคลกปม Save Change จากนนกลบไปสโหมดการบรหารจดการเนอหาเวบ โดยคลกท “บญชหรอไอคอนผดแลเวบ” แลวคลกทชอเวบ
รปท 19 บญชหรอไอคอนผดแลเวบ
12 การออกแบบพฒนาเวบไซตรปแบบ Blog ดวย Wordpress
จอภาพโหมดบรหารจดการเนอหาเวบ จะแสดงภาษาของระบบตดตอเพอการท างานเปน “ภาษาไทย” ดงน
รปท 20 จอภาพโหมดบรหารจดการเนอหาเวบทมระบบตดตอเปนภาษาไทย
13 การออกแบบพฒนาเวบไซตรปแบบ Blog ดวย Wordpress
การปรบแตงเวบไซตกอนใชงาน
กอนใชงานเวบ ควรปรบแตงเวบใหเหมาะสมกอน โดยเรมจากการเขาไปยงโหมดบรหารจดการเนอหาเวบตามรปท 20 จากนนคลกเลอกค าสง “ตงคา” จากเมนทปรากฏดานซายของจอภาพ
รปท 21 จอภาพการก าหนดคาเวบไซต
ค าสงในเมน “ตงคา” ทควรด าเนนการปรบแตง ไดแก
หวขอเวบ หวขอเวบ หรอ Blog Title เปนชอเวบไซต สามารถระบไดทงชอภาษาไทย และชอภาษาองกฤษ ทงนควรสอความหมายเกยวกบเนอหา เชน หากตองการสรางเวบสวนตว กอาจจะใชชอตนเอง หรอหากตองการสรางเวบหนวยงาน กน าชอหนวยงานมาก าหนดไดเชนกน
ค าโปรย ค าโปรย คอ Tagline ขอความสนๆ อธบายเกยวกบเวบ หรอสโลแกนของเวบ
14 การออกแบบพฒนาเวบไซตรปแบบ Blog ดวย Wordpress
อเมล eMail ทใชในการลงทะเบยน ซงระบบจะใชอเมลนเพอยนยน การท างานตางๆ เชน การเปลยนรหสผาน เปนตน กรณทมการแกไข eMail จะตองไปยนยนการปรบเปลยนดวยทกครง
เขตเวลา Timezone เลอกเขตเวลาของเมองทอยปจจบน โดยประเทศไทย ใชเขตเวลาเปน UTC+7
รปแบบวนท Date Format เลอกรปแบบการแสดงวนท รปแบบเวลา Time Format เลอกรปแบบการแสดงเวลา วนทเรมของสปดาห Week Starts On เลอกวนทเรมของสปดาห ภาษา Language โดยปกตจะควบคมจากระบบภาษาของบญชผใช
ไมตองปรบเปลยน รปหรอไอคอนประจ าบลอก
สามารถน าเขาภาพฟอรแมต JPG หรอ PNG เพอใชเปนภาพแทนเวบไซต ส าหรบการแสดงผลผานเวบ wordpress.com
เมอปรบแตงคาของระบบเวบไซตแลว ใหคลกปม “บนทกการเปลยนแปลง”
15 การออกแบบพฒนาเวบไซตรปแบบ Blog ดวย Wordpress
เนอหาเวบ
เวบไซตรปแบบ Blog จาก Wordpress.com จะแบงเนอหาเปน 2 ประเภท ไดแก
เนอหา Dynamic ซงกคอเนอหาทก าหนดใหแสดงผลตามวนทเวลาทเผยแพร เนอหาใหมจะถกแสดงไวบนสด เรยกวา Post หรอ “เรอง”
เนอหา Static ทเปนเนอหาทนง ไมคอยปรบเปลยน มกจะแสดงในรปแบบเมน เรยกวา Page หรอ “หนา”
รปท 22 ตวอยางเนอหาทน าเสนอของ Wordpress
การท างานกบเนอหา Static
โดยปกตเนอหา Static จะแสดงผลในรปแบบเมน ซงในเวบทสรางดวย Wordpress.com จะมเนอหาตงตนให 1 เนอหา ชอ About โดยเนอหานมกจะใชในการแนะน าเวบไซตวาเปนเวบเกยวกบอะไร มวตถประสงคใดนนเอง
การท างานกบเนอหาแบบ Static กคอการท างานกบเมนค าสง “หนา” หรอ Page ซงจะมค าสงทเกยวของ ดงน
เนอหาแบบ Static ในรปแบบเมน
เนอหาแบบ Dynamic
16 การออกแบบพฒนาเวบไซตรปแบบ Blog ดวย Wordpress
รปท 23 การท างานกบเมนค าสง “หนา”
จากรปท 23 แสดงวามการสราง “หนา” เนอหาไว 1 หนาชอ About ซงสามารถปรบแกไขไดโดยการคลกทชอหนาดงกลาว หรอน าเมาสชคางไวทชอ “หนา” เพอแสดงค าสงยอยในการจดการหนาเนอหา ดงน
รปท 24 ค าสงยอยในการจดการหนาเนอหา
ค าสงยอยในการจดการหนาเนอหาประกอบดวย
ค าสง “แกไข” เพอเขาไปแกไขเนอหา ค าสง “แกไขอยางรวดเรว” เพอเขาสโหมดการแกไขเนอหา ค าสง “ถงขยะ” เพอลบหนาทเลอก ค าสง “ด” เพอแสดงผลหนาในโหมดผใช
17 การออกแบบพฒนาเวบไซตรปแบบ Blog ดวย Wordpress
การแกไขหนาโดยคลกทชอหนาดงกลาว จะปรากฏจอภาพการท างาน ดงน
รปท 25 จอภาพการท างานกบเนอหาแบบ “หนา”
หวขอเนอหา หรอ Title เปนชอเรองของเนอหาทน าเสนอ ควรก าหนดใหสอถงเรองโดยคงความสน กระชบ
หวขอเนอหา (Title)
เนอหา
แถบเครองมอ สถานะการเผยแพรเนอหา
ล าดบการแสดงเนอหา/เมน
ลงกถาวร
18 การออกแบบพฒนาเวบไซตรปแบบ Blog ดวย Wordpress
ลงกถาวร หรอ Permalink เปนสวน URL ก ากบเนอหาแตละเนอหา ทงนกรณทก าหนด “หวขอเนอหา” ดวยภาษาไทย จะตองคลกปม “แกไข” ของลงกถาวรและก าหนดชอใหมทสอความหมายเดยวกบ “หวขอเนอหา” ดวยค าภาษาองกฤษตวพมพเลก ไมมชองวางก ากบแทน เชน เนอหาเกยวกบชองทางการตดตอสอบถามขอมลม ใชค าวา contact เปนตน
สถานะการเผยแพรเนอหา สามารถเลอกปรบปรงการเผยแพรเนอหาได ดงน
คณสมบตหนา เปนสวนควบคมการแสดงผล โดยเฉพาะรายการ “จดล าดบ” เปนสวน
ส าคญทใชควบคมล าดบการน าเสนอ เชน ใหหนาใดน าเสนอกอน เปนตน
การพมพเนอหาใชหลกการเดยวกบการพมพดวย Word โดยมปมเครองมอจดแตง ดงน
รปท 26 ป มเครองมอจดแตง
การคดลอก (Copy) เนอหาจาก Word หรอแหลงใดๆ ควรน าไปวาง (Paste) ใน NotePad เพอตดอกขระพเศษทเกยวกบการจดรปแบบออกกอน แลวจงคดลอกจาก NotePad มาวางในเวบ
คลกปมนเพอขยายเครองมอ
19 การออกแบบพฒนาเวบไซตรปแบบ Blog ดวย Wordpress
การน าเขารปภาพ
รปภาพทสามารถน าเขาไดควรมฟอรแมตเปน .jpg .png หรอ .gif โดยใชปมเครองมอ “เพมสอ” ปรากฏจอภาพเพมสอ ดงน
รปท 27 จอภาพเพมสอ
คลกลงก “อปโหลดไฟล” และปม “เลอกหลายไฟล” เพอเลอกโฟลเดอรและภาพทตองการน าเขา ภาพทถกเลอกจะถกน าเขาเวบ และแสดงขอมลก ากบภาพ ดงน
รปท 28 จอภาพแสดงภาพและขอมลก ากบภาพ
20 การออกแบบพฒนาเวบไซตรปแบบ Blog ดวย Wordpress
รายการส าคญทควรระบกอนคลก “ใสลงในหนา” กคอ “หวขอ” หรอ Title ของภาพโดยควรใสขอความทสอความหมายเกยวกบภาพ
รปท 29 ภาพทน ามาวางในหนา
การท างานกบภาพ เชน การปรบขนาด การลบภาพ ท าไดโดยคลกทภาพ จะปรากฏไอคอนท างานกบภาพ ดงน
รปท 30 ไอคอนท างานกบภาพ
21 การออกแบบพฒนาเวบไซตรปแบบ Blog ดวย Wordpress
ไอคอนรปวงกลมขดทบแทนการลบภาพออกจากหนา ไอคอนรปกรอบภาพ เพอไปแกไขการตงคาเกยวกบภาพโดยมจอภาพ ดงน
รปท 31 จอภาพปรบแตงภาพทเลอก
เมอพมพ/แกไขขอความ ตกแตงดวยภาพและบนทกดวยการคลกปม “อปเดต” หรอปม
“เผยแพร” แลว สามารถสลบไปโหมดผใชเพอตรวจสอบการแสดงผล โดยคลกทชอเวบทมมบนซาย
ของจอภาพ
รปท 32 การสลบไปโหมดผใช
22 การออกแบบพฒนาเวบไซตรปแบบ Blog ดวย Wordpress
Wordpress จะแสดงเมนดวยชอหนาทก าหนด ดงภาพ
รปท 33 จอภาพแสดงเมนจาก “หนา” ในโหมดผใช
การท างานกบเนอหา Dynamic
เนอหาอกรปแบบของ Wordpress กคอ เนอหาแบบ Dynamic ซงท างานผานเมน “เรอง” หรอ Post
รปท 34 เมน “เรอง” เพอจดการเนอหาแบบ Dynamic
เนอหานมลกษณะไมแตกตางจากเนอหา Static มากนก โดยจะเพมการท างานในสวน “หมวดหม – Category” และ “ปายก ากบ – Tag” เขามา จงมเมนยอยทใชบรหารจดการ “หมวดหม” และ “ปายก ากบ” ทงนจอภาพสราง/แกไขเนอหาแบบ “เรอง” มรายละเอยด ดงน
23 การออกแบบพฒนาเวบไซตรปแบบ Blog ดวย Wordpress
รปท 35 จอภาพการท างานกบ “เรอง”
การสรางเนอหารปแบบ “เรอง” จ าเปนตองก าหนดวา “เรอง” ดงกลาวอยใน “หมวดหม” ใด ทงนสามารถก าหนดไดมากกวา 1 หมวดหม รวมทงก าหนดหมวดหมยอยได เชน
เนอหาแสดงภาพกจกรรมการจดอบรมการใชงานโปรแกรม Wordpress.com อาจจะก าหนดใหอยในหมวดหม “ภาพกจกรรม” และหมวดหม “กจกรรมอบรมสมมนา”
เนอหาแนะน าหนงสอใหมประจ าเดอน มกราคม 2556 อาจจะก าหนดใหอยในหมวดหมยอย “มกราคม 2556” ภายใตหมวดหลก “หนงสอแนะน า”
24 การออกแบบพฒนาเวบไซตรปแบบ Blog ดวย Wordpress
รปท 36 การสรางหมวดหมหลก
รปท 37 การสรางหมวดหมยอย
นอกจากการก าหนดหมวดหม เนอหาในรปแบบ “เรอง” ยงควรก าหนด “ปายก ากบ” หรอ Tag ไวดวย โดยแตละเรองก าหนด “ปายก ากบ” ไดมากกวา 1 ค า แตละค าใหคนดวยเครองหมาย comma (,) ทงนการก าหนด “ปายก ากบ” ควรใชค าทสอถงเนอหาใหครบถวน
1 2
3
1 2
3 4
25 การออกแบบพฒนาเวบไซตรปแบบ Blog ดวย Wordpress
รปท 38 สวนการท างาน “ปายก ากบ”
จากรปท 38 โปรแกรม Wordpress.com จะแนะน า “ปายก ากบ” เบองตนใหกอน หากปายก ากบใดตรง “ใจ” สามารถคลกเลอกได เชน หนงสอเลมนจดพมพโดยส านกพมพ McGraw-Hill กคลกเลอกปายก ากบ “McGraw-Hill” เปนตน และยงสามารถพมพเพมไดตามตองการ เชน
รปท 39 สวนการท างาน “ปายก ากบ”
นอกจากนควรก าหนดคา “ลงกถาวร” ใหสอความหมายดวยค าภาษาองกฤษ ไมมชองวางดวย
รปท 40 ลงกถาวร
ปายก ากบทใสไวแลว คลกปม x เพอลบ หากไมตองการ
26 การออกแบบพฒนาเวบไซตรปแบบ Blog ดวย Wordpress
เมอเผยแพรเนอหา จะแสดงผลในหนาเวบ ดงน
รปท 41 การแสดงเนอหาแบบ “เรอง”
การสรางคลงภาพ
นอกจากการน าเสนอเนอหาพรอมภาพประกอบ ยงสามารถประยกตใช Wordpress.com เปนคลงภาพไดดวย โดยใหเตรยมภาพทตองการเปนชดโฟลเดอรเฉพาะ และควรลดขนาดภาพใหเหมาะสมกอนน ามาใชงาน
จากนนเขาสโหมด “การสรางเรองใหม” ปอนหวขอเนอหาและเนอหา ก าหนดหมวดหม ปายก ากบ แลวเรมน าเขาภาพโดยปม “เพมสอ” คลกเลอกค าสงยอย “สรางคลงรปภาพ”
27 การออกแบบพฒนาเวบไซตรปแบบ Blog ดวย Wordpress
รปท 42 ค าสงเพมสอในโหมด “สรางคลงรปภาพ”
จากนนคลกค าสง “อปโหลดไฟล” เลอกภาพทตองการจากโฟลเดอรทก าหนด โดยสามารถเลอกภาพไดมากกวา 1 ภาพ รอจนกวาภาพถกน าเขาระบบ ซงภาพทเลอกน าเขาจะมเครองหมายถกก ากบทมมขวาของแตละภาพ (สามารถคลกยกเลกการเลอกได) จากนนปอนชอชดภาพในรายการ “หวขอ” แลวคลกปม “สรางคลงภาพใหม”
รปท 43 ค าสงสรางคลงรปภาพ
จะปรากฏจอภาพก าหนดรปแบบการแสดงคลงภาพ โดยรายการส าคญคอ จ านวนคอลมนทใหแสดงภาพ และชนดการแสดงภาพ
28 การออกแบบพฒนาเวบไซตรปแบบ Blog ดวย Wordpress
รปท 44 จอภาพก าหนดรปแบบการแสดงคลงภาพ
เมอก าหนดรปแบบการแสดงคลงภาพแลวคลกปม “ใสคลงภาพ” จะปรากฏผล ดงน
รปท 45 จอภาพโหมดท างานกบคลงภาพ
29 การออกแบบพฒนาเวบไซตรปแบบ Blog ดวย Wordpress
คลกปมเผยแพรเพอบนทกและเผยแพรเนอหา และเขาสโหมดผใชเพอแสดงผล
รปท 46 ตวอยางคลงภาพแบบ Circle และ Thumbnails
30 การออกแบบพฒนาเวบไซตรปแบบ Blog ดวย Wordpress
การสราง Poll
Wordpress.com ยงไดเตรยมสวนการออกแบบ Poll เพอใชส ารวจความคดเหนในเรองตางๆ ตามความตองการของผใช โดยใชหลกการเดยวกบการสราง “เรอง” เพยงแตใชปมเครองมอ Add Poll
รปท 47 เรมตนการสราง Poll ขนท 1
จากรปท 47 ใหคลกเลอกรายการ Auto-create a new account แลวคลกปม Do it I want some polls!
รปท 48 เรมตนการสราง Poll ขนท 2
คลกปม Create a Poll Now เพอเขาสจอภาพปอนค าถาม ตวเลอก และรปแบบ Poll
31 การออกแบบพฒนาเวบไซตรปแบบ Blog ดวย Wordpress
รปท 49 จอภาพปอนค าถาม ตวเลอก และรปแบบ Poll
ปอนค าถามในรายการ New Poll และตวเลอกในรายการ Answers โดยสามารถเพมตวเลอกไดจากการคลกปม Add New Answer เลอกรปแบบจากรายการ Poll Style จากนนคลกปม Save Poll
รปท 50 ตวอยางการปอนค าถาม และตวเลอก
Poll ทบนทกแลว จะปรากฏปม Embed in Post ใหคลกปมดงกลาว เพอน า Poll ไปรวมกบเนอหาทสรางไวกอนหนา
32 การออกแบบพฒนาเวบไซตรปแบบ Blog ดวย Wordpress
รปท 51 ป ม Embed in Post
Poll ทสรางและถกน าเขารวมกบเนอหา จะถกตองดวย Short code ในรปแบบดงภาพ
รปท 52 Short code ของ Poll
เมอบนทกและแสดงผล จะปรากฏผลลพธ ดงน
33 การออกแบบพฒนาเวบไซตรปแบบ Blog ดวย Wordpress
รปท 53 Poll ทสราง
รปท 54 การแสดงผลลพธจากการใชงาน Poll
34 การออกแบบพฒนาเวบไซตรปแบบ Blog ดวย Wordpress
การบรหารจดการเนอหา
เนอหาทน าเขาระบบ สามารถบรหารจดการไดโดยการเลอกเมน “เรอง” ซงจะแสดงรายการเนอหา ดงน
รปท 55 การบรหารจดการเนอหา
สามารถน าเมาสชทชอเรองแตละเรอง เพอเลอกค าสงจดการเนอหา ดงน
รปท 56 ค าสงจดการเนอหา
หรอคลกในชอง Check box ของแตละชอเรองเพอจดการเนอหาพรอมกน
รปท 57 ค าสงจดการเนอหาแบบชด
35 การออกแบบพฒนาเวบไซตรปแบบ Blog ดวย Wordpress
การปรบแตงจอภาพหนาเวบ
หนาเวบของ Wordpress.com ถกควบคมดวยการท างานทเรยกวา Themes ซงจะมการจดวางองคประกอบทแตกตางกนออกไป การตรวจสอบวาขณะนเลอกใช Theme ใด ท าไดโดยเลอกเมนค าสง “รปแบบบลอก”
รปท 58 ค าสงปรบแตงจอภาพหนาเวบ
จากรปท 58 แสดงวาก าลงใชงาน Theme ทชอ Twenty Eleven ซงสามารถเขาไปปรบแตงแกไขไดโดยคลกปม “ปรบแตง”
รปท 59 ค าสงปรบแตง Theme
36 การออกแบบพฒนาเวบไซตรปแบบ Blog ดวย Wordpress
นอกจากนยงสามารถน าภาพทออกแบบไวมาใชเปนภาพสวนหวของเวบแทนภาพทระบบจดเตรยมให โดยเลอกเมนค าสงยอย “สวนหว”
รปท 60 การปรบแตงภาพสวนหวของเวบ
Widgets
นอกจากรปแบบหนาเวบ Wordpress.com ยงเตรยมสวนการท างานทเรยกวา Widgets ซงเปนพนทเลกๆ ทถกออกแบบมาเพอท างานและแสดงผลงานใดงานหนงโดยเฉพาะ เชน พนทชองสบคน เรยกวา Search Widget พนทแสดงปฏทน เรยกวา Calendar Widget เปนตน
รปท 61 Widgets
Widgets พนฐาน 2 Widgets
37 การออกแบบพฒนาเวบไซตรปแบบ Blog ดวย Wordpress
จากรปท 61 แสดง Widgets พนฐาน 2 Widgets คอ “คลงเกบ” ซงเปน Widget ทแสดงเดอน/ปทมการเผยแพรเนอหา และ “Meta” ซงเปน Widget แสดงค าสงควบคมระบบ ทงนสามารถเพม/ลบ Widgets ไดโดยเลอกเมนค าสงยอย “Widgets”
รปท 62 ค าสงควบคม Widgets
การท างานเรมจากการเลอก Widget ทตองการจากตวเลอก “Widgets ทใชงานได” แลวกดเมาสคางไวลาก Widget ดงกลาวมาวางในกลอง “ดานขางหลก”
รปท 63 การเลอก Widgets
38 การออกแบบพฒนาเวบไซตรปแบบ Blog ดวย Wordpress
จากรปท 63 จะปรากฏผลบนหนาเวบ ดงน
รปท 64 การแสดง Widgets ตางๆ ทเลอก
39 การออกแบบพฒนาเวบไซตรปแบบ Blog ดวย Wordpress
สาระนารเกยวกบเวบไซตรปแบบ Blog
ความหมายของ Blog
Blog เปนค าผสมของค าวา Web และ Log โดย Log จะหมายถงการจดบนทก รวมทงปมหรอเวลา ดงนน Blog จงเปนรปแบบการจดบนทกเนอหาผานเวบไซต ทอนญาตใหผอานแสดงความคดเหนประกอบเนอหาของเราได ลกษณะจะคลายๆ กบ Web board แตโดยมาก Blog จะมเนอหาเฉพาะมากกวา Web board และจดเดนของ Blog กคอเนอหาทบนทกจะควบคมการแสดงผลดวยวนท/เวลาทเผยแพร
ดงนน Blog จงมลกษณะแตกตางจากเวบไซตทวไป หรอเวบไซตในกลม CMS (Content Management System) คอ Blog จะแสดงผลเนอหาลาสดไวบนสด และมความสามารถจดกลมเนอหาตามเวลาเรยกวา Archives ในขณะทเวบทวไปหรอเวบในกลม CMS ผสราง/ผพฒนาสามารถก าหนดต าแหนงการแสดงผลเนอหาไดอสระกวา และเนนการจดกลมตามหมวดเนอหา
ทงนสามารถสรปลกษณะเฉพาะของ Blog ไดดงน
Blog ยดการแสดงผลตามล าดบเหตการณ (chronological) บทความทกบทความใชวนทสราง หรอวนทเผยแพรเปนเครองมอก ากบและบรหารจดการ Blog ใชความสามารถน าทาง (Navigation) นอยกวาเวบทวไป
การสราง Blog ไมใชเรองยาก ปจจบนมทงบรการฟรบนเวบ เชนเวบไซต http://blogger.com หรอ http://blog.com รวมทง http://wordpress.com ทอนญาตใหผสนใจสมครสมาชกและสราง blog สวนตวได รวมทงมซอฟตแวรสราง blog ในกลม Open Source เชน http://wordpress.org ทอนญาตใหดาวนโหลดโปรแกรมมาตดตงทเครองของเราเองเพอสราง blog ไดตามตองการ ส าหรบทานทสนใจสราง Blog สามารถศกษารายละเอยดเพมเตมไดจากเวบไซต http://www.weblogmatrix.org/ โดยเลอกซอฟตแวรทตองการและเปรยบเทยบความสามารถใหเหมาะสมกบความตองการ
รปท 65 เวบชวยเหลอการเลอกซอฟตแวร
40 การออกแบบพฒนาเวบไซตรปแบบ Blog ดวย Wordpress
รปท 66 การเปรยบเทยบความสามารถของซอฟตแวร
เทคนคการเขยน Blog
กระแสการใช Blog ไดรบความนยมอยางตอเนอง แตกยงมค าถามวาจะเรมตนเขยนอยางไร รวมถงค าถามของผเขยนทเขยนอยแลววาจะมเทคนคอยางไรทเหมาะสมในการเขยนและน าเสนอเนอหาผาน Blog ขออนญาตแชรจากเอกสารทศกษา และจากการศกษาเกยวกบเทคโนโลย ดงน
ดวา Blog ทเขารวมเปนสมาชกมรปแบบการน าเสนอเนอหาแนวใด กเขยนแนวนน เขยนแบบสบายๆ ไมตองซเรยส เพราะ Blog ออกแบบมาใหเขยนไดงายๆ เนนเรองเลา
สบายๆ การเขยนโดยใชเรองเลาจากประสบการณของผเขยน จะไดรบความนาสนใจมากกวาเขยนโดยลอกจากเนอหาผอน (แถมยงเสยงตอการฟองรองอกดวยนะครบ) หากจ าเปนตองเขยนโดยน าเนอหา และ/หรอภาพ สอจากแหลงอน ควรอางองดวยทกครง
เขยนสนๆ พอประมาณ ไมตองมากเกนไป แตควรใหจบในตอน หากมเนอหาเยอะแนะน าใหแบงเปนตอนสนๆ
ระวงการน าเนอหา ภาพ สอทละเมดลขสทธมาเผยแพร ควรสรางสรรคเอง และ/หรอเลอกใชสอประกอบ Blog ทใหสทธการใชอยางเชน CreativeCommons, Public Domain … ภาพทปลอดภยเลอกไดจาก www.openclipart.org เปนตน
ใชเทคนคการแบงเนอหา … read more… โดยเนอหาสวนแรก พารากราฟแรกของ Blog ควรเปนขอความน าทดงดดความสนใจใหตดตามเนอหาหลก
ก าหนด Category และ Tag ใหเหมาะสมตามเนอหาทน าเสนอ สรางมลคาเพมใหเนอหา โดยการท าลงกไปยงเนอหาทเกยวของได ใชความสามารถของการฝงสอมลตมเดยผสมผสานกบการเขยนเนอหา โดยน า Video จาก
Youtube, iPaper&iSlide จาก SlideShare มาแสดงรวมกบเนอหาขอความ อยาเรงเขยนกระหน าผาน Blog ในแตละวนจนลนการแสดงผลจอภาพ เพราะผอานจะไม
เขาไปคลกอานเรองในหนาถดไป ควรจ ากดการเขยนในแตละวนใหเหมาะสม
41 การออกแบบพฒนาเวบไซตรปแบบ Blog ดวย Wordpress
กรณทใชเครองมอทสนบสนน SEO/SEF URL ควรก าหนด permalink ของ Post ใน Blog ใหสอความหมาย … ใชชอก ากบเปนภาษาองกฤษทสอความหมาย
Category & Tag ใน Blog
เวบในรปแบบ Blog นบวาเปนเวบทไดรบความนยมสงมากในปจจบน โดยเวบลกษณะนมจดเดนหลายประการ เชน
เปนมตรทดกบ Search Engine รวมทง Blog Search Engine เชน Technorai สงผลใหเนอหาทน าเสนอผาน Blog สามารถสบคนไดเรวกวาเวบปกต
มรปแบบการเขาถงเนอหาไดหลายลกษณะ o การจดกลมเนอหาตามเดอนป แสดงผลดวย Archives หรอปฏทน โดยยดจาก
วนท/เวลาเผยแพรเอกสาร o การเขาถงผานหมวดหม (Category) o การเขาถงผาน Tag Cloud ทน าเอา Tag มาแสดงผล o การเขาถงดวยชองสบคน o การเขาถงดวยการคลกลงกทมเนอหาสมพนธ o การเขาถงโดยการเบราวเนอหาโดยผใช
การสรางเนอหา การก าหนดหมวดหม และ Tag ใหอสระกบผสรางสรรค โดยละกฎเกณฑตางๆ หรอลดกฎเกณฑตางๆ ลงกวาการพฒนาเวบทผาน
โดยประเดนใหญทมกจะพดถงนอกจากรปแบบเนอหาทใหอสระกบเขยน กคอ การก าหนดหมวดหม Tag รวมทงประเดนระหวาง Tag และค าส าคญ (Keyword)
Categories และ Tags ถกสรางขนเพอผเขาชมเวบ ไมใชเพอ Search Engine (อยางเดยว) Categories และ Tags เปนเครองมอในการน าทาง การจดเรยงเนอหา การจดกลมเนอหา
และการสรางความสมพนธของเนอหา เพอชวยใหผอานเขาถงเนอหาทเกยวของไดสะดวก Categories และ Tags ตองถกใชงานไดงาย ค าทใชจงไมตองหรหรา Categories เปรยบเสมอนสารบญในการเขาถงเนอหาของเวบ และชวยบงชวาในเวบม
เนอหากลมใด Categories จะตองเปนเปนค าทเฉพาะเจาะจงมากพอทจะชวยใหผเขาชมเขาใจเนอหา
ภายใน ไมกวางเกนไปหรอแคบเกนไป หรอคลมเครอ Tags เปนค าทใชเพอท าดชนค าคนของเวบ Tags เปนค าทมความหมายเพยงพอในตวเอง เกยวของกบบทความ ชวยในการจดหมวดหม
ระดบเนอหาของเวบ
42 การออกแบบพฒนาเวบไซตรปแบบ Blog ดวย Wordpress
Tags ถกใชเปนดชนค าผาน Blog Search Engine เชน Technorati
ค าแนะน าการก าหนดหมวดหม
ค าทใชจดหมวดหม ควรเปนค าทเฉพาะเจาะจงมากพอทจะชวยใหผเขาชมเขาใจเนอหาภายใน ไมกวางเกนไปหรอแคบเกนไป หรอคลมเครอ
โดยค าดงกลาวจะตองชวยใหเวบ Blog มโครงสรางทชดเจน เขาถงเนอหาไดงาย หากมการก าหนด Tag ใหกบบทความมากกวา 5 บทความ สามารถก าหนด Tag ดงกลาวให
เปนหมวดหมใหมได บทความหนงบทความสามารถก าหนดหมวดหมไดมากกวา 1 หมวด
ค าแนะน าการก าหนด Tag
ค าเฉพาะในบทความ ควรน ามาก าหนดเปน Tag เชน ชอบคคล, ชอสถานท, ชอหนวยงาน .. อนเปนหลกการเดยวกบการก าหนดแนะน า Tag ผานเครองมอ Tag Suggestion (Semantic technology)
ชอหมวดหม สามารถใชเปน Tag ได โดยขนอยกบความเกยวของทางเทคโนโลยเปนประเดนหลก คอ หากบทความใดตองการสงคาของหมวดหมไปยง Blog Search Engine ใหน าชอหมวดหมมาก าหนดเปน Tag
ค าอนๆ ในบทความทใหความหมายได สามารถน ามาก าหนดเปน Tag ได ค าในกลม Taxonomy ทเกยวของกบเนอหาสามารถน ามาใชเปน Tag ได เชน สาขาวชา,
ประเภทเพลง/การแสดง