สอนใช้ WordPress 2022 คู่มือพื้นฐาน ฉบับจับมือสอน จนใช้เป็น

WordPress ใช้ยังไง ยากไหม เริ่มศึกษาจากจุดไหนดี? น่าจะเป็นคำถามมือใหม่ที่กำลังสนใจทำเว็บไซต์ด้วยตัวเอง ส่วนใหญ่มักจะหาคอร์สเรียน สอนใช้ WordPress ไม่ว่าจะออนไลน์ หรือเรียนตัวต่อตัว บางคนหันไปซื้อหนังสือที่ร้าน

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

การปูพื้นฐานให้แน่นสำคัญที่สุด เมื่อพื้นฐานดี เราจะปรับแต่ง จัดหน้าท่าไหนก็ได้หมดครับ

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

ตัวเลขน่ารู้
– ปัจจุบัน ปี 2021 มีเว็บไซต์ที่ใช้ WordPress สร้าง 42.4%(อัพเดตเมื่อ 21-08-2021) ของเว็บไซต์ทั้งหมด
– ในบรรดา CMS ทั้งหมด WordPress ครองส่วนแบ่ง 65.2%
– อ้างอิงข้อมูลจาก W3 Techs

0. ทำความรู้จักระบบหลังบ้าน WordPress

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

วิธีเข้าสู่ระบบหลังบ้าน : พิมพ์ domain ตามด้วย /wp-admin ยกตัวอย่างเช่น

https://santumweb.com/wp-admin

ถ้าเราติดตั้ง WordPress ถูกต้อง 100% เวลาเข้าสู่ระบบหลังบ้าน ก็จะเห็นหน้าตาประมาณนี้ครับ

วิธี Login WordPress
วิธี Login WordPress

ถ้าเข้าหลังบ้าน WordPress ไม่ได้ น่าจะมี 2 สาเหตุ คือ ถ้าไม่ใช่รหัสผ่านผิด ก็คงจะเป็นเรื่อง การติดตั้งไม่สมบูรณ์

หาก Login เรียบร้อยแล้ว เรามาดูกันว่า หน้าตาหน้าแรกของระบบหลังบ้าน หรือ ที่เรียกว่า Dashboard มีหน้าตาอย่างไร และแต่ละส่วนมีอะไรกันบ้าง

WordPress Dashboard
WordPress Dashboard

หน้าแรกของระบบหลังบ้าน สังเกตว่าจะมี 3 ส่วนหลักๆ คือ

  • Admin Menu : ประกอบด้วยเมนูการตั้งค่าทุกส่วนของ WordPress จะถูกรวมอยู่ด้านซ้ายทั้งหมด
  • Admin Bar : ส่วนเมนูลัด เราสามารถคลิกแก้ไขส่วนต่างๆ ผ่านหน้าเว็บไซต์เข้ามายังหลังบ้าน
  • Dashboard : ส่วนตรงตรงกลาง ซึ่งประกอบด้วยหลายๆ เป็นส่วนที่เป็นข้อมูลสรุปอัพเดตล่าสุด ของแต่ละปลั๊กอิน

Screen Options ที่อยู่ด้านบน-ขวา คือ ส่วนตั้งค่าการแสดงผลของหน้า Dashboard ว่าต้องการเปิด-ปิดอะไรบ้าง

1. ตั้งค่า WordPress ที่จำเป็น

ตั้งค่า Site Identity ให้สมบูรณ์

หลังจากติดตั้ง WordPress ใหม่ๆ ก็จะมีการตั้งค่าหลายจุด ที่จำเป็นต้องทำให้สมบูรณ์มากขึ้น โดยเฉพาะ Site Identity เราต้องใส่ หัวข้อเว็บ(Site Title), คำโปรย(Tagline), favicon(โลโก้ที่แสดงที่มุมแท็บเบราเซอร์), และ Logo

  • ไปที่เมนู Appearance –> Customize
ตั้งค่า Site Identity
ตั้งค่า Site Identity
  • เลือก Logo หลักของเว็บไซต์
  • กรอกชื่อเว็บไซต์ที่ถูกต้อง
  • กรอกคำโปรย
  • เลือก Logo สำหรับทำ favicon (จะแสดงไอคอนเล็กๆ ที่มุมซ้ายของแท็บเบราเซอร์)
ตั้งค่า Site Identity
ตั้งค่า Site Identity

ตั้งค่า General (ทั่วไป)

  • Site Title : ชื่อเว็บไซต์
  • Tagline : คำโปรย
  • Address URL : รูปแบบ URL ที่แสดง เช่น https://santumweb.com หรือ ไม่มี www.
  • Admin Email : แนะนำให้ใส่อีเมล์จริงที่ใช้งานอยู่
  • Site Language : ภาษาของหลังบ้าน
  • Timezone : โซนเวลา ของไทยก็ UTC+7
ตั้งค่า General (ทั่วไป)
ตั้งค่า General (ทั่วไป)

ตั้งค่า Reading

Reading เป็นการตั้งค่าที่สำคัญข้อนึง เช่น กรณีหน้าแรกของเว็บไซต์ ถ้าเราต้องการแสดงหน้าเพจเฉพาะที่เราสร้างขึ้นมาเอง เราก็ต้องมาตั้งหน้าที่เราสร้างเอง เป็นหน้าแรก หรือ หน้าหลักเวลาเปิดเว็บไซต์ครั้งแรก วิธีการคือ

ตั้งค่า Reading
ตั้งค่า Reading
  • Home Page : การตั้งค่าหน้าแรก : เลือก A static page –> เลือก Page ที่เราต้องการตั้งเป็นหน้าหลัก
  • Posts page : เลือก Page ที่ต้องการตั้งเป็นหน้ารวมของบทความ
  • Search Engine Visibility : ถ้าติ๊ก หมายความว่าเราได้บล็อกไม่ให้ Google จัดอันดับ ถ้าปล่อยไว้ หมายความว่า อนุญาตให้ Google จัดอันดับ (แนะนำ ไม่ต้องติ๊กครับ)

Search Engine Visibility มีผลโดยตรงกับเรื่อง SEOถ้าติ๊ก” เว็บไซต์เราจะไม่ปรากฏบน Google เลย เพราะมันเป็นการ Block การเข้าถึงของ Google bot

ถ้าหากหวังผลในเรื่องอันดับบน Google แนะนำให้หา ความรู้การทำ SEO และปัจจัยที่มีผลต่อการทำ SEO

ตั้งค่า Permalinks (ลิงค์ถาวร)

Permalinks คือ รูปแบบของ URL ของแต่ละบทความ ที่แสดงในช่องค้นหาของเบราเซอร์ ซึ่งจะมี 6 รูปแบบให้เลือก แต่แนะนำให้เลือก Post name เพราะเป็นรูปแบบที่เรียบง่าย กระชับ จำได้ง่าย และยังส่งผลดีต่อ SEO ด้วย

ตั้งค่า Permalinks (ลิงค์ถาวร)
ตั้งค่า Permalinks (ลิงค์ถาวร)

ลบข้อมูลตัวอย่างที่มาตอนติดตั้ง WordPress ใหม่ๆ

หลังจากติดตั้ง WordPress เสร็จครั้งแรก ระบบจะสร้างข้อมูลตัวอย่างของ Page, Post และ Plugins ให้ลบทิ้งได้เลย แล้วค่อยสร้างขึ้นมาใหม่

ลบ WordPress Dummy Content
ลบ Dummy Content

2. การใช้ Theme WordPress

Theme WodPress คือ หน้าตาเว็บไซต์ส่วนที่แสดงผลให้คนทั่วไปได้เห็น ในรูปแบบของการจัดวาง Layout การดีไซน์ที่สวยงาม เรียกว่า ธีม ซึ่งเว็บไซต์จะสวยหรูแค่ไหน ก็ขึ้นอยู่กับธีมที่เราเลือกใช้ ใน WordPress จะมีธีมฟรี และเสียเงินซื้อ แต่ละแบบก็จะมีข้อดี-ข้อเสียที่ต่างกัน

โครงสร้างธีม

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

  • Header : ส่วนบนสุดของเว็บไซต์ ส่วนใหญ่ไว้แสดง Menu, Logo
  • Content : ข้อมูลตรงกลาง ไว้แสดงข้อมูลจาก Page หรือ Posts
  • Sidebar(Left, Right) : ส่วนด้านข้าง ไว้แสดงพวก Widgets ต่างๆ
  • Footer : ส่วนล่างสุดของเว็บ ส่วนใหญ่ไว้แสดงข้อมูลติดต่อ จะปรากฏไปทุกหน้า
โครงสร้าง Theme WordPress
โครงสร้าง Theme WordPress

Theme Free

WordPress มีธีมฟรีให้เราใช้งานมากถึง 3,973 ธีม แต่ละธีมก็จะมีการออกแบบดีไซน์ การจัดวางที่ต่างกัน แต่ควรเลือกธีมให้เข้ากับรูปแบบเว็บไซต์ที่เราต้องการ เช่น ถ้าจะทำร้านค้าออนไลน์ ก็ควรเลือกธีมที่มีดีไซน์และรองรับร้านค้าออนไลน์

วิธีติดตั้ง Theme Free

ไปที่เมนู Appearance –> Themes –> คลิก Add New Theme

วิธีติดตั้ง WordPress Theme Free
วิธีติดตั้ง Theme Free

หากเจอธีมที่สวยต้องใจแล้ว อันดับแรก คลิก Preview เพื่อแสดงตัวอย่างก่อน แล้วค่อยกด Install

วิธีติดตั้ง WordPress Theme Free
วิธีติดตั้ง Theme Free

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

โหลดปลั๊กอิน Page Builder ตามลิงค์นี้ โหลดปลั๊กอิน Page Builder แนะนำ “Page Builder by SiteOrigin” กับ “Elementor Page Builder

Theme Premium

Theme Premium WordPress
Theme Premium WordPress

บางคนเรียกว่า Theme Pro จำเป็นต้องเสียเงินซื้อ ราคาเริ่มต้น 13$ เป็นต้นไป เรทกลางๆ ราคาจะอยู่ 49 – 69$ แต่ได้ธีมสวยจริง แล้วเราเสียเงินซื้อหลักพัน แล้วมันแตกต่างอย่างไรบ้าง ถ้าเทียบกับธีมฟรี

  • Design สวยให้เลือกหลากหลาย ออกแบบโดย เว็บดีไซน์เนอร์ตัวจริง
  • ฟีเจอร์ที่แถมมา เรียกว่าจบในตัวเดียว
  • แถมปลั๊กอินพรีเมี่ยม ไม่ต้องซื้อแยก
  • มี Demo Content หรือข้อมูลตัวอย่าง ติดตั้งแล้วจะได้ดีไซน์เหมือน Demo เปะเลย
  • Support / Updates มีทีมซับพอร์ตค่อยช่วยเหลือเรายามติดขัด และสามารถอัพเดตธีมได้

คำแนะนำวิธีเลือกซื้อ Theme Premium

  • เลือกจากยอดขายมากไปหาน้อย
  • Review ต้อง 4.5 ดาวขึ้นไป
  • อัพเดตล่าสุดไม่เกิน 6 เดือน หากไม่ได้อัพเดตนานไม่แนะนำ
  • ติดอันดับ Best Seller ปีที่ผ่านมา Best WordPress themes 2019
  • ทีม Support ตอบไว

การตั้งค่า Theme (Theme Options)

การตั้งค่าธีมแต่ละธีมจะต่างกัน ขึ้นอยู่กับเจ้าของธีม ว่าเค้าจะออกแบบและจัดวางเมนูตรงไหนบ้าง แต่ส่วนใหญ่แล้วการตั้งค่าธีม จะสามารถปรับแต่งธีมได้ดังนี้

  • ตั้งค่าสีหลัก สีลิงค์ สีข้อความต่างๆ และ ฟ้อนต์
  • ตั้งค่า Header, Footer
  • ตั้งค่า Sidebar (Left, Right) *ส่วนด้านข้างซ้าย-ขวา
  • ตั้งค่าหน้า Post, Page
  • ตั้งค่าหน้า Shop
  • การตั้งค่าขั้นสูง
  • ฯลฯ

[แนะนำ] สำหรับมือใหม่ ให้ศึกษาคู่มือการตั้งค่าของธีม ให้ละเอียดก่อนที่จะใช้งาน โดยเฉพาะ Theme Premuim มันจะมีคู่มือสอนใช้งานเกือบทุกธีม

จุดสังเกตเมนูการตั้งค่า Theme ( Theme Options )

จากประสบการณ์ที่ใช้งานธีม WordPress มาเป็นสิบธีม พอจะเดาได้ว่า Theme Options มันน่าจะอยู่ตรงไหนกันบ้าง เผื่อบางท่านหาเมนูการตั้งค่าธีม ไม่เจอ! ให้หาตาม 3 จุดสังเกต ที่ผมแนะนำ

  1. เข้าหลังบ้านเว็บ –> หาเมนูชื่อ Theme Optons ตรงๆ
  2. เข้าหลังบ้านเว็บ –> หาเมนูชื่อเดียวกับ Theme ที่ใช้
  3. เมนู Appearance –> Customize

โดยปกติถ้าซื้อ Theme Premuim เจ้าของธีม มักจะทำคู่มือ สอนใช้ WordPress ของใครของมันอยู่แล้ว

3. การใช้ Plugin WordPress

Plugin WordPress คือ ส่วนเสริมของเวิร์ดเพรส ที่จะมาเสริมความสามารถดั่งเดิมของ WordPress ให้มีฟีเจอร์ตามที่เราต้องการ มีตั้งแต่ปลั๊กอินพื้นฐาน จนถึงที่ทำงานเฉพาะด้าน เช่นปลั๊กอินร้านค้าออนไลน์ เว็บบอร์ด ฯลฯ Plugin WordPress มีให้เราใช้ฟรี มากถึง 54,870 ตัว ครอบคลุมทุกหมวดการใช้งาน

วิธีติดตั้ง Plugin WordPress

  • ไปที่เมนู Plugins —> Add New
  • ด้านขวาบน มีช่อง Search ให้เราค้นหาปลั๊กอินที่ต้องการ เช่น SEO, Page Builder
  • คลิก Install Now
  • คลิก ใช้งาน
วิธีติดตั้ง Plugin WordPress
วิธีติดตั้ง Plugin WordPress

หลังจากติดตั้งเสร็จแล้ว สามารถมาดู รายการปลั๊กอิน ที่เคยติดตั้งทั้งหมด ที่เมนู Plugins –> Installed Plugins

  • ปลั๊กอินที่ติดตั้งแล้ว แต่ยังไม่ได้ Active : จะขึ้นว่า “Activate” หรือ ใช้งาน
  • ปลั๊กอินที่ Activeate แล้ว : จะขึ้นว่า “Deactivate” หรือ ถอน
  • ถ้าต้องการลบปลั๊กอิน : ต้องคลิก Deactive ก่อน ถึงจะมีปุ่ม “Delete
Plugin WordPress ที่ติดตั้งแล้ว
Plugin WordPress ที่ติดตั้งแล้ว

วิธี Update Plugin

ผู้ที่พัฒนา Plugin WordPress มักจะอัพเดตปลั๊กอินเวอร์ชั่นใหม่ๆ ตลอดเวลา บางตัวสับดาห์ละครั้ง บางตัวเดือนละครั้ง ฉะนั้น เมื่อไหร่ที่มีเวอร์ชั่นใหม่ออกมา ควรกด Update ทุกครั้ง

สาเหตุที่ควรอัพเดต

  • Security : อัพเดตเรื่องความปลอดภัย เพราะบ่อยครั้งที่เว็บไซต์โดน Hack ก็เพราะไม่ได้อัพเดตปลั๊กอินนี้แหละ
  • Fix bugs : แก้ไขปัญหาต่างๆ ของปลั๊กอิน ให้ทำงานได้สมบูรณ์กว่าเดิม
  • Features : เพิ่มฟีเจอร์ใหม่ๆ เข้ามา

เมื่อมีปลั๊กอินเวอร์ชั่นใหม่ออกมา จะมีตัวเลขแจ้งเตือนที่เมนู Plugins ก่อนที่จะอัพเดตแนะนำให้ BackUP WordPress สักครั้งครับ เผื่อว่าอัพเดตแล้ว เว็บไซต์มีปัญหา

สาเหตุที่อัพเดตแล้วพัง อาจจะเป็นเพราะว่า ปลั๊กอินตัวนั้น ไม่เข้ากับ WordPress ที่เราใช้อยู่ หรือ ไม่เข้ากับ Theme ที่เราใช้อยู่ หรือ ไปตีกันกับ Plugin ตัวอื่นๆ ที่กำลังใช้

ถ้าเราเลือกใช้ Plugin ที่ได้มาตรฐาน มียอดดาว์นโหลดเยอะ รีวิว 4 ดาวขึ้นไป และอัพเดตสม่ำเสมอ ส่วนใหญ่ไม่ค่อยมีปัญหา

วิธี Update Plugin
วิธี Update Plugin

Plugin Premium

WordPress Plugin Premium
WordPress Plugin Premium

ปลั๊กอิน Pro เป็นตัวที่มาพร้อมกับฟีเจอร์ที่หาไม่ได้ในตัวฟรี เช่น ปลั๊กอินทำ Slider ถ้าเทียบระหว่างตัวฟรี กับตัว Pro จะเห็นได้ว่า ตัว Pro มีฟังก์ชันครบเครื่อง มีลูกเล่นเสริมเยอะมาก ราคามีตั้งแต่ 6$ จนถึงหลัก 100$ ขึ้นไป ขึ้นอยู่กับความสามารถของแต่ละตัว

ข้อดีของ Plugin Premium

  • ได้ฟังก์ชันการใช้งานตามที่ต้องการ โดยไม่ต้องเขียน Code
  • มีคู่มือการใช้งานค่อนข้างละเอียด ติดขัดตรงไหนก็ตามซับพอร์ตได้เลย
  • มี Support / Updates ตลอดเวลา

คำแนะนำวิธีเลือกซื้อ Plugin Premium

  • เลือกจากยอดขายมาก ไปหาน้อย
  • Review ต้อง 4.5 ดาวขึ้นไป
  • อัพเดตล่าสุดไม่เกิน 6 เดือน หากไม่ได้อัพเดตนานไม่แนะนำ
  • ติดอันดับ Best Seller ปีที่ผ่านมา Best WordPress Plugins 2019
  • ทีม Support ตอบไว

4. เขียนบทความ / ข่าวสาร ด้วย Posts

Posts คือ เป็น Post Type ประเภทนึงของเวิร์ดเพรส ภาษาไทยเรียกว่า เรื่องราว สามารถสร้างหน้าสำหรับใส่ข้อมูล มีการแบ่งข้อมูลเป็น Category (หมวดหมู่) และ Tag (แท็ก) ส่วนใหญ่มักจะใช้ในการสร้างบทความ ข่าวสาร ที่มีการอัพเดตบ่อยๆ

โครงสร้างของ Posts

  • Title : ชื่อบทความ
  • Block ตรงกลาง : สำหรับเขียนบทความ ยาวแค่ไหนก็ได้ ตามความขยัน
  • Status & visibility : ตั้งค่าการมองเห็น
    • Public : ทุกคนมองเห็นได้
    • Private : แอดมินเท่านั้น
    • Password Protected : เฉพาะคนที่มีรหัสผ่านถึงจะมองเห็น
    • Publish : สามารถตั้งวันเวลาได้ ให้เผยแพร่อัตโนมัติ
  • Categories : หมวดหมู่ของบทความ ซึ่งสามารถติ๊กเลือกได้หลายหมวดหมู่
  • Tags : แท็กของบทความ สามารถเลือกได้หลายแท็กเช่นกัน
  • Featured images : ภาพหน้าปกของบทความ ลากมาใส่ได้เลย
  • Excerpt : เกริ่นนำ หรือ intro ของบทความ มักจะแสดงในหน้ารวมของบทความ หรือ แล้วแต่ธีม
Posts - เรื่องราว
Posts
  • Permalinks คือ url ของบทความที่ต่อท้ายชื่อโดเมนของเรา ตามหลักแล้วจะตั้งอะไรก็ได้ แต่คำแนะนำส่วนตัว ไม่อยากให้ใช้ภาษาไทย อาจจะมีปัญหาเวลา Copy ลิงค์ส่งต่อให้คนอื่น และพยายามเขียนให้กระชับที่สุด ไม่ต้องใส่คำอธิบายอะไร ใส่แค่ Keyword ที่สำคัญสัก 2-3 คำพอแล้ว
Permalinks
Permalinks

วิธีสร้างและจัดการหมวดหมู่ WordPress

ปกติแล้วเวลาเขียน Blog เราสามารถติ๊กเลือกหมวดหมู่ทางด้านขวามือ (ดูภาพด้านบนประกอบ) สามารถเพิ่มหมวดหมู่เบื้องต้นได้ แต่ถ้าเราต้องการจัดการหมวดหมู่ หรือ Category เพิ่ม-ลบ-แก้ไข สามารถปรับแก้ไขได้เองที่

Posts –> Categories

หมวดหมู่ WordPress
หมวดหมู่ WordPress

วิธีเพิ่ม Category : สามารถกรอกชื่อหมวดหมู่ใหม่ ในฟอร์มตรงกลางที่ชื่อ “Add New Category

  • Name : กรอกชื่อหมวดหมู่ (Category Name)
  • Slug : กรอก Slug คือ ชื่อ URL ที่ต่อท้ายโดเมน แนะนำให้เป็นภาษาอังกฤษ
  • Parent Category : กรณีที่เราอยากทำเป็น หมวดหมู่หลัก-หมวดหมู่ย่อย
  • Description : คำอธิบายของหมวดหมู่

ด้านขวามือ แต่ละหมวดหมู่ เราสามารถคลิก Edit เพื่อแก้ไข, ถ้าต้องการลบให้คลิก Delete, ถ้าต้องการดูการแสดงผลหมวดหมู่ให้คลิก View

ถ้าติดตั้ง Yoast SEO เรายังสามารถใส่ SEO Title, Description สำหรับหมวดหมู่ได้อีกด้วย

วิธีสร้างและจัดการแท็ก(Tag) WordPress

การจัดการแท็ก สามารถไปที่เมนู Posts –> Tags ซึ่งขั้นตอนในการ เพิ่ม-ลบ-แก้ไข จะเหมือนกับหมวดหมู่

คำแนะนำในการใช้ Tag แนะนำว่าอย่าพยายามใส่ให้มากเกินจำเป็น หรือ จงใจใส่พวก Keyword ซ้ำๆ เพื่อหวังผลในเรื่อง SEO แต่มันอาจจะส่งผลเสียในเรื่องอันดับก็ได้ ฉะนั้นให้ใส่อย่างเหมาะสมเท่าที่จำเป็นเท่านั้น

 แท็ก WordPress
แท็ก WordPress

แนะนำให้อ่านข้อที่ 10 หัวข้อ “จัดหน้าด้วย Page Builder” จะพูดถึงเกี่ยวกับแนวทางการจัด Layout ด้วย Page Builder เพื่อให้เว็บไซต์สวยขึ้น

5. สร้างหน้าด้วย Pages

Pages คือ หนึ่งใน Post Type เช่นเดียวกันกับ Posts สามารถสร้างหน้าลงข้อมูลได้เหมือนกับ Posts เลย แต่จะไม่สามารถแบ่งเป็น หมวดหมู่ และ แท็ก เหมือน Posts ไม่สามารถเรียงลำดับ เป็นวันเดือนปีได้ เหมาะสำหรับเมนูหรือหน้า ที่มีข้อมูลตายตัว ไม่ได้อัพเดตตลอดเวลาเหมือนข่าว เช่น About, Service, Contact

โครงสร้างของ Pages

  • Pages –> Add New : เพื่อเพิ่มหน้าเพจ
  • Page Title : ตั้งชื่อหน้า เช่น Home, About, Service, Contact
  • Block ตรงกลาง : สำหรับเขียนบทความ ยาวแค่ไหนก็ได้ ตามความขยัน
  • Status & visibility : ตั้งค่าการมองเห็น
    • Public : ทุกคนมองเห็นได้
    • Private : แอดมินเท่านั้น
    • Password Protected : เฉพาะคนที่มีรหัสผ่านถึงจะมองเห็น
    • Publish : สามารถตั้งวันเวลาได้ ให้เผยแพร่อัตโนมัติ
  • Permalinks : url ของบทความที่ต่อท้ายชื่อโดเมนของเรา เน้นกระชับ สั้น มีความหมาย
  • Featured images : ภาพหน้าปกของบทความ ลากมาใส่ได้เลย
  • Page Attribute : เลือกธีมเพลตของแต่ละหน้า เช่น
    • Default template *มาตรฐาน
    • Landing Page
    • Left Sidebar
    • Right Sidebar
    • *แต่ขึ้นอยู่กับแต่ละธีมที่เราใช้ อาจจะมีธีมเพลตไม่เหมือนกัน
โครงสร้างของ Pages
โครงสร้างของ Pages

แนะนำให้อ่านข้อที่ 10 หัวข้อ “จัดหน้าด้วย Page Builder” จะพูดถึงเกี่ยวกับแนวทางการจัด Layout ด้วย Page Builder เพื่อให้เว็บไซต์สวยขึ้น

ตารางเทียบความแตกต่าง ระหว่าง Posts และ Pages

PostsPages
ข้อมูลที่มีการอัพเดตตลอดเวลา เช่น ข่าว, บทความข้อมูลตายตัว เช่น About, Service, Contact
จัดกลุ่มด้วย Category, Tagจัดกลุ่มด้วย Parent, Child หรือ หน้าหลัก, หน้าลูก
มี RSS feedไม่มี RSS Feed
มีผู้เขียนโพส, วันที่เผยแพร่ไม่มีการแสดงผู้เขียน และวันที่เผยแพร่

Menus ก็คือเมนูอย่างที่เราเข้าใจนั้นแหละครับ ใน WordPress มีระบบจัดการเมนูที่เรียบง่าย แต่ทรงพลัง สามารถสร้างเมนูหลายๆ ชุด แสดงได้หลากหลายตำแหน่ง เช่น Main menu, Mobile menu, Secondary menu แต่ขึ้นอยู่กับแต่ละธีมด้วยว่า มีตำแหน่งให้แสดงเมนูได้กี่จุด

วิธีสร้าง Menus ในเวิร์ดเพรส

  • ไปที่เมนู Appearance –> Menus
  • คลิก “Create a new menu” เพื่อสร้างเมนูชุดใหม่ กรณีที่ยังไม่เคยสร้างเลย
  • Menu Name : ตั้งชื่อเมนูได้ตามสบายใจ
  • Save Menu : กดบันทึกแล้วค่อยใส่เมนูต่างๆ
วิธีสร้าง Menus ในเวิร์ดเพรส
วิธีสร้าง Menus ในเวิร์ดเพรส

Add nemu items ด้านซ้ายมือ
เพื่อนๆ สามารถติ๊กเลือก เมนูของหน้าที่ต้องการสร้างเป็นเมนูหลัก แล้วคลิก Add to Menu เมนูที่เราติ๊ก ก็จะปรากฏตรงกลาง

การสร้างเมนูย่อย
แค่ลากเข้าไปด้านในก็เสร็จละ เช่น ในรูป ผมจะตั้ง “เกี่ยวกับเรา” เป็นเมนูหลัก และ “บริการ” เป็นเมนูย่อย แค่ลาก บริการ เข้าไปด้านใน 1 step

การสลับตำแหน่งของเมนู
ลากขึ้น-ลง ซ้าย-ขวา ได้อิสระ

การแสดง Menu ในหน้าเว็บไซต์
สามารถเลือกได้ว่า จะแสดง Menu ที่เราสร้างในตำแหน่งไหน เช่น Main Menu, Mobile Menu แต่ละธีมอาจจะมีตำแหน่งมากกว่านี้

วิธีเพิ่ม Menus ในเวิร์ดเพรส
วิธีเพิ่ม Menus ในเวิร์ดเพรส

วิธีเพิ่ม-ลด ตัวเลือก Menu items

Menu items หรือ ชุดตัวเลือกเมนูด้านซ้ายมือ โดยพื้นฐานของ wordPress แล้วจะมีแค่ Pages, Posts, Custom Links, Categories

แล้วถ้าจะแสดงตัวเลือกเมนูให้มากกว่านั้นละ? เช่น อยากจะดึง Product Category หรือ Post Type ที่ถูกติดตั้งจากปลั๊กอินใหม่ๆ

เราสามารถเพิ่ม หรือ ลด เองได้อิสระครับ เช่น อยากจะแสดงตัวเลือก Tags วิธีการคือ

  • คลิก “Screen Optionsด้านบนขวา ระบบจะแสดง Boxes กับ Show advanced menu properties
  • ในส่วน Boxes : ให้เราติ๊กเลือก Type ที่เราต้องการ จะให้แสดงในชุด Menu items ด้านซ้ายมือ
วิธีเพิ่ม-ลด ตัวเลือก Menu items
วิธีเพิ่ม-ลด ตัวเลือก Menu items

การตั้งค่าเมนูขั้นสูง

กรณีที่อยากจะเพิ่มการตั้งค่าของแต่ละ Menu ให้มากขึ้น สามารถติ๊กในส่วน “Show advanced menuproperties” ซึ่งจะมี 5 การตัวเลือก

  • Link Target : เช่น คลิกที่เมนูแล้ว เปิดแท็บใหม่
  • Title Attribute : เวลาเอาเมาส์ไปชี้ที่เมนู มันจะขึ้นเป็นคำอธิบายให้
  • CSS Classes : สำหรับคนที่อยากจะ Custom CSS โดยตรง
  • Link คุณสมบัติในการกำหนดความสัมพันธ์ของเราที่มีต่อ Links
  • Description : คำอธิบาย 

สุดท้าย Custom Links : สำหรับคนที่อยากจะสร้างเมนูแบบ ใส่ลิงค์เฉพาะ ไม่ได้ต้องการให้ลิงค์กับหน้าภายในเว็บ อาจจะลิงค์ไปข้างนอก

การตั้งค่าเมนูอื่นๆ ที่ควรรู้
การตั้งค่าเมนูอื่นๆ ที่ควรรู้

7. ปรับแต่ง WordPress ด้วย Customize

Customize คือ ตัวปรับแต่งการตั้งค่าพื้นฐานของ WordPress ถ้าเราแก้ไขอะไรไป มันก็จะแสดงผลให้เราทันที หรือเรียกว่า Live Edit เมนูการตั้งค่าจะไม่เหมือนกันในแต่ละ Theme แต่โดยพื้นฐานก็จะมีดังนี้

ไปที่เมนู Appearance –> Customize

  • ตั้งค่า Theme
  • ตั้งค่า Site Identity
  • ตั้งค่า Background Image
  • ตั้งค่า Menus
  • ตั้งค่า Widgets
  • ตั้งค่าหน้าแรก
  • เขียน CSS เพิ่มเติม
ปรับแต่ง WordPress ด้วย Customize
ปรับแต่ง WordPress ด้วย Customize

8. เพิ่มลูกเล่นด้วย Widgets

WordPress Widgets คือ เป็นโมดูลนึงของเวิร์ดเพรส ที่ทำงานนอกเหนือจาก Pages และ Posts เราสามารถนำโมดูลที่เชื่อ วิดเจ็ต ไปแสดงตามตำแหน่งที่ธีมออกแบบไว้ เรียกว่า Widget Area ซึ่งทางเวิร์ดเพรสจะเตรียมชุดวิดเจ็ตสำเร็จมาให้เรา เรียกว่า Available Widgets พร้อมใช้งาน

ไปที่เมนู Appearance –> Widgets

  • ชุดด้านซ้าย คือ Available Widgets : เป็นวิดเจ็ตสำเร็จรูปที่ทางเวิร์ดเพรสเตรียมมาให้เรา พร้อมใช้งาน เช่น ปฏิทิน, หมวดหมู่บทความ, เมนู, รูปภาพ, แกลอรี่ เป็นต้น
  • ชุดด้านขวา คือ Widget Area : เป็นพื้นที่สำหรับนำวิดเจ็ตไปแสดงผล ซึ่งจะมีตำแหน่งมากน้อยแค่ไหน ขึ้นอยู่กับแต่ละธีม

วิธีใช้ง่ายมาก แค่ลากวิดเจ็ตด้านซ้ายมือ ไปยังด้านขวามือ ในตำแหน่งที่ต้องการแสดงผลเช่น Right Sidebar, Footer เป็นต้น

รู้จัก WordPress Widgets
รู้จัก WordPress Widgets

9. วิธีจัดการ Users

ถ้าเว็บไซต์มีสมาชิกที่ดูแลระบบหลังบ้านของ WordPress หลายคน สามารถเพิ่มสมาชิกผู้ดูแลได้อิสระ และแบ่งสิทธิ์การเข้าถึงให้เฉพาะ ซึ่งเวิร์ดเพรสมี Role ของสมาชิกหลายตัวเลือกแตกต่างกัน

  • Subscriber
  • Contributor
  • Author
  • Editor
  • Administrator
WordPress Users
WordPress Users

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

10. จัดหน้าด้วย Page Builder

Page Builder คือ ระบบการจัดหน้าของ WordPress ที่เราสามารถลากๆ คลิกๆ หรือเรียกว่า Drag & Drop เราสามารถจัดหน้า จัด Layout เว็บไซต์ได้อย่างง่ายดาย ไม่ต้องเขียนโค้ดแม้แต่บรรทัดเดียว ทำให้คนที่ไม่มีความรู้เรื่องเว็บไซต์มาก่อน ก็สามารถจัดหน้าสวยๆ ได้ด้วยตัวเองเลย นี้แหละครับ ข้อได้เปรียบของ WordPress

ปัจจุบันมีนักพัฒนาทั่วโลกพัฒนาปลั๊กอิน Page Builder เยอะมาก แต่ที่ดังๆ คนใช้เยอะ มีไม่กี่ตัว ผมจะยกตัวอย่าง 5 ตัวที่ผมเคยใช้แล้วมันดี

  • Block Editor / Butenburg : ถ้าพึ่งติดตั้ง WordPress ใหม่ๆ จะมี Block Editor เป็นมาตรฐานอยู่แล้ว สามารถใช้จัดหน้า วาง Layout ได้ดีพอสมควร ผมชอบมาก เพราะมันเบา สำคัญคือ ฟรี
  • Elementor : ถ้าพูดถึงความง่ายในการใช้งาน และฟีเจอร์ที่ให้มาเรียกว่าครอบจักรวาล ทำเว็บสวยๆ ได้แปปเดียว มีแบบฟรี / เสียเงิน โหลด Elementor
  • SiteOrigin : เป็นอีกตัวที่ผมชอบ เพราะ เบา ปรับแต่งได้อิสระ ฟรี / เสียเงิน โหลด SiteOrigin
  • WPBakery Page Builder : เป็นตัวแรกๆ ที่ฟีเจอร์ครบจริงๆ ธีมส่วนใหญ่ที่ขาย ใช้เจ้านี้มาเยอะ แต่หลังๆ ก็มี Elementor มาชิงพื้นที่ ซึ่งมีแบบ เสียเงิน โหลด WP Bakery

ปลั๊กอิน Page Builder แต่ละตัว มีจุดเด่น และฟีเจอร์ต่างกัน ความยากง่ายในการใช้งานก็ต่างกัน บ้างก็ว่ายาก บ้างก็ว่าง่าย แต่ก็ขึ้นอยู่กับความขยันในการศึกษาครับ หากเพื่อนๆ ได้ลองแล้ว อาจจะติดใจก็ได้ อย่างน้อยก็เลือกสักตัวครับแล้วศึกษาให้ลึกถึงแก่นของมัน เราจะเห็นว่า แต่ละตัว มีเป้าหมายเดียวกันคือ การจัดหน้าให้สวย และมีคุณภาพ

11. จัดการไฟล์ต่างๆ ด้วย Media

Media เป็นหน้าที่รวมไฟล์ทุกอย่างที่เราเคยอัพโหลดขึ้น เราสามารถเลือกแสดงเป็นแบบ List, Grid เรียงลำดับตามประเภทไฟล์ เรียงตามเดือนปี และยังสามารถกด ค้นหา ซึ่งสะดวกกรณีมีไฟล์เยอะ

จัดการไฟล์ต่างๆ ด้วย WordPress Media
WordPress Media

คลิกที่รูปใดรูปนึง ก็จะขึ้น PopUP แสดงรายละเอียดของรูปนั้นๆ เช่น Alt (สำคัญมาก ถ้าอยากให้ติดหน้าแรก Google), Title, Caption, Description และยังสามารถ Copy ลิงค์ หรือ URL ของรูปภาพด้านล่าง

หากต้องการลบรูปภาพ แค่คลิกที่ปุ่ม “Deletete Permanently

WordPress Media
WordPress Media

ทํา WordPress ให้สวย

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

มี 3 ปัจจัยที่ทำให้คุณมีเว็บสวยๆ ได้

ปัจจัยที่ 1 Theme ที่ใช้ : น่าจะเป็นปัจจัยที่ชัดเจนที่สุด โดยเฉพาะถ้าเราซื้อ Theme Premuim มันจะมี Demo( Template ) สวยๆ ให้เราเลือกใช้ ยิ่งธีมดังๆ ก็จะมีตัวเลือก Demo เยอะมาก แต่ละธีมก็จะมีความสวย

ปัจจัยที่ 2 Plugin Page Builder : เป็นปลั๊กอินสำหรับ จัดหน้า WordPress หรือ จัด Layout ให้ได้ตามใจต้องการ ปลั๊กอินจัดหน้าแต่ละตัว ก็จะมีแนวทางการใช้งานไม่เหมือนกัน บางตัวมี Template Starter ให้เราจิ้มปรับใช้ได้เลยในคลิกเดียว ไม่ต้องเริ่มจากศูนย์ ผมได้เขียนบทความสรุป 5 ปลั๊กอินจัดหน้า WordPress ที่นิยมใช้กัน ลองอ่านดูครับ

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

สรุป

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

ลองไปประยุกต์ ไปฝึกกันดูครับ หากมีคำถาม หรือติดขัดตรงไหน เพื่อนๆ สามารถสอบถามเข้ามาได้เลยครับ

Leave a Reply

Your email address will not be published. Required fields are marked *