Dev to webs {Coding…}

เรียนรู้การพัฒนาซอฟเวอร์ เพื่อความรู้ที่ยั่งยืน

บทที่ 6: การใช้งานธีม (Themes) ใน WordPress

1. ธีม (Themes) คืออะไร?

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

จุดเด่นของธีม

  • เปลี่ยนรูปลักษณ์เว็บไซต์ได้ง่าย
  • รองรับฟีเจอร์ต่าง ๆ เช่น Header, Footer, และ Sidebar
  • มีธีมทั้งแบบฟรีและพรีเมียมให้เลือกใช้

2. การเลือกและติดตั้งธีม

2.1 การเลือกธีมจาก WordPress Directory

  1. ไปที่ “Appearance” > “Themes”
  2. คลิก “Add New”
  3. ใช้ฟีเจอร์ค้นหาหรือเรียกดูธีมยอดนิยมและธีมล่าสุด
  4. เลือกธีมที่ต้องการและคลิก “Install”

2.2 การติดตั้งธีมจากไฟล์ ZIP

  1. ดาวน์โหลดไฟล์ธีมจากแหล่งภายนอก เช่น Themeforest
  2. ไปที่ “Appearance” > “Themes”
  3. คลิก “Add New” > “Upload Theme”
  4. อัปโหลดไฟล์ ZIP และคลิก “Install Now”

2.3 การเปิดใช้งานธีม

  • หลังจากติดตั้งธีม คลิก “Activate” เพื่อเปลี่ยนธีมเว็บไซต์ของคุณ

3. การปรับแต่งธีมผ่าน Customizer

Customizer เป็นเครื่องมือในตัว WordPress ที่ช่วยปรับแต่งธีมได้แบบเรียลไทม์

ขั้นตอนการใช้ Customizer

  1. ไปที่ “Appearance” > “Customize”
  2. ใช้เมนูด้านซ้ายเพื่อปรับแต่งส่วนต่าง ๆ เช่น:
  • Site Identity: ชื่อเว็บไซต์ โลโก้ และไอคอนเว็บไซต์
  • Colors: การตั้งค่าสีของธีม
  • Menus: การตั้งค่าเมนูนำทาง
  • Widgets: การจัดการ Sidebar และ Footer
  1. คลิก “Publish” เพื่อบันทึกการเปลี่ยนแปลง

4. การตั้งค่าธีมที่รองรับฟีเจอร์พิเศษ

4.1 การใช้งาน Header และ Footer

  • ธีมบางตัวมีตัวเลือกในการปรับแต่ง Header และ Footer โดยเฉพาะ เช่น การเพิ่มโลโก้หรือลิงก์โซเชียลมีเดีย

4.2 การตั้งค่าหน้าแรกแบบกำหนดเอง

  1. ไปที่ “Settings” > “Reading”
  2. เลือก “A static page”
  3. กำหนดหน้าหลัก (Homepage) และหน้าบล็อก (Posts page)

4.3 การใช้ Template เฉพาะในหน้า

  • ธีมบางตัวมี Template ที่กำหนดเอง เช่น Full-Width หรือ Landing Page
  • เลือก Template ได้ใน “Page Attributes” ขณะสร้างหรือแก้ไขหน้า

5. การเปลี่ยนธีมอย่างปลอดภัย

5.1 การสำรองข้อมูลก่อนเปลี่ยนธีม

  • ใช้ปลั๊กอินเช่น UpdraftPlus เพื่อสำรองข้อมูลเว็บไซต์
  • สำรองไฟล์ Custom CSS และ Widget

5.2 การทดสอบธีมใหม่

  • ใช้ปลั๊กอินเช่น Theme Switcha เพื่อทดลองธีมใหม่โดยไม่กระทบผู้ใช้

5.3 การตรวจสอบความเข้ากันได้

  • ตรวจสอบว่าธีมใหม่รองรับปลั๊กอินที่ใช้อยู่หรือไม่
  • ตรวจสอบความเข้ากันได้กับมือถือ (Responsive Design)

6. การแก้ไขธีมด้วย Custom CSS

6.1 การเพิ่ม CSS ใน Customizer

  1. ไปที่ “Appearance” > “Customize”
  2. เลือก “Additional CSS”
  3. เพิ่มโค้ด CSS ของคุณและคลิก “Publish”

6.2 การแก้ไขไฟล์ธีมโดยตรง

  • แก้ไขไฟล์ธีมใน “Appearance” > “Theme Editor”
  • แนะนำให้สร้าง Child Theme ก่อนแก้ไขไฟล์เพื่อป้องกันการสูญเสียการเปลี่ยนแปลงเมื่ออัปเดตธีม

7. การใช้ธีมพรีเมียม

7.1 ข้อดีของธีมพรีเมียม

  • มีฟีเจอร์ขั้นสูงและการออกแบบที่ปรับแต่งได้มากกว่า
  • รองรับการอัปเดตและการสนับสนุนจากผู้พัฒนา

7.2 แหล่งซื้อธีมพรีเมียม


8. เคล็ดลับในการเลือกธีม

  1. เลือกธีมที่เหมาะกับประเภทเว็บไซต์ของคุณ (บล็อก, ร้านค้าออนไลน์, หรือพอร์ตโฟลิโอ)
  2. ตรวจสอบว่าธีมนั้นรองรับมือถือ (Responsive)
  3. เลือกธีมที่รองรับ SEO
  4. อ่านรีวิวและดูคะแนนก่อนติดตั้งธีม

ในบทนี้ คุณได้เรียนรู้เกี่ยวกับการใช้งานธีมใน WordPress ตั้งแต่การติดตั้ง การปรับแต่ง ไปจนถึงการเปลี่ยนธีมอย่างปลอดภัย ในบทถัดไป คุณจะได้เรียนรู้เกี่ยวกับการใช้งานปลั๊กอิน (Plugins) เพื่อเพิ่มฟีเจอร์ให้กับเว็บไซต์ของคุณ!