วิธีสร้างเทมเพลต Gutenberg

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

เราจะครอบคลุมสามวิธีในการสร้าง:

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

วิธีการเหล่านี้ทำให้เรานำบล็อคมาใช้ซ้ำเท่านั้น ไม่รวมการตั้งค่าอื่นๆ

ทำไมต้องสร้างเทมเพลต Gutenberg

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

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

วิธีที่ 1: สร้างเทมเพลตเค้าโครง

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

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

แม่แบบเค้าโครงตัวอย่าง

ฉันได้สร้างเลย์เอาต์ง่ายๆ ที่ฉันสามารถใช้เป็นบล็อกโพสต์ บทวิจารณ์ผลิตภัณฑ์ ฯลฯ การบันทึกนี้ลงในไลบรารีเพื่อนำมาใช้ใหม่ทำได้ง่าย

วางเคอร์เซอร์บนบล็อกแรกที่คุณต้องการรวมแล้วลากเมาส์ไปที่บล็อกสุดท้ายเพื่อเน้น

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

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

ข้อความในแถบสีเขียวจะแสดงว่าบล็อกได้รับการอัปเดตแล้ว คุณได้สร้างเค้าโครงแล้ว!

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

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

โพสต์ซ้ำ

โชคดีที่เรามีทางเลือกอื่น ปลั๊กอินที่เรียกว่า Duplicate Post เพิ่มคุณสมบัติการโคลนสำหรับบล็อก Gutenberg

ในการ ตั้งค่า Duplicate Posts ให้เปิดใช้งาน Blocks

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

วิธีที่ 2: ทางเลือกง่ายๆ ในการสร้างเทมเพลต Gutenberg

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

ถัดไป สลับไปที่ตัวแก้ไขโค้ด เมื่อต้องการทำเช่นนี้ เลือกจุดสามจุดที่มุมบนขวา ภายใต้ Editor เลือก Code Editor

ไฮไลต์และคัดลอกโค้ด

วางโค้ดลงในโปรแกรมแก้ไขข้อความและบันทึกเพื่อนำมาใช้ใหม่

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

ตอนนี้ฉันมีโพสต์ใหม่ที่ฉันสามารถเริ่มเพิ่มเนื้อหาได้

วิธีที่ 3: สร้างประเภทโพสต์ที่กำหนดเอง

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

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

การสร้างเทมเพลตประกอบด้วย:

• การตั้งค่าสถานะเริ่มต้นแบบไดนามิก
• การลงทะเบียนเป็นเค้าโครงเริ่มต้นสำหรับประเภทโพสต์เฉพาะ

ประกาศแม่แบบ

เทมเพลตนั้นจะถูกประกาศเป็นอาร์เรย์ของ blockTypes สิ่งนี้ทำใน JavaScript หรือใน PHP ตามคู่มือของนักพัฒนา Gutenberg จะมีลักษณะดังนี้:

const template = [

[ 'block/name', {} ], // [ blockName, attributes ]

];

หรือสิ่งนี้:

'template' => array(

array( 'block/name' ),

),

การลงทะเบียนเทมเพลตใน Custom Post Types

ประเภทโพสต์ที่กำหนดเองยังสามารถลงทะเบียนเทมเพลตได้ อาจมีลักษณะดังนี้:

function myplugin_register_book_post_type() {

$args = array(

'public' => true,

'label'  => 'Books',

'show_in_rest' => true,

'template' => array(

array( 'core/image', array(

'align' => 'left',

) ),

array( 'core/heading', array(

'placeholder' => 'Add Author...',

) ),

array( 'core/paragraph', array(

'placeholder' => 'Add Description...',

) ),

),

);

register_post_type( 'book', $args );

}

add_action( 'init', 'myplugin_register_book_post_type' );

อาร์เรย์ระบุที่มาของบล็อกและชื่อของบล็อก ในตัวอย่างนี้ อาร์เรย์ใช้ 'แกนหลัก/ย่อหน้า' ซึ่งหมายความว่าบล็อกนั้นมาจากแกนหลักของ WordPress (ซึ่งต่างจากปลั๊กอิน) และชื่อบล็อกนั้นคือย่อหน้า (ระบุว่าจะใช้บล็อกใด)

การลงทะเบียนเทมเพลตในหน้าและโพสต์

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

หากคุณตัดสินใจที่จะเพิ่มลงในเพจหรือโพสต์ คุณสามารถใช้รหัสนี้:

function my_add_template_to_posts() {

$post_type_object = get_post_type_object( 'post' );

$post_type_object->template = array(

array( 'core/paragraph', array(

'placeholder' => 'Add Description...',

) ),

);

$post_type_object->template_lock = 'all';

}

add_action( 'init', 'my_add_template_to_posts' );

เทมเพลตการทำรัง

คุณยังสามารถซ้อนเทมเพลตภายในบล็อกคอนเทนเนอร์ (เช่น บล็อกคอลัมน์) ทำได้โดยการกำหนดเทมเพลตที่ซ้อนกันให้กับตัวบล็อกเอง ตัวอย่างเช่น:

$template = array(

array( 'core/paragraph', array(

'placeholder' => 'Add a root-level paragraph',

) ),

array( 'core/columns', array(), array(

array( 'core/column', array(), array(

array( 'core/image', array() ),

) ),

array( 'core/column', array(), array(

array( 'core/paragraph', array(

'placeholder' => 'Add a inner paragraph'

) ),

) ),

) )

);

การล็อคแม่แบบ

คุณสามารถล็อคเทมเพลตโดยใช้รหัสนี้:

'template_lock' => 'all', // or 'insert' to allow moving

ตัวอย่างเทมเพลตที่มีประเภทโพสต์ที่กำหนดเอง

ฉันต้องการสร้างประเภทโพสต์แบบกำหนดเองที่เรียกว่า Books ที่เราเห็นด้านบน จะแสดงเทมเพลตเลย์เอาต์และจะมีรูปภาพ หัวเรื่อง และย่อหน้า

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

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

ไปที่ Theme Functions (functions.php) และวางโค้ด ฉันวางรหัสที่ด้านล่างสุด นี่เป็นไซต์ทดสอบและฉันไม่ได้วางแผนที่จะเก็บโค้ดไว้ ดังนั้นฉันจึงไม่ได้ใช้ธีมย่อย

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

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

จบความคิด

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

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

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

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

ภาพเด่นผ่าน Nadia Snopek / shutterstock.com