รูปแบบบล็อกของ WordPress: The Ultimate Guide

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

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

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

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

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

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

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

รูปแบบบล็อกของ WordPress คืออะไร?

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

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

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

หน้าจอการเปิดตัว WordPress 5.5

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

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

บันทึกย่อสองสามข้อเกี่ยวกับรูปแบบบล็อกของ WordPress:

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

รูปแบบบล็อก WordPress ที่กำหนด

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

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

การทำซ้ำครั้งแรกของอินเทอร์เฟซรูปแบบบล็อกถูกส่งมาในปลั๊กอิน Gutenberg เวอร์ชัน 7.7 ในขณะนั้นรูปแบบบล็อกเป็นพื้นฐานมาก

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

Gutenberg 7.7 Release Post

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

รูปแบบบล็อกมีประโยชน์อย่างไร?

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

ประหยัดเวลาและความผิดหวัง

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

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

เค้าโครงหน้าและโพสต์ที่ยืดหยุ่น

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

สร้างเว็บไซต์ที่ดูเหมือนตัวอย่างธีมได้ง่ายๆ

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

ใช้ประโยชน์จากชุดค่าผสมบล็อกที่กำหนดเอง

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

สลับธีมได้อย่างง่ายดาย

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

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

สร้างรูปแบบบล็อกของคุณเอง

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

รูปแบบบล็อกของ WordPress ทำงานอย่างไร

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

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

คุณไม่จำเป็นต้องจัดการกับการใส่รหัสย่อจำนวนมากหรือค้นหาว่าตัวเลือกที่ซับซ้อนทำงานอย่างไรในธีมของคุณอีกต่อไป

รูปแบบบล็อกคล้ายกับตัวสร้างเพจอย่างไร

แนวคิดในการใช้ส่วนเนื้อหาของหน้าที่กำหนดไว้ล่วงหน้าในการออกแบบเว็บไซต์ไม่ใช่เรื่องใหม่ ผู้สร้างเว็บไซต์รายใหญ่ส่วนใหญ่ เช่น SquareSpace, Weebly และ Wix ได้ให้ "รูปแบบ" ที่เลือกสรรมาเพื่อช่วยเหลือผู้ใช้ในการออกแบบเว็บไซต์ ตัวอย่างเช่น สิ่งที่เราเรียกว่ารูปแบบบล็อกใน WordPress เรียกว่าส่วนต่างๆ ในแพลตฟอร์มการออกแบบ SquareSpace

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

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

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

ฉันจะใช้รูปแบบบล็อกของ WordPress ได้อย่างไร

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

คุณจะเห็นแท็บ 3 แท็บ ได้แก่ แท็บ Blocks, Resuable และ Patterns แท็บรูปแบบจะแสดงรูปแบบบล็อกที่มีทั้งหมดสำหรับไซต์ของคุณ

คุณสามารถเพิ่มรูปแบบการบล็อกให้กับโพสต์/หน้าของคุณได้เหมือนกับบล็อกอื่นๆ

วิธีสร้างรูปแบบบล็อกของ WordPress

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

ก่อนที่คุณจะเริ่มสร้างรูปแบบบล็อกของ WordPress เรามาพูดถึง WordPress Block API และการลงทะเบียนรูปแบบบล็อกกันก่อน

รูปแบบบล็อกของ WordPress API

ในการเริ่มสร้างรูปแบบบล็อก WordPress ของคุณเอง คุณจะต้องใช้ WordPress Block Pattern API ซึ่งจะทำให้คุณสามารถเพิ่มรูปแบบบล็อกให้กับปลั๊กอินที่กำหนดเองหรือไฟล์ functions.php ของธีมได้

แต่ไม่ว่าจะมีการใช้งานในลักษณะใด Block Pattern API จะถูกใช้เพื่อลงทะเบียนทั้งรูปแบบบล็อกที่กำหนดเองและประเภทรูปแบบบล็อกของคุณ

การลงทะเบียนรูปแบบบล็อก

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

ฟังก์ชัน register_block_pattern ได้รับชื่อของรูปแบบเป็นอาร์กิวเมนต์แรกและอาร์เรย์ที่อธิบายคุณสมบัติของรูปแบบเป็นอาร์กิวเมนต์ที่สอง

หมายเหตุ: เมื่อคุณลงทะเบียนรูปแบบบล็อกที่กำหนดเอง คุณต้องใช้ HTML ดิบภายใน PHP เท่านั้น ด้วยเหตุนี้จึงต้องตัดอักขระบางตัว (เช่น เครื่องหมายคำพูด เป็นต้น)

เราจะแสดงตัวอย่างโค้ดของการลงทะเบียนรูปแบบบล็อกในอีกสักครู่

คุณสมบัติรูปแบบบล็อก

• title (จำเป็น): หัวข้อที่ "มนุษย์สามารถอ่านได้" สำหรับรูปแบบ
• content (จำเป็น): นี่คือเนื้อหา HTML ดิบสำหรับรูปแบบ
• description : ข้อความที่มองเห็นได้ซึ่งใช้เพื่ออธิบายรูปแบบในตัวแทรก คำอธิบายเป็นตัวเลือก แต่ขอแนะนำอย่างยิ่งเมื่อชื่อไม่ได้อธิบายอย่างครบถ้วนว่ารูปแบบนี้ใช้ทำอะไร
• categories : รายการหมวดหมู่รูปแบบที่ใช้จัดกลุ่มรูปแบบบล็อก รูปแบบบล็อกสามารถแสดงได้หลายหมวดหมู่
• keywords : นามแฝงหรือคีย์เวิร์ดที่ช่วยให้ผู้ใช้ค้นพบขณะค้นหา
• viewportWidth : ระบุความกว้างของรูปแบบในตัวแทรก

ตัวอย่างขั้นตอนในการสร้างปลั๊กอิน WordPress Patterns แบบกำหนดเอง

มาดูขั้นตอนการสร้างบล็อก WordPress กัน

1. สร้างโพสต์ฉบับร่าง

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

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

2. เริ่มเพิ่มบล็อก

ลองนึกภาพว่าเราได้สร้างหน้าฉบับร่างที่จะช่วยให้เราทำการทดสอบได้ในปริมาณที่เหมาะสม

สำหรับตัวอย่างนี้ เราจะเรียกรูปแบบบล็อกแบบกำหนดเองของเราว่า "Page Introduction Blocks" ภายในมีบล็อกเหล่านี้

• ภาพหน้าปก
• ชุดของคอลัมน์: คอลัมน์หนึ่งที่มีข้อความหัวเรื่องและย่อหน้า ที่สองด้วยคำพูด
• ตัวคั่น
• ข้อความย่อหน้าเพิ่มเติม

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

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

3. เลือกและคัดลอกบล็อคของคุณ

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

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

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

4. หลีกเลี่ยงเอาต์พุต HTML

นี่เป็นขั้นตอนที่พลาดไม่ได้อย่างแน่นอน เอาต์พุต HTML ของคุณต้องถูก Escape ซึ่งช่วยให้ทำงานกับ Block Pattern API ได้อย่างสมบูรณ์แบบ

ในการดำเนินการนี้ คุณจะต้องเรียกใช้โค้ดทั้งหมดผ่านเครื่องมือ JSON Escape/Unescape วางโค้ด HTML ลงในช่อง Enter the String จากนั้น คลิกปุ่ม Escape

ถัดไป คัดลอกโค้ดสตริงผลลัพธ์ที่มี ให้ในกล่องที่สอง

หลังจากจัดระเบียบโค้ดแล้ว ก็ถึงเวลาลงทะเบียนรูปแบบภายในแพลตฟอร์ม WordPress

เมื่อใช้ Block Pattern API คุณจะมี 2 ทางเลือกในการลงทะเบียนรูปแบบบล็อกที่คุณกำหนดเอง

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

5. สร้างปลั๊กอิน WordPress Block Patterns แบบกำหนดเอง

สำหรับตัวอย่างนี้ เราจะ สร้างปลั๊กอินแบบกำหนดเองที่เรียกว่า “รูปแบบของฉัน” ด้วย รูปแบบบล็อกแบบกำหนดเอง ของเรา “บล็อกแนะนำหน้า”

ต่อไปนี้คือรายการตรวจสอบโดยย่อเกี่ยวกับวิธีสร้างปลั๊กอิน WordPress รูปแบบบล็อกที่กำหนดเอง

หมายเหตุ: ก่อนดำเนินการนี้ คุณควรสำรองข้อมูลทั้งไซต์ของคุณก่อน และติดตั้งปลั๊กอินสำรองของ WordPress แล้ว

• 1. สร้างไดเร็กทอรี/โฟลเดอร์ปลั๊กอินใหม่ที่เรียกว่า “my-patterns” ภายในไดเร็กทอรี wp-content
• 2. ภายในไดเร็กทอรี/โฟลเดอร์ "รูปแบบของฉัน" ให้สร้างไฟล์ใหม่ชื่อ "plugin.php"

• 3. ภายในไฟล์ plugin.php นี่คือตัวอย่างโค้ดสำหรับสร้างปลั๊กอินรูปแบบที่กำหนดเอง รวมถึงฟังก์ชัน register_block_pattern พร้อมโค้ดตัวอย่างของเรา

 <?php /** * Plugin Name: My Patterns * Description: A collection of custom WordPress block patterns by Kristen Wright. * Version: 1.0 * Author: Kristen Wright * Author URI: https://kristenwebbwright.com */ register_block_pattern( 'my-patterns/my-awesome-pattern', array( 'title' => __( 'Page Introduction Blocks', 'my-patterns' ), 'description' => _x( 'A header, columns, separator and paragraph text.', 'Block pattern description', 'my-patterns' ), 'content' => "<!-- wp:cover {\"url\":\"https://examplesite.com/wp-content/uploads/2020/10/StockSnap_LQ1WRCYGED-scaled.jpg\",\"id\":15,\"minHeight\":157,\"minHeightUnit\":\"px\",\"contentPosition\":\"center center\",\"align\":\"full\"} -->\n<div class=\"wp-block-cover alignfull has-background-dim is-position-center-center\" style=\"background-image:url(https://examplesite.com/wp-content/uploads/2020/10/StockSnap_LQ1WRCYGED-scaled.jpg);min-height:157px\"><div class=\"wp-block-cover__inner-container\"><!-- wp:paragraph {\"align\":\"center\",\"placeholder\":\"Write title…\",\"style\":{\"typography\":{\"fontSize\":40}}} -->\n<p class=\"has-text-align-center\" style=\"font-size:40px\">Autumn is here. <em>Finally</em>.</p>\n<!-- /wp:paragraph --></div></div>\n<!-- /wp:cover -->\n\n<!-- wp:columns {\"style\":{\"color\":{\"background\":\"#ffffff\"}}} -->\n<div class=\"wp-block-columns has-background\" style=\"background-color:#ffffff\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:heading {\"level\":4} -->\n<h4>John Muir on the Calm Assurance of Autumn</h4>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>In the final year of his twenties, penniless and hungry for meaning, <strong>John Muir</strong> left the Wisconsin frontier, where his family had emigrated from Scotland two decades earlier in search of a better life, to wander across the wilderness.</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:quote {\"className\":\"is-style-large\"} -->\n<blockquote class=\"wp-block-quote is-style-large\"><p>“Although the dying time, it is also the color time, the time when faith in the steadfastness of Nature is surest … The seeds all have next summer in them, some of them thousands of summers.”</p><cite>- John Muir <strong><em>John of the Mountains: The Unpublished Journals of John Muir</em></strong> (<em>public library</em>)</cite></blockquote>\n<!-- /wp:quote --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->\n\n<!-- wp:separator {\"customColor\":\"#cf6626\",\"className\":\"is-style-default\"} -->\n<hr class=\"wp-block-separator has-text-color has-background is-style-default\" style=\"background-color:#cf6626;color:#cf6626\"/>\n<!-- /wp:separator -->\n\n<!-- wp:paragraph {\"fontSize\":\"normal\"} -->\n<p class=\"has-normal-font-size\">He began recording his encounters with nature, with its beauty and its capacity for transcendence, in a small pocket notebook — the first of the sixty journals he would keep for the remainder of his life, on the pages of which he emerged as the prose-poet laureate of nature, his soulful sensibility echoing across the generations in the writings of lyrical scientists like Rachel Carson and modern naturalists like Terry Tempest Williams and Robert Macfarlane. He would live as an ecstatic lover of the wilderness and die as a founding father of the National Parks.</p>\n<!-- /wp:paragraph -->", ) );

• 4. เมื่อไฟล์รูปแบบใหม่ได้รับการติดตั้งในโฟลเดอร์ปลั๊กอินของคุณแล้ว ให้ไปที่ Plugins > Installed Plugins ในแดชบอร์ดผู้ดูแลระบบ WordPress ของคุณและ คลิกเพื่อเปิดใช้งานปลั๊กอิน

• ตอนนี้ตรงไปที่ เพิ่มโพสต์ใหม่ หรือ เพิ่มหน้าใหม่

วิธีใช้รูปแบบบล็อก WordPress แบบกำหนดเอง

คุณได้สร้างรูปแบบและใช้งานโดยใช้ปลั๊กอิน WordPress แล้ว ตอนนี้คุณสามารถเริ่มใช้งานได้ทุกที่ที่คุณต้องการ

สิ่งแรกที่ต้องทำคือสร้างโพสต์หรือเพจใหม่ (คุณสามารถใช้โพสต์หรือเพจที่มีอยู่ได้หากต้องการ) หากต้องการเพิ่มรูปแบบบล็อกที่กำหนดเองใหม่ลงในโพสต์ ให้ คลิก "เพิ่มบล็อก" ใกล้มุมซ้ายบนของตัวแก้ไข มันคือ “+” ขนาดใหญ่ในกล่องสีน้ำเงิน จากนั้นคลิกแท็บ "รูปแบบ"

ภายในแท็บนั้น คุณจะพบรูปแบบที่สร้างไว้ล่วงหน้าหลายแบบซึ่งรวมอยู่ในการติดตั้ง WordPress โดยอัตโนมัติ หากต้องการค้นหาบล็อกที่คุณกำหนดเอง ให้เลื่อนลงมาจนกว่าคุณจะเห็นบล็อกที่เราตั้งชื่อว่า “Page Introduction Blocks” สวยเย็นใช่มั้ย?

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

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

เราจะสลับรูปภาพส่วนหัวและข้อความเป็นตัวอย่าง ง่ายมาก!

แหล่งข้อมูลรูปแบบบล็อก WordPress เพิ่มเติม

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

ตรวจสอบปลั๊กอิน Block Pattern Builder โดย Justin Tadlock ปลั๊กอินอย่างง่ายนี้ช่วยให้ผู้ใช้ปลายทางสร้างรูปแบบบล็อกที่กำหนดเองภายในไดเร็กทอรีปลั๊กอิน WordPress ปัจจุบันปลั๊กอินต้องใช้ปลั๊กอิน Gutenberg เพื่อทำงาน ปลั๊กอินนี้จะลบส่วนการเข้ารหัสเพื่อให้ผู้ใช้สามารถสร้างรูปแบบบล็อกได้โดยตรงจากตัวแก้ไข

คลิกที่ปุ่ม "ตัวเลือกเพิ่มเติม" (ไอคอนจุดไข่ปลา) ในแถบเครื่องมือแก้ไขโดยเลือกบล็อกอย่างน้อยหนึ่งบล็อก จากนั้นคลิกตัวเลือก "เพิ่มลงในรูปแบบบล็อก"

นอกจากนี้เรายังมีคู่มือบล็อก WordPress เพิ่มเติมหากคุณเพิ่งเริ่มใช้ตัวแก้ไขบล็อก WordPress

WordPress บล็อกที่นำกลับมาใช้ใหม่ได้: สุดยอดคู่มือ

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

WordPress Block Directory: The Essential Guide

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

WordPress Blocks: สุดยอดคู่มือสำหรับ Gutenberg Blocks

ด้วยบล็อก WordPress หรือที่เรียกว่าบล็อก Gutenberg ผู้ใช้จะได้สัมผัสกับวิธีที่ง่ายกว่าในการสร้างเนื้อหาที่หลากหลายในโพสต์และหน้าในลักษณะที่มองเห็นได้อย่างแท้จริง อ่านเพิ่มเติม …

รูปแบบบล็อกของ WordPress & อนาคตของ WordPress

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

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

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

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

คุณคิดอย่างไรกับรูปแบบบล็อกของ WordPress? แจ้งให้เราทราบสิ่งที่คุณคิด.

คริสเตน ไรท์

Kristen ได้เขียนบทช่วยสอนเพื่อช่วยเหลือผู้ใช้ WordPress มาตั้งแต่ปี 2011 โดยปกติแล้ว คุณจะพบว่าเธอทำงานเกี่ยวกับบทความใหม่ๆ สำหรับบล็อก iThemes หรือการพัฒนาทรัพยากรสำหรับ #WPprosper นอกเวลางาน คริสเตนชอบจดบันทึก (เธอเขียนหนังสือสองเล่ม!) เดินป่าและตั้งแคมป์ ทำอาหาร และผจญภัยทุกวันกับครอบครัวของเธอ โดยหวังว่าจะมีชีวิตที่เป็นปัจจุบันมากขึ้น