WordPress Block Themes Creation และ Full-Stack Editing

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

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

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

WordPress Full-Site Editing (FSE) คือ…?

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

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

หลังจากอัปเดต WordPress เป็นเวอร์ชันล่าสุด คุณต้องเปิดใช้งานธีม FSE เช่น Twenty Twenty-Two หลังจากนั้น คุณสามารถใช้เฉพาะบล็อก Gutenberg เพื่อสร้างทั้งเว็บไซต์

FSE ช่วยคุณได้อย่างไร?

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

และองค์ประกอบระดับโลก มันคืออะไร? เมื่อจัดสรรแล้ว คุณสามารถใช้องค์ประกอบสากล คอนเทนเนอร์ และคอลัมน์ทั่วทั้งเว็บไซต์ของคุณ

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

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

สภาพแวดล้อมของ WordPress กำลังพัฒนาอีกครั้ง

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

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

Focus Shift: จากผู้ใช้สู่ผู้สร้าง

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

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

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

ถ้าอย่างนั้นทำไมการสร้างธีมแบบเต็มเว็บไซต์จึงสำคัญ?

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

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

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

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

วิธีการแก้

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

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

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

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

วิธีการสร้างความรู้สึกเชิงตรรกะของทั้งหมด?

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

คุณต้องการความสะดวกสบายของ 'ความพยายามและความจริง' ด้วยความแข็งแกร่งของ 'ใหม่' และมีคำถามมากกว่าวิธีแก้ปัญหา...

คุณกำลังดูหลักสูตรนักพัฒนาสำหรับการผสานรวมและสร้างธีมส์บล็อก

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

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

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

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

ดังนั้น ขอให้โชคดีในการสร้างธีมบล็อคและเล่น FSE!