การเขียนเว็บไซต์ CMS1

45 บทที 8 ตังคา่ เรมิ ตน้ ใช้งาน WordPress หากคณุ จะเรมิ ตน้ สรา้ งเว็บดว้ ย WordPress ได้ คณุ ตอ้ งเตรียมสงิ ต่าง ๆ ดงั นีใหพ้ รอ้ มครบั x Domain (ชือเว็บไซต)์ x Hosting (ทตี งั เว็บไซต)์ x ติดตงั WordPress ลงบนโดเมน หากยงั ไมไ่ ดท้ าํ สามสงิ นี ใหก้ ลบั ไปดเู นือหาทบี ทเรียนนกี ่อนครบั ใสป่ ่มุ กลบั ไปหนา้ สอน WordPress **หมายเหตุ สาํ หรบั นกั เรียนทุกคนทีรอควิ เรยี นรอบสอนสดกบั ผม หากคณุ อยากลองฝึกทาํ เว็บดว้ ยตนเองไปก่อน เพือ ความง่ายของการทาํ ตามบทเรยี นต่างๆ ผมแนะนาํ ใหค้ ณุ ทาํ ดงั นีครบั x จดโดเมน จดทไี หนกไ็ ด้ แต่หากใครยงั ไม่ไดจ้ ดโดเมนผมแนะนาํ ใหม้ าจดที Hostatom x เช่าโฮส จดุ นบี งั คบั เลย ถา้ จะตามสงิ ทผี มสอนได้ ตอ้ งมาเช่าโฮสที Hosatom เทา่ นนั ครบั x การติดตงั WordPress ทโี ดเมนหลกั หรือบน Subdomain รวมถึงการทาํ HTTPS ฟรี ใหค้ ณุ แจง้ ทาง Hostatom ทาํ แทนไดเ้ ลย (จดุ นเี ขาบริการใหฟ้ รี) ทางเขา้ สาํ หรบั การจดโดเมนและเชา่ โฮส คลิกทนี ีครบั : Hostatom เมอื ทกุ อยา่ งพรอ้ มแลว้ เรมิ ตน้ เรยี นรูต้ าม คมู่ ือสอนใช้ WordPress 2020 ชดุ นกี นั ไดเ้ ลยครบั ผม หัวขอ้ เกยี วกบั การตงั คา่ WordPress x การเขา้ สรู่ ะบบ/ออกจากระบบ x ตดิ ตงั ปลกั อิน classic editor x เปลียนมาใชธ้ ีมฝึกซอ้ ม Twenty Seventeen x ตงั คา่ General Settings x ตงั ค่าภาษาหลงั บา้ น x ตงั คา่ Permalink x ปิดไมใ่ ห้ Google เขา้ มาเกบ็ ขอ้ มลู (บนเวบ็ ฝึกซอ้ ม)

46 ) วิธเี ข้าสรู่ ะบบหลังบา้ น WordPress (Dashboard) เราจะเขา้ ไปแกเ้ นือหาไดเ้ ราตอ้ งเรมิ ตน้ จากการ login เขา้ สหู่ ลงั บา้ น มีวธิ ีการทาํ ดงั นีครบั การเขา้ หลงั บา้ น WordPress ใหพ้ ิมพ์ /wp-admin ต่อทา้ ยชอื โดเมน ตวั อย่าง https://padveedigital.com/wp-admin ระบบก็จะพาเราเขา้ สหู่ ลงั บา้ น WordPress ซงึ มหี นา้ ตาดงั รูปนคี รบั

47 วิธีการกลบั สหู่ นา้ บา้ นเว็บ ใหเ้ ราคลกิ ทรี ูปสญั ลกั ษณบ์ า้ นครบั การออกจากระบบ WordPress ดทู ีมมุ ขวามือ เอาเมาสไ์ ปชี แลว้ จะเจอคาํ สงั Logout ) ตดิ ตังปลักอิน classic editor เนืองจากชว่ งเดือนธนั วาคมทผี ่านมา WordPress เวอรช์ นั 5.0 มีการเปลียนแปลงทสี าํ คญั คือเปลียน Editor (เครืองมอื สาํ หรบั การเขียนขอ้ มลู ) จากเวอรช์ นั เก่าทเี ป็น Classic Editor มาเป็น Gutenberg ซงึ ทาํ ใหก้ ารใชง้ านเปลยี นไปทงั หมด

48 เนืองจากบทความนเี ขียนไวก้ ่อนทจี ะมีตวั Gutenberg ดงั นนั หากคณุ กาํ ลงั จะลองฝึกใชง้ าน WordPress และใหส้ ามารถใชง้ านตามค่มู อื ในบทความนไี ด้ ผมแนะนาํ ใหค้ ณุ ลงปลกั อิน Classic editor ก่อนครบั ผม วิธตี ดิ ตังปลักอนิ Classic editor 1.ใหเ้ ขา้ หลงั บา้ นคลกิ Plugin > Add New > คน้ หาปลกั อนิ ชือ Classic Editor > คลิก Install และ Activate เปิดใชง้ านปลกั อินใหเ้ รยี บรอ้ ยครบั

49 ) เปลยี นมาใชธ้ มี Twenty Seventeen สาํ หรบั ธีมทีตดิ มากบั WordPress . คือธีม Twenty Twenty แตส่ าํ หรบั บทความนีผมขอใชธ้ ีม Twenty Seventeen ในการเขียนเป็นคมู่ อื ครบั เนอื งจากผมคนุ้ เคยกบั ธีมเวอรช์ นั เก่ามากกว่าธีมตวั ใหมล่ า่ สดุ นนั เอง วิธีการเปลียนธมี คลกิ Appearance > Themes > คลิก Activate ธีม Twenty Seventeen หลงั จากทาํ ตาม 2 ขนั ตอนนเี สรจ็ แลว้ คณุ ก็จะสามารถเรียนรูแ้ ละทาํ ตาม ค่มู อื สอนตงั คา่ WordPress ใน บทความนไี ดแ้ ลว้ ครบั ผม ) ตังค่า General Settings หากมองวา่ WordPress คอื โปรแกรม ดงั นนั ก่อนทีคณุ จะใชง้ านเขาใหม้ ีประสทิ ธิภาพ เราตอ้ งมาเซ็ตค่า เรมิ ตน้ กนั สกั เล็กนอ้ ยตามนีครบั

50 General Setting ดทู เี มนดู า้ นซา้ ย ไปที Settings > คลิก General

51 การตงั คา่ General Setting ทสี าํ คญั มดี งั นี x Site Title: ใสช่ ือเว็บ หรือชือ Brand ลงไป x Tagline: เขียนคาํ อธิบายสนั ๆ เกียวกบั ธุรกิจหรือรา้ นคา้ ของเรา x Email Address: ใสอ่ เี มลทีใชง้ านจรงิ x Site Language: เลือก ไทย (การแสดงภาษาทหี นา้ บา้ น Frontpage) x Time zone: เลือกโซนเวลา เมืองไทยใหเ้ ลือกเป็น UTC+7 x Date Format: เลอื กแบบ วนั /เดอื น/ปี x Week Starts On: วนั เรมิ ตน้ สปั ดาห์ ใหเ้ ลือกเป็น วนั อาทิตยค์ รบั ตงั ค่าทกุ อย่างเสรจ็ ใหค้ ลิก save change ) ตังค่าภาษาหลังบา้ น หลงั จากเรากด save change พวกแถบเมนจู ะเปลียนเป็นภาษาไทยตามทเี ราเลือกไวท้ ี Site Language

52 แต่หากเราตอ้ งการใชง้ าน WordPress ใหเ้ ป็นสากล เราควรทาํ ใหแ้ ถบเมนหู ลงั บา้ น (Dashboard) เป็น ภาษาองั กฤษ แตใ่ หเ้ ป็นภาษาไทยเฉพาะหนา้ บา้ นจะดีกว่า ชอื เรียกฟังชนั ตา่ ง ๆ มนั จะไดเ้ ป็นสากล ติดขดั อะไรไปเสรจิ หาบน google จะเจอคาํ ตอบไดง้ า่ ยกว่าครบั วิธีการเปลียนภาษาเมนูบนหนา้ ควบคมุ ใหเ้ ราไปเปลียนทีสว่ นของ ผใู้ ช้ (User) แลว้ คลิก แกไ้ ข ตรงชอื user ตรงภาษา ใหเ้ ลอื กเป็น English (ตรงจดุ นี คอื การเปลียนเฉพาะภาษาของแถบเมนหู ลงั บา้ นเท่านนั ) คลิก อปั เดทขอ้ มลู สว่ นตวั ใหเ้ รยี บรอ้ ยดว้ ยครบั 6) Permalink Settings (ตงั ค่าลิงคถ์ าวร) Permalink Settings คือ การกาํ หนดการแสดงผลของ URL วา่ ตอ้ งการแบบไหน เช่น เป็นตวั เลข, เป็นวนั ที, หรอื เป็นขอ้ ความ แนะนาํ ใหต้ งั คา่ ตามนีครบั ไปที Settings > Permalink แลว้ ใหต้ ิกทชี อ่ ง Post name ตามรูปเลยครบั

53 7) ปิ ดไมใ่ ห้ Google เข้ามาเก็บข้อมลู (บนเวบ็ ฝึ กซ้อม) หากเรากาํ ลงั ฝึกซอ้ มเว็บบน Subdomain หรือกาํ ลงั ทาํ บน Domain จรงิ หากเว็บทเี รากาํ ลงั ทาํ อย่นู นั ยงั ไม่ เรียบรอ้ ย เราตอ้ งเปิดคาํ สงั ไม่ให้ Google เขา้ มาเกบ็ ขอ้ มลู เพราะเว็บทยี งั ทาํ ไม่เสรจ็ ยงั ตอ้ งมกี ารแกไ้ ข เนอื หาอีกหลายอยา่ ง เราจะไดไ้ มเ่ สียคะแนนดา้ น SEO วิธกี ารทาํ Noindex ทังเวบ็ การปิดไม่ให้ Google เขา้ มาเก็บขอ้ มลู เราเรยี กกนั ว่าการทาํ Noindex นนั เอง ไปที settings > reading > ตกิ เลอื ก Discourage search engines from indexing this site สาํ หรบั การตงั คา่ เรมิ ตน้ ใชง้ านพืนฐานกม็ เี พยี งเทา่ นีครบั ดบู ทเรียนนีบน YouTube: https://youtu.be/qPIt1tPxUpc

54 บทที 9 การเพมิ เนือหาบนเว็บ (ใชง้ าน Page/Post) เวบ็ ไซต์ 1 เว็บ เกิดจากการประกอบกนั ของเนอื หา หลายๆ หนา้ หนา้ เว็บ 1หนา้ ก็เหมือนกระดาษ 1 แผน่ ที เราจะเขยี นขอ้ มลู อะไรลงไปกไ็ ด้ แตห่ นา้ เว็บทใี ชส้ าํ หรบั การเพมิ เนอื หานนั มีอย่ดู ว้ ยกนั 2 ประเภทหลกั คอื Page (หนา้ ) กบั Post (เรอื ง) ซงึ การทเี ราจะเพิมขอ้ มลู ไดถ้ กู ตอ้ ง วา่ หนา้ ไหนควรเป็น Page หรอื หนา้ ไหน ควรเป็น Post เราตอ้ งเขา้ ใจความแตกตา่ งของ Page กบั Post ใหไ้ ดก้ ่อน ดบู ทเรียนนีบน YouTube: https://youtu.be/j8e8flPX7Fw 1) Page กับ Post เพจต่างกนั อย่างไร x Page (หนา้ ) คือ หนา้ ทไี ม่จาํ เป็นตอ้ งแบ่งหมวดหมเู่ นือหา ไมต่ อ้ งเรยี งลาํ ดบั ของวนั ทีว่าใครจะมา กอ่ นมาหลงั โดยมากเราจะใช้ Page กบั หนา้ เว็บทเี ป็นขอ้ มลู นงิ ๆ เช่น หนา้ Home, About, Contact เป็นตน้ x Post (เรือง) คือ หนา้ ขอ้ มลู ทีเราตอ้ งการแบง่ เนอื หาตาม category เชน่ ตามชนิดสนิ คา้ ตาม ประเภทความรู้ ตามภาค ตามจงั หวดั ตามกลมุ่ ตามเวลา (ใหม่/เก่า) ฯลฯเมอื เราเขียน Post หรอื บทความเสรจ็ (รวมถงึ สินคา้ ทเี ราจะขายดว้ ย) เราตอ้ งสรา้ ง Category เพอื ทาํ เป็นหมวดหม่ใู หเ้ ขา อย่นู นั เองเมือถึงเวลากแ็ สดงผลเป็นหมวดหมู่ ตามสไตลบ์ ล็อก คือ เรยี งบทความตามหมวดหมู่ โดยดงึ Post ลา่ สดุ ขนึ มาแสดงดา้ นบนเสมอ

55 2) การสร้าง Page ลาํ ดบั ตอ่ มาเราตอ้ งสรา้ งหนา้ ทเี ป็นเนือหาหลกั ของเว็บทีทกุ เว็บไซตต์ อ้ งมี ไดแ้ กห่ นา้ หนา้ Home, About และหนา้ Contact ซงึ หนา้ ดงั กลา่ ว เราตอ้ งสรา้ งที Page ครบั ผม มีวธิ ีการใชง้ านดงั นี ใหไ้ ปที Page > add new > แลว้ ใหใ้ สช่ ือหนา้ กบั เนือหา ลงไป แลว้ กด Publish เผยแพรข่ อ้ มลู ครบั สาํ หรบั หนา้ ทสี รา้ งใหม่ การเผยแพรข่ อ้ มลู ครงั แรกเราจะเรยี กว่า Publish แตก่ ารกลบั มาแกไ้ ขขอ้ มลู ทีเคย เขยี นแลว้ เราจะเรยี กวา่ การ Update ครบั สว่ นการใชง้ าน Text editor (กระดานเพิมเนือหา และรูปภาพตา่ งๆ) จะอธิบายในหวั ขอ้ ถดั ไปครบั 3) การใช้งาน Text editor

56 กอ่ นทเี ราจะเพมิ ขอ้ มลู ลงไป หากเราพงึ ใชง้ านครงั แรก แถบเมนแู สดง option การปรบั แต่งขอ้ ความมนั ยงั เปิดไม่ครบ ใหค้ ลิก ทสี ญั ลกั ษณต์ วั ซา้ ยสดุ ตามรูปก่อนครบั พอคลิก เราจะเห็น option การปรบั ตวั อกั ษร คลา้ ยๆ กบั โปรแกรม Word นนั เอง กระดาน text editor ใส่อะไรลงไปได้บ้าง x ใส่ text ได้ x ใสร่ ูปภาพได้ x ใสไ่ ฟล์ Mp4 ได้ x ใส่ PDF ไฟลไ์ ด้ x ใส่ url จาก YouTube ได้ x Embed โคด้ ทเี ป็น iframe จากทตี ่าง ๆ มาวางได้ เช่น Google map, หนา้ Facebook Fan page Box ได้ วิธีการใสส่ อื ทเี ป็น Media เช่น รูปภาพ วิดีโอ หรือ pdf ใหเ้ ราคลิกทีคาํ ว่า Add media แลว้ อพั โหลดไฟล์ ของเราใสเ่ ขา้ ไปไดเ้ ลย

57 WordPress Tips หากคณุ ตอ้ งการใหร้ ูปภาพบนเว็บ ไปปรากฏทีผลการคน้ หาหมวดรูปภาพบน Google ดว้ ย การใสร่ ูปภาพ ยงั มีรายละเอียดทีคณุ ควรรูอ้ ีกหลายจดุ ผมแนะนาํ ใหค้ ณุ อา่ นบทความนกี ่อนครบั : การทาํ SEO รูปภาพ ใหต้ ดิ หนา้ แรก Google การนาํ คลปิ วีดิโอจาก YouTube มาวางที text editor (คลิกอา่ น) เขา้ ไปทหี นา้ ของ YouTube > เลอื กคลิปวีดิโอทคี ณุ ตอ้ งการ > กดตรงคาํ ว่า share จากนนั ใหเ้ ราคดั ลอก URL แลว้ มาวางที text editor บนเว็บเราไดเ้ ลยครบั

58 รอสกั แป๊ บ ระบบจะดงึ คลิป YouTube มาโชวโ์ ดยอตั ิโนมตั ิ

59 4) วธิ ีการแชร์ google map มายงั เวบ็ ของเรา ใหเ้ ราไปทหี นา้ google map > เลือกสถานทเี ราตอ้ งการ > คลิกคาํ ว่าแชร์ > เลือกที ฝังแผนที (embed map) > จากนนั ใหค้ ลิก คดั ลอก html เรากจ็ ะไดโ้ คด้ จาก google map ทมี ีลกั ษณะเป็น iframe ใหเ้ ราเอาโคด้ นไี ปวางที text editor แต่การวางสิง ทเี ป็นโคด้ HTML เชน่ โคด้ iframe จาก google map เราตอ้ งวางโคด้ ลงในหมวด text ดรู ูปภาพประกอบ

60 จากนนั ใหเ้ ราคลกิ กลบั มาที Visual เราก็ไดภ้ าพแผนทีจาก google map มาแสดงบนเว็บของเราแลว้ นนั เอง 5) การวางลงิ ค์ (URL) ทหี ลงั รูปภาพ บางครงั เราตอ้ งการใหร้ ูปภาพของเรา กดแลว้ เปิดไปอกี หนา้ เวบ็ หนงึ เช่นกดทรี ูป แลว้ เดง้ ไป Line , ไป Facebook หรอื เดง้ ไปหนา้ สินคา้ ของเรา เราตอ้ งเอา URL ปลายทางมาใสไ่ วท้ หี ลงั รูป มีวธิ ีการทาํ ดงั นี อพั โหลดรูปขนึ ไปที text editor จากนนั ใหเ้ ราคลกิ ทรี ูปภาพ > คลิกที edit

61 ตรงสว่ นของ Image detail > ใหด้ ทู ีคาํ ว่า Link to ใหเ้ ลอื กเป็น Custom URL > วาง URL ปลายทาง หรือ หนา้ เวบ็ ทเี ราตอ้ งการลงไปครบั หากใครตอ้ งการให้ เมือมีการกดป่มุ แลว้ หนา้ เว็บเปิดแบบ open in new tab ใหเ้ ราคลิกที Advance option > แลว้ ไปตกิ ทชี ่อง Open link in a new tab ไดเ้ ลยครบั 6) การสร้าง post เราอาจจะพอรูแ้ ลว้ ว่า post คือ หนา้ ขอ้ มลู ทีเราตอ้ งการแบ่งเนือหาตาม category (หมวดหม่)ู ซงึ เป็นจดุ ที ทาํ ให้ post มีความแตกต่างจาก page ดงั นนั ก่อนทีคณุ จะเรมิ ตน้ เขยี น post คณุ ตอ้ งวางแผนสรา้ ง category ก่อน ว่าเว็บเราจะแบ่งหมวดหมู่ เป็นประเภทอะไรบา้ ง เชน่ เว็บคณุ ขายรองเทา้ กีฬา คณุ อ่านจะแบ่งประเภทหมวดหม่ไู ดด้ งั นี x รีวิว x ข่าวสาร x การออกกาํ ลงั กาย x เทคนิคการวิง x แฟชนั (การแต่งตวั ) x ไลฟ์ สไตล์ (การใชช้ วี ิต) x ฯลฯ

62 ตวั อย่างเวบ็ ทที าํ คอนเทนต์ (เขยี นบทความ) เกียวกบั รองเทา้ วิง และขายสินคา้ ไปดว้ ย sneakerfreaker.com ตวั อยา่ งหมวดหม่บู ทความของเว็บ Central การสร้าง Category ใหเ้ ราไปที post > คลิก Categories Name: ใสช่ ือหมวดหมู่ จะใชภ้ าษาไทย หรือภาษาองั กฤษก็ได้ Slug: คือ URL ทจี ะแสดงหนา้ เวบ็ ตรงจุดนผี มแนะนาํ ให้ เขยี นเป็นภาษาองั กฤษ เท่านนั ครบั เมอื ใสข่ อ้ มลู เสรจ็ คลกิ Add New Category ใหเ้ รยี บรอ้ ย ทาํ ซาํ จนกว่าเราจะไดค้ รบทกุ หมวดหม่ทู เี ราตอ้ งการ

63 ตวั อย่างการสรา้ งหมวดหมู่ วธิ กี ารสร้าง Post ไปที post > add new จากนนั ใหใ้ สเ่ นอื หาของบทความลงไป

64 ในทกุ ๆ Post ต้องมี 4 สงิ นี คือ 1. ชือเรือง 2. Categories (หมวดหม)ู่ 3. เนอื หา 4. Featured image (รูปภาพหนา้ ปก) และใน 1 Post สามารถอยใู่ นหลาย Categories ได้

65 บทที 10 ตงั คา่ หน้า Home/Blog หลงั จากทเี ราสรา้ งหนา้ page และ post เตรียมไวแ้ ลว้ หากเราลองกบั ไปดทู หี นา้ บา้ น เราจะเหน็ การเรียง กนั ของบทความไลล่ งมาเรอื ยๆ จากบทความใหม่ไปหาบทความเก่า ซงึ มนั ยงั ไม่ใชก่ ารแสดงหนา้ Home ที เราตอ้ งการ เราสรา้ งหนา้ page ตา่ งๆ ไวก้ ็จรงิ แต่ตวั ระบบ WordPress ยงั ไมร่ ูว้ า่ หนา้ ต่างๆ ทเี ราสรา้ งไวแ้ ลว้ หนา้ ไหน คือหนา้ แรก (Homepage Display) ดงั นนั เราตอ้ งมาตงั ค่าจดุ นกี ่อน

66 วธิ กี ารกาํ หนดหน้า Homepage มีดงั นีครับ ดบู ทเรียนนีบน YouTube: https://youtu.be/YRaGOVT62bs กลบั ไปหลงั บา้ น > settings > reading > ตกิ ที A static page > แลว้ เลือกชือหนา้ ทเี ราตอ้ งการใหเ้ ป็น หนา้ Homepage หลงั จากเลอื กเสรจ็ เรียบรอ้ ยแลว้ ลองกลบั ไปดหู นา้ บา้ นใหมอ่ กี รอบครบั หนา้ เว็บจะแสดงเป็น page ทเี รา ไดเ้ ลอื กไวน้ นั เอง

67 ตังค่าหน้า Blog (หน้าเกบ็ บทความทงั หมด) หนา้ ระบบของ WordPress จะมีอย่ดู ว้ ยกนั หนา้ คือหนา้ Homepage กบั หนา้ Blog ทเี อาไวเ้ ก็บ บทความทงั หมด หน้า Blog คอื อะไร หนา้ Blog คือหนา้ ทเี อาไวเ้ ก็บบทความ (post) ทงั หมดบนเวบ็ ของเรา การแสดงผลของหนา้ นี จะเป็นการ เรียงบทความต่อกนั ลงมาเรือยๆ จากใหม่ลงไปหาบทความเกา่ โดยบทความลา่ สดุ จะแสดงไวด้ า้ นบนสดุ

68 ซงึ หนา้ ระบบเก็บบทความยงั แบง่ ออกเป็น สว่ น คือ เกบ็ บทความทงั หมด กบั เกบ็ บทความตามหมวดหมู่ หรอื บางครงั เราจะเรียกหนา้ เหลา่ นวี ่า หนา้ Archive (คลงั เกบ็ ขอ้ มลู ) ขนั ตอนการสร้างหน้า Blog อนั ดบั แรกใหก้ ลบั ไปทหี ลงั บา้ นเวบ็ เขา้ ไปที page > add new > เราตอ้ งสรา้ งหนา้ page ขนึ มาก่อน หนา้ และใหต้ งั ชอื หนา้ นวี ่า Blog ครบั จากนนั มาตงั ค่าหนา้ Blog ใหเ้ ป็นหนา้ ระบบเกบ็ บทความ ใหไ้ ปที Setting > reading > ที Post page ให้ เลือกเป็นหนา้ Blog หลงั จากตงั ค่าเรยี บรอ้ ยแลว้ ลองไปเปิดหนา้ Blog ดู คณุ จะเห็นบทความวางเรียงตอ่ กนั จากใหมล่ งไปหา บทความเก่า

69 บทที 11 การสรา้ งเมนู (Menu) เมอื เรามีหนา้ Home เรียบรอ้ ยแลว้ แตเ่ ราจะยงั ไม่สามารถคลิกเปิดไปเขา้ ชมหนา้ เว็บอนื ๆ ของเราได้ เพราะมนั ยงั ไม่มีเมนู ทจี ะเชือมโยงพาเราไปยงั หนา้ อนื ๆ ดงั นนั สิงทเี ราตอ้ งทาํ เป็นลาํ ดบั ตอ่ มาคือการสรา้ งเมนู นนั เอง ซงึ มีขนั ตอนการสรา้ งเมนู ดงั นี ดบู ทเรียนนีบน YouTube: https://youtu.be/3AW2yTCUfcU กลบั ไปหลงั บา้ น > ไปที Appearance > menu > ตงั ชอื เรยี กชดุ เมนู > คลกิ Create Menu ใหเ้ ราเลือกหนา้ Page ทเี ราตอ้ งการใหแ้ สดงบนเมนู คลิก add to menu ใหเ้ รียบรอ้ ย

70 นอกจากเราจะสามารถนาํ page มาวางเป็นเมนู เรายงั สามารถนาํ Category หรือ Post มาวางทีเมนไู ดอ้ ีก ดว้ ย นอกจากนเี รายงั สามารถเลือนลาํ ดบั การแสดงเมนวู ่าตอ้ งการใหใ้ ครมาก่อน มาหลงั ด้วยการ Drag & Drop ไดเ้ ลย รวมถึงหากเราตอ้ งการใหเ้ มนไู หน เป็น sub menu ของใคร เราก็ลากเมนนู นั ใหอ้ ยใู่ ตข้ องตวั เมนทู เี ราตอ้ งการไดเ้ ลยครบั

71 นอกจากนเี รายงั สามารถเปลียน Navigation Label (ปา้ ยชือเมน)ู เป็นคาํ ทเี ราตอ้ งการกไ็ ด้ โดยใหเ้ ราคลิก ตรงมมุ ขวาทเี ป็นลกู ศรเลก็ บนแถบเมนู แลว้ เขา้ ไปเปลียนปา้ ยชือเมนไู ดเ้ ลย เนอื งจากใน 1 เว็บไซตใ์ นความเป็นจรงิ แลว้ เราสามารถสรา้ งชดุ เมนกู ีอนั ก็ได้ ดงั นนั เมือเราสรา้ งเมนเู สรจ็ เราตอ้ งเป็นคนกาํ หนด location (ทตี งั ของเมน)ู วา่ จะใหเ้ มนนู อี ย่ตู าํ แหน่งไหนบนเว็บของเรา ตามตวั อย่าง ใหเ้ ราติกเลือกที Top Menu ครบั

72 เมือทาํ ทกุ อยา่ งเรียบรอ้ ยแลว้ ลองกลบั ไปดทู หี นา้ เวบ็ ของเรา จะเหน็ วา่ เว็บของเรามเี มนเู รียบรอ้ ยแลว้ นนั เอง Menu Structure

73 บทที 12 ใช้งาน Sidebar Footer และ Widget ทาํ ความรู้จกั Sidebar Sidebar คือ แถบดา้ นขา้ งทีมกั จะแสดงรว่ มกบั หนา้ Post หรือหนา้ Product เพอื ใชเ้ ป็นช่องทางในการทาํ การตลาด โดยมากมกั นิยมจะติดโฆษณา, หมวดหม่,ู หรือว่างพวกสินคา้ ขายดี เพอื พาคนทเี ขา้ มาบทความ ของเรา เห็นโฆษณาหรือโปรโมชนั พิเศษ และช่วยพาพวกเขาไปหนา้ อนื ๆ หรือสงิ ทเี ขาตอ้ งการไดง้ า่ ยขึน นนั เอง ลองดูตัวอย่าง sidebar ของเว็บตา่ ง ๆ เหล่านีครับ ลองเขา้ ไปดู sidebar ตวั อย่างจากเว็บจรงิ ๆ ดา้ นบนไดท้ ี miraclas.com

74 สว่ นเว็บ WordPress ทเี รากาํ ลงั จะสรา้ ง ลองคลิกไปทบี ทความดคู รบั คณุ จะเป็นการแสดง sidebar ทเี ป็น คา่ default ทมี ากบั WordPress แบบนี

75 คราวนีหากเราตอ้ งการจะแกไ้ ข Sidebar เราจะไปแกไ้ ขทีไหนดี? ลองดรู ูปดา้ นลา่ งประกอบดว้ ยนะ จากรูปถา้ เราสงั เกตดี จะเห็นไดว้ า่ sidebar และ footer จะมีบางสิงทเี ป็นองคป์ ระกอบเหมือนกนั นนั ก็คือ Widget นนั หมายความว่า หากเราตอ้ งการแกไ้ ขเนอื หาทีอย่บู น sidebar กบั footer เราตอ้ งไปแกไ้ ขที widget นนั เอง ดวู ิธีการใชง้ าน Widget ทหี วั ขอ้ ถดั ไปไดเ้ ลยครบั การใช้งาน widget Widget คอื ชินสว่ นรูปแบบต่างๆ เช่น text widget (แสดงขอ้ ความ), image widget (แสดงรูปภาพ), product widget (แสดงสนิ คา้ ), recent post widget (แสดงบทความลา่ สดุ ) ฯลฯ ทีจะไปแสดงผลในสว่ น ของ Sidebar กบั footer นนั เอง

76 การเปลียน widget ที sidebar กลบั ไปหลงั บา้ น > ไปที Appearance > คลกิ Widget เราจะพบการแสดงผลหนา้ ตาแบบนี Widget คือ ชินสว่ นตา่ งๆ ทีแสดงอย่ใู น 2 แถว ดา้ นซา้ ยมือ สว่ น 2 แถวดา้ นขวามือ เราเรียกว่าช่องทีเก็บ widget เพือใหแ้ สดงผลทีหนา้ เว็บ ขนั ตอนการใชง้ าน ใหเ้ ราลบ widget ทอี ย่ใู นชอ่ ง Blog sidebar ออกใหห้ มดก่อน ใหค้ ลิกทลี กู ศร dropdown > ใหค้ ลิก delete เพอื ลบ widget ใหเ้ ราไลล่ บ widget ออกไปใหห้ มดเลยครบั

77 จากนนั เรากอ็ อกแบบว่าตรง sidebar เราอยากใหม้ นั แสดงอะไรบา้ ง สมมตุ ผมอยากใหแ้ สดงรูปภาพ Promotion สินคา้ กบั พวกบทความลา่ สดุ วธิ ีการใชง้ าน Widget กค็ ือใหเ้ ราลาก ชินสว่ น widget ทีอยฝู่ ังซา้ ยมือ ลากมาวางทีช่อง blog sidebar ใน ทนี ี ผมขอลาก image widget กบั recent post ไปใสค่ รบั ที image widget ใสร่ ูปภาพเขา้ ไปใหเ้ รียบรอ้ ย ดว้ ยนะครบั จากนนั ลองกลบั ไปดทู ี post หนา้ บา้ นเว็บของเราครบั เราจะเหน็ ว่าที sidebar มีการแสดง widget ทเี รา เรียกใชง้ าน มาเรียบรอ้ ยแลว้

78

79 ทาํ ความรู้จกั Footer Footer คอื สว่ นทแี สดงอยดู่ า้ นลา่ งของเว็บ และแสดงผลเหมือนกนั ทกุ หนา้ ทงั หนา้ ที page และเป็น post การแกไ้ ขขอ้ มลู สว่ น Footer เราจะแกไ้ ขผา่ น Widget เชน่ เดียวกบั การแกไ้ ขสว่ นทเี ป็น sidebar นนั เอง footer ปรบั แตง่ ขอ้ มลู ที widget ตวั อย่างการแสดง Footer ทีหนา้ เวบ็ ดบู ทเรียนนีบน Youtube: https://youtu.be/g3qE6wkyX_k

80 บทที 13 การเพมิ ปลักอิน (Plugin) plugin คอื เครืองมอื เพิมฟังชนั การใชง้ านเว็บ WordPress ของคณุ ใหม้ ีประสิทธิภาพมากขนึ ตอบโจทย์ ธรุ กจิ หรอื ในสงิ ทเี ราตอ้ งการ อย่างเช่น บางทีเราอยากเปลียนรูปแบบตวั อกั ษรใหม้ นั สวยขนึ เรากต็ อ้ งหาปลกั อินเปลียนฟอนตม์ าใส่ นนั เอง วธิ กี ารเพมิ ปลกั อนิ ใหเ้ ราไปที Plugins > คลกิ add new

81 จากนนั ใหค้ น้ หาชือปลกั อินทีเราตอ้ งการ เชน่ ผมตอ้ งการเปลียนฟอนต์ ผมก็คน้ หาดว้ ยคาํ วา่ seed font จากนนั ใหค้ ลกิ install และ คลิก activate ใหเ้ รยี บรอ้ ย ส่วนเรืองการใชง้ านปลกั อิน แต่ละตวั บางครงั เรา ตอ้ งดผู ่านค่มู ือขอปลกั อนิ นนั ๆ กนั เองครบั เพราะแตล่ ะตวั มกี ารใชง้ านไมเ่ หมือนกนั อ่านเพิมเตมิ : วิธีการเปลยี นฟอนต์ WordPress รายชอื ปลกั อนิ ทีทุกเว็บต้องมี x Yoast SEO: ใชส้ าํ หรบั การทาํ SEO คมู่ อื การใชง้ าน: การใช้ Yoast เขยี นบทความ SEO x All in on migration: ใชส้ าํ หรบั การ backup เว็บ คมู่ อื การใชง้ าน: วิธี backup เวบ็ ไซต์ x Wp-Rocket: ใชส้ าํ หรบั ปรบั ความเรว็ เวบ็ WordPress ค่มู อื ใชง้ าน: เพิมความเรว็ WordPress

82 บทที 14 การเปลียนธมี (Theme) Theme คอื เครอื งมอื ทีใชส้ าํ หรบั ออกแบบ และจดั วาง layout หนา้ ตาเว็บไซต์ WordPress ของเราให้ สวยงามในแบบทเี ราตอ้ งการ หากเราใชง้ านธีมไดเ้ ก่งๆ เราจะสามารถออกแบบหนา้ เว็บของเราอยา่ งไรก็ได้ ทกุ ไอเดีย หรือออกแบบเว็บเลยี นแบบหนา้ ตาของเวบ็ ทเี ราชอบกไ็ ด้ การใช้งานธีมนันจะมีอยู่ 2 ประเภท คือ 1. ธีมฟรี ทเี ราสามารถอพั โหลดผ่านหลงั บา้ นเว็บไซตข์ องเราไดเ้ ลย แตเ่ ราไมส่ ามารถออกแบบหนา้ ตามเว็บตามใจเราไดเ้ อง เราทาํ ไดแ้ คเ่ พยี งต่อตาม template ทเี ขา ออกแบบเว็บไวแ้ ลว้ 2. ธีมเสยี เงนิ หรือทเี รามกั จะเรียกกนั ว่า พรีเมยี มธีม (Premium Theme) หากเราซือธีมทีเป็น พรเี มยี มธีม และเราใชง้ านเขาเป็น เราจะสามารถออกแบบเว็บใหม้ ีหนา้ ตา อย่างไรกไ็ ด้ เห็นเว็บไหนสวยๆ เราสามารถออกแบบเว็บของเราเลยี นแบบเว็บทเี ราชอบไดห้ มดเลย นนั เอง เพราะพวกธีมฟรีมีขอ้ จาํ กดั เยอะ ในระยะยาวตอ้ งซือธีมกนั ทกุ คนครบั คราวนีถา้ จะซอื ซอื ธีมไหนดี ถา้ เป็น มือใหมค่ วรใชธ้ ีมทีเป็น bestseller ทมี ีคนใชเ้ ยอะๆ ตดิ ขดั อะไรจะไดม้ คี นชว่ ยไดค้ รบั หรือไมก่ ็ลองเอาชือธีม ทเี ราสนใจไปเสรจิ หาบนยูทูปดกู ่อนว่ามีคลิปสอนเยอะมยั การเซ็ทอพั ธีมจะไดง้ ่ายขนึ ครบั เพราะการทาํ เว็บ มนั ไมง่ า่ ยอย่างทีเราคิดไวแ้ น่นอนครบั

83 แหลง่ ซอื ธีมคณุ ภาพระดบั โลกคือทนี คี รบั Themeforest ทกุ ธีมจะมี live preview วา่ ธีมนที าํ อะไรไดบ้ า้ ง แต่ ถา้ เป็นธีมทีสรา้ งโดยคนไทยกต็ อ้ งทีนเี ลยครบั seedtheme แตเ่ ราตอ้ งมองใหอ้ อกวา่ ธีม คอื ชินส่วนทเี ปรียบเหมือนกบั ตวั ต่อเลโก้ เราซอื มาหนึงธีม เราก็ไดช้ ินสว่ นมา 1 ถงุ เราจะต่อเป็นเว็บอะไรก็ได้ โดยใชช้ ินสว่ นทธี ีมมีให้ จะต่อเป็นเว็บบรษิ ัทกไ็ ด้ จะต่อเป็นเว็บรา้ นคา้ ก็ได้ ต่อเป็นเว็บบลอ็ คกไ็ ด้ แลว้ แต่ไอเดียของเราเลย สว่ นพวกเดโมทีเราเห็น ผสู้ รา้ งธีมเขาแคต่ ่อเว็บใหด้ เู ป็น ตวั อย่าง จากชนิ สว่ นตา่ งๆ ทีธีมนนั มีใหเ้ ฉยๆ ครบั เรายงั สามารถต่อเติมเสรมิ แต่งอะไรเพิมขึนอีกกไ็ ดค้ รบั หากยงั ตดั สนิ ไมถ่ กู ลองเขา้ ไปดรู ายชอื ธีมทีผมแนะนาํ ไวท้ นี ีก็ไดค้ รบั 2020’s Best Selling Themes ใชด้ ี ทกุ ธีม ปล. ถา้ เราใชง้ านมนั เป็นนะ แตส่ าํ หรบั บทความชดุ ตอ่ ไปผมจะพดู ถึงเรอื งการออกแบบเวบ็ ดว้ ย พรเี มยี มธีม ผมจะสอนผ่านธีมนีครบั Flatsome Theme ดงั นนั หากคณุ ตอ้ งการทจี ะทาํ เว็บสวยๆ ทลี ะขนั ตอนตามบทความชดุ นไี ด้ ผมแนะนาํ วา่ ใหม้ าใชธ้ ีมเดียวกนั กบั ทผี มใช้ จะง่ายทสี ดุ ครบั

84 หน้าทหี ลกั ๆ ของธมี x ช่วยในการออกแบบ (layout) หนา้ เว็บแต่ละหนา้ x ปรบั แต่งสว่ น Header และ Footer x เปลียน Logo, เปลียนสี, เปลียนฟอนต์ (font) วธิ กี ารเปลยี นธีม 1) ธมี ฟรี ใหเ้ ราไปที Appearance > เลือก Theme > Add new > ชอบธีมไหน เราก็กด install และ Activate ใช้ งานธีมนนั ไดเ้ ลย 2) ธมี เสียเงนิ (Premium Theme) ใหเ้ ราไปที Appearance > เลือก Theme > Add new > คลิก Upload ไฟลธ์ ีมทีเราซือมากนนั เอง จากนนั ใหค้ ลิก Install และ Activate ใหเ้ รยี บรอ้ ย แตค่ วามยากของ WordPress ก็คอื หากเราใช้ Premium Theme ซงึ แตล่ ะธีมจะมีขนั ตอนการลงธีมและ set up ไม่เหมือนกนั กอ่ นทเี ราจะใชง้ านธีมไหน เราตอ้ งเขา้ ไปอา่ นคมู่ ือของธีมๆ นนั ก่อนเสมอ ซงึ วธิ ีการใช้ งานธีมแบบละเอียด ผมจะพดู ถึงในบทถดั ไปครบั

85 ตวั อยา่ งการติดตงั ธีม Flatsome https://youtu.be/qXe-a52_aIM คาํ แนะนาํ หลักการเลอื กธีม x ควรใช้พรีเมียมธีม (ธมี ตัวเสยี เงนิ ) ธีมฟรีจะมขี อ้ จาํ กดั ค่อนขา้ งเยอะ และไมม่ ีความยดื หย่นุ จะ ออกแนวเว็บสาํ เรจ็ รูป เราไม่สามารถปรบั แตง่ ตามใจ หรือตามไอเดียทเี รามไี ดแ้ ต่หากเราเลือกใช้ ธีมตวั เสยี เงิน อารมณก์ ารใชง้ าน จะเปรยี บเหมือนเราซอื ตวั ต่อเลโก้ เราซือ 1 ธีม เราก็จะไดช้ ินสว่ น มา 1 ถงุ หนา้ ทขี องเราคอื เอาชนิ สว่ นเหลา่ นนั มาประกอบเป็นเว็บใหม้ หี นา้ ตาแบบใดกไ็ ด้ ตาม ไอเดียของเราไดห้ มด เหมือนกบั เราต่อตวั ตอ่ เลโกใ้ หม้ รี ูปร่างอะไรก็ไดน้ ันเอง x มีการอัพเดทอยเู่ สมอ ธีมทดี คี วรมีการอพั เดทล่าสดุ ใหส้ ามารถใชง้ านบน WordPress เวอรช์ นั ลา่ สดุ อย่เู สมอ x อัพเดทตาม Woo เวอรช์ ันล่าสุด (ver.4+) x มียอดขายพอสมควร ทกุ คนสามารถทาํ ธีมแลว้ เอาไปลงขายที ThemeForest ไดห้ มด แต่ไม่ใช่ ทกุ ธีมทีวางขายบน ThemeForest แลว้ จะขายดี ในหลายๆ ธีมหากไมค่ ่อยมยี อดขาย ผสู้ รา้ งธีมมกั หยดุ พฒั นาธีม หรอื อพั เดทธีมในรองรบั WordPress และ Woocommerce เวอรช์ นั ใหมๆ่ หากเรา ใชธ้ ีมนนั ๆ ต่อไป กม็ ีความเสียงสงู วา่ เว็บเราจะใชง้ านไมไ่ ดเ้ มอื มกี ารอพั เดทนันเอง x มคี ลปิ สอนการ setup ธีม บน YouTube การทาํ เวบ็ WordPress นนั ไม่ยาก เราไม่ตอ้ งเขยี น โคด้ แตม่ นั กไ็ มง่ า่ ย เพราะมนั มรี ายละเอยี ดทเี ยอะมาก และแต่ละธีมมกี าร Setup ทไี ม่เหมือนกนั เลย หากเราจะซอื ธีมไหน ลองเอาชอื ธีมนนั ไปเสรจิ หาบน Youtube ดู ถา้ ธีมนนั มีคลปิ สอน ก็จะ ช่วยใหเ้ ราเรียนรูก้ ารทาํ เว็บไดเ้ รว็ ขนึ นนั เอง x มี Facebook Group ช่วย ถาม-ตอบ ในบางธีม เขาจะสรา้ ง Facebook Group เพอื คอย Support คนทใี ชธ้ ีมเดียวกนั ติดขดั ตรงไหนเรากส็ ามารถไปตงั กระทถู้ ามไดเ้ ลย แต่มแี คบ่ างธีมนะ ทมี ี x แหล่งซือธมี คณุ ภาพ themeforest.net อ่านเพมิ เติม: ค่มู ือการใชง้ านธีม Flatsome

86 บทที 15 การใชง้ าน Woocommerce บทความ สอน WooCommerce ชดุ นจี งึ เนน้ ไปทสี งิ ทจี าํ เป็นตอ้ งรู้ สาํ หรบั ผเู้ รมิ ตน้ ก่อน หากพนื ฐานดแี ลว้ เราจงึ จะสามารถต่อยอดทาํ ระบบ WooCommerce ใหซ้ บั ซอ้ น หรอื ใหด้ ียิงขนึ ไดใ้ นอนาคตนนั เอง WooCommerce คอื อะไร? WooCommerce คือ ปลกั อินทชี ว่ ยแปลงรา่ งเวบ็ WordPress ธรรมดาๆ ของคณุ ใหก้ ลายเป็นเว็บบรา้ นคา้ ออนไลนเ์ ต็มรูปแบบ เราสามารถโหลดตวั ปลกั อนิ นมี าใชฟ้ รีๆ ไดอ้ กี ดว้ ย และในปัจจบุ นั จากสถิติเว็บรา้ นคา้ ออนไลนข์ องทงั โลก 47% คอื เวบ็ ทสี รา้ งมาจาก WooCommerce Woocommerce มีขอ้ ดี ขอ้ เสยี อะไรบา้ ง ดเู รอื งนีบน YouTube: https://youtu.be/MN83ce-Q0VA

87 ทาํ ไมตอ้ งใช้ Woocommerce? 1. โหลดมาใชไ้ ดฟ้ รี ไม่ตอ้ งกงั วลเรืองเงินในกระเป๋ า ชว่ ยใหเ้ ราเรมิ ตน้ สรา้ งเว็บขายของออนไลนด์ ว้ ยตน้ ทนุ ทนี อ้ ยมาก เราสามารถโหลดและติดตงั Woocommerce ไดฟ้ รๆี 2. อนาคตสดใส เพราะมีคนใชง้ าน Woocommerce จาํ นวนมากกว่า 1 ลา้ นเว็บไซต์ แถบเจา้ ของปลกั อินนีคือ บรษิ ทั Automattic ผอู้ ยเู่ บอื งหลงั WordPress.org และ WordPress.com หมดกงั วลวา่ เขาจะ หยดุ พฒั นาไปไดเ้ ลย เรียกว่าเรายงั สามารถเกาะปลกั อินตวั นไี ดอ้ ีกนาน 3. มนั ใช้งานงา่ ย ไมต่ อ้ งโคด้ ไม่ตอ้ งเป็นโปรแกรมเมอร์ เป็นแค่คนธรรมาดาๆ พ่อคา้ แม่คา้ ทวั ไปกส็ ามารถใชง้ านได้ หมด เหตผุ ลหลกั ทีทาํ ให้ WordPress หรอื Woocommerc มีคนใชเ้ ยอะ เพราะมนั งา่ ยนนั เอง ตวั อย่างเว็บไซตท์ สี รา้ งโดยคนธรรมดา มที งั แม่บา้ น พ่อบา้ น ผสู้ งู วยั สามารถทาํ เวบ็ สวยๆ ไดห้ มด นนั เอง 4. มีอปุ กรณเ์ สรมิ แตง่ เพียบ แมว้ ่า Woocommerce จะมฟี ังชนั เพยี งพอต่อการเรมิ ตน้ ทาํ เวบ็ ขายของออนไลนแ์ ลว้ กต็ าม แต่ หากยงั รูส้ กึ วา่ ไมพ่ อใจ เราสามารถเพมิ ตวั extensions ไดอ้ ีกมากมาย แต่บางตวั อาจไม่ฟรนี ะ สิงทคี ุณจาํ เป็ นต้องรู้เกยี วกับการสร้างระบบตระกร้าสนิ คา้ Woocommerce ดังนี x การติดตงั และตงั ค่าพนื ฐาน x การลงสนิ คา้ ประเภทต่างๆ x การตงั คา่ จดั สง่ x การสรา้ งฟอรม์ แจง้ ชาํ ระเงนิ x การจดั การ order สินคา้ x จดั การเรืองสต๊อคสินคา้ คมู่ อื ใชง้ าน WooCommerce: https://padveewebschool.com/woocommerce-guide/

88 บทที 16 การทาํ SEO การทาํ seo คือ การผลกั ดนั เว็บไซตต์ วั เองใหต้ ิดหนา้ แรกเวลาคน้ หาบน google ดว้ ยคียเ์ วิรด์ ทีตอ้ งการ ซงึ คาํ นยี ่อมาจากคาํ ภาษาองั กฤษว่า Search engine optimization ทาํ ไมธุรกิจออนไลนต์ ้องทาํ SEO หลายๆ คนคดิ ว่าแคม่ เี วบ็ ไซต์ หรือมี Facebook แฟจเพจ กส็ ามารถทจี ะขายของออนไลนไ์ ดแ้ ลว้ แต่ใน ความเป็นจรงิ เราแคเ่ พยี งมแี ตเ่ วบ็ ไซต์ แต่มนั ยงั ไม่มใี ครเห็นหรอื เขา้ มาเว็บไซตเ์ ราอย่างแนน่ อน ถา้ มี เวบ็ ไซตแ์ ลว้ ไม่ทาํ seo เราจะเสียเวลาไปเปล่าๆ กบั การทาํ เวบ็ ไซตโ์ ดยไมไ่ ดป้ ระโยชนอ์ ะไรจากมนั เลย เหตผุ ลทีธุรกิจออนไลนต์ อ้ งทาํ seo ก็เพราะว่า การทาํ seo จะช่วยสรา้ ง traffic พาผคู้ นเขา้ มาเวบ็ ไซตข์ อง เราไดอ้ ย่างต่อเนือง เมือมี traffic พาคนเขา้ เวบ็ เราอย่างต่อเนือง เรากจ็ ะไดไ้ มต่ อ้ งพงึ การลงโฆษณาแบบ เสียเงนิ เพยี งอย่างเดียว และเมือมคี นเขา้ มายงั เว็บของเรามากขึน โอกาสขายของและช่องทางการหาเงินจงึ ตามมาดว้ ยนนั เอง ดคู าํ อธิบายเรืองนีบน Youtube: https://youtu.be/MhHeI-o7TQc ขันตอนสอน การทาํ seo ใหเ้ วบ็ เราติดหน้าแรก google 1. เราต้องรู้กอ่ นกวา่ อะไรคอื แก่นของ google & facebook

89 เราใชง้ าน google เพอื อะไร? เราเล่น facebook เพืออะไร? เราใชง้ าน google เพอื หาคาํ ตอบ แต่เราเลน่ facebook เพอื ความสนุก และเพอื อวดบางสงิ บางอย่างใหค้ น อนื ๆ รบั รูจ้ รงิ มยั ครบั ? Google คือ Search engine แกน่ ของเขาคือการแสดงขอ้ มลู (information) ใหต้ รงกบั สิงทีผคู้ นกาํ ลงั คน้ หา นนั หมายความว่า หากเราตอ้ งการใหเ้ ว็บของเราติดอนั ดบั หนา้ แรก เรากต็ อ้ งสรา้ งเนือหาแบบที google ชอบ คอื เป็นขอ้ มลู (information) ทเี ป็นคาํ ตอบต่อคนทกี าํ ลงั อยากรู้ และขอ้ มลู เหลา่ นนั ตอ้ งเป็นขอ้ มลู ที เรียบเรียงมาอยา่ งดี อ่านแลว้ ตอ้ งเขา้ ใจง่ายๆ (accessible) และสดุ ทา้ ยขอ้ มลู ของเราตอ้ งเป็นประโยชน์ (useful) คอื ชว่ ยแกป้ ัญหาหรือใหค้ าํ ตอบกบั คนทีกาํ ลงั ตอ้ งการมนั ได้ นนั หมายความว่าหากเราจะเขียนบทความลงบนเว็บไซตข์ องเรา ไมใ่ ช่ว่าเราอยากนกึ จะเขยี นอะไรลงไปก็ ได้ เราควรเขยี นเฉพาะสิงทเี ป็นขอ้ มลู และมีคนอยากรู้ หรือมคี นสนใจเทา่ นนั ถา้ เรานกึ อยากจะเขียนอะไร ตามใจไปเรือยๆ ก็เขียนไดค้ รบั แตม่ นั จะไมส่ ง่ ผลต่อการติดอนั ดบั หนา้ แรกของเว็บเราเลย เราจะเสยี เวลา ไปเปลา่ ๆ กบั การเขยี นบทความเหลา่ นนั การเขยี นบทความตามใจ โดยไม่สนว่าจะมคี นอยากรูห้ รอื ไม่ เราจะเสยี เวลา ไปเปล่าๆ และไม่มผี ลต่อการตดิ อนั ดบั ใดๆ เลย

90 2. เราตอ้ งรู้ว่า Google ใช้เกณฑอ์ ะไรบ้าง? ในการจัดอนั ดบั เว็บไซตต์ า่ ง เนอื งจากเว็บไซตท์ งั โลกมเี ป็นแสน เป็นลา้ นเว็บ หาก google ไม่สรา้ งเงอื นไขของการจดั อนั ดบั เว็บทจี ะติด หนา้ แรกเอาไว้ เมือมคี นคน้ หาคาํ ตอบดว้ ย keyword เขาอาจจะไม่ไดร้ บั คาํ ตอบทเี ขาตอ้ งการได้ หากผคู้ น ไมไ่ ดร้ บั คาํ ตอบทีตอ้ งการ พวกเขากจ็ ะเลิกใชง้ าน google ไปโดยปรยิ าย หมายความวา่ Google ตอ้ งใชเ้ ครืองมอื ในวิเคราะหเ์ ว็บไซตเ์ ว็บทงั โลก และดงึ เฉพาะเว็บทมี ขี อ้ มลู ดีทสี ดุ มาแสดงเท่านนั เพือใหค้ าํ ตอบต่อผทู้ อี ยากไดข้ อ้ มลู นนั ๆ และทาํ ใหผ้ คู้ นทงั โลกอยากใช้ google ในการ คน้ หาขอ้ มลู เพอื ใหไ้ ดค้ าํ ตอบดที สี ดุ ต่อไปเรอื ยๆ เรียกไดว้ า่ เขาสามารถทาํ ใหผ้ คู้ นใชง้ าน google เป็นสว่ น หนึงในชีวติ ประจาํ วนั ไปแลว้ หากเราอยากเหน็ เว็บตวั เองติดอนั ดบั หนา้ แรก เราก็ตอ้ งทาํ เวบ็ ของเราใหผ้ า่ นเกณฑท์ ี google ไดว้ างเอาไว้ นนั เองครบั ในส่วนต่อมาเรามาดกู ันครับวา่ เกณฑต์ ่างๆ ที google ไดว้ างเอาไว้มอี ะไรบ้าง หลกั เกณฑท์ ี 1 Mobile Friendly หลกั เกณฑใ์ หญ่สดุ สาํ หรบั เว็บไซตห์ นา้ ใหมท่ ีตอ้ งการติดอนั ดบั หนา้ แรก คือ เว็บนนั ตอ้ งเป็น Mobile Friendly เทา่ นนั คอื ตวั เว็บตอ้ งแสดงผลไดใ้ นทกุ ๆ อปุ กรณ์ โดยเฉพาะการแสดงผลบนโทรศพั มอื ถือ สาํ หรบั เว็บใดๆ ก็ตามทีมีอนั ดบั ตดิ หนา้ แรกอย่แู ลว้ หากไม่ปรบั ตวั แลว้ มีเวบ็ ค่แู ขง่ ทีนาํ เสนอขอ้ มลู หรือ คาํ ตอบใกลเ้ คียงกนั เว็บทไี ม่ไดเ้ ป็น Mobile-Friendly จะเสยี งต่อการถกู ปรบั ลดอนั ดบั ลง แลว้ แทนทีดว้ ย เว็บหนา้ ใหมท่ ีแสดงผลไดด้ ีบนมือถืออย่างแนน่ อน

91 หากเราไมป่ รบั เปลยี นตวั เองใหท้ นั โลก ในไม่ชา้ โลกก็จะมาบงั คบั ใหเ้ รา เปลยี นอยู่ดี หลกั เกณฑท์ ี 2 การเขียนบทความคณุ ภาพ อะไรคือบทความคณุ ภาพในความหมายของ Google เป็นสิงทเี ราตอ้ งหาคาํ ตอบใหไ้ ด้ แตใ่ นความเป็นจรงิ เราไม่ตอ้ งคิดลกึ ซงึ อะไรกไ็ ด้ มนั คอื เงอื นไขการเขียนเรียงความ หรอื เขียนหนงั สือนนั เอง หากเราสังเกตดๆี บางเวบ็ ทเี ขาติดอนั ดบั หนา้ แรกตวั ผสู้ รา้ งเว็บเองอาจจะไม่ไดร้ ูว้ ธิ ี การทาํ seo เชิงเทคนคิ อะไรเลยกม็ ี แต่สงิ ทพี วกเขามี คอื เขารูว้ ธิ ีการเขียนหนงั สือ ใหน้ า่ สนใจ อ่านง่าย และไดป้ ระโยชน์ แต่เพอื ใหน้ ิยาม บทความคณุ ภาพ ในความหมายของ google เป็นรูปธรรมมากขึน เราอาจตอ้ งใชเ้ ครอื งมอื ช่วยเช็คสกั หนอ่ ย ซงึ เครืองมือทจี ะใชเ้ ช็คลสิ ตบ์ ทความของเรา ว่ามีคณุ ภาพหรือไมน่ นั เราจะใชป้ ลกั อินที ชือว่า Yoast Seo ตวั ปลกั อนิ นไี มไ่ ดช้ ว่ ยใหเ้ ว็บเราติดหนา้ แรก แต่เขาจะชว่ ยเราเชค็ ลิสตโ์ ครงสรา้ งเนือหาหนา้ เว็บของเราว่าดี พอรยึ งั และตอ้ งดีในแบบที google ชอบดว้ ยนะ อาจตอ้ งเขา้ ไปดวู ธิ ีการเขยี นบทความใหถ้ กู หลกั seo ไดท้ ี บทความนคี รบั เขียนบทความอยา่ งไร ใหไ้ ฟเขียวติด บนปลกั อิน SEO by Yoast

92 โดยสรุปคือเมอื เราใชป้ ลกั อินตวั นีตรวจเช็คบทความแลว้ เขาจะมีไฟสญั ญาณแจง้ มาใหเ้ รารู้ แบบสญั ญาณ ไฟจราจร คือเราตอ้ งทาํ ใหบ้ ทความของเรามไี ฟเขยี วติดนนั เอง ตวั อย่างสิงทปี ลกั อนิ นีตรวจเชค็ หนา้ บทความของเรามปี ระมาณนคี รบั

93 x บทความของเราตอ้ งมีคาํ ทเี ป็น keyword ชดั เจน 1 คาํ x ชือเรอื งบทความตอ้ งไม่ยาวเกินไปหรือสนั เกินไป x ถา้ จะใหด้ ีควรนาํ เอาคาํ keyword มาวางตาํ แหน่งแรกของชือบทความ x ตอ้ งมี keyword ปรากฏอย่ทู ีย่อหนา้ แรกของบทความ x สดั สว่ นของ keyword เมอื เทียบกบั ปรมิ าณ Text ทงั หมดในบทความ ไมค่ วรเกนิ 2.5 % x ตอ้ งมีรูปภาพประกอบบทความ และตอ้ งใส่ Alt text ของรูปภาพเป็นคาํ keyword ดว้ ย x บทความตอ้ งมหี วั ขอ้ ใหญ่ ทเี รียกวา่ Subheading และตอ้ งมีคาํ ทเี ป็น keyword เป็น Subheading รวมอย่ดู ว้ ย x คาํ อธิบายบทความแบบย่อ หรือทเี รียกวา่ meta description ตอ้ งปรากฏคาํ keyword และมี ความยาวทเี หมาะสมไม่ควรสนั หรอื ยาวเกินไป x บทความทดี ีตอ้ งมลี ิงคส์ ง่ ออกไปยงั ภายนอกเว็บเราดว้ ย หรอื จะเป็นลิงคส์ ง่ ไปหนา้ อนื ๆ บนเว็บไซต์ เรากไ็ ด้ x ความยาวเนือหาของบทความทีดีตอ้ งยาวไม่นอ้ ยไปกวา่ 300 คาํ x บทความตอ้ งจดั วางใหอ้ า่ นง่าย แต่ละย่อหนา้ ตอ้ งไม่ยาวเกนิ ไป ควรมีการเวน้ บรรทดั เพอื ใหม้ ี ช่องไฟ ใหค้ นอ่านไดง้ า่ ยขนึ x เนอื หาควรมกี ารแสดงทีหลากหลาย เช่น มี ออรเ์ ดอรล์ ิสต์ มบี ลุ เลทต์ มีตวั หนา มีตวั เอียง x ถา้ เป็นไปไดค้ วรมีสอื ผสม คือมกี ารนาํ ลงิ คว์ ิดีโอ หรือลิงคไ์ ฟลเ์ สยี งต่างๆ มาแสดงบนหนา้ เวบ็ ของ เราดว้ ยครบั ภาพตวั อย่างบทความทีไฟเขียวติดแลว้ จะไดห้ นา้ ตาประมาณนคี รบั รูปนดี จู ากหลงั บา้ นของเว็บไซต์ WordPress

94 แมว้ า่ บทความของเราจะมไี ฟเขียวติดแลว้ แตไ่ มไ่ ดห้ มายความวา่ ทกุ บทความของเราจะติดอนั ดบั หนา้ แรก นะครบั มนั เพียงแค่ผา่ นเกณฑเ์ บอื งตน้ เท่านนั เราไมส่ ามารถจะไปควบคมุ การจดั อนั ดบั ของ Google ได้ สงิ ทเี ราทาํ ไดค้ ือทาํ เวบ็ ใหผ้ ่านเกณฑห์ ลกั ๆ ทเี ขาไดว้ างไว้ เหมือนเราทาํ เวบ็ สง่ เขา้ ไปประกวดที Google แลว้ เขาจะเป็นคนตดั สนิ หรอื ใหค้ ะแนนเว็บของเราเองครบั วา่ ดพี อหรือค่คู วรทจี ะติดหนา้ แรกรเึ ปลา่ หลักเกณฑท์ ี เวลาทใี ชบ้ นเว็บไซต์ เราตอ้ งทาํ ใหค้ นอย่บู นหนา้ เว็บไซตข์ องเราใหน้ านทสี ดุ สมมตุ มิ เี ว็บทมี ีขอ้ มลู ใกลเ้ คียงกนั แต่เว็บไหนที สามารถทาํ ใหค้ นอย่บู นเว็บนานกวา่ จะไดค้ ะแนนมากกว่า นนั หมายความหากเราตอ้ งการใหค้ นอย่บู นหนา้ เว็บไซตเ์ รานานๆ เนือหาบทความเราตอ้ งเป็นประโยชน์ และตอ้ งมีความยาวพอสมควรโดย trick เลก็ ๆนอ้ ยๆ ทผี มอยากแนะนาํ หากตอ้ งการทาํ ใหค้ นเปิดหนา้ เว็บ เราไวน้ านๆ คือ ใหเ้ ราเขียนบทความประเภท how to ทเี ป็นขนั ตอน หรอื ทเี ราเรียกกนั ว่า Evergreen content ลองเขา้ ไปศกึ ษาการเขยี น Evergreen Content ไดท้ บี ทความนเี ลยครบั Evergreen Content vs Topical Content คอนเทนตแ์ บบไหนนา่ ทาํ กว่ากนั ? พอเราเขียนเรืองทีใหค้ นสามารถทาํ ตามเป็นเสต็ปๆ เขาก็จะเปิดหนา้ เว็บเราคา้ งไว้ และทาํ ตามสิงทเี รา แนะนาํ ไปเรอื ยๆ ถา้ เราสามารถทาํ ไดแ้ บบนี Google กจ็ ะมองว่าเว็บเรามีเนอื หาทมี ีคณุ ภาพ เขาก็จะพา อนั ดบั เว็บไซตข์ องเราใหไ้ ต่อนั ดบั สงู ขึนได้ หลักเกณฑท์ ี จาํ นวนผู้เขา้ มายังหน้าเว็บไซตเ์ รา หมายความว่าหากมเี ว็บทที าํ keyword คาํ เดียวกบั เรา และทาํ ทกุ อยา่ งผา่ นเกณฑม์ าเหมือนๆ กนั Google เขาจะใชเ้ กณฑส์ ถิตจิ าํ นวนของผทู้ เี ขา้ มายงั เว็บของเราเป็นเกณฑใ์ นการจดั อนั ดบั วา่ เว็บไหนควรอยอู่ นั ดบั ดกี วา่ หรือตาํ กวา่ กนั