คู่มือฉบับสมบูรณ์ของรูปแบบบล็อก Gutenberg (I)

เมื่อสัปดาห์ที่แล้ว Matt Mullenweg ได้นำเสนองานตามประเพณีทุกปี (ในกรณีนี้คือเสมือนจริง) State of The Word ซึ่งเขาได้นำเสนอสรุปโดยย่อเกี่ยวกับสถานะปัจจุบันและคุณสมบัติใหม่ของ WordPress

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

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

1. บทนำสู่รูปแบบบล็อก
2. แทรกรูปแบบบนหน้า
3. รูปแบบที่กำหนดไว้ล่วงหน้าและอื่น ๆ ที่มีอยู่ในไดเรกทอรี
4. เพิ่มรูปแบบที่มีอยู่ในไดเร็กทอรีไปยังไซต์ของคุณ
5. วิธีสร้างแพทเทิร์นตั้งแต่เริ่มต้น
6. วิธีสร้างรูปแบบถ้าคุณไม่ใช่นักพัฒนา
7. วิธีการแปลงบล็อคที่นำกลับมาใช้ใหม่ให้เป็นบล็อครูปแบบต่างๆ
8. หัวข้อที่ใช้รูปแบบบล็อก
9. เอกสารอย่างเป็นทางการ

ดังนั้นโดยไม่ชักช้าเรามาเริ่มกันเลย!

1. บทนำสู่รูปแบบบล็อก

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

บล็อกมีความซับซ้อนมากขึ้นอย่างรวดเร็ว และตอนนี้เรามีแกลเลอรีรูปภาพ บล็อกสื่อ/ข้อความ หรือแม้แต่บล็อกที่มีบล็อกอื่นๆ

พร้อมกันนี้ นักพัฒนาจำนวนมากได้จัดเตรียมบล็อกขนาดใหญ่พร้อมคุณลักษณะเฉพาะเพื่อให้คุณสามารถปรับปรุงการออกแบบหน้าเว็บของคุณได้ ตัวอย่างเช่น ที่ Nelio เราได้พัฒนา Nelio Compare Images เพื่อเปรียบเทียบภาพสองภาพด้วยแถบเลื่อนแบบง่ายๆ:

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

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

2. แทรกรูปแบบบนหน้า

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

เลือกรูปแบบที่คุณชอบที่สุดและดูว่ามีการแทรกชุดบล็อกที่ประกอบขึ้นเป็นหน้าของคุณอย่างไร:

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

3. รูปแบบเริ่มต้นและรูปแบบเพิ่มเติมจากไดเรกทอรีบุคคลที่สาม

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

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

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

• Shareablock Patterns โดย Jeffrey Carandang – เว็บไซต์ที่ยอดเยี่ยมที่คุณสามารถแบ่งปันและรับบล็อก เทมเพลต และรูปแบบมากมายเพื่อดาวน์โหลดและติดตั้งบนเว็บไซต์ของคุณ

• Gutenberg Hub ของ Munir Kamal – ที่ที่คุณจะได้พบกับบล็อก แม่แบบ และรูปแบบมากมาย

นอกจากนี้ยังมี ปลั๊กอิน Redux Framework ซึ่งมีไลบรารีที่มีบล็อก เทมเพลต และรูปแบบของบุคคลที่สามมากกว่า 1,000 รายการ (รวมถึงที่มีอยู่ในไดเรกทอรีด้านบน) เพื่อแทรกลงในหน้าเว็บของคุณ ปลั๊กอินช่วยให้คุณสามารถดาวน์โหลดรูปแบบฟรีได้ถึง 5 รูปแบบ จากนั้นคุณสามารถอัปเกรดเป็นเวอร์ชันที่ต้องชำระเงินได้

4. เพิ่มรูปแบบที่มีอยู่ในไดเรกทอรีไปยังเว็บไซต์ของคุณ

ตามที่ได้กล่าวไปแล้ว คุณสามารถใช้ปลั๊กอิน Redux Framework เพื่อเพิ่มรูปแบบจาก Shareablock และ GutenbergHub ได้อย่างง่ายดาย หากคุณเป็นนักออกแบบเว็บไซต์ WordPress มืออาชีพ แน่นอนว่ามันเป็นตัวเลือกที่ดีในการค้นหารูปแบบได้มากเท่าที่คุณต้องการอย่างรวดเร็ว แต่คุณยังสามารถใช้รูปแบบบล็อกใหม่ได้โดยไม่ต้องใช้ปลั๊กอินพิเศษ เรามาดูกันว่าเป็นอย่างไร

เพิ่มรูปแบบ Shareablock

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

ครั้งแรกที่คุณจะถูกถามถึงที่อยู่อีเมลเพื่อให้คุณสามารถรับชื่อผู้ใช้และรหัสผ่านได้

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

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

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

เพิ่มรูปแบบ Gutenberg Hub

การเพิ่มรูปแบบจาก Gutenberg Hub นั้นง่ายกว่า ก่อนหน้านี้ ให้เลือกรูปแบบที่คุณต้องการคัดลอกก่อน

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

แต่เดี๋ยวก่อน! ไม่เร็วนัก หากคุณต้องการปรับแต่งบล็อกผลลัพธ์อย่างเต็มที่ Munir Kamal แนะนำให้คุณติดตั้งปลั๊กอินฟรี EditorPlus ซึ่งเพิ่มบล็อกใหม่ให้กับตัวแก้ไขและขยาย Gutenberg ด้วยการควบคุมการออกแบบขั้นสูง แบบอักษร ไอคอน ตัวแบ่ง แอนิเมชั่น และอีกมากมาย คุณสมบัติ.

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

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

ภาพเด่นโดย Raul Cacho Oses บน Unsplash