ข้อมูลพื้นฐานเกี่ยวกับตัวสร้าง: วิธีสร้างรูปแบบบล็อก

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

โปรดทราบว่าบทความนี้ใช้ ธีม Twenty Twenty-Two ในตัวอย่างทั้งหมด ธีมแบบบล็อกนี้เปิดตัวพร้อมกับ WordPress 5.9 และเป็นแหล่งข้อมูลที่ยอดเยี่ยมที่มีรูปแบบบล็อกมากกว่า 60 รูปแบบ

ออกแบบลวดลาย

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

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

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

คุณสามารถดู 33 บล็อกที่ประกอบกันเป็นการออกแบบนี้ได้ในภาพหน้าจอด้านบน!

ถ้าฉันต้องการสร้างกริดเวอร์ชัน "มืด" สำรอง ฉันเพียงแค่ต้องทำซ้ำการออกแบบดั้งเดิมและปรับแต่งสไตล์

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

แบ่งปันการออกแบบ

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

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

ตัวเลือกที่สองคือการใช้ตัวแก้ไขโค้ด ซึ่งคุณสามารถเข้าถึงได้จากแผงตัวเลือก

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

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

การคัดลอกและวางมาร์กอัปบล็อกอาจทำได้ง่าย แต่เรามักต้องการการออกแบบรูปแบบที่ถาวรกว่านี้ ในการดำเนินการดังกล่าว เราจะใช้ Patterns API เพื่อ "ลงทะเบียน" รูปแบบบล็อกที่กำหนดเอง ทำให้การออกแบบของเราสามารถใช้ได้ทั้งใน Inserter และ Pattern Explorer ภายใน WordPress

ในการลงทะเบียนรูปแบบ เราใช้ฟังก์ชัน PHP register_block_pattern() ฟังก์ชันนี้ยอมรับสองพารามิเตอร์ ชื่อ และอาร์เรย์ของคุณสมบัติ ก่อนจะพูดถึงแต่ละเรื่อง เรามาดูตัวอย่างกันก่อน

register_block_pattern(

'ตัวอย่าง/คุณสมบัติ-ตาราง-ไฟ',

อาร์เรย์ (

'title' => __( 'คุณลักษณะกริด – Light', 'textdomain' ),

'description' => __( 'แสดงรายการเด่นหกรายการในตารางบนพื้นหลังสีอ่อน', 'textdomain' ),

'หมวดหมู่' => อาร์เรย์ ( 'คุณลักษณะ', 'คอลัมน์' ),

'คำหลัก' => อาร์เรย์ ( 'คุณสมบัติ', 'กริด' ),

'viewportWidth' => 1400,

'blockTypes' => อาร์เรย์ ( 'แกนหลัก/คอลัมน์' ),

'เนื้อหา' => 'รูปแบบเนื้อหา'

)

);

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

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

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

ฟังก์ชั่น my_pattern_library_register_block_patterns () {

register_block_pattern(

'ตัวอย่าง/คุณสมบัติ-ตาราง-ไฟ',

อาร์เรย์ ( … )

);

register_block_pattern(

'ตัวอย่าง/feature-grid-dark

อาร์เรย์ ( … )

);

}

add_action( 'init', 'example_register_block_patterns' );

รหัสที่สมบูรณ์มีอยู่ในส่วนสำคัญบน GitHub

เมื่อเพิ่มโค้ดแล้ว รูปแบบที่ลงทะเบียนใหม่ของเราจะแสดงใน Inserter และ Pattern Explorer

การลงทะเบียนหมวดหมู่รูปแบบ

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

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

ฟังก์ชัน example_register_block_pattern_categories () {

register_block_pattern_category(

'กำหนดเอง',

array( 'label' => __( 'กำหนดเอง', 'textdomain' ) )

);

}

add_action( 'init', 'example_register_block_pattern_categories' );

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

สร้างปลั๊กอินไลบรารีรูปแบบ

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

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

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

เคล็ดลับด่วน: หากคุณต้องการข้ามขั้นตอนต่อไปนี้ ฉันได้เตรียมปลั๊กอิน "My Pattern Library" ที่สมบูรณ์ซึ่งควรเป็นจุดเริ่มต้นที่ดีสำหรับห้องสมุดของคุณเอง รหัสนี้มีให้ในรูปแบบ Gist บน GitHub

ขั้นตอนที่ 1: เริ่มต้นการติดตั้ง

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

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

ขั้นตอนที่ 2: สร้าง Plugin

สิ่งต่อไปที่คุณต้องทำคือสร้าง "ฐาน" ของปลั๊กอิน หากคุณยังใหม่ต่อการพัฒนาปลั๊กอิน อย่ากลัวเลย มันฟังดูน่ากลัวกว่าที่เป็นอยู่

ไปที่ไดเร็กทอรี wp-content → plugins ในการติดตั้ง WordPress ในพื้นที่ของคุณและสร้างไดเร็กทอรีใหม่ชื่อ my-pattern-library คุณสามารถตั้งชื่อไดเร็กทอรีอะไรก็ได้ที่คุณต้องการ เพียงแทนที่ "my-pattern-library" ด้วยชื่อที่คุณกำหนดเองในขั้นตอนต่อๆ ไปทั้งหมด

ภายใน wp-content → plugins ใหม่ → ไดเร็กทอรี my-pattern-library ให้สร้างไฟล์ PHP ชื่อ my-pattern-library.php เปิดไฟล์ในโปรแกรมแก้ไขข้อความของคุณ และเพิ่มความคิดเห็นส่วนหัวของปลั๊กอินต่อไปนี้ที่ด้านบนของไฟล์ อย่าลืมนำ <?php. โปรดทราบว่าฉันทำให้ส่วนหัวของบทช่วยสอนนี้ง่ายขึ้น

<?php

/**

* ชื่อปลั๊กอิน: My Pattern Library

* คำอธิบาย: ไลบรารีรูปแบบบล็อกอย่างง่าย

* เวอร์ชัน: 0.1.0

* ต้องการอย่างน้อย: 5.8

* ต้องการ PHP: 7.0

* ผู้แต่ง: ชื่อของคุณ

* ใบอนุญาต: GPL v2 หรือใหม่กว่า

* โดเมนข้อความ: my-pattern-library

*/

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

ในขณะที่คุณตอนนี้มีปลั๊กอินที่ใช้งานได้ มันไม่ได้ทำอะไรเลย มาเปลี่ยนกันเถอะ

ขั้นตอนที่ 3: ลงทะเบียนรูปแบบและหมวดหมู่

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

บันทึกไฟล์แล้วไปที่ตัวแก้ไขใน WordPress เปิดตัวแทรก คลิกแท็บรูปแบบ และเลือกประเภทกำหนดเอง คุณควรเห็นสองรูปแบบที่ลงทะเบียนโดยปลั๊กอิน

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

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

ห่อ

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