Cách tạo các mẫu chủ đề khối trong WordPress 6.0

Các mẫu khối, cũng thường được gọi là phần, được giới thiệu trong WordPress 5.5 để cho phép người dùng xây dựng và chia sẻ các bố cục khối được xác định trước trong thư mục mẫu. Thư mục là ngôi nhà của một loạt các mẫu được sắp xếp được thiết kế bởi cộng đồng WordPress. Những mẫu này có sẵn ở định dạng sao chép và dán đơn giản, không yêu cầu kiến ​​thức về mã hóa và do đó tiết kiệm thời gian cho người dùng.

Mặc dù có nhiều bài viết về các mẫu, nhưng vẫn thiếu các bài viết toàn diện và cập nhật về tạo mẫu bao gồm các tính năng nâng cao mới nhất. Bài viết này nhằm mục đích lấp đầy khoảng trống với việc tập trung vào các tính năng nâng cao gần đây như tạo mẫu mà không cần đăng ký và cung cấp hướng dẫn từng bước cập nhật để tạo và sử dụng chúng trong các chủ đề khối cho người mới và các tác giả có kinh nghiệm.

Kể từ khi ra mắt WordPress 5.9 và Hai mươi hai mươi hai (TT2) chủ đề mặc định, việc sử dụng các mẫu khối trong các chủ đề khối đã phổ biến. Tôi đã là một fan hâm mộ lớn của các mẫu khối và đã tạo và sử dụng chúng trong các chủ đề khối của tôi.

Mới WordPress 6.0 Cung cấp ba mô hình chính có tính năng cải tiến cho các tác giả:

• Cho phép đăng ký mẫu thông qua /patterns thư mục (tương tự như /parts, /templatesvà /styles sự đăng ký).
• Đăng ký các mẫu từ thư mục các mẫu chung bằng cách sử dụng theme.json.
• Thêm các mẫu có thể được cung cấp cho người dùng khi tạo một trang mới.

Trong phần giới thiệu Khám phá video WordPress 6.0, Liên lạc viên sản phẩm Automattic Ann McCathy nêu bật một số tính năng của các mẫu mới được nâng cao (bắt đầu từ 15:00) và thảo luận về các kế hoạch nâng cao các mẫu trong tương lai - bao gồm mô hình như các yếu tố phân chia, cung cấp các tùy chọn để chọn mẫu trên tạo trang, tích hợp tìm kiếm thư mục mẫu và hơn thế nữa.

Điều kiện tiên quyết

Bài viết giả định rằng người đọc đã có kiến ​​thức cơ bản về giao diện chỉnh sửa toàn trang WordPress (FSE) và các chủ đề khối. Các Sổ tay biên tập viên khối và Chỉnh sửa toàn bộ trang web trang web cung cấp các hướng dẫn hướng dẫn cập nhật nhất để tìm hiểu tất cả các tính năng của FSE, bao gồm các chủ đề và mẫu khối được thảo luận trong bài viết này.

Phần 1: Phát triển các phương pháp tiếp cận để tạo các mẫu khối

Cách tiếp cận ban đầu để tạo các mẫu khối yêu cầu sử dụng API mẫu khối dưới dạng một plugin tùy chỉnh hoặc được đăng ký trực tiếp trong functions.php tập tin để nhóm với một chủ đề khối. WordPress 6.0 mới ra mắt đã giới thiệu một số tính năng mới và nâng cao hoạt động với các mẫu và chủ đề, bao gồm đăng ký mẫu thông qua /patterns thư mục và một phương thức tạo mẫu trang.

Để biết thông tin cơ bản, trước tiên, hãy tổng quan ngắn gọn về cách quy trình đăng ký mẫu phát triển từ việc sử dụng API mẫu đăng ký để tải trực tiếp mà không cần đăng ký.

Ví dụ trường hợp sử dụng 1: Twenty Twenty-One

Mặc định Chủ đề Twenty Twenty-One (TT1) và Chủ đề khối TT1 (anh chị em của TT1) giới thiệu cách đăng ký các mẫu khối trong chủ đề functions.php. Trong chủ đề thử nghiệm Khối TT1, đĩa đơn này block-pattern.php tệp chứa tám các mẫu khối được thêm vào functions.php như một include như được hiển thị ở đây.

Một mẫu khối tùy chỉnh cần phải được đăng ký bằng cách sử dụng register_block_pattern hàm nhận hai đối số - title (tên của các mẫu) và properties (một mảng mô tả các thuộc tính của mẫu).

Đây là một ví dụ về việc đăng ký một mẫu đoạn văn “Xin chào Thế giới” đơn giản từ Bài viết về Theme 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 -->", )
);

Sau khi đăng ký, register_block_pattern() hàm nên được gọi từ một trình xử lý gắn với init móc như mô tả tại đây.

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

Sau khi các mẫu khối được đăng ký, chúng sẽ hiển thị trong trình chỉnh sửa khối. Tài liệu chi tiết hơn được tìm thấy trong này Đăng ký mẫu khối.

Thuộc tính mẫu khối

Ngoài yêu cầu title và content tài sản, sổ tay biên tập khối liệt kê các tùy chọn sau thuộc tính mẫu:

• title (cần thiết): Tiêu đề mà con người có thể đọc được cho mẫu.
• content (cần thiết): Chặn Đánh dấu HTML cho mẫu.
• description (Không bắt buộc): Một văn bản ẩn trực quan được sử dụng để mô tả mẫu trong trình chèn. Mô tả là tùy chọn nhưng nó rất được khuyến khích khi tiêu đề không mô tả đầy đủ chức năng của mẫu. Mô tả sẽ giúp người dùng khám phá mẫu trong khi tìm kiếm.
• categories (Không bắt buộc): Một mảng các danh mục mẫu đã đăng ký được sử dụng để nhóm các mẫu khối. Các mẫu khối có thể được hiển thị trên nhiều danh mục. Một danh mục phải được đăng ký riêng để được sử dụng ở đây.
• keywords (Không bắt buộc): Một loạt các bí danh hoặc từ khóa giúp người dùng khám phá mẫu trong khi tìm kiếm.
• viewportWidth (Không bắt buộc): Một số nguyên chỉ định chiều rộng dự kiến ​​của mẫu để cho phép xem trước theo tỷ lệ của mẫu trong trình chèn.
• blockTypes (Không bắt buộc): Một mảng các kiểu khối mà mẫu dự định sẽ được sử dụng với. Mỗi giá trị cần phải là khối được khai báo name.
• inserter (Không bắt buộc): Theo mặc định, tất cả các mẫu sẽ xuất hiện trong trình chèn. Để ẩn một mẫu sao cho nó chỉ có thể được chèn theo chương trình, hãy đặt inserter đến false.

Sau đây là ví dụ về đoạn mã plugin mẫu trích dẫn được lấy từ Blog 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 -->', )
);

Sử dụng các mẫu trong tệp mẫu

Sau khi các mẫu được tạo, chúng có thể được sử dụng trong tệp mẫu chủ đề với đánh dấu khối sau:

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

Một ví dụ từ kho GitHub này cho thấy việc sử dụng “footer-with-background"Mô hình slug với"tt2gopherTiền tố ”trong chủ đề khối TT2 Gopher.

Những người sớm sử dụng các chủ đề khối và plugin Gutenberg cũng đã tận dụng các mẫu trong các chủ đề cổ điển. Mặc định Hai mươi hai mươi và các chủ đề Eksell yêu thích của tôi (a trang giới thiệu đây) là những ví dụ điển hình cho thấy cách các tính năng mẫu có thể được thêm vào các chủ đề cổ điển.

Ví dụ trường hợp sử dụng 2: Twenty Twenty-Two

Nếu một chủ đề chỉ bao gồm một vài mẫu, thì việc phát triển và bảo trì khá dễ quản lý. Tuy nhiên, nếu một chủ đề khối bao gồm nhiều mẫu, như trong chủ đề TT2, thì pattern.php tệp trở nên rất lớn và khó đọc. Chủ đề TT2 mặc định, bao gồm hơn 60 mẫu, giới thiệu quy trình đăng ký mẫu đã cấu trúc lại cấu trúc dễ đọc và dễ bảo trì hơn.

Lấy ví dụ từ chủ đề TT2, hãy thảo luận ngắn gọn về cách hoạt động của quy trình làm việc đơn giản này.

2.1: Đăng ký danh mục mẫu

Với mục đích trình diễn, tôi đã tạo một chủ đề con TT2 và thiết lập nó trên trang web thử nghiệm địa phương của tôi với một số nội dung giả. Theo dõi TT2, tôi đã đăng ký footer-with-background và được thêm vào danh sách mảng danh mục mẫu sau đây trong block-patterns.php tập tin.

/**
* 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 );

Trong ví dụ mã này, mỗi mẫu được liệt kê trong $block_patterns = array() được gọi bởi foreach() chức năng nào requireh patterns tệp thư mục với tên mẫu được liệt kê trong mảng mà chúng ta sẽ thêm vào trong bước tiếp theo.

2.2: Thêm tệp mẫu vào /inc/patterns thư mục

Tiếp theo, chúng ta sẽ có tất cả các tệp mẫu được liệt kê trong $block_patterns = array(). Đây là một ví dụ về một trong các tệp mẫu, 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 -->',
);

Hãy tham khảo mô hình trong footer.html phần mẫu:

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

Điều này tương tự như việc thêm các phần đầu đề hoặc chân trang trong tệp mẫu.

Tương tự, các mẫu có thể được thêm vào parts/footer.html mẫu bằng cách sửa đổi nó để tham khảo slug của tệp mẫu của chủ đề (footer-with-background):

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

Bây giờ, nếu chúng ta truy cập trình chèn mẫu của trình chỉnh sửa khối, Footer with background nên có sẵn để chúng tôi sử dụng:

Ảnh chụp màn hình sau đây cho thấy chân trang mới được tạo với mẫu nền trên giao diện người dùng.

Giờ đây, các mẫu đã trở thành một phần không thể thiếu của chủ đề khối, nhiều mẫu được đóng gói trong các chủ đề khối - như Quảng trường, Cây con, Mayland, Nhà động vật học, Nhà địa chất học - tuân theo quy trình làm việc được thảo luận ở trên. Đây là một ví dụ về chủ đề Quadrat /inc/patterns thư mục với một đăng ký mẫu khối tập tin và danh sách các tập tin với nguồn nội dung và tiêu đề mẫu bắt buộc ở trong return array() chức năng.

Phần 2: Tạo và tải các mẫu mà không cần đăng ký

Xin lưu ý rằng tính năng này yêu cầu cài đặt WordPress 6.0 hoặc plugin Gutenberg 13.0 trở lên trong trang web của bạn.

T tính năng mới của WordPress 6.0 cho phép đăng ký mẫu thông qua các tệp và thư mục tiêu chuẩn - /patterns, mang lại những quy ước tương tự như /parts, /templatesvà /styles.

Quá trình này, như cũng được mô tả trong Quán rượu WP này , bao gồm ba bước sau:

• tạo một thư mục mẫu ở gốc của chủ đề
• thêm tiêu đề mẫu kiểu plugin
• nội dung nguồn mẫu

Đánh dấu tiêu đề mẫu điển hình, được lấy từ bài viết được hiển thị bên dưới:

<?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
*/
?>

Như đã mô tả trong phần trước, chỉ Title và Slug các trường là bắt buộc và các trường khác là tùy chọn.

Tham khảo các ví dụ từ các chủ đề được phát hành gần đây, tôi đã cấu trúc lại đăng ký mẫu trong Khối Gopher TT2 này chủ đề demo, được chuẩn bị cho một bài viết trước về CSS-Tricks.

Trong các bước sau, hãy khám phá cách footer-with-background.php Belt Hold đã đăng ký với PHP và được sử dụng trong một footer.html mẫu được cấu trúc lại.

2.1: Tạo một /patterns thư mục ở gốc của chủ đề

Bước đầu tiên là tạo /patterns tại thư mục gốc của chủ đề TT2 Gopher và di chuyển footer-with-background.php tệp mẫu thành /patterns thư mục và tái cấu trúc.

2.2: Thêm dữ liệu mẫu vào tiêu đề tệp

Tiếp theo, tạo các trường đăng ký tiêu đề mẫu sau.

<?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 /-->

Tệp mẫu có trường tiêu đề trên cùng được viết dưới dạng nhận xét PHP. Tiếp theo là khối nội dung được viết bằng định dạng HTML.

2.3: Thêm nội dung mẫu vào tệp

Đối với phần nội dung, hãy sao chép các đoạn mã trong dấu nháy đơn (ví dụ, '...') từ phần nội dung của footer-with-background và thay thế <!-- some-block-content /-->:

<!-- 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 -->

Toàn bộ đoạn mã của patterns/footer-with-background.php tập tin có thể được xem đây trên GitHub.

Xin lưu ý rằng /inc/patterns và block-patterns.php đang tính năng bổ sung, không bắt buộc trong WordPress 6.0 và chỉ bao gồm cho mục đích demo.

2.4: Tham chiếu slug mẫu trong khuôn mẫu

Thêm cấu trúc lại ở trên footer-with-background.php mẫu để footer.html mẫu hoàn toàn giống như mô tả trong phần trước (Phần 1, 2.2).

Bây giờ, nếu chúng tôi xem phần chân trang của trang web trong trình chỉnh sửa khối hoặc giao diện người dùng của trang web của chúng tôi trong trình duyệt, phần chân trang sẽ được hiển thị.

Danh mục và kiểu mẫu Đăng ký (tùy chọn)

Để phân loại các mẫu khối, các danh mục và loại mẫu phải được đăng ký trong chủ đề của functions.php tập tin.

Hãy xem xét một ví dụ về đăng ký danh mục mẫu khối từ chủ đề TT2 Gopher.

Sau khi đăng ký, các mẫu được hiển thị trong bộ chèn mẫu cùng với các mẫu mặc định cốt lõi. Để thêm các nhãn danh mục cụ thể của chủ đề trong trình chèn mẫu, chúng ta nên sửa đổi các đoạn mã trước đó bằng cách thêm không gian tên chủ đề:

/**
* 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 );

Sản phẩm footer-with-background mẫu hiển thị trong các mẫu được chèn với bản xem trước của nó (nếu được chọn):

Quá trình này đơn giản hóa đáng kể việc tạo và hiển thị các mẫu khối trong các chủ đề khối. Nó có sẵn trong WordPress 6.0 mà không cần sử dụng plugin Gutenberg.

Ví dụ về các chủ đề không có đăng ký mẫu

Những người chấp nhận sớm đã bắt đầu sử dụng tính năng này trong các chủ đề khối của họ. Một vài ví dụ về các chủ đề, có sẵn từ thư mục chủ đề, các mẫu tải mà không cần đăng ký được liệt kê bên dưới:

• Archeo – 12 mẫu
• mặt dây chuyền – 13 mẫu
• Xa – 11 mẫu
• Công viên trượt băng – 10 mẫu
• Stewart – 17 mẫu
• Sách – 16 mẫu
• Tiên phong – 14 mẫu

Phần 3: Tạo và sử dụng các mẫu có mã thấp

Sản phẩm thư mục mẫu chính thức chứa các thiết kế sáng tạo do cộng đồng đóng góp, có thể được sao chép và tùy chỉnh theo ý muốn để tạo nội dung. Sử dụng các mẫu với trình chỉnh sửa khối chưa bao giờ dễ dàng hơn thế!

Bất kỳ mẫu nào từ thư mục ngày càng phát triển cũng có thể được thêm vào các chủ đề chặn chỉ bằng cách "sao chép và dán" đơn giản hoặc đưa vào theme.json tập tin bằng cách tham khảo thư mục của họ sên mẫu. Tiếp theo, tôi sẽ giới thiệu sơ qua về cách dễ dàng thực hiện điều này với việc viết mã rất hạn chế.

Thêm và tùy chỉnh các mẫu từ thư mục mẫu

3.1: Sao chép mẫu từ thư mục vào một trang

Đây, tôi đang sử dụng mẫu phần chân trang này bởi FirstWebGeek từ thư mục mẫu. Sao chép mẫu bằng cách chọn nút “Sao chép mẫu” và trực tiếp dán vào một trang mới.

3.2: Thực hiện tùy chỉnh mong muốns

Tôi chỉ thực hiện một số thay đổi đối với màu của phông chữ và nền nút. Sau đó, sao chép toàn bộ mã từ trình biên tập mã vào khay nhớ tạm.

Nếu bạn không quen với việc sử dụng trình chỉnh sửa mã, hãy chuyển đến tùy chọn (có ba dấu chấm, trên cùng bên phải), nhấp vào nút Trình chỉnh sửa mã và sao chép toàn bộ mã từ đây.

3.3: Tạo một tệp mới trong thư mục / pattern

Đầu tiên, hãy tạo một /patterns/footer-pattern-test.php và thêm phần tiêu đề mẫu bắt buộc. Sau đó, dán toàn bộ mã (bước 3, ở trên). Mẫu được phân loại trong khu vực chân trang (dòng: 5), chúng ta có thể xem mẫu mới được thêm vào trong bộ chèn mẫu.

<?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: Xem mẫu mới trong trình chèn

Để xem những gì mới được thêm vào Footer pattern from patterns library , đi tới bất kỳ bài đăng hoặc trang nào và chọn biểu tượng trình chèn (biểu tượng dấu cộng màu xanh lam, trên cùng bên trái), sau đó chọn danh mục “TT2 Gopher - Chân trang”. Mẫu mới thêm được hiển thị trên bảng điều khiển bên trái, cùng với các mẫu chân trang khác và bản xem trước của nó ở bên phải (nếu được chọn):

Đăng ký các mẫu trực tiếp trong theme.json hồ sơ

Trong WordPress 6.0, có thể đăng ký bất kỳ mẫu mong muốn nào từ thư mục mẫu với theme.json tệp với cú pháp sau. Các 6.0 trạng thái ghi chú của nhà phát triển, “Trường mẫu là một mảng [sên mẫu] từ Thư mục Mẫu. Các sên mẫu có thể được [URL] trích xuất ở chế độ xem mẫu đơn tại Thư mục mẫu. ”

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

T video ngắn về các tính năng của WordPress 6.0 minh họa cách các mẫu được đăng ký trong /patterns thư mục (lúc 3:53) và đăng ký các mẫu mong muốn từ giám đốc mẫu trong một theme.json tệp (lúc 3:13).

Sau đó, mẫu đã đăng ký có sẵn trong hộp tìm kiếm của trình chèn mẫu, sau đó sẽ có sẵn để sử dụng giống như thư viện mẫu đi kèm theo chủ đề.

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

Trong ví dụ này, mô hình slug footer-section-design-with-3-column-description-social-media-contact-and-newsletter từ ví dụ trước đó được đăng ký qua theme.json.

Mô hình mẫu tạo trang

Như là một phần của "xây dựng với các mẫu”Sáng kiến, WordPress 6.0 cung cấp một tùy chọn phương thức mẫu cho các tác giả chủ đề để thêm các mẫu bố cục trang vào chủ đề khối, cho phép người dùng trang web chọn các mẫu bố cục trang (ví dụ: trang giới thiệu, trang liên hệ, trang nhóm, v.v.) trong khi tạo trang. Sau đây là một ví dụ được lấy từ ghi chú của nhà phát triển:

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 -->', )
);

Tính năng này hiện đang giới hạn cho Loại bài đăng trên trang chỉ và chưa cho “Loại bài đăng bài viết”.

Sản phẩm phương thức tạo mẫu trang cũng có thể bị vô hiệu hóa hoàn toàn bằng cách xóa loại khối hậu nội dung của tất cả các mẫu. Một mã mẫu ví dụ có sẵn ở đây.

Bạn có thể theo dõi và tham gia vào cuộc thảo luận của GitHub từ các liên kết được liệt kê trong phần tài nguyên bên dưới.

Sử dụng thư mục mẫu để tạo trang

Các mẫu từ thư mục cũng có thể được sử dụng để tạo bố cục trang hoặc bài đăng mong muốn, tương tự như trình tạo trang. Các GutenbergHub nhóm đã tạo một ứng dụng trình tạo trang trực tuyến thử nghiệm sử dụng các mẫu trực tiếp từ thư mục (video giới thiệu). Sau đó, các mã từ ứng dụng có thể được sao chép và dán vào một trang web, điều này giúp đơn giản hóa đáng kể quy trình tạo bố cục trang phức tạp mà không cần mã hóa.

In video ngắn này, Jamie Marsland trình bày (lúc 1:30) cách ứng dụng có thể được sử dụng để tạo toàn bộ bố cục trang tương tự như trình tạo trang bằng cách sử dụng các phần trang mong muốn của thư mục.

Kết thúc

Các mẫu cho phép người dùng tạo lại bố cục nội dung thường được sử dụng của họ (ví dụ: trang anh hùng, lời kêu gọi, v.v.) trong bất kỳ trang nào và giảm bớt các rào cản đối với việc trình bày nội dung theo phong cách mà trước đây không thể thực hiện được nếu không có kỹ năng viết mã. Giống như bổ sung và chủ đề thư mục, mới mô hình thư mục cung cấp cho người dùng các tùy chọn để sử dụng một loạt các mẫu mà họ lựa chọn từ thư mục mẫu, đồng thời viết và hiển thị nội dung theo phong cách.

Thật, các mẫu khối sẽ thay đổi mọi thứ và chắc chắn đây là một người thay đổi trò chơi tính năng trong bối cảnh chủ đề WordPress. Khi tiềm năng đầy đủ của xây dựng với các mẫu nỗ lực trở nên khả dụng, điều này sẽ thay đổi cách chúng ta thiết kế các chủ đề khối và tạo nội dung đẹp ngay cả với kiến ​​thức mã thấp. Đối với nhiều nhà thiết kế sáng tạo, thư mục các mẫu cũng có thể cung cấp một lối đi thích hợp để giới thiệu sáng tạo.

---

Thông tin

WordPress 6.0

• Hướng dẫn trường WordPress 6.0 (Lõi WordPress)
• Khám phá WordPress 6.0: Biến thể kiểu, Giao diện người dùng khóa khối, Cải tiến văn bản – Video dài 22 phút (Anne McCarthy)
• Các tính năng của WordPress 6.0 trong 4 phút (Dave Smith)
• Có gì mới trong WordPress 6.0: Khối mới, Chuyển kiểu, Chỉnh sửa mẫu, API Webfonts và nhiều hơn thế nữa (Kinsta)

Tạo mẫu

• Giới thiệu về các mẫu khối (Chỉnh sửa toàn bộ trang web)
• Video giới thiệu về Block Patterns, 14 phút (Học WordPress)
• Các mẫu khối (Sổ tay Block Editor)
• Vì vậy, bạn muốn tạo các mẫu khối? (Blog WordPress)
• Cách tạo và chia sẻ các Mẫu khối mã thấp trong WordPress (Cố lên bố)

Cải tiến các mẫu (GitHub)

• Xây dựng với các mẫu #38529
• Các mẫu như các phần tử cắt #39281
• Thêm: Tùy chọn để chọn một mẫu khi tạo trang. #40034
• Block Patterns để tạo trang. #38787
• Thêm: Tùy chọn bắt đầu trang (mẫu và mẫu) #39147

Bài viết trên blog

• Các mẫu Gutenberg: Tương lai của việc tạo trang trong WordPress (Tabor giàu có)
• Sử dụng các mẫu khối để tăng tốc độ xây dựng trang web WordPress (Cố lên bố)
• Các mẫu khối sẽ thay đổi mọi thứ (Quán rượu WP)

---

Cách tạo các mẫu chủ đề khối trong WordPress 6.0 ban đầu được xuất bản trên CSS-Thủ thuật. Bạn nên nhận bản tin.

• Coinsmart. Sàn giao dịch Bitcoin và tiền điện tử tốt nhất Châu Âu.
• Platoblockchain. Web3 Metaverse Intelligence. Khuếch đại kiến ​​thức. TRUY CẬP MIỄN PHÍ.
• CryptoHawk. Radar Altcoin. Dùng thử miễn phí.
• Nguồn: https://css-tricks.com/how-to-create-block-theme-patterns-in-wordpress-6-0/