คู่มือเริ่มต้นการพัฒนา WordPress Theme: สร้าง Child Theme แรกของคุณตั้งแต่เริ่มต้น

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

ธีมลูกคืออะไรและข้อได้เปรียบหลัก

ธีมลูกคือธีม WordPress ที่เป็นอิสระ ซึ่งทำงานโดยอาศัยธีมอื่น (เรียกว่าธีมหลัก) แนวคิดหลักของธีมลูกคือ “การสืบทอดและการแทนที่” โดยปกติแล้วมันประกอบด้วยเพียงไฟล์สไตล์ชีตและไฟล์ฟังก์ชันเท่านั้น แต่สามารถปรับแต่งธีมหลักได้อย่างลึกซึ้งผ่านไฟล์ทั้งสองนี้

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

แนะนำให้อ่าน คู่มือเริ่มต้นใช้งานปลั๊กอิน WooCommerce: สร้างร้านค้าออนไลน์ของคุณตั้งแต่เริ่มต้น。

ประการที่สองคือประสิทธิภาพในการพัฒนา คุณไม่จำเป็นต้องสร้างไฟล์เทมเพลตทั้งหมดของธีมตั้งแต่เริ่มต้น เพียงสร้างส่วนที่คุณต้องการแก้ไขในธีมลูกเท่านั้น ตัวอย่างเช่น หากคุณต้องการเปลี่ยนเฉพาะส่วนหัวของเว็บไซต์ คุณก็เพียงแค่สร้าง header.php ในธีมลูก เทมเพลตอื่นๆ ทั้งหมด (เช่น single.php、page.php) จะใช้เวอร์ชันของธีมหลักโดยอัตโนมัติ ซึ่งช่วยเพิ่มประสิทธิภาพในการพัฒนาได้อย่างมาก

UltaHost WordPress โฮสติ้ง

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

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

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

สร้างไดเรกทอรีย่อยธีมแรกและไฟล์ของคุณ

การสร้างธีมย่อยในทางเทคนิคนั้นง่าย คุณเพียงแค่ต้องทำตามโครงสร้างไฟล์และข้อตกลงการตั้งชื่อที่เฉพาะเจาะจง ก่อนอื่น คุณต้องสร้างโฟลเดอร์ใหม่ในไดเรกทอรีธีมของ WordPress /wp-content/themes/ ชื่อของโฟลเดอร์นี้คือชื่อธีมย่อยของคุณ แนะนำให้ใช้ตัวอักษรพิมพ์เล็ก ขีดกลาง และตัวเลข เช่น my-first-child-theme。

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

/*
 Theme Name:   My First Child Theme
 Theme URI:    https://example.com/my-first-child-theme/
 Description:  A child theme of the Twenty Twenty-Six theme
 Author:       Your Name
 Author URI:   https://example.com
 Template:     twentytwentysix
 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:  my-first-child-theme
*/

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

แนะนำให้อ่าน คู่มือขั้นสูงสุดในการพัฒนา WordPress Theme: สร้างธีมเว็บไซต์ระดับมืออาชีพตั้งแต่เริ่มต้น。

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

โหลดสไตล์อย่างถูกต้องผ่านไฟล์ฟังก์ชัน

ในธีมลูกfunctions.php หน้าที่หลักของไฟล์มักจะเป็นการจัดการการโหลดสไตล์ชีต แม้ว่า style.css ของธีมลูกจะถูก WordPress รู้จักโดยอัตโนมัติ แต่เพื่อให้แน่ใจว่าสไตล์ของธีมหลักจะถูกโหลดก่อนและถูกต้อง วิธีปฏิบัติที่ดีที่สุดคือใช้ WordPress action hook เพื่อจัดการคิวอย่างชัดเจน

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

hosting.com 共享主机

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

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

ต่อไปนี้คือตัวอย่างการใช้งานมาตรฐาน:

<?php
/**
 * Enqueue parent and child theme stylesheets.
 */
function my_first_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') // 使用主题版本号作为缓存破坏参数
    );
}
add_action( 'wp_enqueue_scripts', 'my_first_child_theme_enqueue_styles' );

ในโค้ดด้านบน,get_template_directory_uri() ฟังก์ชันส่งคืน URI ของไดเรกทอรีธีมหลัก และ get_stylesheet_directory_uri() ฟังก์ชันส่งคืน URI ของไดเรกทอรีธีมปัจจุบันที่ใช้งานอยู่ (เช่น ธีมลูก) โดยการประกาศสไตล์ชีตของธีมลูกให้ขึ้นอยู่กับสไตล์ชีตของธีมแม่ เรามั่นใจว่าลำดับการเรียงซ้อนของ CSS ถูกต้อง: สไตล์ของธีมแม่ถูกนำไปใช้ก่อน จากนั้นสไตล์ของธีมลูกจะถูกเขียนทับและเพิ่มเติมบนพื้นฐานนั้น

การปรับแต่งธีมลูกที่พบบ่อย

เมื่อโครงสร้างพื้นฐานถูกสร้างขึ้นเสร็จแล้ว คุณสามารถเริ่มงานปรับแต่งจริงได้ การปรับแต่งที่พบบ่อยที่สุดมักเกิดขึ้นในสองระดับ: สไตล์และไฟล์เทมเพลต

แนะนำให้อ่าน การวิเคราะห์เชิงลึกเกี่ยวกับการพัฒนา WordPress Plugin: สร้างส่วนขยายฟังก์ชันที่กำหนดเองตั้งแต่เริ่มต้น。

สำหรับการปรับแต่งสไตล์ คุณเพียงแค่ต้องอยู่ในธีมลูก style.css ไฟล์เพิ่มกฎ CSS ใหม่ เนื่องจากโหลดหลังจากสไตล์ของธีมหลัก กฎของมันจะมีลำดับความสำคัญสูงกว่า (สมมติว่าความเฉพาะเจาะจงของตัวเลือกเหมือนกัน) ตัวอย่างเช่น หากคุณต้องการเปลี่ยนสีลิงก์ทั่วทั้งเว็บไซต์ คุณสามารถเพิ่ม:

/* 在子主题的 style.css 文件中 */
a {
    color: #3498db; /* 覆盖父主题的链接颜色 */
}

.site-header {
    background-color: #2c3e50; /* 修改页头背景色 */
}

สำหรับการแก้ไขเค้าโครงหรือฟังก์ชันที่ซับซ้อนมากขึ้น คุณต้องเขียนทับไฟล์เทมเพลตของธีมหลัก นี่เป็นหนึ่งในฟังก์ชันที่ทรงพลังที่สุดของธีมลูก วิธีการคือ: คัดลอกไฟล์เทมเพลตของธีมหลักที่คุณต้องการแก้ไข (เช่น header.php、footer.php 或 page.php) ไปยังไดเรกทอรีธีมลูกของคุณ จากนั้น WordPress จะใช้สำเนานี้ในไดเรกทอรีธีมลูกโดยอัตโนมัติ และละเว้นไฟล์ต้นฉบับในธีมหลัก

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

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

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

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

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

สรุป

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

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

สามารถสร้างธีมลูกสำหรับธีม WordPress ใดก็ได้หรือไม่?

ในทางทฤษฎี ธีมใดๆ ที่เขียนตามมาตรฐานและปฏิบัติตามมาตรฐานการเข้ารหัส WordPress สามารถใช้เป็นธีมหลักเพื่อสร้างธีมลูกได้ คุณแค่ต้องตรวจสอบให้แน่ใจว่าในฟิลด์ของธีมลูก style.css 的 Template: กรอกชื่อโฟลเดอร์ของธีมหลักให้ถูกต้อง

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

ไฟล์ functions.php ของธีมลูกจะแทนที่ไฟล์ของธีมแม่หรือไม่?

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

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

จะทำอย่างไรถ้าเว็บไซต์มีสไตล์ที่ผิดปกติหลังจากเปิดใช้งานธีมลูก?

หากรูปลักษณ์ของเว็บไซต์ผิดปกติโดยสิ้นเชิงหลังจากเปิดใช้งานธีมลูก มักเกิดจากการที่สไตล์ชีตโหลดไม่ถูกต้อง โปรดตรวจสอบตามขั้นตอนต่อไปนี้

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

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

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

วิธีเพิ่มเทมเพลตหน้าประกอบเองในธีมลูก?

การเพิ่มเทมเพลตหน้าประกอบเองในธีมลูกนั้นเหมือนกับการเพิ่มในธีมปกติทุกประการ คุณเพียงแค่ต้องสร้างไฟล์ PHP ใหม่ในไดเรกทอรีของธีมลูก และเพิ่มบล็อกคอมเมนต์เฉพาะที่ส่วนหัวของไฟล์เพื่อประกาศว่าเป็นเทมเพลตหน้า

ตัวอย่างเช่น สร้างไฟล์ชื่อ my-full-width.php ไฟล์ควรมีส่วนเริ่มต้นดังนี้:

<?php
/**
 * Template Name: 我的全宽页面
 * Description: 一个没有侧边栏的全宽页面模板。
 */

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