สร้าง Child Theme ให้แก้ธีมได้โดยไม่หายตอนอัปเดต

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

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

สิ่งที่ต้องเตรียม (Child Theme)

• สิทธิ์เข้าถึงไฟล์ของเว็บ ผ่าน SSH, SFTP หรือ File Manager
• ชื่อโฟลเดอร์ของธีมหลักที่ใช้อยู่

cd /var/www/example.com
wp theme list
wp theme status

ขั้นตอนที่ 1: สร้างโฟลเดอร์ธีมลูก (Child Theme)

cd wp-content/themes
mkdir mytheme-child
cd mytheme-child

ตั้งชื่อให้สื่อความและลงท้ายด้วย -child เพื่อให้รู้ได้ทันทีว่าเป็นธีมลูกของอะไร

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

nano style.css

/*
 Theme Name:   MyTheme Child
 Theme URI:    https://example.com
 Description:  ธีมลูกของ MyTheme สำหรับปรับแต่งเฉพาะของเว็บนี้
 Author:       ทีมงาน example.com
 Template:     mytheme
 Version:      1.0.0
 Text Domain:  mytheme-child
*/

/* CSS ของคุณเขียนต่อจากบรรทัดนี้ */

บรรทัด Template: คือหัวใจ ต้องตรงกับชื่อโฟลเดอร์ของธีมหลักเป๊ะ ๆ ไม่ใช่ชื่อที่แสดง ตรวจด้วย

ls /var/www/example.com/wp-content/themes/

หากพิมพ์ผิดแม้ตัวเดียว WordPress จะแจ้งว่าไม่พบธีมหลักและเปิดใช้งานไม่ได้

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

nano functions.php

<?php
if (!defined('ABSPATH')) exit;

/**
 * โหลด CSS ของธีมหลักก่อน แล้วจึงโหลดของธีมลูกทับ
 * ลำดับสำคัญมาก ถ้าสลับกัน CSS ของคุณจะถูกเขียนทับ
 */
add_action('wp_enqueue_scripts', function () {
    $parent = 'mytheme-style';

    wp_enqueue_style(
        $parent,
        get_template_directory_uri() . '/style.css',
        array(),
        wp_get_theme(get_template())->get('Version')
    );

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

การใส่หมายเลขเวอร์ชันจากธีมทำให้เบราว์เซอร์โหลด CSS ใหม่เมื่อคุณเพิ่มเลขเวอร์ชันใน style.css ซึ่งแก้ปัญหา "แก้ CSS แล้วไม่เห็นผล" ได้

ธีมสมัยใหม่บางตัวมีวิธีโหลด CSS ของตัวเอง ตรวจชื่อ handle ที่ธีมหลักใช้จริงก่อน

grep -rn "wp_enqueue_style" ../mytheme/functions.php | head

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

wp theme activate mytheme-child
wp theme list

เปิดเว็บดู หน้าตาควรเหมือนเดิมทุกประการ หากเพี้ยนแปลว่า CSS ของธีมหลักไม่ถูกโหลด กลับไปตรวจขั้นตอนที่ 3

เมนูและ Widget ที่ตั้งไว้ในธีมหลักอาจไม่ตามมา ต้องตั้งใหม่ที่ Appearance แล้ว Menus และ Widgets

ขั้นตอนที่ 5: แก้ไฟล์เทมเพลต

คัดลอกเฉพาะไฟล์ที่ต้องแก้มาไว้ในธีมลูก โดยรักษาโครงสร้างโฟลเดอร์เดิม

cd /var/www/example.com/wp-content/themes

# แก้หน้าบทความเดี่ยว
cp mytheme/single.php mytheme-child/

# ไฟล์ในโฟลเดอร์ย่อย ต้องสร้างโฟลเดอร์ให้ตรงกัน
mkdir -p mytheme-child/template-parts
cp mytheme/template-parts/content.php mytheme-child/template-parts/

WordPress จะใช้ไฟล์ในธีมลูกก่อนเสมอ ส่วนไฟล์ที่ไม่ได้คัดลอกมาจะใช้ของธีมหลักตามปกติ

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

// ในธีมหลักเขียนแบบนี้
if (!function_exists('mytheme_footer_credit')) {
    function mytheme_footer_credit() { /* ... */ }
}

// ในธีมลูก ประกาศชื่อเดียวกันได้เลย เพราะโหลดก่อน
function mytheme_footer_credit() {
    echo '<p>สงวนลิขสิทธิ์ example.com</p>';
}

// ถอด action ของธีมหลักแล้วใส่ของเราแทน
add_action('after_setup_theme', function () {
    remove_action('mytheme_footer', 'mytheme_footer_credit');
    add_action('mytheme_footer', 'my_custom_footer');
});

function my_custom_footer() {
    echo '<p>เนื้อหาท้ายเว็บของเรา</p>';
}

# ดาวน์โหลดธีมหลักรุ่นเดียวกันมาเทียบ
cd /tmp
wp theme install mytheme --version=2.1.0 --path=/tmp/clean --force

diff -ru /tmp/clean/wp-content/themes/mytheme \
         /var/www/example.com/wp-content/themes/mytheme \
  | head -100

cd /var/www/example.com/wp-content/themes/mytheme-child
git init
cat > .gitignore <<'EOF'
node_modules/
*.log
EOF
git add .
git commit -m "ธีมลูกเริ่มต้น"