สร้าง Child Theme WordPress ถูกต้องป้องกันอัพเดทพัง

Child Theme คืออะไร และทำไมจึงสำคัญ?

เมื่อคุณติดตั้ง WordPress และเลือก Theme สวยงามมาใช้ สิ่งที่หลายคนทำต่อมาคือเปิด Theme Editor แล้วแก้ไข CSS หรือ PHP โดยตรง วิธีนี้ดูเหมือนสะดวก แต่มีปัญหาใหญ่ตามมาคือ ทุกครั้งที่ Theme ออกอัพเดทใหม่ การเปลี่ยนแปลงทั้งหมดของคุณจะหายไปทันที

Child Theme คือ Theme ที่สืบทอดการแสดงผลจาก Parent Theme (Theme หลัก) แต่ให้คุณเพิ่มหรือแก้ไข CSS, Function, และ Template ได้อย่างอิสระ โดยที่ไฟล์ของ Parent Theme ไม่ถูกแตะต้อง เมื่อ Parent Theme อัพเดท การตั้งค่าใน Child Theme ของคุณจะยังอยู่ครบ

หลักการทำงานคือ WordPress จะโหลด style.css ของ Child Theme ก่อน แล้วจึงโหลดของ Parent Theme ตามมา ทำให้ CSS ใน Child Theme สามารถ override ค่าของ Parent ได้ ส่วน functions.php จะถูกโหลดทั้งสองไฟล์พร้อมกัน

ขั้นตอนสร้าง Child Theme ผ่าน cPanel File Manager

สำหรับผู้ที่ใช้ Shared Hosting ที่มี cPanel สามารถสร้าง Child Theme ได้ผ่าน File Manager โดยไม่ต้องใช้ FTP Client หรือ SSH เลย ทำตามขั้นตอนดังนี้

ขั้นที่ 1: สร้างโฟลเดอร์ Child Theme

เข้า cPanel แล้วเปิด File Manager จากนั้นไปที่ path นี้:

public_html/wp-content/themes/

สมมติว่า Parent Theme ของคุณชื่อ astra ให้สร้างโฟลเดอร์ใหม่ชื่อ astra-child ในไดเรกทอรีเดียวกัน

ขั้นที่ 2: สร้างไฟล์ style.css

ในโฟลเดอร์ astra-child ที่เพิ่งสร้าง คลิก + File แล้วตั้งชื่อว่า style.css จากนั้นใส่เนื้อหาดังนี้:

/*
Theme Name:   Astra Child
Theme URI:    https://yoursite.com
Description:  Child Theme ของ Astra
Author:       Your Name
Author URI:   https://yoursite.com
Template:     astra
Version:      1.0.0
Text Domain:  astra-child
*/

/* เพิ่ม CSS ของคุณด้านล่างนี้ */

ขั้นที่ 3: สร้างไฟล์ functions.php

สร้างไฟล์ใหม่ชื่อ functions.php ในโฟลเดอร์ astra-child แล้วใส่โค้ดนี้เพื่อโหลด CSS ของ Parent Theme มาใช้ด้วย:

<?php
/**
 * Astra Child Theme - functions.php
 */

// โหลด stylesheet ของ Parent Theme และ Child Theme
add_action( 'wp_enqueue_scripts', 'astra_child_enqueue_styles' );
function astra_child_enqueue_styles() {
    // โหลด Parent Theme stylesheet
    wp_enqueue_style(
        'parent-style',
        get_template_directory_uri() . '/style.css'
    );

    // โหลด Child Theme stylesheet (จะ override ค่า Parent)
    wp_enqueue_style(
        'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( 'parent-style' ),
        wp_get_theme()->get( 'Version' )
    );
}

// เพิ่ม Function ของคุณด้านล่างนี้

ขั้นที่ 4: เปิดใช้งาน Child Theme

เข้า WordPress Admin Panel ไปที่ Appearance → Themes คุณจะเห็น Theme ใหม่ชื่อ "Astra Child" ปรากฏขึ้น คลิก Activate เท่านี้เว็บของคุณก็ใช้ Child Theme แล้ว หน้าเว็บจะยังแสดงผลเหมือนเดิมทุกอย่าง

การแก้ไข CSS ผ่าน Child Theme

เมื่อเปิดใช้ Child Theme แล้ว การแก้ไขหน้าตาเว็บทั้งหมดควรทำผ่านไฟล์ style.css ของ Child Theme เท่านั้น ตัวอย่างการปรับแต่งที่พบบ่อย:

/* เปลี่ยนสีปุ่มหลัก */
.wp-block-button__link,
.button,
.btn-primary {
    background-color: #16a34a !important;
    border-color: #15803d !important;
}

/* ปรับขนาดตัวอักษร body */
body {
    font-size: 17px;
    line-height: 1.8;
}

/* ซ่อน element ที่ไม่ต้องการ */
.site-footer .footer-credits {
    display: none;
}

/* ปรับ Logo ขนาด */
.site-header .custom-logo {
    max-width: 180px;
}

การเพิ่ม Function ใน Child Theme

functions.php ของ Child Theme โหลดก่อน Parent Theme ทำให้คุณสามารถเพิ่ม Hook, Filter, และ Function ใหม่ได้โดยตรง ตัวอย่างที่นิยมทำ:

• ลบ Widget หรือ Menu ที่ไม่ต้องการออก
• เพิ่ม Custom Post Type หรือ Taxonomy
• เปลี่ยนจำนวน Post ที่แสดงต่อหน้า
• เพิ่ม Google Fonts หรือ Script ภายนอก
• ปรับข้อความ Copyright ใน Footer

// ตัวอย่างใน functions.php ของ Child Theme

// เพิ่มจำนวน posts ต่อหน้าเป็น 12
add_filter( 'pre_option_posts_per_page', function() {
    return 12;
});

// เปลี่ยนข้อความ "Read More"
add_filter( 'the_content_more_link', function( $link ) {
    return '<a class="more-link" href="' . get_permalink() . '">อ่านต่อ →</a>';
});

// โหลด Google Font ผ่าน Child Theme
add_action( 'wp_enqueue_scripts', 'child_theme_fonts' );
function child_theme_fonts() {
    wp_enqueue_style(
        'google-fonts',
        'https://fonts.googleapis.com/css2?family=Sarabun:wght@400;600;700&display=swap',
        array(),
        null
    );
}

การ Override Template File ของ Parent Theme

นอกจาก CSS และ functions.php แล้ว Child Theme ยังสามารถ override Template File ของ Parent Theme ได้ด้วย เช่น ถ้าต้องการเปลี่ยนหน้า Single Post ให้สร้างไฟล์ single.php ใน Child Theme คัดลอกเนื้อหาจาก Parent Theme มาวาง แล้วแก้ไขตามต้องการ

WordPress มีลำดับการค้นหา Template ดังนี้: ค้นหาใน Child Theme ก่อน ถ้าไม่พบจึงไปหาใน Parent Theme ทำให้การ Override ทำได้ง่ายมาก เพียงสร้างไฟล์ชื่อเดียวกันใน Child Theme

Plugin ช่วยสร้าง Child Theme (สำหรับผู้เริ่มต้น)

ถ้าไม่อยากสร้างไฟล์เองด้วยมือ มี Plugin ที่ช่วยได้ เช่น Child Theme Configurator ซึ่งสามารถสร้าง Child Theme ได้โดยอัตโนมัติ รวมถึง copy CSS จาก Parent มาให้แก้ไขได้ทันที Plugin นี้ใช้งานฟรีและเหมาะสำหรับผู้เริ่มต้นมาก

วิธีใช้คือติดตั้ง Plugin ไปที่ Tools → Child Theme Configurator เลือก Parent Theme ที่ต้องการ คลิก Analyze แล้ว Create Child Theme WordPress จะสร้างโฟลเดอร์และไฟล์ที่จำเป็นทั้งหมดให้อัตโนมัติ

ตรวจสอบว่า Child Theme ทำงานถูกต้อง

หลังสร้าง Child Theme แล้ว ให้ตรวจสอบความถูกต้องด้วยวิธีเหล่านี้ผ่าน cPanel File Manager หรือ WordPress Admin:

# 1. ตรวจสอบโครงสร้างไฟล์ใน File Manager
wp-content/themes/astra-child/
  ├── style.css       (ต้องมี Template: astra)
  └── functions.php   (ต้องมี wp_enqueue_scripts hook)

# 2. ตรวจสอบ Theme ที่ใช้งานอยู่ใน WP-CLI (ถ้ามี)
wp theme list --status=active

# 3. ตรวจสอบ CSS โหลดถูกหรือไม่ (เปิด Browser DevTools)
# กด F12 → Network → กรอง "style.css" → ควรเห็นทั้ง parent และ child

# 4. ตรวจสอบ PHP Error ใน WordPress Debug
# เปิด wp-config.php แล้วตั้งค่า
define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );

# 5. ตรวจสอบ Log ที่ /wp-content/debug.log

แก้ปัญหาที่พบบ่อย

Error: "The theme is missing the style.css stylesheet"

ข้อผิดพลาดนี้เกิดขึ้นเมื่อ WordPress หา style.css ไม่พบ หรือไฟล์ว่างเปล่า ให้ตรวจสอบว่าไฟล์ style.css อยู่ในโฟลเดอร์ Child Theme จริง และมี Comment Header ครบถ้วน โดยเฉพาะบรรทัด Theme Name: และ Template: ต้องไม่ขาดหายไป

Error: หน้าเว็บแสดงแค่สีขาว (White Screen of Death)

มักเกิดจาก syntax error ใน functions.php ของ Child Theme เช่น ลืมปิด PHP tag หรือมีอักขระพิเศษก่อน <?php ให้เปิด cPanel File Manager ไปแก้ไขไฟล์ functions.php ตรวจโค้ดทีละบรรทัด หรือเปิด WordPress Debug Log ที่ wp-content/debug.log เพื่อดู Error จริง

// ตรวจสอบว่า functions.php ขึ้นต้นถูกต้อง
// ต้องเริ่มด้วย <?php ทันที ห้ามมีช่องว่างหรืออักขระก่อนหน้า

<?php
// โค้ดของคุณอยู่ที่นี่

Error: CSS ของ Child Theme ไม่ Override ค่าของ Parent

เกิดจาก Specificity ของ CSS Selector ใน Child Theme ต่ำกว่าของ Parent Theme แก้ไขโดยเพิ่ม !important ต่อท้าย Property ที่ต้องการ Override หรือใช้ Selector ที่มีความเฉพาะเจาะจงกว่า เช่นเพิ่ม class ของ element parent เข้าไปด้วย

/* วิธีที่ 1: เพิ่ม !important */
.entry-title { color: #16a34a !important; }

/* วิธีที่ 2: เพิ่ม Specificity */
body .site-content .entry-title { color: #16a34a; }

Error: Theme ไม่ปรากฏในหน้า Appearance → Themes

ตรวจสอบชื่อโฟลเดอร์ว่าไม่มีช่องว่าง ไม่มีอักขระพิเศษ และใช้ตัวพิมพ์เล็กทั้งหมด นอกจากนี้ให้ตรวจสอบว่าไฟล์ style.css อยู่ในโฟลเดอร์ที่ถูกต้องและมีสิทธิ์ไฟล์ (Permission) เป็น 644 โดยสามารถเปลี่ยนได้ผ่าน cPanel File Manager คลิกขวาที่ไฟล์แล้วเลือก Change Permissions

Error: หลังอัพเดท Parent Theme แล้ว Child Theme พังบางส่วน

บางครั้ง Parent Theme อัพเดทแล้วเปลี่ยน CSS Class หรือ Hook ทำให้ Child Theme ที่อ้างอิงอยู่ทำงานผิดพลาด ให้เปิด Browser DevTools ดู CSS ที่ใช้งาน และตรวจสอบ functions.php ว่า Hook ที่ใช้ยังมีอยู่ใน Parent Theme เวอร์ชันใหม่หรือไม่

คำถามที่พบบ่อย

ถาม: ถ้ามี Child Theme แล้ว ยังต้องอัพเดท Parent Theme อยู่ไหม?

ตอบ: ต้องอัพเดท Parent Theme ต่อไปตามปกติ เพราะ Parent Theme มีการแก้ไข Security Bug และ Feature ใหม่ๆ อยู่เสมอ Child Theme ไม่ได้หมายความว่าไม่ต้องอัพเดท Parent แต่หมายความว่าการอัพเดท Parent จะไม่ทำลายการตั้งค่าที่คุณแก้ไขใน Child Theme

ถาม: Child Theme ทำให้เว็บช้าลงไหม?

ตอบ: ไม่มีผลต่อ Performance อย่างมีนัยสำคัญ มีเพียง HTTP Request เพิ่มขึ้น 1 รายการสำหรับ style.css ของ Child Theme เท่านั้น ซึ่งถือว่าน้อยมาก บางกรณีถ้า functions.php ของ Child Theme มีโค้ดที่ไม่มีประสิทธิภาพจึงอาจทำให้ช้าได้ แต่ถ้าเขียนถูกต้องไม่มีผล

ถาม: ย้าย Hosting แล้ว Child Theme หายไปต้องทำอะไร?

ตอบ: ไฟล์ Child Theme อยู่ในโฟลเดอร์ wp-content/themes/ ซึ่งต้อง Backup และย้ายมาด้วยพร้อมกับไฟล์ WordPress ทั้งหมด ถ้าใช้ Backup Plugin เช่น UpdraftPlus หรือ Duplicator ควรเลือก Backup ทั้งหมดรวม Themes ด้วย หลังย้ายแล้วให้เข้า Appearance → Themes แล้ว Activate Child Theme อีกครั้ง