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

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

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

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

ธีมลูกของ WordPress คืออะไร?

ตามเอกสาร WordPress Developer:

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

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

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

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

ในบทความนี้ เราจะกล่าวถึงองค์ประกอบที่สำคัญของธีมลูก WordPress ที่ดีและให้แหล่งข้อมูลการอ่านเชิงลึก

1. เมื่อใดควรใช้ธีมลูกบล็อก

ธีมลูกมักเป็นทางออกที่ดี อย่างไรก็ตาม หากคุณต้องการเพิ่มโค้ด CSS เพียงเล็กน้อย ธีมลูกทั้งหมดอาจเกินความจำเป็น พิจารณาปลั๊กอินเช่น Code Snippets เพื่อเพิ่มการปรับแต่งเล็กน้อย

ปรับแต่งไซต์ลูกค้า

เมื่อคุณสร้างไซต์สำหรับลูกค้า มีการปรับแต่งเพิ่มเติมบางอย่างที่คุณอาจต้องการนำเสนอ

หากคุณต้องการควบคุมความสามารถของผู้ใช้ในการแทรกบล็อกใหม่ ย้ายบล็อกที่มีอยู่ หรือลบบล็อก คุณอาจต้องใช้การล็อคบล็อก คุณสามารถเรียนรู้วิธีล็อกบล็อกและอีกมากมายในบทช่วยสอนเบื้องต้นนี้

การสร้างชุดรูปแบบต่างๆ

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

2. เลือกธีม WordPress ที่ดี

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

3. สร้างสภาพแวดล้อมการทดสอบ

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

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

หากคุณไม่ได้ใช้ธีมลูกกับไซต์ที่มีอยู่ หรือหากคุณต้องการสร้างใหม่ตั้งแต่ต้น คุณสามารถสร้างสภาพแวดล้อมการพัฒนา WordPress ในเครื่องบนคอมพิวเตอร์ของคุณโดยใช้เครื่องมืออย่าง MAMP หรือ DesktopServer จาก ServerPress

4. สร้างไดเร็กทอรีธีมของคุณ

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

คุณกำลังมองหาโฟลเดอร์ต่อไปนี้:

 /wp-เนื้อหา/ธีม/

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

 /wp-content/themes/your-child-theme/

5. สร้างไฟล์ธีมของคุณ

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

ภายในโฟลเดอร์ไดเร็กทอรีธีมลูกใหม่ของคุณ คุณจะสร้างไฟล์ใหม่สองไฟล์:

 style.css
ธีม. json

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

ไฟล์ theme.json ใช้เพื่อกำหนดการตั้งค่าต่างๆ ใน ​​Global Styles และอื่นๆ เรียนรู้เพิ่มเติมเกี่ยวกับ theme.json จากคู่มือสำหรับนักพัฒนาซอฟต์แวร์

ในธีมคลาสสิกก่อนหน้านี้ ไฟล์ functions.php จำเป็นในธีมลูก บล็อกธีมลูกไม่ต้องการขั้นตอนเหล่านี้

สไตล์.css

อะไรอยู่ในไฟล์ style.css ของคุณ เอกสารประกอบสำหรับนักพัฒนาระบุว่า:

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

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

ด้านล่างนี้เป็นตัวอย่างของธีมย่อยที่ใช้ Twenty Twenty Two:

 /*
ชื่อกระทู้ : เด็กยี่สิบยี่สิบสอง
URI ของธีม: https://example.com/
ผู้แต่ง: ชื่อของคุณ
URI ผู้เขียน: https://example.com/
คำอธิบาย: ธีมเด็กยี่สิบยี่สิบสอง
ต้องการอย่างน้อย: 5.8
ทดสอบถึง: 5.9
ต้องการ PHP: 5.6
เวอร์ชัน: 0.1
ใบอนุญาต: GNU General Public License v2 หรือใหม่กว่า
URI ใบอนุญาต: http://www.gnu.org/licenses/gpl-2.0.html
โดเมนข้อความ: ยี่สิบยี่สิบสองลูก
แม่แบบ:ยี่สิบยี่สิบสอง
แท็ก: สีที่กำหนดเอง, เมนูที่กำหนดเอง, โลโก้ที่กำหนดเอง, สไตล์บรรณาธิการ, ภาพเด่น, การแก้ไขเว็บไซต์เต็มรูปแบบ, รูปแบบบล็อก

ธีม WordPress สำหรับเด็ก Twenty Twenty-Two, (C) 2021 WordPress.org
Twenty Twenty-Two Child จัดจำหน่ายภายใต้เงื่อนไขของ GNU GPL
*/

ธีม.json

ดูเอกสารประกอบสำหรับนักพัฒนาเพื่อเจาะลึกเกี่ยวกับ theme.json มาดูไฟล์ theme.json ของ Twenty Twenty Two:

 {
 "เวอร์ชัน": 2,
 "การตั้งค่า": {},
 "สไตล์": {},
 "เทมเพลตที่กำหนดเอง": {},
 "ส่วนแม่แบบ": {}
}

ภายในแต่ละรูปแบบเหล่านี้มีรูปแบบเพิ่มเติมสำหรับคุณ ตัวอย่างเช่น ในพื้นที่ของสไตล์ Twenty Twenty Two ใช้:

 {
 "การตั้งค่า": {
 "เครื่องมือลักษณะที่ปรากฏ": จริง
 "สี": {
 "ดูโอโทน": [
 {
 "สี": [
 "#000000",
 "#ffffff"
 ]
 "slug": "พื้นหน้าและพื้นหลัง",
 "ชื่อ": "พื้นหน้าและพื้นหลัง"
}

ต้องการความช่วยเหลือในการสร้างไฟล์ theme.json หรือไม่? ดูที่ themegen.app สำหรับคำแนะนำในการสร้างตัวเลือกมากมายสำหรับไฟล์ theme.json ของคุณ

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

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

นอกจากนี้ คุณอาจพบการตั้งค่าที่ Global Styles และ theme.json ยังไม่รองรับ หากคุณกำลังเพิ่ม CSS เพิ่มเติม เช่น เส้นขอบของบล็อกกลุ่มที่มี box-shadow คุณอาจต้องการเพิ่มลงในไฟล์ style.css ของคุณ

 .has-primary-border-color {
 กล่องเงา: .1rem .1rem .05rem #647BAF ;
}

7. ทดสอบธีมลูกของคุณ

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

• ทดสอบในเบราว์เซอร์ขนาดต่างๆ เช่น วิวพอร์ตบนมือถือ
• ทดสอบในเบราว์เซอร์ต่างๆ หรือใช้เครื่องมืออย่าง BrowserStack
• ตรวจสอบมาตรฐานการช่วยสำหรับการเข้าถึง เริ่มต้นใช้งาน WebAim

8. เตรียมอัปโหลดธีมลูกบล็อกของคุณ

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

สรุปการสร้างธีมลูกของบล็อก

1. ตัดสินใจว่าคุณต้องการธีมลูกบล็อก
2. เลือกธีมหลัก
3. กำหนดค่าสภาพแวดล้อมการทดสอบของคุณ
4. สร้างไดเร็กทอรีธีมของคุณ
5. สร้างไฟล์ธีมของคุณ
6. ปรับแต่งธีมลูกบล็อกของคุณ
7. ทดสอบธีมลูกของคุณ
8. อัปโหลดไปยังไซต์สด

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