หากนี่คือการพัฒนาธีม WordPress สมัยใหม่ ลงชื่อสมัครใช้

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

แรงบันดาลใจสำหรับธีมนี้มาจากบุคคลและโครงการอื่นๆ สองสามคน การทดสอบหน้า Landing Page สองคอลัมน์ของ Kjell Reigstad ตั้งแต่เดือนตุลาคม 2020 เริ่มต้นขึ้นเป็นครั้งแรก คำถามล่าสุดในคอลัมน์ Ask the Bartender เกี่ยวกับธีมที่กระชับและสบายตา ทำให้ความคิดสร้างสรรค์ของฉันหลั่งไหลออกมาอีกครั้ง อย่างไรก็ตาม เมื่อเห็นทีม Themes อนุมัติธีมบล็อกที่คล้ายกัน Miniblock OOAK โดย Carolina Nymark หมายความว่าตอนนี้กฎเกณฑ์ที่หละหลวมพอที่จะนำเสนอสิ่งนี้ออกไปสู่โลก

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

ด้วย WordPress 5.9 และระบบบล็อกธีมที่เสถียรยิ่งขึ้นในอีกไม่กี่วันข้างหน้า ถึงเวลาแล้วที่จะลองใหม่อีกครั้ง

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

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

ฉันสามารถสร้างธีม WordPress โดยไม่มีเว็บที่ซับซ้อนของการพึ่งพาซึ่งครอบคลุมมากกว่า 900 โครงการในโฟลเดอร์ /node_modules ของฉันได้หรือไม่

ฉันสามารถสร้างบางสิ่งโดยไม่ต้องดึงสคริปต์ PHP พื้นฐานของฉันผ่าน Composer ได้หรือไม่

ฉัน ขอ สร้างธีม WordPress ได้ไหม

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

นี่ไม่ได้หมายความว่าไม่มีอาการสะอึกระหว่างทาง แต่เราได้ยินมามากพอแล้ว นอกจากนี้ ฉันยังถือว่าการเขียนโปรแกรม/การพัฒนาเป็นศิลปะในการแก้ปัญหา

ฉันมีวันหยุดสุดสัปดาห์ที่กระสับกระส่าย ฉันนอนหลับสนิทสี่หรือห้าชั่วโมงระหว่างคืนวันศุกร์ถึงวันเสาร์ บางทีฉันอาจมีโครงการและหลายสิ่งหลายอย่างเกิดขึ้นที่จิตใจของฉันไม่สามารถปิดมันได้ ไม่ว่าฉันจะตื่นนอนตอนตี 3:30 น. ในเช้าวันอาทิตย์ เหนื่อยแต่ไม่สามารถจับ Z's ที่จำเป็นมากเหล่านั้นได้ ดังนั้นฉันจึงเปิดโปรแกรมแก้ไขโค้ดและสร้างโครงการธีมใหม่

ภายในหนึ่งชั่วโมงก็ทำงาน มันอยู่ในสภาพที่ดีพอที่จะแบ่งปันกับเพื่อน ๆ ทาง Twitter ในสองคน

ต่อไปนี้เป็นภาพหน้าจอของหน้าแรกปัจจุบัน ในทางเทคนิคมันเป็นหน้าเดียว ฉันได้แก้ไขเล็กน้อยตั้งแต่ฉันผลักดันการคอมมิตครั้งแรกของฉัน

นี่คือรูปแบบบล็อกที่ชื่อว่า "Reflections" ภูเขาที่สะท้อนภาพทะเลสาบมาจาก WordPress Photos และถ่ายโดย Anne McCarthy การไล่ระดับสีที่ใช้สำหรับแบ็คกราวด์เป็นภาพสะท้อนของสีของภาพด้วย ซึ่งผมคิดว่าเป็นสัมผัสที่ดี

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

สิ่งที่ได้เรียนรู้จากประสบการณ์

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

ฉันสร้างธีมตั้งแต่เริ่มต้นโดยใช้โปรแกรมแก้ไขโค้ดและการติดตั้ง WordPress ในเครื่องเท่านั้น ไม่มีโมดูลโหนด ไม่มีไลบรารี PHP ไม่มีการตั้งค่าการสร้างใด ๆ

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

รู้สึกเหมือนถูกส่งกลับไปในช่วงกลางปี ​​2000 เพียงมีระบบที่ดีกว่าในการดูแลชิ้นส่วนที่ซับซ้อนทั้งหมด ครั้งหนึ่งฉันสามารถจดจ่อกับการออกแบบได้เกือบทั้งหมด

มีปัญหามากมายกับระบบพื้นฐาน ความแปลกประหลาดเช่นองค์ประกอบ wrapper เพิ่มเติมรอบบล็อกที่มีการจัดแนวกว้างยังคงมีอยู่ในตัวแก้ไข และจำเป็นต้องอัปเดตบล็อกหลายบล็อก — ฉันกำลังดูคุณ บล็อกไฟล์เพราะไม่ได้ใช้บล็อกปุ่มที่มีอยู่ ซ้ำ

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

ฉันลังเลที่จะแบ่งปันงานที่ยังไม่เสร็จ แต่ฉันควรแสดงหลักฐานด้วย ผู้ที่สนใจสามารถตรวจสอบ GitHub repo ในวันที่บทความนี้ อย่างน้อยก่อนที่ฉันจะทำอะไรบ้าๆ กับมัน

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

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

โอกาสที่พลาดไป

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

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

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

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

ตัวอย่างเช่น นี่คือเทมเพลตส่วนหัวที่ Twenty Twenty-Two ลงทะเบียนตามที่ปรากฏภายใต้รายการเมนูแถบเครื่องมือ "แทนที่":

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

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

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

 <!-- wp:pattern { "slug":"namespace/slug" } -->

ปัญหาของแนวทางนี้คือตัวแก้ไขไซต์ไม่แสดงเนื้อหารูปแบบในรายการดรอปดาวน์ "แทนที่" ( ฉันเพิ่งค้นพบข้อบกพร่องหรือไม่ ):

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