หลายคนที่เริ่มต้นศึกษาการพัฒนาเว็บไซต์ด้วย WordPress มักเริ่มจากการติดตั้ง Theme สำเร็จรูป หรือใช้ Page Builder อย่าง Elementor แต่เมื่อใช้งานไปสักระยะ ก็มักเกิดคำถามว่า
“จริงๆ แล้ว Theme WordPress ถูกสร้างขึ้นมาอย่างไร?”
“ถ้าอยากเขียน Theme เอง ต้องเริ่มจากตรงไหน?”
“จำเป็นต้องเป็นโปรแกรมเมอร์ระดับสูงหรือไม่?”
ความจริงแล้ว Theme WordPress ไม่ได้ซับซ้อนอย่างที่หลายคนคิด
หากเข้าใจโครงสร้างพื้นฐาน คุณก็สามารถสร้าง Theme ของตัวเองได้ และต่อยอดไปสู่การพัฒนาเว็บไซต์ที่มีประสิทธิภาพสูงขึ้นในอนาคต
บทความนี้จะพาคุณทำความเข้าใจแนวคิดพื้นฐานของการสร้าง Theme WordPress ตั้งแต่ศูนย์แบบเข้าใจง่าย
Theme WordPress คืออะไร?
Theme คือชุดไฟล์ที่ทำหน้าที่ควบคุม
- หน้าตาของเว็บไซต์
- Layout
- สี
- ฟอนต์
- ส่วน Header
- ส่วน Footer
- การแสดงผลบทความ
- การแสดงผลหน้าเว็บ
พูดง่ายๆ คือ WordPress ทำหน้าที่เก็บข้อมูล ส่วน Theme ทำหน้าที่แสดงผลข้อมูลเหล่านั้นให้ผู้ใช้งานเห็น ตัวอย่างเช่น
- WordPress เก็บข้อมูลบทความไว้ในฐานข้อมูล
- Theme จะเป็นตัวดึงข้อมูลเหล่านั้นออกมาแสดงบนหน้าเว็บ
ก่อนเริ่มเขียน Theme ต้องรู้อะไรบ้าง?
ควรมีพื้นฐาน
- HTML
- CSS
- JavaScript (เบื้องต้น)
- PHP
โดยเฉพาะ PHP เพราะ WordPress ถูกพัฒนาด้วยภาษา PHP เป็นหลัก
โครงสร้างพื้นฐานของ Theme WordPress
Theme ที่สามารถใช้งานได้จริง อย่างน้อยต้องมีไฟล์หลักดังนี้
my-theme/
├── style.css
├── index.php
├── functions.phpเพียง 3 ไฟล์นี้ WordPress ก็สามารถมองเห็น Theme ได้แล้ว
ไฟล์ style.css คืออะไร?
นี่คือไฟล์ที่ใช้เก็บข้อมูล Theme ตัวอย่าง
/*
Theme Name: My First Theme
Author: Am Fine
Version: 1.0
*/แม้ยังไม่มี CSS เลย WordPress ก็จะสามารถแสดง Theme ตัวนี้ในหน้า Admin ได้แล้ว
ไฟล์ index.php คืออะไร?
ไฟล์นี้ถือเป็นหัวใจสำคัญของ Theme WordPress จะเรียกไฟล์นี้เป็นลำดับสุดท้าย หากหา Template อื่นไม่เจอ ตัวอย่างง่ายๆ
<h1>Hello WordPress Theme</h1>เมื่อเปิดเว็บไซต์ WordPress จะแสดงข้อความนี้ทันที
ไฟล์ functions.php คืออะไร?
เปรียบเสมือนศูนย์ควบคุมของ Theme ใช้สำหรับ
- ลงทะเบียนเมนู
- โหลด CSS
- โหลด JavaScript
- เพิ่มฟังก์ชันต่างๆ
- เปิดใช้งาน Feature ของ WordPress
ตัวอย่าง
<?php
function my_theme_setup() {
add_theme_support('title-tag');
}
add_action('after_setup_theme', 'my_theme_setup');โค้ดนี้จะสั่งให้ WordPress จัดการ Title Tag ให้อัตโนมัติ
วิธีแยก Header และ Footer
เว็บไซต์ส่วนใหญ่จะมี
- Header
- Content
- Footer
เราจึงไม่ควรเขียนทุกอย่างไว้ในไฟล์เดียว โครงสร้างที่นิยมคือ
theme/
├── header.php
├── footer.php
├── index.php
header.php
<!DOCTYPE html>
<html>
<head>
<?php wp_head(); ?>
</head>
<body>
footer.php
<?php wp_footer(); ?>
</body>
</html>index.php
<?php get_header(); ?>
<h1>Welcome</h1>
<?php get_footer(); ?>วิธีนี้ช่วยให้จัดการเว็บไซต์ได้ง่ายขึ้นมาก
The Loop คืออะไร?
นี่คือแนวคิดสำคัญที่สุดอย่างหนึ่งของ WordPress The Loop คือระบบดึงข้อมูลจากฐานข้อมูลมาแสดงผล ตัวอย่าง
<?php
if(have_posts()) :
while(have_posts()) :
the_post();
the_title();
the_content();
endwhile;
endif;
?>อธิบายทีละส่วน
have_posts() ตรวจสอบว่ามีข้อมูลหรือไม่
the_post() เลื่อนไปยังข้อมูลรายการถัดไป
the_title() แสดงชื่อบทความ
the_content() แสดงเนื้อหาบทความ
นี่คือ กลไกหลักที่อยู่เบื้องหลังเว็บไซต์ WordPress เกือบทุกเว็บ
WordPress Template Hierarchy คืออะไร?
WordPress มีระบบเลือกไฟล์อัตโนมัติ เช่น
- หน้าแรก front-page.php
- บทความเดี่ยว single.php
- หน้าหมวดหมู่ category.php
- หน้าเว็บทั่วไป page.php
ถ้าไม่มีไฟล์เหล่านี้ WordPress จะย้อนกลับมาใช้ index.php แทน
functions.php ใช้ทำอะไรได้อีก?
ตัวอย่างที่นิยม
โหลด CSS
function my_styles() {
wp_enqueue_style(
'main-style',
get_stylesheet_uri()
);
}
add_action(
'wp_enqueue_scripts',
'my_styles'
);โหลด JavaScript
wp_enqueue_script();สร้างเมนู
register_nav_menus();เปิดใช้งาน Featured Image
add_theme_support(
'post-thumbnails'
);Custom Post Type คืออะไร?
ปกติ WordPress มี
- Post
- Page
แต่บางธุรกิจต้องการข้อมูลเฉพาะ เช่น
- สินค้า
- ผลงาน
- อสังหาริมทรัพย์
- คอร์สเรียน
จึงสามารถสร้างประเภทข้อมูลใหม่ได้ เรียกว่า Custom Post Type (CPT)
ตัวอย่าง: Portfolio เมื่อสร้างเสร็จ ผู้ดูแลเว็บไซต์สามารถเพิ่มผลงานได้จากหลังบ้านทันที
ACF คืออะไร?
ACF หรือ Advanced Custom Fields คือ Plugin ยอดนิยมสำหรับเพิ่มฟิลด์ข้อมูลพิเศษ
ตัวอย่างเช่น ผลงาน 1 ชิ้น อาจมี
- ชื่อลูกค้า
- ระยะเวลาพัฒนา
- เทคโนโลยีที่ใช้
- URL เว็บไซต์
ข้อมูลเหล่านี้ไม่เหมาะกับ Editor ปกติ จึงนิยมใช้ ACF เข้ามาช่วยจัดการ
Performance คืออะไร?
Performance คือ “ประสิทธิภาพการทำงานของเว็บไซต์” โดยเฉพาะ
- ความเร็วโหลดหน้าเว็บ
- ความเร็วตอบสนอง
- ความลื่นไหลในการใช้งาน
เว็บไซต์ที่โหลดช้าเพียงไม่กี่วินาที อาจทำให้ผู้ใช้งานออกจากเว็บไซต์ก่อนเห็นเนื้อหาด้วยซ้ำ Google เองก็ใช้ความเร็วเว็บไซต์เป็นหนึ่งในปัจจัย SEO
Core Web Vitals คืออะไร?
Core Web Vitals คือชุดตัวชี้วัดคุณภาพเว็บไซต์ของ Google ประกอบด้วย
- LCP (Largest Contentful Paint) วัดว่าเนื้อหาหลักของหน้าเว็บโหลดเสร็จเร็วแค่ไหน
- INP (Interaction to Next Paint) วัดการตอบสนองเมื่อผู้ใช้คลิกหรือกดปุ่ม
- CLS (Cumulative Layout Shift) วัดการขยับของ Layout ระหว่างโหลด เช่น กำลังกดปุ่มอยู่ดีๆ ปุ่มเลื่อนตำแหน่ง Google มองว่าเป็นประสบการณ์ที่ไม่ดี
DOM คืออะไร?
DOM ย่อมาจาก Document Object Model คือ โครงสร้าง HTML ที่ Browser สร้างขึ้นเพื่อแสดงผลหน้าเว็บ
ตัวอย่าง
<div>
<section>
<article>
<p>Hello</p>
</article>
</section>
</div>หากเว็บไซต์มี DOM ซับซ้อนเกินไป เช่น มี HTML ซ้อนกันหลายร้อยชั้น Browser จะใช้เวลาประมวลผลมากขึ้น ส่งผลให้เว็บไซต์ช้าลง นี่คือ สาเหตุที่หลาย Page Builder มีปัญหาเรื่อง Performance
Theme สำเร็จรูป กับ Custom Theme ต่างกันอย่างไร?
Theme สำเร็จรูป
- เริ่มเร็ว
- ราคาถูก
- ใช้งานง่าย
แต่โค้ดส่วนเกินเยอะ, ปรับแต่งลึกยาก, SEO ควบคุมได้น้อย
Custom Theme
- เร็วกว่า
- SEO ดีกว่า
- ขยายระบบง่ายกว่า
แต่ใช้เวลาพัฒนานานกว่า, ต้นทุนสูงกว่า
ธุรกิจควรเริ่มจากแบบไหนดี?
หากเป็นเว็บบริษัท, เว็บเริ่มต้น, Landing Page Theme สำเร็จรูปอาจเพียงพอ
แต่หากต้องการ
- SEO ระยะยาว
- Branding
- ระบบเฉพาะทาง
- การขยายธุรกิจ
การพัฒนา Custom Theme มักเป็นทางเลือกที่คุ้มค่ากว่าในระยะยาว
สรุป
การสร้าง Theme WordPress ไม่ได้มีแค่การเปลี่ยนสีหรือเปลี่ยนโลโก้ แต่เป็นกระบวนการออกแบบโครงสร้างการแสดงผลทั้งหมดของเว็บไซต์ การเข้าใจ
- Theme Structure
- The Loop
- Template Hierarchy
- Performance
- Core Web Vitals
- Custom Post Type
- ACF
จะช่วยให้คุณมองภาพการพัฒนาเว็บไซต์ WordPress ได้ชัดเจนขึ้น และสามารถตัดสินใจได้ว่า ควรใช้ Theme สำเร็จรูป หรือพัฒนา Custom Theme ให้เหมาะกับเป้าหมายทางธุรกิจของคุณ
