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

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

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

สิ่งที่ต้องเตรียม

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

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

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

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 ซึ่งไม่ถูกเขียนทับ แต่ถูกโหลดเพิ่มจากธีมหลัก ดังนั้นห้ามคัดลอกทั้งไฟล์มา เพราะฟังก์ชันจะถูกประกาศซ้ำและเว็บพัง

ขั้นตอนที่ 6: เขียนทับฟังก์ชันของธีมหลัก

ธีมที่เขียนดีจะครอบฟังก์ชันไว้ด้วย function_exists ทำให้ธีมลูกประกาศทับได้

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

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

หากธีมหลักไม่ได้ครอบไว้ ต้องใช้ hook แทน

// ถอด 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>';
}

ขั้นตอนที่ 7: ย้ายการแก้ไขเดิมที่เคยทำไว้

หากเคยแก้ไฟล์ของธีมหลักไว้ ให้หาว่าต่างจากต้นฉบับตรงไหน

# ดาวน์โหลดธีมหลักรุ่นเดียวกันมาเทียบ
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

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

ขั้นตอนที่ 8: เก็บธีมลูกใน Git

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

ธีมลูกคือโค้ดของคุณเอง ควรมีประวัติการเปลี่ยนแปลงและย้อนกลับได้ ต่างจากธีมหลักและปลั๊กอินที่ดาวน์โหลดใหม่ได้เสมอ

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

เปิดใช้งานธีมลูกแล้วหน้าเว็บเพี้ยนหมด

CSS ของธีมหลักไม่ถูกโหลด ตรวจว่า handle ที่ระบุใน wp_enqueue_style ตรงกับที่ธีมหลักใช้จริง และตรวจว่า Template: ใน style.css สะกดถูก

WordPress แจ้งว่าไม่พบธีมหลัก

ชื่อใน Template: ไม่ตรงกับชื่อโฟลเดอร์ ตรวจด้วย ls wp-content/themes/ ต้องตรงทุกตัวอักษรรวมถึงตัวพิมพ์เล็กใหญ่

แก้ CSS แล้วไม่เห็นผล

เบราว์เซอร์หรือปลั๊กอินแคชไว้ เพิ่มเลขเวอร์ชันใน style.css ล้างแคชของปลั๊กอิน และกด Ctrl+Shift+R เพื่อโหลดใหม่ทั้งหมด

เมนูและ Widget หายหลังเปลี่ยนธีม

เป็นพฤติกรรมปกติของ WordPress ตั้งใหม่ที่ Appearance แล้ว Menus โดยเลือกตำแหน่งให้ตรงกับที่ธีมกำหนด

ต้องการทีมงานช่วยปรับแต่งเว็บ WordPress อย่างถูกวิธี ติดต่อ THAI DATA CLOUD ได้ที่ https://thaidata.cloud/contact/