วิธีสร้างธีมลูก WordPress

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

หัวข้อย่อยหมายความว่าอะไร?

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

จำเป็นต้องใช้หัวข้อย่อยหรือไม่?

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

ตั้งค่า WordPress Child Theme

คุณสามารถตั้งค่า WordPress Child Theme ด้วยตนเองหรือใช้ปลั๊กอินได้

สิ่งหนึ่งที่คุณต้องจำไว้คือ มันจะไม่ทำงานจนกว่าเทมเพลตหลักของคุณจะปรากฏในหน้า “ธีม” ภายใต้ “รูปลักษณ์”

วิธีที่ 1: สร้าง Child Theme ด้วยตนเอง

#1: ก่อนอื่น คุณต้องสร้างโฟลเดอร์ใหม่และตั้งชื่อตามที่คุณต้องการ เช่น “twentytwentyfour-child”

#2:ต่อไป คุณต้องสร้างไฟล์และตั้งชื่อว่า “style.css” โปรดทราบว่าไฟล์นี้ต้องมีอยู่จริง

#3：ตอนนี้คุณต้องเปิดไฟล์ที่เพิ่งสร้างนี้และป้อนข้อมูลต่อไปนี้ลงไป

/*
Theme Name:     Twenty Twenty-Four Child
Theme URI:      https://example.com/twentytwentyfour-child/
Description:    This is a child theme for Twenty Twenty-Four, created by me.
Author:         Your Name
Author URI:     https://example.com
Template:       twentytwentyfour
Version:        1.0.0
*/

คำอธิบายพารามิเตอร์สำคัญ:​​

• Theme Name：​​(ต้องกรอก)​​ ชื่อหัวข้อย่อยของคุณ
• Template：​​(ต้องกรอก)​​ นี่คือที่สำคัญที่สุดบรรทัดเดียว มันต้องตรงกันอย่างสมบูรณ์กับชื่อไดเรกทอรีของธีมหลัก ตัวอย่างเช่น ธีมหลักคือ twentytwentyfour，กรอกที่นี่ twentytwentyfour；หัวข้อหลักคือ Divi，กรอกที่นี่ Divi。​ตัวพิมพ์ใหญ่และตัวพิมพ์เล็กต้องตรงกัน。
• Description： คำอธิบายสั้น ๆ ของหัวข้อย่อย
• Author: ชื่อของคุณ
• Author URI: ที่อยู่เว็บไซต์ของคุณ
• Version: หมายเลขรุ่นของธีมย่อย

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

คุณสามารถทำได้ใน CSS ที่กำหนดเองของคุณ​ก่อนหน้านี้ใน @import กฎเพื่อให้บรรลุเป้าหมายนี้

/*
Theme Name:     Twenty Twenty-Four Child
Theme URI:      https://www.likacloud.com/twentytwentyfour-child/
Description:    This is a child theme for Twenty Twenty-Four, created by me.
Author:         Your Name
Author URI:     https://example.com
Template:       twentytwentyfour
Version:        1.0.0
*/

/* 导入父主题的样式以确保设计基础一致 */
@import url("../twentytwentyfour/style.css");

/* 自定义样式从这里开始 */

/* 1. 更改文章标题颜色 */
.wp-block-post-title {
    color: #1a4f6e;
    font-weight: 700;
}

/* 2. 更改网站背景色 */
body {
    background-color: #f8f9fa;
}

/* 3. 更改主内容区域的宽度 */
.wp-block-group.alignwide {
    max-width: 1280px;
}

/* 4. 自定义链接颜色 */
a {
    color: #d14545;
}
a:hover {
    color: #a23434;
    text-decoration: none;
}

ตัวอย่างเช่น:

<?php
// 确保在正确的钩子上加载样式
add_action('wp_enqueue_scripts', 'enqueue_parent_and_child_styles');

function enqueue_parent_and_child_styles() {
    // 加载父主题样式
    wp_enqueue_style('parent-style', get_template_directory_uri() . 'https://www.likacloud.com/style.css');
    
    // 加载子主题样式，并指定依赖于父主题样式
    // 这样可以确保子主题样式在父主题样式之后加载，保证样式覆盖生效
    wp_enqueue_style('child-style', 
                     get_stylesheet_directory_uri() . 'https://www.likacloud.com/style.css',
                     array('parent-style'), // 依赖关系
                     wp_get_theme()->get('Version') // 版本号，可选
                    );
}

คำอธิบายโค้ด:

1. add_action('wp_enqueue_scripts', 'enqueue_parent_and_child_styles'): ฟังก์ชันที่กำหนดเองเพื่อเชื่อมต่อกับ WordPress hook สำหรับการโหลดสไตล์ชีต
2. get_template_directory_uri(): รับ URL ของไดเรกทอรีธีมหลัก (parent theme)
3. get_stylesheet_directory_uri(): รับ URL ของไดเรกทอรีธีมย่อย (child theme) เมื่อธีมย่อยถูกเปิดใช้งาน
4. array('parent-style'): ประกาศการพึ่งพาสไตล์ชีตของธีมย่อยกับธีมหลัก เพื่อให้แน่ใจว่าลำดับการโหลดถูกต้อง

วิธีนี้เมื่อเทียบกับ @import มีประสิทธิภาพมากขึ้น เพราะอนุญาตให้เบราว์เซอร์โหลดสไตล์ชีตแบบขนาน และจัดการการพึ่งพาระหว่างสไตล์ได้ดีกว่า

คุณเพียงแค่เพิ่มโค้ดนี้ลงในธีมลูก functions.php ไฟล์ (หากไม่มีไฟล์ให้สร้างขึ้นใหม่) พร้อมทั้งรักษาโครงสร้างธีมลูกที่มีอยู่เดิมของคุณ style.css ข้อมูลความคิดเห็นส่วนหัวก็เพียงพอแล้ว

รายละเอียดอื่น ๆ ทั้งหมดสามารถเปลี่ยนแปลงได้ตามความต้องการของคุณ

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

วิธีที่สอง: สร้างธีมลูกโดยใช้ปลั๊กอิน

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

#1： ก่อนอื่น คุณต้องดาวน์โหลด ตัวกำหนดธีมลูก ปลั๊กอิน

#2: ตอนนี้เข้าสู่ระบบเว็บไซต์ของคุณและไปที่แดชบอร์ด

#3： นำทางไปที่ปลั๊กอิน (Plugins) จากนั้นเลือกตัวเลือก เพิ่มใหม่ (Add New)

#4：ตอนนี้คุณต้องอัปโหลดปลั๊กอินที่คุณเพิ่งดาวน์โหลดโดยคลิกที่ตัวเลือก “อัปโหลดปลั๊กอิน” แล้วเปิดใช้งานมัน

#5：การเปิดใช้งานธีมที่คุณต้องการสร้างธีมลูกสำหรับนั้นเป็นสิ่งสำคัญมาก

#6: สามารถทำได้โดยการนำทางไปที่ส่วน “เครื่องมือ” และคลิกที่ธีมลูก

#7: ตอนนี้คลิกปุ่มวิเคราะห์และทำตามการตั้งค่าที่ปลั๊กอินระบุเพื่อสร้างธีมลูกของคุณ

1ทีพี6ที8： ตอนนี้คุณต้องคลิกที่ตัวเลือก “สร้างหัวข้อย่อยใหม่”

แก้ไขไฟล์เทมเพลตอื่น ๆ

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

สมมติว่าคุณได้สร้าง twentytwentyfour หัวข้อย่อย คุณต้องการเปลี่ยนวิธีแสดงหน้าเดียว ตำแหน่งของหน้าเดียวคือ twentytwentyfour-child/template-parts/content-single.php

#1：ในโฟลเดอร์หัวข้อย่อย ให้สร้าง content-single.php คุณต้องระมัดระวังเป็นพิเศษเกี่ยวกับชื่อและโครงสร้าง ต้องเหมือนกับธีมหลักเพื่อที่จะแทนที่มัน

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

#3： เพียงเท่านี้ ในขั้นตอนนี้ สิ่งที่คุณต้องทำคือเขียนโค้ดที่คุณต้องการในไฟล์ content-single.php ซึ่งจะแทนที่ไฟล์หลัก

ระวัง: ตรวจสอบให้แน่ใจว่าชื่อไฟล์และเส้นทางโฟลเดอร์ต้องเหมือนกัน

เราหวังว่าตอนนี้คุณจะสามารถสร้างชิลด์ธีมได้อย่างง่ายดาย หากคุณมีข้อสงสัยใด ๆ กรุณาเพิ่มกลุ่ม QQ 1398231พูดคุย

ดูผู้ให้บริการโฮสต์คลาวด์ WordPress ที่แนะนำ