เริ่มต้นจากศูนย์: สอนคุณทีละขั้นตอนในการสร้าง WordPress child theme ที่เป็นมืออาชีพ

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

ทำไมต้องใช้ธีมลูก

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

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

แนะนำให้อ่าน คู่มือเริ่มต้นการพัฒนา WordPress Theme: สร้างธีมแรกของคุณตั้งแต่ศูนย์。

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

UltaHost WordPress โฮสติ้ง

การรับประกันคืนเงินภายใน 30 วัน, แบนด์วิธและฐานข้อมูลไม่จำกัด, การป้องกัน DDoS ฟรี, ซื้อ 3 ปีลดราคา 50%

เข้าถึงหน้าเว็บ

โครงสร้างพื้นฐานของการสร้างธีมลูก

การสร้างธีมลูกนั้นง่ายมาก ต้องการเพียงไฟล์พื้นฐานสองไฟล์: ไฟล์สไตล์ชีตและไฟล์ฟังก์ชัน ก่อนอื่นคุณต้องสร้าง /wp-content/themes/ ไดเรกทอรีใหม่ โดยทั่วไปจะตั้งชื่อว่า “ชื่อธีมหลัก-child” เช่น twentytwentyfour-child。

สร้างไฟล์สไตล์ชีตหลัก

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

/*
 Theme Name:   Twenty Twenty-Four Child
 Theme URI:    https://example.com/twentytwentyfour-child/
 Description:  Twenty Twenty-Four Child Theme
 Author:       Your Name
 Author URI:   https://example.com
 Template:     twentytwentyfour
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  twentytwentyfour-child
*/

โดยเฉพาะอย่างยิ่งTemplate: . บรรทัดนี้สำคัญมาก ค่าของมันต้องตรงกับชื่อไดเรกทอรีของธีมแม่ทุกประการ โดยคำนึงถึงตัวพิมพ์ใหญ่-เล็ก นี่คือพื้นฐานที่ WordPress ใช้ระบุความสัมพันธ์ระหว่างธีมแม่และธีมลูก

. นำเข้าไฟล์สไตล์ชีตของธีมแม่

มีเพียงไฟล์ดังกล่าวเท่านั้นที่ธีมลูกยังไม่สามารถโหลดสไตล์ของธีมแม่ได้ คุณต้องใช้ไฟล์ฟังก์ชันของธีมลูก functions.php ใช้ฟังก์ชัน wp_enqueue_scripts เพื่อเรียกคิวสไตล์ชีตของธีมแม่

แนะนำให้อ่าน การสร้างเว็บไซต์มืออาชีพ: คู่มือฉบับสมบูรณ์สำหรับการพัฒนาและปรับแต่งธีม WordPress。

<?php
add_action( 'wp_enqueue_scripts', 'my_child_theme_enqueue_styles' );
function my_child_theme_enqueue_styles() {
    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')
    );
}
?>

get_template_directory_uri() ฟังก์ชันเพื่อรับ URL ของไดเรกทอรีธีมแม่ ในขณะที่ get_stylesheet_directory_uri() รับ URL ของไดเรกทอรีธีมปัจจุบัน (ธีมลูก) ที่กำลังใช้งานอยู่ ผ่านอาร์เรย์การพึ่งพา array( 'parent-style' ) ตรวจสอบให้แน่ใจว่าสไตล์ของธีมลูกโหลดหลังจากสไตล์ของธีมแม่ เพื่อให้กฎ CSS ที่คุณกำหนดเองสามารถแทนที่สไตล์ของธีมแม่ได้อย่างถูกต้อง

ขยายฟังก์ชันการทำงานของธีมลูก

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

การกำหนดฟังก์ชันเว็บไซต์เอง

ตัวอย่างเช่น คุณอาจต้องการเพิ่มประเภทบทความที่กำหนดเองใหม่ “โครงการ” ให้กับเว็บไซต์ คุณสามารถลงทะเบียนได้ใน functions.php ไฟล์ของธีมลูก

hosting.com 共享主机

高性能，配备 AMD EPYC CPU、NVMe SSD 存储和 LiteSpeed，全天候24小时、全天候的专家内部支持，高级安全措施，包括 SSL、暴力破解、恶意软件和 DDoS 防护，节省高达 73%

เข้าถึงหน้าเว็บ

add_action( 'init', 'register_project_post_type' );
function register_project_post_type() {
    $args = array(
        'public'      => true,
        'label'       => '项目',
        'has_archive' => true,
        'supports'    => array( 'title', 'editor', 'thumbnail', 'excerpt' ),
        'menu_icon'   => 'dashicons-portfolio',
    );
    register_post_type( 'project', $args );
}

ในขณะเดียวกัน คุณสามารถลบฟังก์ชันบางอย่างของธีมหลักที่ไม่จำเป็นออกได้ ตัวอย่างเช่น หากธีมหลักเพิ่มวิดเจ็ตส่วนท้ายที่คุณไม่ต้องการผ่านฟังก์ชันเฉพาะ คุณสามารถใช้ remove_action() เพื่อลบมันออก สมมุติว่าธีมหลักเพิ่มวิดเจ็ตด้วยฟังก์ชัน init บนฮุก parent_theme_footer_widgets คุณสามารถลบออกได้ดังนี้:

add_action( 'after_setup_theme', 'remove_parent_theme_features', 15 );
function remove_parent_theme_features() {
    remove_action( 'init', 'parent_theme_footer_widgets' );
}

โปรดทราบว่าการใช้ after_setup_theme hook และการตั้งค่าลำดับความสำคัญที่ค่อนข้างสูง (เช่น 15) นั้น เพื่อให้แน่ใจว่ารหัสของธีมหลักได้ถูกดำเนินการแล้ว add_actionเพื่อที่ remove_action ของเราจะสามารถทำงานได้

เขียนทับไฟล์เทมเพลตของธีมหลัก

หนึ่งในฟีเจอร์ที่ทรงพลังที่สุดของธีมลูกคือความสามารถในการเขียนทับไฟล์เทมเพลตของธีมหลัก หากคุณต้องการปรับเปลี่ยนวิธีการแสดงผลของหน้าบทความเดี่ยว เพียงคัดลอกไฟล์ single.php จากธีมหลักไปยังไดเรกทอรีธีมลูกของคุณ แล้วทำการแก้ไข WordPress จะใช้เวอร์ชันของคุณโดยอัตโนมัติ

แนะนำให้อ่าน ปลดล็อกศักยภาพ: สำรวจเทคโนโลยีหลักและแนวปฏิบัติที่ดีที่สุดในการสร้างธีม WordPress ขั้นสูง。

สำหรับการควบคุมในระดับที่ละเอียดยิ่งขึ้น คุณสามารถเขียนทับส่วนประกอบเทมเพลต (Template Parts) หรือบล็อกเทมเพลตเฉพาะได้ ตัวอย่างเช่น หากต้องการแก้ไขการแสดงผลข้อมูลเมตาของบทความ คุณสามารถคัดลอกและแก้ไขไฟล์จากธีมหลักได้ที่ template-parts/content-post-meta.php ไฟล์ไปยังเส้นทางเดียวกันของธีมลูก

เทคนิคขั้นสูงในการพัฒนาธีมลูก

เมื่อการพัฒนาธีมลูกเข้าสู่ขั้นตอนที่มืออาชีพมากขึ้น คุณจะต้องเจอกับหัวข้อขั้นสูง เช่น การแปลภาษาท้องถิ่น การสืบทอดตัวเลือกธีม และการอัปเดตธีมลูกเอง

โฮสติ้งแบบแชร์ของ InterServer

共享主机每月 $2.50 USD , 首月 $0.1 USD 优惠码 tryinterserver, 461个云应用脚本，一键安装。

เข้าถึงหน้าเว็บ

ดำเนินการแปลข้อความสำหรับภาษาท้องถิ่น

เพื่อให้ธีมย่อยของคุณรองรับหลายภาษา คุณต้องตั้งค่าโดเมนข้อความ (Text Domain) ให้ถูกต้องและใช้ฟังก์ชันการแปล การโหลดโดเมนข้อความใน style.css และ functions.php เป็นขั้นตอนแรก

在 functions.php ใน, ใช้ load_child_theme_textdomain ฟังก์ชัน:

add_action( 'after_setup_theme', 'child_theme_localization_setup' );
function child_theme_localization_setup() {
    load_child_theme_textdomain( 'twentytwentyfour-child', get_stylesheet_directory() . '/languages' );
}

หลังจากนั้น ณ ตำแหน่งสตริงที่ต้องการแปล ให้ใช้ฟังก์ชันเช่น esc_html__( 'Your Text', 'twentytwentyfour-child' ) ห่อหุ้ม จากนั้นคุณสามารถใช้เครื่องมือเช่น Poedit เพื่อสร้าง .po 和 .mo แปลไฟล์และจัดเก็บไว้ในชุดรูปแบบย่อย /languages/ ไดเรกทอรี

ปรับเปลี่ยนฟังก์ชันหลักอย่างปลอดภัย

บางครั้งคุณอาจจำเป็นต้องปรับเปลี่ยนฟังก์ชันที่ซับซ้อนในชุดรูปแบบหลัก ซึ่งฟังก์ชันนั้นไม่ได้ให้ความยืดหยุ่นเพียงพอผ่านฮุค (Hooks) หากฟังก์ชันนั้นเป็นแบบ “ปลั๊กอินได้” (Pluggable) ซึ่งใช้ if ( ! function_exists( ... ) ) ห่อหุ้ม คุณสามารถทำได้ในชุดรูปแบบย่อยของ functions.php โดยตรงประกาศฟังก์ชันนั้นใหม่ใน child theme เพื่อแทนที่มันอย่างสมบูรณ์

ก่อนลองทำสิ่งนี้ อย่าลืมตรวจสอบว่าฟังก์ชันในธีมหลักถูกประกาศแบบใด ถ้ามันไม่ใช่แบบ pluggable การประกาศซ้ำโดยบังคับอาจทำให้เกิดข้อผิดพลาดร้ายแรงได้ ในกรณีนี้ วิธีที่ปลอดภัยกว่าคือติดต่อผู้พัฒนาธีมหรือมองหา hook อื่นเพื่อตอบโจทย์ของคุณ

สรุป

การสร้าง child theme ใน WordPress เป็นทักษะหลักที่ผู้ปฏิบัติงานต้องเชี่ยวชาญ มันสร้างกระบวนการทำงานที่ปลอดภัยและยั่งยืนสำหรับการปรับแต่ง โดยแยกโค้ดที่คุณปรับแต่งเองออกจากโค้ดหลักของธีมอย่างชัดเจน เริ่มจากการสร้างไฟล์ style.css และโหลดสไตล์ชีต functions.php เริ่มต้น ไปจนถึงการเขียนทับไฟล์เทมเพลต ขยายฟังก์ชันการทำงาน และจัดการกับความเป็นท้องถิ่นและการเขียนทับขั้นสูง ทุกขั้นตอนปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดของ WordPress การยึดมั่นในธีมลูกเสมอ เป็นรากฐานที่มั่นคงที่จะรับประกันว่าเว็บไซต์ของคุณจะสามารถติดตามการอัปเดตได้อย่างทันท่วงที ในขณะที่ยังคงรักษารูปลักษณ์และฟังก์ชันการทำงานที่เป็นเอกลักษณ์ไว้ได้ในอีกหลายปีข้างหน้า

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

ชื่อโฟลเดอร์ของธีมลูกมีข้อกำหนดอะไรบ้าง

ชื่อโฟลเดอร์ของธีมลูกไม่มีข้อจำกัดที่เข้มงวด แต่เพื่อความชัดเจนและเข้าใจง่าย โดยทั่วไปแนะนำให้ใช้รูปแบบ “ชื่อธีมหลัก-child” เช่น astra-childประเด็นสำคัญอยู่ที่ style.css ส่วนหัวของไฟล์ Template: ฟิลด์นี้ ต้องมีค่าเหมือนกับชื่อโฟลเดอร์ของธีมหลักทุกประการ รวมถึงตัวพิมพ์เล็กใหญ่ด้วย มิฉะนั้น WordPress จะไม่สามารถสร้างความสัมพันธ์ระหว่างธีมหลักและธีมย่อยได้อย่างถูกต้อง

ธีมหลักทั้งหมดรองรับการสร้างธีมย่อยหรือไม่

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

วิธีการย้ายธีมหลักที่แก้ไขโดยตรงไปยังธีมลูก

ขั้นแรก สร้างธีมลูกใหม่โดยอิงจากธีมหลักเวอร์ชันดั้งเดิมที่ยังไม่มีการแก้ไขในสภาพแวดล้อมท้องถิ่นหรือสภาพแวดล้อมทดสอบของคุณ จากนั้น เปรียบเทียบความแตกต่างระหว่างไฟล์ธีมหลักที่คุณแก้ไขก่อนหน้านี้กับไฟล์ดั้งเดิมทีละไฟล์ ย้ายโค้ดที่แตกต่างกัน (อาจเป็น CSS, PHP หรือ HTML) ไปยังไฟล์ที่เกี่ยวข้องในธีมลูกอย่างเป็นระเบียบ: CSS ใส่ใน style.cssของธีมลูก โค้ดฟังก์ชันการทำงานใส่ใน functions.phpส่วนไฟล์เทมเพลตที่แก้ไขให้นำไปคัดลอกในไดเรกทอรีธีมลูกแล้วจึงทำการเปลี่ยนแปลง นี่เป็นกระบวนการที่ต้องอาศัยความละเอียดรอบคอบ แต่จะได้ผลถาวร

หัวข้อย่อยมีผลต่อความเร็วของเว็บไซต์หรือไม่

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