การออกแบบธีมลูก WordPress แบบบล็อกโดยใช้ไฟล์ JSON ไฟล์เดียว

เผยแพร่แล้ว: 2021-10-26

ตั้งแต่ตอนที่ฉันเปิดร้านธีมร้านแรกในปี 2008 จนถึงปัจจุบันในฐานะคนที่เป็นแค่คนจรจัด แผนของฉันคือการสร้างธีมเดียวในรูปแบบ CSS Zen Garden นี่เป็นโครงการที่ Dave Shea เปิดตัวในช่วงต้นปี 2000 เพื่อแสดงให้เห็นว่านักออกแบบสามารถจัดการไซต์ผ่าน CSS เพียงอย่างเดียวได้อย่างไร HTML จะยังคงเหมือนเดิม แต่การออกแบบอาจเป็นอะไรก็ได้

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

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

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

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

ในที่สุดฉันก็เปิดตัวธีมของฉัน เป็นหนึ่งในผลิตภัณฑ์เชิงพาณิชย์ที่เก่าแก่ที่สุดที่สนับสนุนระบบบล็อกใหม่ อย่างไรก็ตาม ฉันก็หมดแรงเช่นกัน

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

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

สิ่งที่ทำให้ฉันตื่นเต้นที่สุดยังคงเป็นสิ่งที่ปลุกฉันทุกเช้าเมื่อ 13 ปีที่แล้ว: ธีมเด็ก

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

เหตุใดฉันจึงรู้สึกตื่นเต้นกับคุณลักษณะนี้มาก เพราะมันเป็นระบบเดียวกับที่ฉันสร้างขึ้นเมื่อหลายปีก่อน — แต่ดีกว่า

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

โพสต์สาธิตเดี่ยวแสดงข้อความสีดำบนพื้นหลังสีขาว
มุมมองโพสต์เดียวของธีมหลัก

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

ฉันเพิ่ม theme.json ที่ระดับรูทของธีมลูก และเริ่มมีความสนุกสนานมากกว่าที่ฉันเคยมีกับธีมมานานแล้ว

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

ธีมเด็กสไตล์ฤดูใบไม้ร่วงที่มีสีน้ำตาลและส้มแสดงโพสต์เดียว
มุมมองโพสต์เดียวของธีมลูก

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

อย่างที่ฉันพูดไป ฉันเคยสร้างวิธีการสร้างธีมลูกแบบนี้มาก่อน (ฉันใช้ PHP แทน JSON) อย่างไรก็ตาม สิ่งนี้มีประสิทธิภาพมากกว่ามากเพราะอาศัยระบบบล็อกมาตรฐานและไม่ใช่สิ่งที่กำหนดเองที่มีเพียงไม่กี่คนเท่านั้นที่เคยใช้

พวกคุณบางคนอาจถามว่าทำไมฉันไม่ทำการเปลี่ยนแปลงเหล่านี้ผ่านตัวแก้ไขไซต์แทนที่จะสร้างธีมย่อย Rich Tabor โพสต์คำถามเดียวกันบน Twitter ก่อนหน้านี้ในวันนี้ “หากธีมประกอบด้วย JSON และเทมเพลตบล็อกที่สามารถแก้ไขได้ผ่าน Global Styles แล้วธีมย่อยมีไว้เพื่ออะไร”

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

บางทีนี่อาจเป็นกรณีขอบมาก ใครเป็นผู้ทำการเปลี่ยนแปลงตามฤดูกาลในการออกแบบของพวกเขาในทุกวันนี้ใช่ไหม?

ส่วนที่น่าตื่นเต้นคือฉันสามารถแชร์ธีมย่อยที่สร้างด้วยไฟล์ JSON ไฟล์เดียวกับผู้อื่นได้

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

ฉันยังเห็นอนาคตที่ปราศจากธีมเด็กซึ่งยังคงมีประโยชน์แบบเดียวกันในการแชร์องค์ประกอบการออกแบบ

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

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

สำหรับตอนนี้ ฉันมีความสุขที่ได้ใช้ธีมเด็กอย่างเต็มที่ การเปลี่ยนแปลงนี้น่าจะมีผลใน Gutenberg 11.8 ในสัปดาห์นี้ และ WordPress 5.9 ในปลายปีนี้