คู่มือ สอนใช้ WordPress เวอร์ชั่นล่าสุด (4.9.8) สำหรับผู้เริ่มต้น แบบละเอียด

สอนใช้ WordPress

คุณรู้หรือไม่ 32 % ของเว็บทั้งโลกสร้างเว็บด้วย WordPress ทำไมคนถึง ใช้ WordPress ใน การสร้างเว็บไซต์  มากขนาดนี้ เหตุผลเดียวก็คือ WordPress สร้างโอกาสให้ทุกคนสามารถทำเว็บได้ โดยที่ไม่จำเป็นต้องมีความรู้เรื่อง Code ไม่ต้องเขียนโปรแกรม ไม่ต้องเป็นโปรแกรมเมอร์ เรียกได้ว่าใคร ๆ ก็สามารถทำเว็บได้ รวมถึงผมด้วย ที่ไม่ใช่โปรแกรมเมอร์ และไม่มีความรู้เรื่อง Coding อะไรเลย

หากคุณจะเริ่มต้นสร้างเว็บด้วย WordPress ได้ คุณต้องเตรียมสิ่งต่าง ๆ ดังนี้ให้พร้อมครับ

  • Domain (ชื่อเว็บไซต์)
  • Hosting (ที่ตั้งเว็บไซต์)
  • ติดตั้ง WordPress ลงบน Hosting

หากยังไม่ได้ทำสามสิ่งนี้ ให้กลับไปดูเนื้อหาที่บทเรียนนี้ก่อนครับ

เมื่อทุกอย่างพร้อมแล้ว เริ่มต้นเรียนรู้ตาม คู่มือ สอนใช้ WordPress ชุดนี้กันได้เลยครับผม

สารบัญเนื้อหา

  1. WordPress คืออะไร?
  2. วิธีเข้าสู่ระบบหลังบ้าน (Dashboard)
  3. ตั้งค่าเริ่มต้นก่อนการใช้งาน
  4. วิธีการเพิ่มเนื้อหาหน้าเว็บ (ใช้งาน Page/Post) 
  5. วิธีกำหนดหน้า home
  6. การสร้างเมนู
  7. ทำความรู้จัก Sidebar
  8. การใช้งาน widget
  9. ทำความรู้จัก footer
  10. การเพิ่ม plugin (ปลั๊กอิน)
  11. การเปลี่ยน Theme

1. WordPress คืออะไร?

WordPress คือ เครื่องมือที่เป็นตัวช่วยในการสร้างเว็บไซต์ ที่มีระบบจัดการข้อมูล และสร้างเนื้อหา (Content Management System: CMS ) ที่สามารถให้เราเพิ่มเติมบทความ รูปภาพ ได้เองแบบง่ายๆ โดยไม่ต้องมีความรู้เรื่อง Code หรือความรู้ด้านโปรแกรมมิ่ง นั้นเอง

สำหรับคนที่ยังไม่รู้จัก ผมแนะนำให้คุณดูคลิปวีดีโอนี้ครับ

6 เหตุผล ทำไมควรใช้ WordPress สร้างเว็บไซต์ (คลิกอ่าน)

สอนใช้ WordPress

  1. ประหยัดค่าใช้จ่าย
    ใคร ๆ ก็สามารถโหลด WordPress มาใช้ได้ฟรี เพราะเป็น Opensource ดังนั้นเราจึงประหยัดค่าใช้จ่ายในการจ้างคนเขียนโปรแกรม เราสามารถเรียนรู้และทำด้วยตนเองได้เลย
  2. ไม่ต้องเขียนโค้ดให้ยุ่งยาก
    ลืมเรื่องการทำเว็บในอดีตไปได้เลย การทำเว็บด้วย WordPress คล้ายกับตัวต่อเลโก้ เรามีหน้าที่มองหาชิ้นส่วนต่างๆ และเอามาประกอบกันเป็นรูปร่าง ที่ต้องการได้ตามใจชอบ ไม่ต้องเขียนโค้ดให้ยุ่งยากอีกต่อไป
  3. มีฟังชั่นต่าง ๆ มากมาย
    คุณสามารถเพิ่มเติมฟังชั่นต่าง ๆ ผ่านปลั๊กอินมากมาย เพื่อสนองจินตนาการของคุณได้ไม่รู้จบ เชื่อมต่อกับ Social Media ต่าง ๆได้อย่างรวดเร็ว รองรับการทำงานกับไฟล์ภาพ ไฟล์เสียง คลิบวีดีโอ ได้ทุกอย่าง
  4. อัพเดทเนื้อหาต่าง ๆ ได้ง่าย
    เหตุผลที่คนทั่วโลกนิยมใช้ WordPress ก็เพราะมีระบบจัดการเนื้อหาที่ใช้งานง่าย เป็นสากล คุณสามารถเพิ่มข้อมูลหรืออัพเดทเนื้อหาได้ตลอด ทุกที่ ทุกเวลา
  5. มีธีมให้เลือกเยอะ ดีไซน์สวยงาม
    สำหรับคนที่เบื่อง่าย อยากจะเปลี่ยนหน้าตาเว็บไซต์ใหม่ ข่าวดีก็คือ WordPress มีธีมให้ดาวน์โหลดมากมายมหาศาลเลย มีทั้งแบบฟรีและแบบเสียเงิน แถมยังดีไซน์สวยงามสุดๆ
  6. Google ชอบ
    Google ระบบ Search Engine ที่ทรงอิทธิพลที่สุดในโลกอินเตอร์เน็ต ให้ความสำคัญกับเว็บไซต์ที่สร้างด้วย WordPress ทั้งยังแนะนำว่าเว็บไซต์ธุรกิจควรสร้างด้วย WordPress จะช่วยให้ติดอับดับ Google ได้ง่ายขึ้น
ใช้ WordPress สร้างเว็บไซต์ได้ทุกประเภทหรือไม่ ? (คลิกอ่าน)

ถ้าพูดตามหลักการ WordPress สามารถสร้างเว็บได้ทุกประเภทบนโลกใบนี้ เช่น สร้างเว็บบริษัทก็ได้ สร้างเว็บร้านค้าปลีกก็ได้ สร้างเว็บเป็น Marketplace เหมือน Lazada ก็ได้ หรือจะสร้างเว็บเป็นคอร์สเรียนออนไลน์ แบบ skilllane ก็ได้

แต่ตอนลงมือทำจริงอาจจะไม่เหมาะกับการทำเว็บบ้างประเภทนะ โดยเฉพาะเว็บที่มีระบบซับซ้อน เช่น Maket place หรือเว็บพวกประกาศขายบ้าน  ด้วยเหตุผลประมาณนี้ครับ

  • WordPress เหมาะกับเว็บที่เป็นร้านค้าเดี่ยว เป็นสินค้าของเราเอง โพสขายเอง เก็บเงินเอง อันนี้เหมาะกับการสร้างด้วย WordPress
  • เว็บที่เป็น Market place มีความซับซ้อนของระบบมากกว่าหลายเท่า เพราะผู้ขายต้องมีสิทธิเอาสินค้ามาวางขาย และแก้ไขรายละเอียดของตัวเอง เช็คยอดเงิน / การส่งของต่างๆ (ซึ่งต้องกำหนดอีกมากว่า ใครส่ง ด้วยเงื่อนไขไหน ใครรับประกัน)
    E-Commerceที่มารูปภาพ kongwiz.com
  • WordPress เป็น open source software โดยให้คนทั้งโลกรวมกันพัฒนา โดยการเขียนธีม และปลั๊กอิน ให้มาทำงานร่วมกับ WordPress แต่เมื่อต่างคนต่างๆ เขียน หลายๆ เมื่อเราต่อเติมเว็บให้ซับซ้อนยิ่งขึ้น จะมีโอกาสที่ปลั๊กอิน กับธีม ตีกัน ทำให้ระบบพังได้นั้นเอง

“ตามหลักการ WordPress สร้างเว็บได้ทุกประเภทบนโลกใบนี้ แต่การลงมือทำจริง เว็บบางประเภทอาจจะไม่เหมาะกับการสร้างด้วย WordPress”

รู้หรือไม่ WordPress มี 2 ประเภทนะ (คลิกอ่าน)
  1. WordPress.com ให้บริการบล็อกฟรีเหมือน Blogger หรือ Tumblr มีพื้นที่โฮสติ้งฟรีแต่จะมีข้อจำกัดบางอย่าง เช่น ปรับแต่งหน้าตาเว็บไซต์ได้เพียงเล็กน้อย เหมาะสำหรับผู้ที่ต้องการเขียนบทความเพียงอย่างเดียว คุณสามารถสมัครเพื่อเริ่มต้นสร้างเว็บไซต์ได้เลย
  2. WordPress.org สามารถดาวน์โหลด Source code และติดตั้งลงในโฮสติ้งส่วนตัว ปรับแต่งและแก้ไขได้อิสระ มีความยืดหยุ่นมากกว่า เหมาะสำหรับทำเว็บไซต์หลากหลายรูปแบบ ดาวน์โหลดเพื่อเริ่มต้นใช้งาน WordPress กับเว็บไซต์คุณ (เว็บผมเองก็สร้างด้วย WordPress.org เช่นกัน)

ที่มาของคำอธิบายนี้ contentshifu.com

ดูรูปภาพการเปรียบเทียบเพิ่มเติมนะ

ที่มาของรูปภาพ wpexplorer.com

บทความนี้จะรวมความรู้พื้นฐานในการใช้งานเว็บไซต์สร้างด้วย WordPress โดยโฟกัสที่ WordPress.org เป็นหลักครับผม เพราะยืดหยุ่นกว่า และประหยัดกว่าหากเราจะสร้างเว็บไซต์ หลาย ๆ เว็บ 

คู่มือ สอนใช้ WordPress ที่ละขั้นตอน (step by step)

ลุยกันต่อเลยดีกว่าครับ

2. วิธีเข้าสู่ระบบหลังบ้าน (Dashboard)

เราจะเข้าไปแก้เนื้อหาได้เราต้องเริ่มต้นจากการ login เข้าสู่หลังบ้าน มีวิธีการทำดังนี้ครับ

การเข้าหลังบ้าน WordPress ให้พิมพ์ /wp-admin ต่อท้ายชื่อโดเมน

ตัวอย่าง https://padveedigital.com/wp-admin

ระบบก็จะพาเราเข้าสู่หลังบ้าน WordPress ซึ่งมีหน้าตาดังรูปนี้ครับ

สอนใช้ WordPress

วิธีการกลับสู่หน้าบ้านเว็บ ให้เราคลิกที่รูปสัญลักษณ์บ้านครับ

คลิกทีเดิมซ้ำ คือการสลับไปมาระหว่าง หลังบ้าน กับหน้าบ้านนั้นเอง

3. ตั้งค่าเว็บไซต์เริ่มต้นก่อนการใช้งาน

หากมองว่า WordPress คือ โปรแกรม ดังนั้นก่อนที่คุณจะใช้งานเขาให้มีประสิทธิภาพ เราต้องมาเซ็ตค่าเริ่มต้นกันสักเล็กน้อยตามนี้ครับ

3.1 General Setting

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

General Settings

การตั้งค่า General Setting ที่สำคัญมีดังนี้

Site Title: ใส่ชื่อเว็บ หรือชื่อ Brand ลงไป

Tagline: เขียนคำอธิบายสั้นๆ เกี่ยวกับธุรกิจหรือร้านค้าของเรา

Email Address: ใส่อีเมลที่ใช้งานจริง

Site Language: เลือก ไทย (การแสดงภาษาที่หน้าบ้าน Frontpage)

Time zone: เลือกโซนเวลา เมืองไทยให้เลือกเป็น UTC+7

Date Format: เลือกแบบ วัน/เดือน/ปี

Week Starts On: วันเริ่มต้นสัปดาห์ ให้เลือกเป็น วันอาทิตย์ครับ

ตั้งค่าทุกอย่างเสร็จให้คลิก save change

WordPress Tips:

หลังจากเรากด save change พวกแถบเมนูจะเปลี่ยนเป็นภาษาไทยตามที่เราเลือกไว้ที่ Site Language

เมนูภาษาไทย

แต่หากเราต้องการใช้งาน WordPress ให้เป็นสากล เราควรทำให้แถบเมนูหลังบ้าน (Dashboard) เป็นภาษาอังกฤษ แต่ให้เป็นภาษาไทยเฉพาะหน้าบ้านจะดีกว่า ชื่อเรียกฟังชั่นต่าง ๆ มันจะได้เป็นสากล ติดขัดอะไรไปเสริจหาบน google จะเจอคำตอบได้ง่ายกว่าครับ

วิธีการเปลี่ยนภาษาเมนูบนหน้าควบคุมให้เราไปเปลี่ยนที่ส่วนของ ผู้ใช้ (User) แล้วคลิก แก้ไข ตรงชื่อ user

เปลี่ยนภาษาเว็บไซต์

ตรงภาษา ให้เลือกเป็น English (ตรงจุดนี้ คือการเปลี่ยนเฉพาะภาษาของแถบเมนูหลังบ้านเท่านั้น)

คลิก อัปเดทข้อมูลส่วนตัว ให้เรียบร้อยด้วยครับ

3.2 Permalink Settings (ตั้งค่าลิงค์ถาวร)

Permalink Settings คือ การกำหนดการแสดงผลของ URL ว่าต้องการแบบไหน เช่น เป็นตัวเลข, เป็นวันที่, หรือเป็นข้อความ แนะนำให้ตั้งค่าตามนี้ครับ

ไปที่ Settings > Permalink แล้วให้ติ๊กที่ช่อง Post name ตามรูปเลยครับ

ตั้งค่า permalink

4. วิธีการเพิ่มเนื้อหาหน้าเว็บ (ใช้งาน Page/Post)

เว็บไซต์ 1 เว็บ เกิดจากการประกอบกันของเนื้อหา หลายๆ หน้า หน้าเว็บ 1หน้า ก็เหมือนกระดาษ 1 แผ่น ที่เราจะเขียนข้อมูลอะไรลงไปก็ได้ แต่หน้าเว็บที่ใช้สำหรับการเพิ่มเนื้อหานั้นมีอยู่ด้วยกัน 2 ประเภทหลัก คือ Page (หน้า) กับ Post (เรื่อง)

ซึ่งการที่เราจะเพิ่มข้อมูลได้ถูกต้อง ว่าหน้าไหนควรเป็น Page หรือ หน้าไหน ควรเป็น Post เราต้องเข้าใจความแตกต่างของ Page กับ Post ให้ได้ก่อน

4.1 Page กับ Post เพจต่างกันอย่างไร (คลิกอ่าน)
  • Page (หน้า) คือ หน้าที่ไม่จำเป็นต้องแบ่งหมวดหมู่เนื้อหา ไม่ต้องเรียงลำดับของวันที่ว่าใครจะมาก่อนมาหลัง โดยมากเราจะใช้ Page กับหน้าเว็บที่เป็นข้อมูลนิ่งๆ เช่น หน้า Home, About, Contact เป็นต้น
  • Post (เรื่อง) คือ หน้าข้อมูลที่เราต้องการแบ่งเนื้อหาตาม category เช่น ตามชนิดสินค้า ตามประเภทความรู้ ตามภาค ตามจังหวัด ตามกลุ่ม ตามเวลา (ใหม่/เก่า) ฯลฯเมื่อเราเขียน Post หรือบทความเสร็จ (รวมถึงสินค้าที่เราจะขายด้วย) เราต้องสร้าง Category เพื่อทำเป็นหมวดหมู่ให้เขาอยู่นั้นเอง

    เมื่อถึงเวลาก็แสดงผลเป็นหมวดหมู่ ตามสไตล์บล็อก คือ เรียงบทความตามหมวดหมู่ โดยดึง Post ล่าสุดขึ้นมาแสดงด้านบนเสมอ

wordpress-pages-vs-posts

4.2 การสร้าง Page (คลิกอ่าน)

ลำดับต่อมาเราต้องสร้างหน้าที่เป็นเนื้อหาหลักของเว็บที่ทุกเว็บไซต์ต้องมี ได้แก่หน้า หน้า Home, About และหน้า Contact ซึ่งหน้าดังกล่าว เราต้องสร้างที่ Page ครับผม มีวิธีการใช้งานดังนี้

ให้ไปที่ Page > add new > แล้วให้ใส่ชื่อหน้า กับเนื้อหา ลงไป แล้วกด Publish เผยแพร่ข้อมูลครับ

การสร้าง page

สำหรับหน้าที่สร้างใหม่ การเผยแพร่ข้อมูลครั้งแรกเราจะเรียกว่า Publish แต่การกลับมาแก้ไขข้อมูลที่เคยเขียนแล้วเราจะเรียกว่าการ Update ครับ

ส่วนการใช้งาน Text editor (กระดานเพิ่มเนื้อหา และรูปภาพต่างๆ) จะอธิบายในหัวข้อถัดไปครับ

4.3 การใช้งาน Text editor (คลิกอ่าน)

ใช้งาน Text editor

ก่อนที่เราจะเพิ่มข้อมูลลงไป หากเราพึ่งใช้งานครั้งแรก แถบเมนูแสดง option การปรับแต่งข้อความมันยังเปิดไม่ครบ ให้คลิก ที่สัญลักษณ์ตัวซ้ายสุด ตามรูปก่อนครับ พอคลิก เราจะเห็น option การปรับตัวอักษรคล้ายๆ กับโปรแกรม Word นั้นเอง

text editor

กระดาน text editor ใส่อะไรลงไปได้บ้าง

  • ใส่ text ได้
  • ใส่รูปภาพได้
  • ใส่ไฟล์ Mp4 ได้
  • ใส่ PDF ไฟล์ได้
  • ใส่ url จาก YouTube ได้
  • Embed โค้ดที่เป็น iframe จากที่ต่าง ๆ มาวางได้ เช่น Google map, หน้า Facebook Fan page Box ได้

วิธีการใส่สื่อที่เป็น Media เช่น รูปภาพ วิดีโอ หรือ pdf ให้เราคลิกที่คำว่า Add media แล้วอัพโหลดไฟล์ของเราใส่เข้าไปได้เลย

คู่มือ WordPress

WordPress Tips

หากคุณต้องการให้รูปภาพบนเว็บ ไปปรากฏที่ผลการค้นหาหมวดรูปภาพบน Google ด้วย การใส่รูปภาพยังมีรายละเอียดที่คุณควรรู้อีกหลายจุด ผมแนะนำให้คุณอ่านบทความนี้ก่อนครับ : การทำ SEO รูปภาพให้ติดหน้าแรก Google

การนำคลิปวีดิโอจาก YouTube มาวางที่ text editor (คลิกอ่าน)

เข้าไปที่หน้าของ YouTube > เลือกคลิปวีดิโอที่คุณต้องการ > กดตรงคำว่า share

ใส่ YouTube

จากนั้นให้เราคัดลอก URL แล้วมาวางที่ text editor บนเว็บเราได้เลยครับ

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

4.4 วิธีการแชร์ google map มายังเว็บของเรา (คลิกอ่าน)

ให้เราไปที่หน้า google map > เลือกสถานที่เราต้องการ > คลิกคำว่าแชร์ > เลือกที่ ฝังแผนที่ (embed map) > จากนั้นให้คลิก คัดลอก html

ใส่ google map

เราก็จะได้โค้ดจาก google map ที่มีลักษณะเป็น iframe ให้เราเอาโค้ดนี้ไปวางที่ text editor แต่การวางสิ่งที่เป็นโค้ด HTML เช่น โค้ด iframe จาก google map เราต้องวางโค้ดลงในหมวด text ดูรูปภาพประกอบ

wordpress google map

จากนั้นให้เราคลิกกลับมาที่ Visual เราก็ได้ภาพแผนที่จาก google map มาแสดงบนเว็บของเราแล้วนั้นเอง

ใส่ แผนที่

4.5 การวางลิงค์ (URL) ที่หลังรูปภาพ (คลิกอ่าน)

บางครั้งเราต้องการให้รูปภาพของเรา กดแล้วเปิดไปอีกหน้าเว็บหนึ่ง เช่นกดที่รูป แล้วเด้งไป Line , ไป Facebook หรือเด้งไปหน้าสินค้าของเรา เราต้องเอา URL ปลายทางมาใส่ไว้ที่หลังรูป มีวิธีการทำดังนี้

อัพโหลดรูปขึ้นไปที่ text editor จากนั้นให้เราคลิกที่รูปภาพ > คลิกที่ edit

ใส่ลิงค์ที่รูปภาพ

ตรงส่วนของ Image detail > ให้ดูที่คำว่า Link to ให้เลือกเป็น Custom URL > วาง URL ปลายทาง หรือหน้าเว็บที่เราต้องการลงไปครับ

หากใครต้องการให้ เมื่อมีการกดปุ่ม แล้วหน้าเว็บเปิดแบบ open in new tab ให้เราคลิกที่ Advance option >  แล้วไปติ๊ก ที่ช่อง Open link in a new tab ได้เลยครับ

4.6 การสร้าง post (คลิกอ่าน)

เราอาจจะพอรู้แล้วว่า post คือ หน้าข้อมูลที่เราต้องการแบ่งเนื้อหาตาม category (หมวดหมู่) ซึ่งเป็นจุดที่ทำให้ post มีความแตกต่างจาก page

ดังนั้น ก่อนที่คุณจะเริ่มต้น เขียน post คุณต้องวางแผนสร้าง category ก่อน ว่าเว็บเราจะแบ่งหมวดหมู่เป็นประเภทอะไรบ้าง

เช่น เว็บคุณขายรองเท้ากีฬา คุณอ่านจะแบ่งประเภทหมวดหมู่ได้ดังนี้

  • รีวิว
  • ข่าวสาร
  • การออกกำลังกาย
  • เทคนิคการวิ่ง
  • แฟชั่น (การแต่งตัว)
  • ไลฟ์สไตล์ (การใช้ชีวิต)
  • ฯลฯ

ตัวอย่างเว็บที่ทำคอนเทนต์ (เขียนบทความ) เกี่ยวกับรองเท้าวิ่ง และขายสินค้าไปด้วย sneakerfreaker.com

ตัวอย่างหมวดหมู่บทความของเว็บ Central

การสร้างหมวดหมู่

การสร้าง Category

ให้เราไปที่ post > คลิก Categories

Name: ใส่ชื่อหมวดหมู่ จะใช้ภาษาไทย หรือภาษาอังกฤษก็ได้

Slug: คือ URL ที่จะแสดงหน้าเว็บ ตรงจุดนี้ผมแนะนำให้ เขียนเป็นภาษาอังกฤษ เท่านั้นครับ

เมื่อใส่ข้อมูลเสร็จ คลิก Add New Category ให้เรียบร้อย

ทำซ้ำจนกว่าเราจะได้ครบทุกหมวดหมู่ที่เราต้องการ

ตัวอย่างการสร้างหมวดหมู่

วิธีการสร้าง Post

ไปที่ post > add new จากนั้นให้ใส่เนื้อหาของบทความลงไป

การสร้างโพส

ในทุก ๆ Post ต้องมี 4 สิ่งนี้ คือ

  1. ชื่อเรื่อง
  2. Categories (หมวดหมู่)
  3. เนื้อหา
  4. Featured image (รูปภาพหน้าปก)

และใน 1 Post สามารถอยู่ในหลาย Categories ได้

5. วิธีกำหนดหน้า home (homepage displays)

หลังจากที่เราสร้างหน้า page และ post เตรียมไว้แล้ว หากเราลองกับไปดูที่หน้าบ้าน เราจะเห็นการเรียงกันของบทความไล่ลงมาเรื่อยๆ จากบทความใหม่ไปหาบทความเก่า ซึ่งมันยังไม่ใช่การแสดงหน้า Home ที่เราต้องการ

ตั้งค่าหน้า home

นั้นหมายความว่าตัว WordPress เขายังไม่รู้ว่าเราต้องการหน้าไหนให้มาแสดงเป็นหน้า homepage displays (หน้าที่เป็นชื่อของโดเมนหลัก) เราต้องเป็นคนเข้าไปกำหนดก่อนนั้นเอง

วิธีการกำหนดหน้า font page มีดังนี้ครับ

กลับไปหลังบ้าน > settings > reading > ติ๊กที่ A static page > แล้วเลือกชื่อหน้าที่เราต้องการให้เป็นหน้า Homepage

home page

หลังจากเลือกเสร็จเรียบร้อยแล้ว ลองกลับไปดูหน้าบ้านใหม่อีกรอบครับ หน้าเว็บจะแสดงเป็น page ที่เราได้เลือกไว้นั้นเอง

homepage displays

6. การสร้างเมนู

เมื่อเรามีหน้า Home เรียบร้อยแล้ว แต่เราจะยังไม่สามารถคลิกเปิดไปเข้าชมหน้าเว็บอื่น ๆ ของเราได้ เพราะมันยังไม่มีเมนู ที่จะเชื่อมโยงพาเราไปยังหน้าอื่น ๆ

ดังนั้น สิ่งที่เราต้องทำเป็นลำดับต่อมาคือการสร้างเมนู นั้นเอง ซึ่งมีขั้นตอนการสร้างเมนู ดังนี้

วิธีการสร้างเมนู (คลิกอ่าน)

กลับไปหลังบ้าน > ไปที่ Appearance > menu > ตั้งชื่อเรียกชุดเมนู > คลิก Create Menu

สร้างเมนู WordPress

ให้เราเลือกหน้า Page ที่เราต้องการให้แสดงบนเมนู คลิก add to menu ให้เรียบร้อย

สร้างเมนู

นอกจากเราจะสามารถนำ page มาวางเป็นเมนู เรายังสามารถนำ Category หรือ Post มาวางที่เมนูได้อีกด้วย

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

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

ป้ายชื่อเมนู

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

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

ถ้ายังไม่เข้าใจ ดูเนื้อหาการสร้างเมนูจากคลิปนี้ได้ครับ

Menu Structure

7. ทำความรู้จัก Sidebar

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

ลองดูตัวอย่าง sidebar ของเว็บต่าง ๆ เหล่านี้ครับ

สร้าง sidebar

ลองเข้าไปดู sidebar ตัวอย่างจากเว็บจริง ๆ ด้านบนได้ที่ miraclas.com

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

คราวนี้หากเราต้องการจะแก้ไข Sidebar เราจะไปแก้ไขที่ไหนดี? ลองดูรูปด้านล่างประกอบด้วยนะ

จากรูปถ้าเราสังเกตดี จะเห็นได้ว่า sidebar และ footer จะมีบางสิ่งที่เป็นองค์ประกอบเหมือนกัน นั้นก็คือ Widget นั้นหมายความว่า หากเราต้องการแก้ไขเนื้อหาที่อยู่บน sidebar กับ footer เราต้องไปแก้ไขที่ widget นั้นเอง ดูวิธีการใช้งาน Widget ที่หัวข้อถัดไปได้เลยครับ

8. การใช้งาน widget

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

การเปลี่ยน widget ที่ sidebar (คลิกอ่าน)

กลับไปหลังบ้าน > ไปที่ Appearance > คลิก Widget เราจะพบการแสดงผลหน้าตาแบบนี้

Widget คือ ชิ้นส่วนต่างๆ ที่แสดงอยู่ใน 2 แถว ด้านซ้ายมือ ส่วน 2 แถวด้านขวามือ เราเรียกว่าช่องที่เก็บ widget เพื่อให้แสดงผลที่หน้าเว็บ

ขั้นตอนการใช้งาน ให้เราลบ widget ที่อยู่ในช่อง Blog sidebar ออกให้หมดก่อน ให้คลิกที่ลูกศร dropdown > ให้คลิก delete เพื่อลบ widget

ให้เราไล่ลบ widget ออกไปให้หมดเลยครับ

จากนั้นเราก็ออกแบบว่าตรง sidebar เราอยากให้มันแสดงอะไรบ้าง สมมุตผมอยากให้แสดงรูปภาพ Promotion สินค้า กับ พวกบทความล่าสุด

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

เพิ่ม widget

จากนั้นลองกลับไปดูที่ post หน้าบ้านเว็บของเราครับ เราจะเห็นว่าที่ sidebar มีการแสดง widget ที่เราเรียกใช้งาน มาเรียบร้อยแล้ว

9. ทำความรู้จัก Footer

Footer คือ ส่วนที่แสดงอยู่ด้านล่างของเว็บ และแสดงผลเหมือนกันทุกหน้า ทั้งหน้าที่ page และเป็น post การแก้ไขข้อมูลส่วน Footer เราจะแก้ไขผ่าน Widget เช่นเดียวกับการแก้ไขส่วนที่เป็น sidebar นั้นเอง

footer

footer ปรับแต่งข้อมูลที่ widget

การแสดง Footer ที่หน้าเว็บ

10. การเพิ่ม plugin (ปลั๊กอิน)

plugin คือ เครื่องมือเพิ่มฟังชั่นการใช้งานเว็บ WordPress ของคุณ ให้มีประสิทธิภาพมากขึ้น ตอบโจทย์ธุรกิจ หรือในสิ่งที่เราต้องการ

ลงปลั๊กอิน

อย่างเช่น บางทีเราอยากเปลี่ยนรูปแบบตัวอักษรให้มันสวยขึ้น เราก็ต้องหาปลั๊กอินเปลี่ยนฟอนต์มาใส่นั้นเอง

วิธีการเพิ่มปลั๊กอิน (คลิกอ่าน)

ให้เราไปที่ Plugins > คลิก add new

จากนั้นให้ค้นหาชื่อปลั๊กอินที่เราต้องการ เช่นผมต้องการเปลี่ยนฟอนต์ ผมก็ค้นหาด้วยคำว่า seed font

จากนั้นให้คลิก install และ คลิก activate ให้เรียบร้อย ส่วนเรื่องการใช้งานปลั๊กอิน แต่ละตัวบางครั้งเราต้องดูผ่านคู่มือขอปลั๊กอิน นั้นๆ กันเองครับ เพราะแต่ละตัวมีการใช้งานไม่เหมือนกัน

รายชื่อปลั๊กอินที่ทุกเว็บต้องมี (คลิกอ่าน)

ปล. เดี๋ยวจะกลับมาอัพเดทเพิ่มให้นะ

11. การเปลี่ยนธีม (Theme)

Theme คือ เครื่องมือที่ใช้สำหรับออกแบบ และจัดวาง layout หน้าตาเว็บไซต์ WordPress ของเราให้สวยงามในแบบที่เราต้องการ หากเราใช้งานธีมได้เก่งๆ เราจะสามารถออกแบบหน้าเว็บของเราอย่างไรก็ได้ ทุกไอเดีย หรือออกแบบเว็บเลียนแบบหน้าตาของเว็บที่เราชอบก็ได้

การใช้งานธีมนั้นจะมีอยู่ 2 ประเภท คือ

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

เพราะพวกธีมฟรีมีข้อจำกัดเยอะ ในระยะยาวต้องซื้อธีมกันทุกคนครับ คราวนี้ถ้าจะซื้อ ซื้อธีมไหนดี ถ้าเป็นมือใหม่ควรใช้ธีมที่เป็น bestseller ที่มีคนใช้เยอะๆ ติดขัดอะไรจะได้มีคนช่วยได้ครับ หรือไม่ก็ลองเอาชื่อธีมที่เราสนใจไปเสริจหาบนยูทูปดูก่อนว่ามีคลิปสอนเยอะมั้ย การเซ็ทอัพธีมจะได้ง่ายขึ้นครับ เพราะการทำเว็บมันไม่ง่ายอย่างที่เราคิดไว้แน่นอนครับ

แหล่งซื้อธีมคุณภาพระดับโลกคือที่นี่ครับ Themeforest ทุกธีมจะมี live preview ว่าธีมนี้ทำอะไรได้บ้าง แต่ถ้าเป็นธีมที่สร้างโดยคนไทยก็ต้องที่นี่เลยครับ seedtheme

แต่เราต้องมองให้ออกว่า ธีม คือชิ้นส่วนที่เปรียบเหมือนกับตัวต่อเลโก้ เราซื้อมาหนึ่งธีม เราก็ได้ชิ้นส่วนมา 1 ถุง เราจะต่อเป็นเว็บอะไรก็ได้ โดยใช้ชิ้นส่วนที่ธีมมีให้ จะต่อเป็นเว็บบริษัทก็ได้ จะต่อเป็นเว็บร้านค้าก็ได้ ต่อเป็นเว็บบล็อคก็ได้ แล้วแต่ไอเดียของเราเลย ส่วนพวกเดโมที่เราเห็น ผู้สร้างธีมเขาแค่ต่อเว็บให้ดูเป็นตัวอย่าง จากชิ้นส่วนต่างๆ ที่ธีมนั้นมีให้เฉยๆ ครับ เรายังสามารถต่อเติมเสริมแต่งอะไรเพิ่มขึ้นอีกก็ได้ครับ

ธีม WordPress

หากยังตัดสินไม่ถูกลองเข้าไปดูรายชื่อธีมที่ผมแนะนำไว้ที่นี่ก็ได้ครับ 2017’s Best Selling Themes ใช้ดีทุกธีม ปล. ถ้าเราใช้งานมันเป็นนะ

แต่สำหรับบทความชุดต่อไปผมจะพูดถึงเรื่องการออกแบบเว็บด้วย พรีเมี่ยมธีม ผมจะสอนผ่านธีมนี้ครับ Flatsome Theme ดังนั้นหากคุณต้องการที่จะทำเว็บสวยๆ ที่ละขั้นตอนตามบทความชุดนี้ได้ ผมแนะนำว่าให้มาใช้ธีมเดียวกันกับที่ผมใช้ จะง่ายที่สุดครับ

หน้าที่หลักๆ ของธีม (คลิกอ่าน)
  • ช่วยในการออกแบบ (layout) หน้าเว็บแต่ละหน้า
  • ปรับแต่งส่วน Header และ Footer
  • เปลี่ยน Logo, เปลี่ยนสี, เปลี่ยนฟอนต์ (font
วิธีการเปลี่ยนธีม (คลิกอ่าน)

1. ธีมฟรี

ให้เราไปที่ Appearance > เลือก Theme > Add new > ชอบธีมไหน เราก็กด install และ Activate ใช้งานธีมนั้นได้เลย

ลงธีม WordPress

2.ธีมเสียเงิน (Premium Theme)

ให้เราไปที่ Appearance > เลือก Theme > Add new > คลิก Upload ไฟล์ธีมที่เราซื้อมากนั้นเอง จากนั้นให้คลิก Install และ Activate ให้เรียบร้อย

แต่ความยากของ WordPress ก็คือ หากเราใช้ Premium Theme ซึ่งแต่ละธีมจะมีขั้นตอนการลงธีมและ set up ไม่เหมือนกัน ก่อนที่เราจะใช้งานธีมไหน เราต้องเข้าไปอ่านคู่มือของธีมๆ นั้นก่อนเสมอ ซึ่งวิธีการใช้งานธีมแบบละเอียด ผมจะพูดถึงในบทถัดไปครับ

ตัวอย่างการติดตั้งธีม Flatsome

สรุป: คู่มือ สอนใช้ WordPress

การใช้งาน  WordPress นั้นไม่ยาก ใคร ๆ ก็สามารถเรียนรู้ได้ แต่เขาก็มีรายละเอียดค่อนข้างมาก สำหรับผู้เริ่มต้นใช้งาน WordPress อาจจะยังรู้สึกว่ามันยังไม่ง่าย ตรงจุดนี้เราต้องค่อยๆ ฝึกฝนทำซ้ำไปเรื่อย ๆ พื้นฐานที่แน่นเท่านั้น ถึงจะช่วยให้เราทำเว็บให้มีประสิทธิภาพได้ในอนาคต เพราะแค่การทำเว็บได้ กับทำเว็บให้ดี ยังมีรายละเอียดที่แตกต่างกันอยู่มากครับ

ประชาสัมพันธ์

สำหรับท่านใดที่อ่านบทความนี้แล้ว สนใจการสร้างเว็บร้านค้าออนไลน์ด้วย WordPress + Woocommerce แบบมืออาชีพ ในวันที่ 9 - 10 กุมภาพันธ์ 2562 นี้ ผมได้เปิดคอร์สสอน Woocommerce Expert  แบบกลุ่มเล็กๆ 1 รอบ สอนสดรอบละ 5 คน เพื่อให้ผู้เรียนได้ประโยชน์สูงสุด เรียนรู้และทำตามไปพร้อมๆ กันได้ 

รายละเอียดคอร์สเรียน

สร้างเว็บร้านค้าออนไลน์ Woocommerce expert

สอน Woocommerce

  • ค่าเรียน 9,500 บาท
  • เรียนวันเสาร์-อาทิตย์ที่ 9 - 10 กุมภาพันธ์ 2562
  • เวลาเรียน 10.00- 16.000 น. 
  • เรียนกลุ่มเล็กรอบละ 5 คนเท่านั้น (ว่าง)
  • เราสอนด้วยธีม Flatsome Theme
    (No.1 Best selling Woocommerce Theme 2018)
  • สถานที่เรียน Seatz Station
  • ปากซอยงามวงศ์วาน 44 ก่อนถึง รพ.วิภาวดี ฝั่งตรงข้าม ม.เกษตรประตูงามวงศ์วาน 3
  • จองที่นั่งเรียนผ่าน Lind ID : padveewebschool ได้เลยครับ
สอบถามเพิ่มเติม

คอร์สเรียนนี้เหมาะกับใคร ?

  • เนื่องจากคอร์สเรียนนี้เราสอนเป็นกลุ่ม จึงไม่เหมาะกับทุกคน
  • คอร์สนี้เหมาะสำหรับผู้ที่เคยใช้งาน WordPress มาบ้าง รู้พื้นฐานแบบงูๆปลาๆ หากคุณเคยลง WordPress เอง ลงปลั๊กอินได้ เคยสร้าง page หรือ post แบบนี้เรียนได้
  • หรือหากคุณไม่เคยใช้งาน WordPress มาก่อนเลย แต่คุณมีทักษะไอที เช่น เคยใช้พวกโปรแกรมกราฟฟิค Photoshop, illustrator เคยใช้พวกโปรแกรมตัดต่อวีดีโอ อะไรก็ได้มาบ้าง
  • ถ้าคุณเคยใช้โปรแกรมดังกล่าวข้างต้น แสดงว่าคุณมีทักษะไอที สามารถลงเรียนคอร์สนี้ได้
  • เนื่องจากเราเรียนกันหลายคน หากผู้เรียนไม่มีทักษะไอทีเลยจะทำให้เรียนรู้ตามเพื่อนไม่ทันนั้นเอง

คอร์สเรียนนี้ไม่เหมาะกับใครบ้าง ?

  • ผู้ที่ไม่มีทักษะด้านไอทีต่างๆ 
  • ผู้สูงวัยที่ใช้คอมพิวเตอร์ยังไม่คล่อง หรือหากรู้สึกว่าตัวเองเรียนรู้ได้ช้า คุณไม่เหมาะกับคอร์สเรียนนี้
  • สำหรับคนที่ไม่มีทักษะด้านไอที หรือคิดว่าตนเองเรียนรู้ได้ช้า และชอบความเป็นส่วนตัว แต่ต้องการที่จะสร้างเว็บด้วยตนเอง
  • ผมแนะนำให้ลงเรียนรอบสอนแบบตัวต่อตัวจะดีที่สุดครับ
เรียนแบบตัวต่อตัว

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องที่ต้องการถูกทำเครื่องหมาย *