สุดยอดคู่มือ WordPress Child Themes

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

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

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

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

เสียงดี? มาเริ่มกันเลย!

WordPress Child Themes: พื้นฐาน

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

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

ธีม WordPress ส่วนใหญ่ในปัจจุบันมาพร้อมกับธีมย่อย (หรือรูปแบบย่อยของธีมย่อย) ได้ทันที

เหตุใดคุณจึงควรใช้ธีมเด็ก

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

ขจัดความเสี่ยงของการสูญเสียการดัดแปลง

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

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

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

รักษารหัสองค์กร

ธีม WordPress โดยทั่วไปประกอบด้วยโค้ดไม่กี่พันบรรทัดและไฟล์ต่างๆ เช่น HTML, CSS, PHP, JavaScript และอื่นๆ และด้วยเหตุนี้ การเปลี่ยนแปลงเล็กน้อยที่เกิดขึ้นที่นี่จึงยากต่อการติดตาม เมื่อถึงเวลาต้องกลับไปแก้ไขธีมหรือแก้ไขจุดบกพร่องที่ไม่คาดคิด ค่าใช้จ่ายจะค่อนข้างสูง (ทั้งเวลาและงบประมาณ)

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

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

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

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

ขั้นตอนที่ 1: สร้างไดเร็กทอรีสำหรับธีมย่อยในการติดตั้ง WordPress ของคุณ

1. ไปที่ไดเร็กทอรีธีมของไซต์ WordPress ( /wp-content/themes )
2. สร้างโฟลเดอร์ใหม่และตั้งชื่อ เป็นประกาย-ลูก แนวทางปฏิบัติที่ดีที่สุดคือตั้งชื่อธีมลูกของคุณให้เหมือนกับชื่อหลักที่มี -child ต่อท้าย

เราจะเพิ่มไฟล์ของธีมลูกทั้งหมดลงในโฟลเดอร์นี้ ที่กล่าวว่า ไฟล์เดียวที่ธีมลูกต้องการเพื่อให้ทำงานได้อย่างถูกต้องคือ style.css

ขั้นตอนที่ 2: สร้างไฟล์ style.css สำหรับธีมลูกใหม่ของคุณ

1. ไปที่ไดเร็กทอรีของธีมลูกที่สร้างขึ้นในขั้นตอนที่ 1 เช่น /wp-content/themes/sparkling-child
2. สร้างไฟล์ .css ใหม่ในไดเร็กทอรีและตั้งชื่อเป็น style.css
3. คัดลอกและวางโค้ดต่อไปนี้ลงใน style.css ใหม่:

ในโค้ดที่ให้ไว้ด้านบน บรรทัดที่สำคัญที่สุดคือบรรทัดที่ขึ้นต้นด้วย Theme Name , Template และ @import คุณต้องกรอกบรรทัดเหล่านี้ให้ถูกต้อง หากคุณกำลังสร้างธีมลูกสำหรับธีมหลักอื่น บรรทัด @import ช่วยให้คุณไม่ต้องเขียนกฎ CSS ของธีมหลักใหม่ตั้งแต่ต้น หากไม่มีบรรทัด @import ไซต์ใหม่จะโหลดเฉพาะเนื้อหาเท่านั้น ไม่มีสไตล์

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

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

ไฟล์ functions.php ช่วยให้นักพัฒนาเว็บสามารถเพิ่มฟังก์ชันการทำงานให้กับเว็บไซต์ WordPress ของตนได้โดยใช้ฟังก์ชัน WordPress ดั้งเดิมและโค้ด PHP

1. ไปที่โฟลเดอร์ของธีมลูกของคุณ เช่น spark-child
2. สร้างไฟล์ .php และตั้งชื่อว่า functions.php
3. เพิ่มรหัสต่อไปนี้ในไฟล์ functions.php:

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

ขั้นตอนที่ 4: นำเข้าสไตล์ชีตหลายแผ่น (ไม่บังคับ)

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

1. ไปที่ไดเร็กทอรีของธีมลูกของคุณและเปิดไฟล์ functions.php ในโปรแกรมแก้ไขข้อความ
2. เพิ่มบรรทัดโค้ดต่อไปนี้ในไฟล์ functions.php ภายใต้แท็กเปิด <?php :

wp_enqueue_style() ที่ใช้ในโค้ดด้านบนจะนำเข้าสไตล์ชีตหลายรายการไปยังธีมย่อยของคุณโดยไม่ทำให้ไซต์ของคุณช้าลง

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

ขั้นตอนที่ 5: อัปโหลดธีมลูก

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

1. บีบอัดไดเร็กทอรีธีมลูกลงในไฟล์ .zip
2. เข้าสู่ระบบแผงควบคุม WordPress ของคุณและไปที่ Appearance > Themes
3. คลิกปุ่ม เพิ่มใหม่ บนหน้าจอต่อไปนี้

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

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

ปรับแต่งธีมลูกของคุณ

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

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

การใช้สไตล์ที่กำหนดเอง

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

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

สิ่งที่คุณต้องทำคือเพิ่มโค้ด CSS ที่กำหนดเองที่ด้านล่างของ style.css ของธีมลูก เท่านี้ก็เรียบร้อย บรรดาผู้ที่ไม่ต้องการเข้าถึงไคลเอ็นต์ FTP ของไซต์ทุกครั้งที่ต้องทำการเปลี่ยนแปลงง่ายๆ สามารถนำทางไปยังตัวแก้ไขเริ่มต้นของ WordPress ( ลักษณะ ที่ปรากฏ > ตัวแก้ไข ) และเพิ่มโค้ด CSS ได้โดยตรงจากที่นั่น ไปที่ ลักษณะที่ปรากฏ> ตัวแก้ไข และเพิ่มโค้ด CSS โดยตรงจากที่นั่น

สิ่งที่คุณต้องทำคือเพิ่มโค้ด CSS ที่กำหนดเองที่ด้านล่างของไฟล์ธีมลูก เท่านี้ก็เรียบร้อย

เทคนิคการดัดแปลงธีมทางเลือก

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

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

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

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

ห่อมันขึ้น

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

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

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