Block Theme

https://developer.wordpress.org/block-editor/how-to-guides/themes/block-theme-overview/

What is a block theme? #

Chủ đề khối là một chủ đề WordPress với các mẫu hoàn toàn bao gồm các khối để ngoài nội dung bài đăng của các loại bài đăng khác nhau (trang, bài đăng,…), trình chỉnh sửa khối cũng có thể được sử dụng để chỉnh sửa tất cả các khu vực của trang web: , chân trang, thanh bên, v.v.

What is the structure of a block theme? #

A very simple block theme is structured like so:

theme
|__ style.css
|__ theme.json
|__ functions.php
|__ block-templates
    |__ index.html
    |__ single.html
    |__ archive.html
|__ block-template-parts
    |__ header.html
    |__ footer.html
    |__ sidebar.html

Sự khác biệt với các chủ đề WordPress hiện có là các mẫu khác nhau trong hệ thống phân cấp mẫu và các phần của mẫu, là các mẫu khối thay vì tệp php. Ngoài ra, ví dụ này bao gồm tệp theme.json cho một số kiểu.

What is a block template? #

Mẫu khối được tạo thành từ một danh sách các khối. Bất kỳ khối WordPress nào cũng có thể được sử dụng trong một mẫu. Mẫu cũng có thể sử dụng lại các phần nội dung của chúng bằng cách sử dụng “Phần mẫu”. Ví dụ: tất cả các mẫu khối có thể có cùng một tiêu đề được bao gồm từ một phần mẫu header.html riêng biệt.

Here’s an example of a block template:

<!-- wp:site-title /-->
<!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large">
    <img src="https://cldup.com/0BNcqkoMdq.jpg" alt="" />
</figure>
<!-- /wp:image -->
<!-- wp:group -->
<div class="wp-block-group">
    <!-- wp:post-title /-->
    <!-- wp:post-content /-->
</div>
<!-- /wp:group -->
<!-- wp:group -->
<div class="wp-block-group">
    <!-- wp:heading -->
    <h2>Footer</h2>
    <!-- /wp:heading -->
</div>
<!-- /wp:group -->

How to write and edit these templates? #

Cuối cùng, bất kỳ người dùng WordPress nào có các khả năng chính xác (ví dụ: vai trò quản trị viên WordPress) sẽ có thể truy cập các mẫu này trong quản trị viên WordPress, chỉnh sửa chúng trong các chế độ xem chuyên dụng và có khả năng xuất chúng dưới dạng chủ đề.

Kể từ Gutenberg 8.5, có hai cách để tạo và chỉnh sửa các mẫu trong Gutenberg.

Edit templates within The “Appearance” section of WP-Admin #

Bạn có thể điều hướng đến menu quản trị “Mẫu” tạm thời trong “Giao diện” wp-admin / edit.php? Post_type = wp_template và sử dụng nó như một sân chơi để chỉnh sửa các mẫu của bạn. Thêm các khối ở đây và chuyển sang chế độ soạn thảo mã để lấy HTML của mẫu khi bạn hoàn tất. Sau đó, bạn có thể dán đánh dấu đó vào một tệp trong thư mục chủ đề của mình.

Xin lưu ý rằng menu quản trị "Mẫu" trong "Giao diện" sẽ không liệt kê các mẫu đi kèm với chủ đề của bạn. Nó chỉ liệt kê các mẫu mới được tạo bởi trang web WordPress cụ thể mà bạn đang làm việc.

Edit Templates within the Full-site Editor #

Để bắt đầu, hãy tạo một tệp mẫu trống trong chủ đề của bạn. Ví dụ: mytheme / block-templates / index.html. Sau đó, mở trình chỉnh sửa Toàn trang. Mẫu mới của bạn sẽ xuất hiện dưới dạng mẫu đang hoạt động và phải để trống. Thêm khối như bạn thường làm bằng Gutenberg. Bạn có thể thêm và tạo các phần mẫu trực tiếp bằng cách sử dụng khối "Phần Mẫu".

Lặp lại bất kỳ mẫu bổ sung nào mà bạn muốn kết hợp với chủ đề của mình.

Khi bạn hoàn tất, hãy nhấp vào tùy chọn “Xuất chủ đề” trong menu “Công cụ” (dấu chấm lửng) của trình chỉnh sửa trang web. Điều này sẽ cung cấp cho bạn bản tải xuống ZIP của tất cả các mẫu và phần mẫu mà bạn đã tạo trong trình chỉnh sửa trang web. Các tệp HTML mới này có thể được đặt trực tiếp vào chủ đề của bạn.

Lưu ý rằng khi bạn xuất các phần mẫu theo cách này, đánh dấu khối phần mẫu sẽ bao gồm thuộc tính postID có thể được xóa một cách an toàn khi phân phối chủ đề của bạn.

Templates CPT #

Nếu bạn lưu các mẫu trực tiếp từ menu quản trị Mẫu tạm thời, bạn sẽ có thể ghi đè các mẫu của chủ đề của mình.

Ví dụ: Bằng cách sử dụng single làm tiêu đề cho mẫu của bạn và lưu nó, mẫu đã lưu này sẽ được ưu tiên hơn tệp single.html của chủ đề của bạn.

Lưu ý rằng nó sẽ không được ưu tiên hơn bất kỳ mẫu nào trong chủ đề của bạn có tính cụ thể cao hơn trong hệ thống phân cấp mẫu. Độ phân giải đi từ hầu hết đến cụ thể nhất, đầu tiên là tìm kiếm bài đăng CPT và sau đó là mẫu chủ đề, ở mỗi cấp độ.

Theme Blocks #

Một số khối đã được tạo riêng cho các chủ đề khối. Ví dụ: bạn có nhiều khả năng sẽ sử dụng khối Tiêu đề trang trong tiêu đề trang web của mình trong khi mẫu khối duy nhất của bạn rất có thể sẽ bao gồm một khối Tiêu đề bài đăng và khối Nội dung bài đăng.

Vì chúng tôi vẫn còn sớm trong quá trình này, nên số lượng khối dành riêng cho các mẫu khối này tương đối ít nhưng nhiều khối sẽ được bổ sung khi chúng tôi tiếp tục với dự án. Kể từ Gutenberg 8.5, các khối sau hiện có sẵn:

Site Title
Template Part
Query
Query Loop
Query Pagination
Post Title
Post Content
Post Author
Post Comment
Post Comment Author
Post Comment Date
Post Comments
Post Comments Count
Post Comments Form
Post Date
Post Excerpt
Post Featured Image
Post Hierarchical Terms
Post Tags

Styling #

Một trong những khía cạnh quan trọng nhất của chủ đề (nếu không phải là quan trọng nhất) là kiểu dáng. Mặc dù ban đầu, bạn sẽ có thể cung cấp các kiểu và sắp xếp chúng bằng cách sử dụng các chủ đề móc giống nhau đã luôn được sử dụng, nỗ lực của Global Styles sẽ cung cấp nền tảng để thêm nhiều kiểu chủ đề trong tương lai.

Classic Themes #

Người dùng các chủ đề cổ điển cũng có thể xây dựng các mẫu khối tùy chỉnh và sử dụng chủ đề trong Trang của họ và Loại bài đăng tùy chỉnh hỗ trợ Mẫu trang.

Tác giả chủ đề có thể chọn không tham gia tính năng này bằng cách xóa hỗ trợ chủ đề block-template trong tệp functions.php của họ.

remove_theme_support( 'block-templates' );

PreviousNested Blocks: Using InnerBlocks NextCreate a block theme

Last updated 2 years ago