การสร้างโฮมเพจธีม WordPress ของ Music Artist ด้วย Block Editor

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

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

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

ทั้งหมดนี้ทำได้ด้วยตัวแก้ไขบล็อก

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

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

ต่อไปนี้คือการเปรียบเทียบหน้าแรกของธีม Music Artist ดั้งเดิม (อันดับแรก) และการพักผ่อนหย่อนใจโดยใช้บล็อกผ่านธีม Ariele Lite (ที่สอง):

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

สำหรับการทดลองนี้ ฉันใช้:

• WordPress 5.7 Beta
• Gutenberg 10.1 Beta
• Ariele Lite 1.0.8
• Editor Plus 2.6

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

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

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

การสร้างโฮมเพจของศิลปินเพลงขึ้นใหม่

การเริ่มต้นด้วยฐานของ Ariele Lite หมายความว่าการออกแบบถูกบรรจุในกล่อง อย่างไรก็ตาม ธีมนี้มีเทมเพลตหน้า "Blank Canvas" ที่กำหนดเองซึ่งให้ผู้ใช้ออกแบบทั้งหน้าได้

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

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

ส่วนฮีโร่

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

จากนั้นฉันเพิ่มบล็อกส่วนหัวโดยปรับขนาดเล็กน้อย ฉันตามด้วยบล็อก Spacer และ Social Icons

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

หมวดรายชื่อจานเสียง

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

เพื่อความง่าย ฉันตัดสินใจเพิ่มบล็อกคอลัมน์และวางรูปภาพที่เชื่อมโยงสามภาพ

ส่วนสื่อและข้อความ

แผนของฉันสำหรับส่วนนี้คือการใช้บล็อกสื่อและข้อความหลัก อย่างไรก็ตาม รองรับเฉพาะสื่อที่โฮสต์เองเท่านั้น ไม่มีทางที่ฉันจะฝังวิดีโอ YouTube

แต่ฉันไปกับบล็อกคอลัมน์ ในคอลัมน์ทางซ้าย ฉันทิ้ง URL ของวิดีโอ YouTube ทางด้านขวา ฉันเพิ่มบล็อกหัวเรื่อง ย่อหน้า และปุ่ม

หมวดวิดีโอ

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

กระทู้ล่าสุด มาตรา

นี่เป็นส่วนหนึ่งของเลย์เอาต์ที่ฉันมีปัญหามากที่สุด WordPress มีบล็อกโพสต์ล่าสุด ซึ่งสามารถตั้งค่าเป็นตารางได้ อย่างไรก็ตาม Ariele Lite จัดการกับคอลัมน์ไม่ถูกต้อง

ดังนั้นฉันจึงโกงเล็กน้อย

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

การออกแบบดั้งเดิมสามารถทำได้ด้วยบล็อกโพสต์ล่าสุด ดังนั้นนี่ไม่ใช่ปัญหาตัวแก้ไขบล็อก

ส่วนท้ายแถบด้านข้าง

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

ส่วนนี้ต้องใช้บล็อกคอลัมน์ จากจุดนั้น มันเป็นเรื่องของการวางบล็อกหัวเรื่องสำหรับแต่ละคอลัมน์ ฉันเพิ่มบล็อกย่อหน้า ปฏิทิน และแกลเลอรีเพื่อสร้าง "วิดเจ็ต" ทั้งสามรายการ

การออกแบบบล็อกปฏิทินของ Ariele Lite ทำงานได้ดีกว่าบนพื้นหลังสีอ่อน มันเป็นความเจ็บปวดเล็กๆ น้อยๆ ที่ฉันมองข้ามไป ในระยะยาว WordPress ควรมีการควบคุมการออกแบบบนบล็อกที่ขาดหายไป