วิธีสร้างรูปแบบธีมที่ถูกบล็อกใน WordPress 6.0

เผยแพร่ซ้ำโดยเพลโต

ผู้ติดตาม: 0

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

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

นับตั้งแต่เปิดตัว 5.9 WordPress และ ยี่สิบยี่สิบสอง ธีมเริ่มต้น (TT2) การใช้รูปแบบบล็อกในธีมบล็อกมีเพิ่มมากขึ้น ฉันเป็นแฟนตัวยงของ รูปแบบบล็อก และได้สร้างและใช้พวกเขาในธีมบล็อกของฉัน

ใหม่ 6.0 WordPress เสนอ สามรูปแบบหลักมีการปรับปรุงคุณสมบัติสำหรับผู้แต่ง:

อนุญาตให้ลงทะเบียนรูปแบบผ่าน /patterns โฟลเดอร์ (คล้ายกับ /parts, /templatesและ /styles ทะเบียน)
การลงทะเบียนรูปแบบจากไดเร็กทอรีรูปแบบสาธารณะโดยใช้คำสั่ง theme.json.
การเพิ่มรูปแบบที่สามารถเสนอให้กับผู้ใช้เมื่อสร้างหน้าใหม่

ในเบื้องต้น สำรวจวิดีโอ WordPress 6.0, ผู้ประสานงานผลิตภัณฑ์อัตโนมัติ Ann McCathy เน้นย้ำคุณลักษณะรูปแบบที่ปรับปรุงใหม่บางส่วน (เริ่มเวลา 15:00 น.) และหารือเกี่ยวกับแผนการเพิ่มประสิทธิภาพรูปแบบในอนาคต ซึ่งรวมถึง รูปแบบเป็นองค์ประกอบการแบ่งส่วน, ให้ทางเลือกแก่ เลือกรูปแบบในการสร้างหน้าการรวมการค้นหาไดเรกทอรีรูปแบบ และอื่นๆ

เบื้องต้น

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

ส่วนที่ 1: การพัฒนาแนวทางในการสร้างรูปแบบบล็อก

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

สำหรับพื้นหลัง ก่อนอื่นเรามาภาพรวมคร่าวๆ ว่าเวิร์กโฟลว์การลงทะเบียนรูปแบบมีวิวัฒนาการมาจากการใช้ Register Pattern API เป็นการโหลดโดยตรงโดยไม่ต้องลงทะเบียนอย่างไร

ใช้ตัวอย่างกรณี 1: ยี่สิบยี่สิบเอ็ด

ค่าดีฟอลต์ ธีมยี่สิบเอ็ด (TT1) และ ธีม TT1 บล็อก (พี่น้องของ TT1) แสดงให้เห็นว่ารูปแบบบล็อกสามารถลงทะเบียนในธีมได้อย่างไร functions.php. ในธีมทดลองของ TT1 Blocks ซิงเกิ้ลนี้ บล็อก pattern.php ไฟล์ที่มี XNUMX รูปแบบบล็อกถูกเพิ่มลงใน functions.php ในฐานะที่เป็น include ดังที่แสดงไว้ที่นี่.

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

นี่คือตัวอย่างการลงทะเบียนรูปแบบย่อหน้า “Hello World” อย่างง่ายจากสิ่งนี้ บทความ Shaper ธีม:

register_block_pattern( 'my-plugin/hello-world', array( 'title' => __( 'Hello World', 'my-plugin' ), 'content' => "<!-- wp:paragraph -->n<p>Hello World</p>n<!-- /wp:paragraph -->", )
);

หลังจากลงทะเบียนแล้ว register_block_pattern() ควรเรียกฟังก์ชันจากตัวจัดการที่แนบมากับ init ขอตามที่อธิบายไว้ โปรดคลิกที่นี่เพื่ออ่านรายละเอียดเพิ่มเติม.

 function my_plugin_register_my_patterns() { register_block_pattern( ... ); } add_action( 'init', 'my_plugin_register_my_patterns' );

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

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

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

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

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

/*
Plugin Name: Quote Pattern Example Plugin
*/ register_block_pattern( 'my-plugin/my-quote-pattern', array( 'title' => __( 'Quote with Avatar', 'my-plugin' ), 'categories' => array( 'text' ), 'description' => _x( 'A big quote with an avatar".', 'Block pattern description', 'my-plugin' ), 'content' => '<!-- wp:group --><div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --><!-- wp:image {"align":"center","id":553,"width":150,"height":150,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} --><div class="wp-block-image is-style-rounded"><figure class="aligncenter size-large is-resized"><img src="https://blockpatterndesigns.mystagingwebsite.com/wp-content/uploads/2021/02/StockSnap_HQR8BJFZID-1.jpg" alt="" class="wp-image-553" width="150" height="150"/></figure></div><!-- /wp:image --><!-- wp:quote {"align":"center","className":"is-style-large"} --><blockquote class="wp-block-quote has-text-align-center is-style-large"><p>"Contributing makes me feel like I'm being useful to the planet."</p><cite>— Anna Wong, <em>Volunteer</em></cite></blockquote><!-- /wp:quote --><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --></div></div><!-- /wp:group -->', )
);

การใช้รูปแบบในไฟล์เทมเพลต

เมื่อสร้างรูปแบบแล้ว จะสามารถนำมาใช้ในไฟล์เทมเพลตของธีมที่มีมาร์กอัปบล็อกต่อไปนี้:

<!-- wp:pattern {"slug":"prefix/pattern-slug"} /-->

ตัวอย่างจาก ที่เก็บ GitHub นี้ แสดงให้เห็นถึงการใช้ “footer-with-background” ลายกระสุนกับ “tt2gopherคำนำหน้าใน TT2 Gopher บล็อกธีม

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

ใช้ตัวอย่างกรณี 2: Twenty Twenty-Two

หากชุดรูปแบบมีเพียงไม่กี่รูปแบบ การพัฒนาและการบำรุงรักษาก็จัดการได้ค่อนข้างดี อย่างไรก็ตาม หากธีมบล็อกมีหลายรูปแบบ เช่น ในธีม TT2 แสดงว่า pattern.php ไฟล์มีขนาดใหญ่มากและอ่านยาก ธีม TT2 เริ่มต้น ซึ่งรวมกลุ่ม มากกว่า 60 ลาย, แสดงเวิร์กโฟลว์การลงทะเบียนรูปแบบที่ปรับโครงสร้างใหม่ โครงสร้าง ที่ง่ายต่อการอ่านและบำรุงรักษา

นำตัวอย่างจากธีม TT2 มาพูดคุยกันสั้นๆ ว่าเวิร์กโฟลว์แบบง่ายนี้ทำงานอย่างไร

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

เพื่อจุดประสงค์ในการสาธิต ฉันสร้างธีมย่อย TT2 และตั้งค่าบนเว็บไซต์ทดสอบในพื้นที่ของฉันด้วยเนื้อหาจำลอง ตาม TT2 ฉันลงทะเบียนแล้ว footer-with-background และเพิ่มลงในรายการอาร์เรย์หมวดหมู่รูปแบบต่อไปนี้ใน block-patterns.php ไฟล์

/**
* Registers block patterns and categories.
*/
function twentytwentytwo_register_block_patterns() { $block_pattern_categories = array( 'footer' => array( 'label' => __( 'Footers', 'twentytwentytwo' ) ), 'header' => array( 'label' => __( 'Headers', 'twentytwentytwo' ) ), 'pages' => array( 'label' => __( 'Pages', 'twentytwentytwo' ) ), // ... ); /** * Filters the theme block pattern categories. */ $block_pattern_categories = apply_filters( 'twentytwentytwo_block_pattern_categories', $block_pattern_categories ); foreach ( $block_pattern_categories as $name => $properties ) { if ( ! WP_Block_Pattern_Categories_Registry::get_instance()->is_registered( $name ) ) { register_block_pattern_category( $name, $properties ); } } $block_patterns = array( 'footer-default', 'footer-dark', 'footer-with-background', //... 'header-default', 'header-large-dark', 'header-small-dark', 'hidden-404', 'hidden-bird', //... ); /** * Filters the theme block patterns. */ $block_patterns = apply_filters( 'twentytwentytwo_block_patterns', $block_patterns ); foreach ( $block_patterns as $block_pattern ) { $pattern_file = get_theme_file_path( '/inc/patterns/' . $block_pattern . '.php' ); register_block_pattern( 'twentytwentytwo/' . $block_pattern, require $pattern_file ); }
}
add_action( 'init', 'twentytwentytwo_register_block_patterns', 9 );

ในตัวอย่างโค้ดนี้ แต่ละรูปแบบที่ระบุไว้ใน $block_patterns = array() ถูกเรียกโดย foreach() ฟังก์ชั่นซึ่ง requireชั่วโมง patterns ไฟล์ไดเร็กทอรีที่มีชื่อรูปแบบอยู่ในอาร์เรย์ที่เราจะเพิ่มในขั้นตอนต่อไป

2.2: การเพิ่มไฟล์รูปแบบให้กับ /inc/patterns โฟลเดอร์

ต่อไป เราควรจะมีไฟล์รูปแบบที่อยู่ในรายการทั้งหมด $block_patterns = array(). นี่คือตัวอย่างหนึ่งของไฟล์รูปแบบ footer-with-background.php:

/** * Dark footer wtih title and citation */
return array( 'title' => __( 'Footer with background', 'twentytwentytwo' ), 'categories' => array( 'footer' ), 'blockTypes' => array( 'core/template-part/footer' ), 'content' => '<!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}},"spacing":{"padding":{"top":"var(--wp--custom--spacing--small, 1.25rem)","bottom":"var(--wp--custom--spacing--small, 1.25rem)"}}},"backgroundColor":"background-header","textColor":"background","layout":{"inherit":true}} --> <div class="wp-block-group alignfull has-background-color has-background-header-background-color has-text-color has-background has-link-color" style="padding-top:var(--wp--custom--spacing--small, 1.25rem);padding-bottom:var(--wp--custom--spacing--small, 1.25rem)"><!-- wp:paragraph {"align":"center"} --> <p class="has-text-align-center">' . sprintf( /* Translators: WordPress link. */ esc_html__( 'Proudly powered by %s', 'twentytwentytwo' ), '<a href="' . esc_url( __( 'https://wordpress.org', 'twentytwentytwo' ) ) . '" rel="nofollow">WordPress</a> | a modified TT2 theme.' ) . '</p> <!-- /wp:paragraph --></div> <!-- /wp:group -->',
);

มาอ้างอิงรูปแบบใน footer.html ส่วนแม่แบบ:

<!-- wp:template-part {"slug":"footer"} /-->

ซึ่งคล้ายกับการเพิ่มส่วนหัวหรือส่วนท้ายในไฟล์เทมเพลต

รูปแบบในทำนองเดียวกันสามารถเพิ่มลงใน parts/footer.html แม่แบบโดยการปรับเปลี่ยนเพื่ออ้างถึง slug ของไฟล์รูปแบบของธีม (footer-with-background):

<!-- wp:pattern {"slug":"twentytwentytwo/footer-with-background"} /-->

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

วิธีสร้างรูปแบบธีมที่ถูกบล็อกใน WordPress 6.0

ภาพหน้าจอต่อไปนี้แสดงส่วนท้ายที่สร้างขึ้นใหม่พร้อมรูปแบบพื้นหลังที่ส่วนหน้า

วิธีสร้างรูปแบบธีมที่ถูกบล็อกใน WordPress 6.0

ตอนนี้รูปแบบได้กลายเป็นส่วนสำคัญของชุดรูปแบบบล็อกแล้ว รูปแบบจำนวนมากรวมอยู่ในชุดรูปแบบบล็อก — เช่น สี่เหลี่ยม, เมล็ดพันธุ์, เมย์แลนด์, นักสัตววิทยา, นักธรณีวิทยา — ตามเวิร์กโฟลว์ที่กล่าวถึงข้างต้น นี่คือตัวอย่างธีม Quadrat /inc/patterns โฟลเดอร์ที่มี a การลงทะเบียนแบบบล็อก ไฟล์และ รายการไฟล์ พร้อมแหล่งที่มาของเนื้อหาและส่วนหัวของรูปแบบที่ต้องการ ภายใน return array() ฟังก์ชัน.

ส่วนที่ 2: การสร้างและการโหลดรูปแบบโดยไม่ต้องลงทะเบียน

โปรดทราบว่าคุณลักษณะนี้ต้องมีการติดตั้ง WordPress 6.0 หรือปลั๊กอิน Gutenberg 13.0 หรือสูงกว่าในไซต์ของคุณ

ฟีเจอร์ใหม่ของ WordPress 6.0 อนุญาตให้ลงทะเบียนรูปแบบผ่านไฟล์มาตรฐานและโฟลเดอร์ – /patternsนำอนุสัญญาที่คล้ายคลึงกันเช่น /parts, /templatesและ /styles.

กระบวนการตามที่อธิบายไว้ใน โรงเตี๊ยม WP นี้ บทความเกี่ยวข้องกับสามขั้นตอนต่อไปนี้:

การสร้างโฟลเดอร์รูปแบบที่รูทของธีม
เพิ่มส่วนหัวรูปแบบปลั๊กอิน
เนื้อหาที่มาของรูปแบบ

มาร์กอัปส่วนหัวของรูปแบบทั่วไปที่นำมาจากบทความแสดงอยู่ด้านล่าง:

<?php
/**
* Title: A Pattern Title
* Slug: namespace/slug
* Description: A human-friendly description.
* Viewport Width: 1024
* Categories: comma, separated, values
* Keywords: comma, separated, values
* Block Types: comma, separated, values
* Inserter: yes|no
*/
?>

ตามที่อธิบายไว้ในส่วนก่อนหน้านี้เท่านั้น Title และ Slug ต้องระบุฟิลด์ และฟิลด์อื่นๆ หรือไม่ก็ได้

อ้างอิงตัวอย่างจากธีมที่เพิ่งเปิดตัว ฉันได้รีแฟกเตอร์การลงทะเบียนรูปแบบใน TT2 Gopher Blocks นี้ ธีมสาธิต เตรียมไว้สำหรับ บทความก่อนหน้านี้เกี่ยวกับ CSS-Tricks.

ในขั้นตอนต่อไปนี้ เรามาสำรวจกันว่า a . เป็นอย่างไร footer-with-background.php Belt hold ลงทะเบียนกับ PHP และใช้ใน footer.html เทมเพลตถูกปรับโครงสร้างใหม่

2.1: สร้าง /patterns โฟลเดอร์ที่รูทของธีม

ขั้นตอนแรกคือการสร้าง a /patterns โฟลเดอร์ที่รูทของธีม TT2 Gopher แล้วย้าย footer-with-background.php ไฟล์รูปแบบไปยัง /patterns โฟลเดอร์และตัวสร้างใหม่

2.2: เพิ่มข้อมูลรูปแบบไปยังส่วนหัวของไฟล์

ถัดไป สร้างฟิลด์การลงทะเบียนส่วนหัวของรูปแบบต่อไปนี้

<?php
/**
* Title: Footer with background
* Slug: tt2gopher/footer-with-background
* Categories: tt2gopher-footer
* Viewport Width: 1280
* Block Types: core/parts/footer
* Inserter: yes
*/
?>
<!-- some-block-content /-->

ไฟล์รูปแบบมีฟิลด์ชื่อด้านบนเขียนเป็นความคิดเห็น PHP ตามด้วย บล็อกเนื้อหา เขียนในรูปแบบ HTML

2.3: เพิ่มเนื้อหารูปแบบให้กับไฟล์

สำหรับส่วนเนื้อหา ให้คัดลอกข้อมูลโค้ดภายใน คำพูดเดียว (เช่น, '...') จากส่วนเนื้อหาของ footer-with-background และแทนที่ :

<!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|foreground"}}},"spacing":{"padding":{"top":"35px","bottom":"30px"}}},"backgroundColor":"background-header","textColor":"foreground","className":"has-foreground","layout":{"inherit":true}} --> <div class="wp-block-group alignfull has-foreground has-foreground-color has-background-header-background-color has-text-color has-background has-link-color" style="padding-top:35px;padding-bottom:30px"><!-- wp:paragraph {"align":"center","fontSize":"small"} --> <p class="has-text-align-center has-small-font-size">Powered by WordPress | TT2 Gopher, a modified TT2 theme</p> <!-- /wp:paragraph --></div>
<!-- /wp:group -->

ข้อมูลโค้ดทั้งหมดของ patterns/footer-with-background.php ไฟล์สามารถดูได้ ที่นี่บน GitHub.

โปรดทราบว่า /inc/patterns และ block-patterns.php เป็น แถมไม่จำเป็นใน WordPress 6.0 และรวมไว้เพื่อการสาธิตเท่านั้น

2.4: อ้างอิงรูปแบบกระสุนในแม่แบบ

การเพิ่ม refactored ข้างต้น footer-with-background.php ลวดลายเป็น footer.html เทมเพลตจะเหมือนกับที่อธิบายไว้ในส่วนก่อนหน้าทุกประการ (ส่วนที่ 1, 2.2)

ตอนนี้ หากเราดูส่วนท้ายของไซต์ในตัวแก้ไขบล็อกหรือส่วนหน้าของไซต์ของเราในเบราว์เซอร์ ส่วนท้ายจะแสดงขึ้น

ประเภทรูปแบบและประเภท การลงทะเบียน (ไม่บังคับ)

ในการจัดหมวดหมู่รูปแบบบล็อก ประเภทและประเภทรูปแบบควรลงทะเบียนในธีมของ functions.php ไฟล์

ลองพิจารณาตัวอย่างของ การลงทะเบียนหมวดหมู่รูปแบบบล็อก จากธีม TT2 Gopher

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

/**
* Registers block categories, and type.
*/ function tt2gopher_register_block_pattern_categories() { $block_pattern_categories = array( 'tt2gopher-header' => array( 'label' => __( 'TT2 Gopher - Headers', 'tt2gopher' ) ), 'tt2gopher-footer' => array( 'label' => __( 'TT2 Gopher - Footers', 'tt2gopher' ) ), 'tt2gopher-page' => array( 'label' => __( 'TT2 Gopher - Page', 'tt2gopher' ) ), // ...
); /**
* Filters the theme block pattern categories.
*/
$block_pattern_categories = apply_filters( 'tt2gopher_block_pattern_categories', $block_pattern_categories ); foreach ( $block_pattern_categories as $name => $properties ) { if ( ! WP_Block_Pattern_Categories_Registry::get_instance()->is_registered( $name ) ) { register_block_pattern_category( $name, $properties ); }
}
add_action( 'init', 'tt2gopher_register_block_pattern_categories', 9 );

พื้นที่ footer-with-background รูปแบบสามารถมองเห็นได้ในรูปแบบที่แทรกด้วยการแสดงตัวอย่าง (หากเลือก):

วิธีสร้างรูปแบบธีมที่ถูกบล็อกใน WordPress 6.0

กระบวนการนี้ช่วยลดความยุ่งยากในการสร้างและแสดงรูปแบบบล็อกในธีมบล็อก มีอยู่ใน WordPress 6.0 โดยไม่ต้องใช้ปลั๊กอิน Gutenberg

ตัวอย่างธีมที่ไม่มีการลงทะเบียนรูปแบบ

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

อาร์เคียว – 12 ลาย
จี้ – 13 ลาย
ห่างไกล – 11 ลาย
Skatepark – 10 ลาย
สจ๊วต – 17 ลาย
หนังสือ – 16 ลาย
เปรี้ยวจี๊ด – 14 ลาย

ส่วนที่ 3: การสร้างและการใช้รูปแบบด้วยรหัสต่ำ

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

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

การเพิ่มและปรับแต่งรูปแบบจากไดเรกทอรีรูปแบบ

3.1: คัดลอกรูปแบบจากไดเร็กทอรีไปยังหน้า

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

3.2: ปรับแต่งตามต้องการs

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

วิธีสร้างรูปแบบธีมที่ถูกบล็อกใน WordPress 6.0

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

3.3: สร้างไฟล์ใหม่ในโฟลเดอร์ /patterns

ก่อนอื่นมาสร้างใหม่ /patterns/footer-pattern-test.php ไฟล์และเพิ่มส่วนหัวของรูปแบบที่ต้องการ จากนั้นวางโค้ดทั้งหมด (ขั้นตอนที่ 3 ด้านบน) รูปแบบถูกจัดประเภทในพื้นที่ส่วนท้าย (บรรทัด: 5) เราสามารถดูรูปแบบที่เพิ่มเข้ามาใหม่ในตัวแทรกรูปแบบ

<?php /** * Title: Footer pattern from patterns library * Slug: tt2gopher/footer-pattern-test * Categories: tt2gopher-footer * Viewport Width: 1280 * Block Types: core/template-part/footer * Inserter: yes */
?> <!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"100px","bottom":"70px","right":"30px","left":"30px"}}},"backgroundColor":"black","layout":{"contentSize":"1280px"}} -->
<div class="wp-block-group alignfull has-black-background-color has-background" style="padding-top:100px;padding-right:30px;padding-bottom:70px;padding-left:30px"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"700","textTransform":"uppercase"}},"textColor":"cyan-bluish-gray"} -->
<h2 class="has-cyan-bluish-gray-color has-text-color" style="font-style:normal;font-weight:700;text-transform:uppercase">lorem</h2>
<!-- /wp:heading --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px">One of the main benefits of using Lorem Ipsum is that it can be easily generated, and it takes the pressure off designers to create meaningful text. Instead, they can focus on crafting the best website data.</p>
<!-- /wp:paragraph --> <!-- wp:social-links {"iconColor":"vivid-cyan-blue","iconColorValue":"#0693e3","openInNewTab":true,"className":"is-style-logos-only","style":{"spacing":{"blockGap":{"top":"15px","left":"15px"}}}} -->
<ul class="wp-block-social-links has-icon-color is-style-logos-only"><!-- wp:social-link {"url":"#","service":"facebook"} /--> <!-- wp:social-link {"url":"#","service":"twitter"} /--> <!-- wp:social-link {"url":"#","service":"instagram"} /--> <!-- wp:social-link {"url":"#","service":"linkedin"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:column --> <!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"typography":{"textTransform":"capitalize","fontStyle":"normal","fontWeight":"700","fontSize":"30px"}},"textColor":"cyan-bluish-gray"} -->
<h4 class="has-cyan-bluish-gray-color has-text-color" style="font-size:30px;font-style:normal;font-weight:700;text-transform:capitalize">Contact Us</h4>
<!-- /wp:heading --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1.2"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px;line-height:1.2">123 BD Lorem, Ipsum<br><br>+123-456-7890</p>
<!-- /wp:paragraph --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px;line-height:1">sample@gmail.com</p>
<!-- /wp:paragraph --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px;line-height:1">Opening Hours: 10:00 - 18:00</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --> <!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"typography":{"fontSize":"30px","fontStyle":"normal","fontWeight":"700","textTransform":"capitalize"}},"textColor":"cyan-bluish-gray"} -->
<h4 class="has-cyan-bluish-gray-color has-text-color" style="font-size:30px;font-style:normal;font-weight:700;text-transform:capitalize">Newsletter</h4>
<!-- /wp:heading --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px">Lorem ipsum dolor sit amet, consectetur ut labore et dolore magna aliqua ipsum dolor sit</p>
<!-- /wp:paragraph --> <!-- wp:search {"label":"","placeholder":"Enter Your Email...","buttonText":"Subscribe","buttonPosition":"button-inside","style":{"border":{"width":"1px"}},"borderColor":"tertiary","backgroundColor":"background-header","textColor":"background"} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

3.4: ดูรูปแบบใหม่ในตัวแทรก

เพื่อดูที่เพิ่มใหม่ Footer pattern from patterns library ไปที่โพสต์หรือหน้าใดก็ได้ แล้วเลือกไอคอนตัวแทรก (สัญลักษณ์บวกสีน้ำเงิน ซ้ายบน) จากนั้นเลือกหมวดหมู่ "TT2 Gopher – ส่วนท้าย" รูปแบบที่เพิ่มใหม่จะแสดงบนแผงด้านซ้าย พร้อมด้วยรูปแบบส่วนท้ายอื่นๆ และการแสดงตัวอย่างทางด้านขวา (หากเลือก):

วิธีสร้างรูปแบบธีมที่ถูกบล็อกใน WordPress 6.0

การลงทะเบียนรูปแบบโดยตรงใน `theme.json` ไฟล์

ใน WordPress 6.0 คุณสามารถลงทะเบียนรูปแบบที่ต้องการจากไดเร็กทอรีรูปแบบด้วย theme.json ไฟล์ที่มีไวยากรณ์ต่อไปนี้ ดิ 6.0 dev บันทึกสถานะ, “ฟิลด์รูปแบบเป็นอาร์เรย์ของ [ทากลาย] จากไดเรกทอรีรูปแบบ รูปแบบทากสามารถแยกได้โดย [URL] ในมุมมองรูปแบบเดียวที่ไดเรกทอรีรูปแบบ”

{ "version": 2, "patterns": ["short-text", "patterns-slug"]
}

วิดีโอคุณสมบัติสั้น WordPress 6.0 สาธิตวิธีการลงทะเบียนรูปแบบใน /patterns โฟลเดอร์ (ที่ 3:53) และลงทะเบียนรูปแบบที่ต้องการจากผู้กำกับรูปแบบใน theme.json ไฟล์ (ที่ 3:13)

จากนั้น รูปแบบที่ลงทะเบียนไว้จะมีอยู่ในช่องค้นหาตัวแทรกรูปแบบ ซึ่งจากนั้นจะพร้อมใช้งานเหมือนกับไลบรารีรูปแบบที่รวมธีมไว้

{ "version": 2, "patterns": [ "footer-from-directory", "footer-section-design-with-3-column-description-social-media-contact-and-newsletter" ]
}

ในตัวอย่างนี้ รูปแบบกระสุน footer-section-design-with-3-column-description-social-media-contact-and-newsletter จาก ตัวอย่างก่อนหน้า ได้ลงทะเบียนผ่าน theme.json.

รูปแบบการสร้างเพจ

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

register_block_pattern( 'my-plugin/about-page', array( 'title' => __( 'About page', 'my-plugin' ), 'blockTypes' => array( 'core/post-content' ), 'content' => '<!-- wp:paragraph {"backgroundColor":"black","textColor":"white"} --> <p class="has-white-color has-black-background-color has-text-color has-background">Write you about page here, feel free to use any block</p> <!-- /wp:paragraph -->', )
);

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

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

คุณสามารถติดตามและมีส่วนร่วมในการอภิปรายของ GitHub ได้จากลิงก์ที่ระบุไว้ในส่วนทรัพยากรด้านล่าง

การใช้ไดเร็กทอรีรูปแบบเพื่อสร้างเพจ

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

In วิดีโอสั้น ๆ นี้Jamie Marsland สาธิต (เวลา 1:30 น.) วิธีใช้แอปเพื่อสร้างเค้าโครงหน้าทั้งหน้าซึ่งคล้ายกับตัวสร้างหน้าโดยใช้ส่วนหน้าที่ต้องการของไดเรกทอรี

ตัดขึ้น

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

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

แหล่งข้อมูล

6.0 WordPress

คู่มือภาคสนาม WordPress 6.0 (เวิร์ดเพรสคอร์)
สำรวจ WordPress 6.0: รูปแบบต่างๆ, บล็อก UI ล็อค, ปรับปรุงการเขียน – วิดีโอ 22 นาที (Anne McCarthy)
ฟีเจอร์ WordPress 6.0 ใน 4 นาที (เดฟ สมิธ)
มีอะไรใหม่ใน WordPress 6.0: บล็อกใหม่ การสลับรูปแบบ การแก้ไขเทมเพลต Webfonts API และอีกมากมาย (คินสตา)

การสร้างลวดลาย

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

การปรับปรุงรูปแบบ (GitHub)

บทความบล็อก

Gutenberg Patterns: อนาคตของการสร้างเพจใน WordPress (เศรษฐีทาโบร์)
การใช้รูปแบบบล็อกเพื่อเพิ่มความเร็วในการสร้างไซต์ WordPress (โกแด๊ดดี้)
รูปแบบบล็อกจะเปลี่ยนทุกอย่าง (WP โรงเตี๊ยม)

วิธีสร้างรูปแบบธีมที่ถูกบล็อกใน WordPress 6.0 เผยแพร่ครั้งแรกเมื่อ CSS-เคล็ดลับ. คุณควร รับจดหมายข่าว.

ประทับเวลา: มิถุนายน 1, 2022

ประทับเวลา: พฤศจิกายน 16, 2022

เผยแพร่ซ้ำโดยเพลโต

คุณใช้คอลัมน์ CSS เมื่อใด

วิธีสร้างรูปร่างและรูปแบบคลื่นใน CSS

การสร้างนาฬิกาด้วย New CSS sin() และ cos() ฟังก์ชันตรีโกณมิติ

ดังนั้น คุณต้องการทำให้คุณสมบัติการแสดงผลเคลื่อนไหว

ลิงก์บางส่วนเกี่ยวกับเนื้อหาที่เกี่ยวข้องกับ AI

การตกแต่งรูปภาพแฟนซี: มาสก์และเอฟเฟกต์โฮเวอร์ขั้นสูง

บทสรุปของการวิจัยเว็บปี 2022

สำรวจกริดโดยนัยของ CSS Grid และอำนาจการจัดตำแหน่งอัตโนมัติ

CSS Grid และ Custom Shapes ตอนที่ 3

6 SVG ทั่วไปล้มเหลว (และวิธีแก้ไข)

สร้างเสียงรบกวนจากข้อผิดพลาดการไล่ระดับสี CSS แปลก ๆ

การหาทุนการพัฒนาส่วนหน้า

เกี่ยวกับเรา

การค้นหาแนวตั้ง & Ai

ระบบปฏิบัติการ

การติดต่อ

ลงชื่อเข้าใช้

เบื้องต้น

ส่วนที่ 1: การพัฒนาแนวทางในการสร้างรูปแบบบล็อก

ใช้ตัวอย่างกรณี 1: ยี่สิบยี่สิบเอ็ด

ใช้ตัวอย่างกรณี 2: Twenty Twenty-Two

ส่วนที่ 2: การสร้างและการโหลดรูปแบบโดยไม่ต้องลงทะเบียน

ประเภทรูปแบบและประเภท การลงทะเบียน (ไม่บังคับ)

ตัวอย่างธีมที่ไม่มีการลงทะเบียนรูปแบบ

ส่วนที่ 3: การสร้างและการใช้รูปแบบด้วยรหัสต่ำ

การเพิ่มและปรับแต่งรูปแบบจากไดเรกทอรีรูปแบบ

การลงทะเบียนรูปแบบโดยตรงใน theme.json ไฟล์

รูปแบบการสร้างเพจ

การใช้ไดเร็กทอรีรูปแบบเพื่อสร้างเพจ

ตัดขึ้น

แหล่งข้อมูล

6.0 WordPress

การสร้างลวดลาย

การปรับปรุงรูปแบบ (GitHub)

บทความบล็อก

เพิ่มเติมจาก เคล็ดลับ CSS

เกี่ยวกับเรา

การค้นหาแนวตั้ง & Ai

ระบบปฏิบัติการ

การติดต่อ

ลงชื่อเข้าใช้

การลงทะเบียนรูปแบบโดยตรงใน `theme.json` ไฟล์