Create a block theme

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

Mục đích của hướng dẫn này là chỉ ra cách tạo chủ đề khối và giúp các nhà phát triển chủ đề chuyển sang chỉnh sửa toàn bộ trang web. Trước tiên, bạn nên đọc tổng quan về chủ đề khối.

Bạn sẽ tìm hiểu về các tệp được yêu cầu, cách kết hợp các mẫu và các phần của mẫu, cách thêm các giá trị đặt trước cho các kiểu chung và cách thêm các khối và xuất các mẫu trong trình chỉnh sửa trang web.

Chỉnh sửa toàn bộ trang web là một tính năng thử nghiệm và quy trình làm việc trong hướng dẫn này có thể sẽ thay đổi.

Hướng dẫn này được cập nhật với phiên bản Gutenberg 10.6.

What is needed to create a block theme? #

To use a block theme, you first need to activate the Gutenberg plugin.

Required files and file structure #

Có hai tệp được yêu cầu để kích hoạt bất kỳ chủ đề nào: index.php và style.css. Để plugin nhận biết rằng một chủ đề khối đang hoạt động, chủ đề đó cũng phải bao gồm một mẫu index.html bên trong một thư mục được gọi là mẫu khối.

Chủ đề có thể tùy chọn bao gồm tệp functions.php và tệp theme.json để quản lý các kiểu toàn cục. Phần mẫu là tùy chọn. Nếu chúng được bao gồm, chúng phải được đặt bên trong thư mục khối-mẫu-phần.

Creating the templates and template parts #

Có một số cách để tạo mẫu và các phần của mẫu:

Theo cách thủ công, bằng cách tạo các tệp HTML có chứa đánh dấu khối. Sử dụng trình chỉnh sửa trang web. Sử dụng chế độ chỉnh sửa mẫu trong trình chỉnh sửa khối. Cách thứ tư là tạm thời và liên quan đến việc chuyển đến menu Giao diện> Mẫu và không được khuyến khích vì những hạn chế của nó.

Manual template creation #

Tạo hai tệp phần mẫu được gọi là header.html và footer.html và đặt chúng bên trong thư mục khối-mẫu-phần.

Khi bạn thêm các khối theo cách thủ công vào các tệp HTML của mình, hãy bắt đầu với một chú thích HTML bao gồm tên khối có tiền tố là wp :. Có cả khối tự đóng và khối nhiều dòng như trong ví dụ bên dưới.

Add the site title block to header.html:

<!-- wp:site-title /-->

Add a credit text to footer.html:

<!-- wp:paragraph -->
<p>Proudly powered by <a href="https://wordpress.org/">WordPress</a>.</p>
<!-- /wp:paragraph -->

Các khối là tự chứa; thẻ mở và thẻ đóng phải trong cùng một mẫu. Bạn sẽ không thể đặt thẻ mở cho khối nhóm trong mẫu đầu trang và đóng nó trong mẫu chân trang.

Mở index.html và bao gồm các phần mẫu bằng cách thêm hai nhận xét HTML. Các chú thích HTML bắt đầu bằng wp: template-part, là tên của khối phần mẫu. Mỗi phần mẫu được xác định bởi slug, tên của tệp mà không có phần mở rộng tệp.

Bên trong nhận xét HTML, thêm hai dấu ngoặc nhọn và khóa, slug, cùng với tên của phần mẫu:

Các phần của mẫu sử dụng thẻ theo mặc định. Thêm thuộc tính tagName để thay đổi phần tử HTML thành và : <header> and <footer>:

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

Tất cả các thuộc tính khối được đặt bên trong các dấu ngoặc nhọn này. Nếu bạn muốn đoạn văn trong footer.html được căn giữa, bạn sẽ sử dụng thuộc tính align:

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Proudly powered by <a href="https://wordpress.org/">WordPress</a>.</p>
<!-- /wp:paragraph -->

Template creation in the site editor #

Mở Trình chỉnh sửa trang web từ menu quản trị WordPress. Dạng xem mặc định là mẫu chỉ mục trống.

Chèn một khối phần mẫu mới. Khối sẽ có tên mặc định là “Phần mẫu không có tiêu đề”. Mở phần Nâng cao của thanh bên cài đặt khối và thực hiện các thay đổi sau: Thay đổi tiêu đề và vùng thành Header và phần tử HTML thành .

Lặp lại quy trình cho phần chân trang của trang web: Thay đổi tiêu đề và khu vực thành Chân trang và phần tử HTML thành .

Thêm khối tiêu đề trang vào phần mẫu đầu trang và một đoạn vào chân trang. Lưu các thay đổi. Bạn sẽ được hỏi xem bạn muốn lưu hai phần mẫu, mẫu chỉ mục hay cả ba phần. Xác nhận rằng các hộp kiểm là chính xác và lưu cả ba.

Template editing mode #

Chế độ chỉnh sửa mẫu là một cách để chỉnh sửa trang web mà không có sự phức tạp của giao diện trình chỉnh sửa trang web. Nó bị hạn chế hơn so với trình chỉnh sửa trang web vì bạn không thể tạo, chọn hoặc điều hướng giữa các mẫu trong chế độ xem này.

Bạn truy cập vào chế độ chỉnh sửa mẫu thông qua trình chỉnh sửa khối. Tạo một bài đăng hoặc trang mới. Tiếp theo, mở thanh bên cài đặt tài liệu và tìm bảng Mẫu bên dưới Trạng thái & khả năng hiển thị. Tại đây, bạn sẽ tìm thấy thông tin về mẫu hiện tại và danh sách các mẫu hiện có để lựa chọn. Tạo một mẫu mới bằng cách chọn liên kết Mới. Chỉnh sửa và lưu mẫu theo cách tương tự như trong trình chỉnh sửa trang web.

Exporting #

Mẫu và các phần mẫu đã được tạo hoặc chỉnh sửa trong trình chỉnh sửa trang web hoặc chế độ chỉnh sửa mẫu được lưu vào cơ sở dữ liệu dưới dạng các loại bài đăng tùy chỉnh. Để xuất chúng dưới dạng tệp chủ đề, hãy làm theo các bước sau:

Trong trình chỉnh sửa trang web, hãy mở menu Công cụ và tùy chọn khác. Chọn tùy chọn Xuất để tải xuống tệp zip có chứa các tệp. Giải nén các tập tin. Sao chép tệp index.html đã cập nhật từ chủ đề / khối-mẫu / vào thư mục mẫu khối của chủ đề của bạn. Sao chép mẫu phần một và phần hai từ chủ đề / khối-mẫu-phần / vào thư mục khối-mẫu-phần của chủ đề của bạn. Đổi tên các phần mẫu thành header.html và footer.html tương ứng. Mở index.html và cập nhật sên phần mẫu trong đánh dấu khối.

Trong trình chỉnh sửa trang web, hãy mở menu Công cụ và tùy chọn khác.

Chọn tùy chọn Xuất để tải xuống tệp zip có chứa các tệp. Giải nén các tập tin.

Sao chép tệp index.html đã cập nhật từ chủ đề / khối-mẫu / vào thư mục mẫu khối của chủ đề của bạn.

Sao chép mẫu phần một và phần hai từ chủ đề / khối-mẫu-phần / vào thư mục khối-mẫu-phần của chủ đề của bạn.

Đổi tên các phần mẫu thành header.html và footer.html tương ứng.

Mở index.html và cập nhật sên phần mẫu trong đánh dấu khối.

Các mẫu đã lưu được ưu tiên hơn các tệp chủ đề. Để sử dụng các tệp chủ đề đã cập nhật, hãy chuyển đến Giao diện> Mẫu và Giao diện> Phần mẫu và xóa các mẫu đã lưu.

Additional templates #

Blog #

Bây giờ chủ đề có đầu trang và chân trang cơ bản, nhưng nó không hiển thị bất kỳ nội dung nào. Để tạo danh sách các bài đăng, bạn sẽ sử dụng các khối truy vấn và vòng lặp truy vấn.

Cho dù bạn đang sử dụng trình chỉnh sửa trang web hoặc chỉnh sửa tệp chủ đề trực tiếp, hãy mở mẫu chỉ mục.

Đầu tiên, hãy thêm một khối nhóm sẽ hoạt động như một vùng chứa cho các bài đăng. Tiếp theo, bật tùy chọn chiều rộng cho các khối bên trong nhóm này bằng cách sử dụng "layout":{"inherit":true}.

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"layout":{"inherit":true}} -->
<div class="wp-block-group"></div>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

Change the <div> in the group block to a <main> element using the tagName attribute:

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"layout":{"inherit":true},"tagName":"main"} -->
<main class="wp-block-group"></main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

Nếu bạn đang sử dụng một trong các trình chỉnh sửa, hãy thay đổi phần tử từ thành trong Nâng cao trong thanh bên cài đặt khối.

Thêm khối truy vấn bên trong nhóm. Khi bạn đặt khối truy vấn trong trình chỉnh sửa, vòng lặp truy vấn được sử dụng như một khối bên trong và bạn có tùy chọn bắt đầu với một vòng lặp trống hoặc bao gồm các khối bài đăng đã chọn như tiêu đề bài đăng và hình ảnh nổi bật.

Khối phân trang truy vấn chỉ có thể được sử dụng bên trong truy vấn. Đặt nó bên trong truy vấn, nhưng bên ngoài vòng lặp:

<!-- wp:query -->
<div class="wp-block-query"><!-- wp:query-loop -->
<!-- wp:post-title /-->
<!-- wp:post-date /-->
<!-- wp:post-excerpt /-->
<!-- /wp:query-loop -->
 
<!-- wp:query-pagination -->
<div class="wp-block-query-pagination">
<!-- wp:query-pagination-previous /-->
<!-- wp:query-pagination-numbers /-->
<!-- wp:query-pagination-next /--></div>
<!-- /wp:query-pagination -->

Posts and pages #

Tiếp theo, tạo một mẫu mới để hiển thị các bài đăng đơn lẻ. Nếu bạn đang trực tiếp chỉnh sửa tệp chủ đề, hãy tạo tệp có tên single.html bên trong thư mục mẫu khối.

Thêm các phần mẫu đầu trang và chân trang của trang web:

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

Thêm một khối nhóm sẽ hoạt động như một vùng chứa cho bài đăng của bạn:

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main"} -->
<main class="wp-block-group"></main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

Thêm các khối ưa thích của bạn vào bên trong khối nhóm. Một số khối mới có sẵn là:

Post content: <!-- wp:post-content /-->
Post title: <!-- wp:post-title /-->
Post author: <!-- wp:post-author /-->
Post date: <!-- wp:post-date /-->
Post featured image: <!-- wp:post-featured-image /-->
Post tags: <!-- wp:post-terms {"term":"post_tag"} /-->
Post categories: <!-- wp:post-terms {"term":"category"} /-->
Next and previous post: <!-- wp:post-navigation-link /--><!-- wp:post-navigation-link {"type":"previous"} /--

Lưu tệp HTML hoặc lưu và xuất mẫu bài đăng nếu bạn đang làm việc trong trình chỉnh sửa trang web.

Sao chép tất cả các khối và tạo một mẫu để hiển thị các trang. Theo tùy chọn, lưu một bản sao của single.html dưới dạng page.html bên trong thư mục mẫu khối. Điều chỉnh các khối cho mẫu trang và lưu.

Archives #

Nếu một chủ đề không có mẫu lưu trữ hoặc kết quả tìm kiếm, mẫu chỉ mục sẽ được sử dụng làm dự phòng. Để đảm bảo rằng khối truy vấn hiển thị kết quả chính xác, nó có một thuộc tính được gọi là kế thừa. Kế thừa được bật theo mặc định và lọc truy vấn tùy thuộc vào trang bạn đang xem.

Nếu muốn, bạn có thể tiếp tục tạo mẫu lưu trữ hoặc danh mục bằng cách sao chép tệp chỉ mục và thêm tiêu đề bằng cách sử dụng khối tiêu đề kho lưu trữ. Đây là một biến thể của khối tiêu đề truy vấn: <! - wp: query-title {"type": "archive"} / ->

Theme.json – Global styles #

theme.json là một tệp cấu hình được sử dụng để bật hoặc tắt các tính năng và đặt kiểu mặc định cho cả trang web và các khối.

Cài đặt kiểu được chuyển đổi thành thuộc tính tùy chỉnh CSS và xếp hàng cho trình chỉnh sửa và mặt trước, giảm nhu cầu cho chủ đề để xếp hàng các kiểu khối.

Để tận dụng tối đa hướng dẫn này, hãy đọc tài liệu về kiểu toàn cục.

Create a file called theme.json and save it inside the main theme folder.

Start by adding two curly brackets to the file:

Thêm số phiên bản cho định dạng theme.json. Đối với Gutenberg 10.6, số phiên bản là 1:

Next, add three main sections:

-Nơi bạn sẽ kích hoạt các tính năng và tạo các cài đặt trước cho các kiểu.
-Nơi bạn áp dụng các kiểu cho trang web, các phần tử và các khối.
-Cho việc gán các tệp phần mẫu cho các vùng mẫu.

Enabling and disabling features #

Để biết danh sách các tính năng có thể được bật hoặc tắt, hãy xem tài liệu cho theme.json.

Có hai cách khác nhau để một khối có thể hỗ trợ một tính năng:

Bằng cách hiển thị một điều khiển trong thanh bên cài đặt khối.

Bằng cách cho phép đặt giá trị mặc định bằng theme.json.

Thí dụ: Một khối không hỗ trợ điều khiển đường viền, có thể có đường viền mặc định được đặt bên trong tệp theme.json, miễn là tính năng đường viền được bật.

Để bật kiểu đường viền, hãy thêm đối tượng đường viền trong cài đặt với các thuộc tính và giá trị sau:

{
    "version": 1,
    "settings": {
        "border": {
            "customColor": true,
            "customRadius": true,
            "customStyle": true,
            "customWidth": true
        }
    }
}

To enable link colors, add a color setting and set link to true:

{
    "version": 1,
    "settings": {
        "border": {
            "customColor": true,
            "customRadius": true,
            "customStyle": true,
            "customWidth": true
        },
        "color": {
            "link": true,
        }
    }
}

To enable padding and custom spacing units, include a setting for spacing:

{
    "version": 1,
    "settings": {
        "border": {
            "customColor": true,
            "customRadius": true,
            "customStyle": true,
            "customWidth": true
        },
        "color": {
            "link": true
        },
        "spacing": {
            "customPadding": true,
            "units": [ "px", "em", "rem", "vh", "vw" ]
        }
    }
}

Disabling features #

Nếu bạn muốn tắt gradient, được bật theo mặc định, hãy đặt gradient thành false:

{
    "version": 1,
    "settings": {
        "border": {
            "customColor": true,
            "customRadius": true,
            "customStyle": true,
            "customWidth": true
        },
        "color": {
            "link": true,
            "gradient": false
        }
        ...

Content width and theme support for wide and full-width blocks #

Cài đặt bố cục cho phép cài đặt chiều rộng cho các khối nhóm và các phần mẫu và thay thế add_theme_support ('align-wide') ;.

Lợi ích của việc bật cài đặt bố cục trong theme.json là bạn không cần phải thêm CSS bổ sung cho khối căn chỉnh hoặc chiều rộng. Bạn cũng có thể đặt độ rộng chính xác hơn cho các khối bên trong các thùng chứa.

The keys used by layout are:

contentSize Default width for the blocks.
wideSize Wide width.

Ví dụ sử dụng pixel, nhưng bạn có thể sử dụng bất kỳ giá trị và đơn vị CSS hợp lệ nào. (Ví dụ mã được cắt bớt để minh họa nơi thêm tùy chọn.)

{
    "version": 1,
    "settings": {
        ...
        "layout": {
            "contentSize": "840px",
            "wideSize": "1100px"
        }
    }
}

Color palette #

Điều này tương đương với add_theme_support ('bảng màu biên tập'). Bạn có thể thêm nhiều bảng màu: bảng màu mặc định cho tất cả các khối và bảng màu cụ thể cho một loại khối.

The keys used by palette are:

slug Một mã định danh duy nhất cho màu sắc.
color Giá trị màu hex.
tên Tên hiển thị trong trình chỉnh sửa. Không bắt buộc.

Nhiều màu được thêm vào dưới dạng một mảng bằng cách sử dụng dấu ngoặc vuông: []. Thêm bảng màu mặc định bên trong cài đặt, dưới màu:

{
    "version": 1,
    "settings": {
        ...
        "color": {
            "palette": [
                {
                    "slug": "white",
                    "color": "#fff",
                    "name": "White"
                },
                {
                    "slug": "blue",
                    "color": "#0073AA",
                    "name": "WordPress blue"
                },
                {
                    "slug": "dark-grey",
                    "color": "#23282D",
                    "name": "Dark grey"
                }
            ]
        }
    }
}

Tiếp theo, thêm dấu phẩy ở cuối sau màu và thêm bảng màu mới cho khối tiêu đề. Bảng màu này sẽ ghi đè bảng màu chủ đề mặc định.

Cài đặt trước được tạo trong cài đặt và áp dụng theo kiểu. Áp dụng màu trắng cho nền nội dung bằng cách thêm màu theo sau là khóa và giá trị nền:

"styles": {
    "color": {
        "background": "var(--wp--preset--color--white)"
    }
}

Typography #

Để thêm kích thước phông chữ tùy chỉnh, hãy tạo một phần mới được gọi là kiểu chữ trong cài đặt. fontSizes tương đương với add_theme_support ('editor-font-size').

The keys used by fontSizes are:

slug Một mã định danh duy nhất cho kích thước.
kích thước Giá trị kích thước. Điều này có thể là đơn nguyên hoặc sử dụng bất kỳ giá trị CSS hợp lệ nào.
tên Tên hiển thị trong trình chỉnh sửa.
"typograhy": {
    "fontSizes": [
        {
            "slug": "normal",
            "size": "20px",
            "name": "normal"
        },
        {
            "slug": "extra-small",
            "size": "16px",
            "name": "Extra small"
        },
        {
            "slug": "large",
            "size": "24px",
            "name": "Large"
        }
    ]
}

Để áp dụng kích thước cho một khối, hãy làm theo các bước sau: Tạo một phần mới được gọi là khối theo kiểu

Thêm tên của các khối mà bạn muốn đặt mặc định cho

"blocks": {
    "core/paragraph": {
    },
    "core/post-terms": {
    },
    "core/post-title": {
    }
}

Thêm cài đặt kiểu chữ và đặt giá trị fontSize thành giá trị đặt trước mà bạn đã tạo

"blocks": {
    "core/paragraph": {
        "typography": {
            "fontSize": "var(--wp--preset--font-size--normal)"
        }
    },
    "core/post-terms": {
        "typography": {
            "fontSize": "var(--wp--preset--font-size--extra-small)"
        }
    },
    "core/post-title": {
        "typography": {
            "fontSize": "var(--wp--preset--font-size--large)"
        }
    }
}

Elements #

Với cài đặt phần tử, bạn có thể đặt mặc định cho các liên kết và tiêu đề trên trang web và các khối bên trong.

Elements on the website #

Đặt màu phông chữ cho tất cả các tiêu đề , bất kể tiêu đề đó là tiêu đề trang web, tiêu đề bài đăng hay khối tiêu đề:

Add a default link text color:

"styles": {
    "elements": {
        "h2": {
            "color": {
                "text": "var(--wp--preset--color--medium-blue)"
            }
        },
        "link": {
            "color": {
                "text": "var(--wp--preset--color--dark-grey)"
            }
        }
    }
}

Elements inside blocks #

Một số khối có nhiều hơn một phần tử hoặc có các phần tử khác nhau tùy thuộc vào cài đặt.

Ví dụ: Nếu bạn đặt màu nền cho khối trích dẫn bài đăng, nền đó sẽ ảnh hưởng đến toàn bộ khối. Bạn có thể đặt nền cho liên kết “đọc thêm” tùy chọn trong khối trích dẫn bài đăng bằng cách sử dụng các phần tử:

Styles > blocks > the name of the block > elements > element > attribute

Vì chủ đề đã bật đệm tùy chỉnh, bạn có thể thêm đệm trong thuộc tính khoảng cách để làm cho màu nền hiển thị rõ hơn:

"styles": {
    "blocks": {
        "core/post-excerpt": {
            "elements": {
                "link": {
                    "color": {
                        "text": "var(--wp--preset--color--white)",
                        "background": "var(--wp--preset--color--blue)"
                    },
                    "spacing": {
                        "padding": {
                            "top": "1em",
                            "right": "1em",
                            "bottom": "1em",
                            "left": "1em"
                        }
                    }
                }
            }
        }
    }
}

Template parts #

Trong phần TempleParts, gán hai phần mẫu mà bạn đã tạo cho các vùng mẫu của chúng. Thêm hai khóa: –Name, tên tệp của tệp phần mẫu không có phần mở rộng tệp, –Area, tên của vùng mẫu.

Có ba khu vực mẫu để lựa chọn: Đầu trang, chân trang và chung.

"templateParts": [
    {
        "name": "header",
        "area": "header"
    },
    {
        "name": "footer",
        "area": "footer"
    }
]

Custom templates #

Các mẫu tùy chỉnh cho các bài đăng, trang và các loại bài đăng tùy chỉnh được tạo bằng cách thêm các tệp HTML bổ sung bên trong

block-templates folder.

Trong chủ đề cổ điển, các mẫu được xác định bằng tiêu đề tệp. Trong chủ đề khối, bạn liệt kê các mẫu trong tệp theme.json.

Tất cả các mẫu được liệt kê trong phần customTemplates của theme.json đều có thể chọn được trong trình chỉnh sửa trang web.

Để có thể chỉnh sửa các mẫu trong chế độ chỉnh sửa mẫu, tên tệp của mẫu cần phải được bắt đầu bằng tiền tố post- hoặc page-.

Đầu tiên, tạo một phần có tên customTemplates ở cấp cơ sở của theme.json. Phần này có hai khóa bắt buộc: Tên, là tên của tệp mẫu không có phần cuối của tệp. tiêu đề, là tiêu đề hiển thị của mẫu trong trình chỉnh sửa.

"customTemplates": [
    {
        "name": "page-home",
        "title": "Page without title"
    }
]

Ngoài ra còn có một cài đặt tùy chọn để bạn quyết định loại bài đăng nào có thể sử dụng mẫu. Chìa khóa là postTypes, theo sau là tên của loại bài đăng

"customTemplates": [
    {
        "name": "page-home",
        "title": "Page without title"
    },
    {
        "name": "page-contact",
        "title": "Contact",
        "postTypes": [
            "page"
        ]
    }
]

Example themes #

PreviousBlock ThemeNext====== Start Hướng dẫn tạo một theme bằng theme.json =======

Last updated