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

Child Theme จึงเป็นทางออกที่ถูกต้องและเป็นมาตรฐานของ WordPress สำหรับการแก้ไขธีมอย่างปลอดภัย บทความนี้จะอธิบายตั้งแต่ความหมายของ Child Theme เหตุผลที่ควรใช้ วิธีสร้าง Child Theme อย่างถูกต้อง ไปจนถึงแนวทางการแก้ไขไฟล์ต่าง ๆ เช่น style.css, functions.php, header.php และการปรับพฤติกรรมของ Parent Theme โดยไม่กระทบไฟล์หลัก เหมาะสำหรับทั้งผู้เริ่มต้นและนักพัฒนา WordPress ที่ต้องการทำเว็บไซต์อย่างมืออาชีพ

Child Theme คืออะไร

Child Theme (ธีมลูก) คือธีมที่สืบทอดความสามารถทั้งหมดมาจาก Parent Theme (ธีมแม่) โดยมีวัตถุประสงค์เพื่อให้เราสามารถปรับแต่ง แก้ไข หรือเพิ่มฟังก์ชันต่าง ๆ ได้อย่างปลอดภัย โดยไม่กระทบกับไฟล์หลักของธีมแม่

ข้อดีสำคัญของการใช้ Child Theme คือ

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

ทำไมไม่ควรแก้ไข Parent Theme โดยตรง

หากเราแก้ไขไฟล์ของ Parent Theme โดยตรง เช่น style.css หรือ functions.php เมื่อมีการ อัปเดตธีม โค้ดที่เราแก้ไขจะถูกเขียนทับทั้งหมดทำให้เราต้องแก้ไขใหม่อีกครั้ง ทางออกที่ถูกต้องคือ ใช้ Child Theme เพื่อเก็บโค้ดที่เราแก้ไขแยกไว้ต่างหาก เมื่อเราทำการอัปเดต Parent Theme ก็จะไม่ได้รับผลกระทบจากการเขียนทับไฟล์หลักนั้น

โครงสร้างพื้นฐานของ Child Theme

Child Theme ที่ถูกต้องต้องมีอย่างน้อย 1 โฟลเดอร์ และ 2 ไฟล์หลัก

themevilles-child/
│── style.css
│── functions.php

วิธีสร้าง Child Theme ใน WordPress (Step by Step)

1. สร้างโฟลเดอร์ Child Theme

ตั้งชื่อโฟลเดอร์เป็น

ชื่อธีมหลัก-child

ตัวอย่าง

themevilles-child

และนำไปวางไว้ที่

wp-content/themes/

2. สร้างไฟล์ style.css และกำหนดข้อมูล Theme Header

ไฟล์ style.css ต้องมีส่วนหัว (Theme Header) เพื่อให้ WordPress รู้จักธีมลูก

/*
Theme Name: Themevilles Child
Theme URI: https://demo-theme-1.themevilles.com
Description: Child theme for Themevilles
Author: Worapong N.
Author URI: https://themevilles.com
Template: themevilles
Version: 1.0.0
License: GNU General Public License v3
Text Domain: themevilles-child
*/

จุดสำคัญที่สุด

• Template: ต้องตรงกับชื่อโฟลเดอร์ของ Parent Theme

3. โหลด style.css ของ Parent Theme อย่างถูกวิธี

โหลดทั้ง Parent และ Child Theme (แนะนำ)

<?php
add_action( 'wp_enqueue_scripts', 'themevilles_enqueue_styles' );

function themevilles_enqueue_styles() {

    $parent_style = 'parent-style';

    wp_enqueue_style(
        $parent_style,
        get_template_directory_uri() . '/style.css'
    );

    wp_enqueue_style(
        'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}

จากโค้ดด้านบนสไตล์ของ Child Theme จะถูกโหลด หลัง Parent Theme ทำให้การแสดงผลเปลีย่นไปตามที่เราต้องการ นอกจากนั้นแล้วในโค้ดด้านบนเรายังกำหนดเวอร์ชั่นของไฟล์เพื่อป้องกันปัญหา Cache ด้วยการกำหนด Version

วิธีเปิดใช้งาน Child Theme

ไปที่
Dashboard → Appearance → Themes คุณจะเห็น Child Theme แสดงอยู่ สามารถกด Activate ได้ทันที

การเพิ่มรูป Screenshot ให้ Child Theme

สร้างไฟล์ชื่อ screenshot.png

• ขนาดแนะนำ: 1200 × 900 px
• วางไว้ในโฟลเดอร์ Child Theme

WordPress จะย่อขนาดอัตโนมัติเมื่อแสดงผล

วิธีปรับแต่ง WordPress ด้วย Child Theme

1. การแก้ไขไฟล์ style.css

CSS ที่เขียนใน Child Theme จะถูกอ่านก่อนเสมอ
เหมาะสำหรับ:

• ปรับสี
• ปรับ Layout
• Override CSS เดิมของธีมหลัก

2. การแก้ไขไฟล์หลัก เช่น header.php, footer.php

หากต้องการแก้ไขไฟล์หลักของธีมแม่:

1. คัดลอกไฟล์จาก Parent Theme
2. วางไว้ใน Child Theme
3. แก้ไขเฉพาะไฟล์ใน Child Theme

ตัวอย่าง

Parent Theme:
style.css
functions.php
header.php

Child Theme:
style.css
functions.php
header.php

WordPress จะเรียกใช้ header.php ของ Child Theme ทันที

3. การแก้ไข functions.php อย่างถูกวิธี

หลักการสำคัญ

• ไม่แก้ไขฟังก์ชันตรง ๆ
• ใช้การ Remove → Add ใหม่

การลบ Theme Features ที่ไม่ต้องการ

function remove_parent_theme_features() {
    remove_theme_support( 'post-formats' );
    remove_theme_support( 'post-thumbnails' );
    remove_theme_support( 'custom-background' );
}
add_action( 'after_setup_theme', 'remove_parent_theme_features', 20 );

การลบหรือแก้ไข Custom Post Type จาก Parent Theme

ลบ Custom Post Type เดิม

remove_action( 'init', 'parent_movie_add_post_type' );

สร้างใหม่ใน Child Theme

add_action( 'init', 'child_movie_post_type' );

function child_movie_post_type() {
    register_post_type( 'movie', array(
        'rewrite' => array( 'slug' => 'child-movie' ),
        'supports' => array( 'title', 'editor', 'thumbnail' )
    ));
}

การเพิ่ม / ลบ Feature ของ Custom Post Type

remove_post_type_support( 'movie', 'excerpt' );
add_post_type_support( 'movie', 'thumbnail' );

การลบ Menu, Widget, Sidebar

ลบ Menu

unregister_nav_menu( 'header-menu' );

ลบ Widget

unregister_widget( 'WP_Widget_Pages' );

ลบ Sidebar

unregister_sidebar( 'first-footer-widget-area' );

การลบ Shortcode จาก Parent Theme

remove_shortcode( 'gmap' );
add_shortcode( 'gmap', 'child_shortcode_gmap' );

การลบ Image Size ที่ไม่จำเป็น

add_filter( 'intermediate_image_sizes_advanced', function( $sizes ) {
    unset( $sizes['custom_size_parent_1'] );
    return $sizes;
});

การลบ Script และ CSS ของ Parent Theme

wp_deregister_script( 'fancybox-parent-js' );
wp_deregister_style( 'fancybox-parent-css' );

การลบ Action และ Filter

remove_action( 'thematic_header', 'thematic_blogdescription', 5 );

ฟังก์ชันสำคัญที่ใช้เฉพาะ Child Theme

ตัวอย่าง:

<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/logo.png">

สรุป: Child Theme จำเป็นแค่ไหนสำหรับ WordPress

Child Theme คือหัวใจของการพัฒนา WordPress อย่างมืออาชีพ

เหมาะสำหรับ:

• เว็บที่ต้องอัปเดตธีมบ่อย
• เว็บลูกค้า
• เว็บที่ต้องการปรับแต่งระยะยาว
• นักพัฒนา WordPress และ Theme Developer