Thiết kế block pattern trong WordPress để dùng lại layout

Khi dựng một website WordPress nhiều trang, bạn sẽ gặp đi gặp lại cùng một kiểu bố cục: một khối hero đầu trang, một dải ba cột giới thiệu dịch vụ, một hộp kêu gọi hành động cuối bài. Gõ lại từng block cho mỗi trang vừa mất thời gian vừa dễ lệch. Đây chính là chỗ mẫu khối phát huy tác dụng.

Block pattern hoạt động ra sao

Bản chất của một mẫu khối là một đoạn markup block (mã đánh dấu khối — phần HTML kèm chú thích <!-- wp:... --> mà trình soạn thảo Gutenberg sinh ra). WordPress lưu đoạn này dưới một cái tên, và đưa nó vào thư viện chèn (inserter) để bạn gọi ra bất cứ lúc nào.

Điểm cốt lõi cần nhớ: mẫu khối là khuôn, không phải bản gốc liên kết. Mỗi lần bạn chèn một pattern vào trang, WordPress dán ra một bản sao rời. Bạn đổi chữ, đổi ảnh, xoá bớt cột trong bản sao đó mà mọi nơi khác đã chèn cùng pattern vẫn nguyên vẹn. Nhờ vậy pattern hợp với những layout dùng chung khung nhưng nội dung mỗi trang một khác.

Tạo mẫu khối nhanh bằng giao diện

Cách dễ nhất để bắt đầu là không cần code. Trong trình soạn thảo, bạn chọn một cụm block đã dàn xong, nhấn dấu ba chấm trên thanh công cụ rồi chọn tạo pattern. WordPress hỏi tên, nhóm danh mục, và một công tắc quan trọng: có đồng bộ hay không.

Tắt công tắc đồng bộ thì bạn được một mẫu khối thường (mỗi lần chèn là một bản rời). Bật lên thì bạn được một synced pattern — sẽ nói rõ ở phần dưới. Cách này tiện cho người biên tập nội dung, nhưng pattern tạo theo lối này lưu trong cơ sở dữ liệu, không đi kèm theme khi bạn chuyển site.

Đăng ký pattern vào theme bằng thư mục patterns

Với một theme bạn tự dựng, cách bền vững hơn là để mẫu khối nằm trong mã nguồn theme, đi theo theme mọi nơi. Từ WordPress 6.0, chỉ cần đặt một file PHP vào thư mục /patterns của theme là WordPress tự nhận và đăng ký, miễn file có phần tiêu đề (header) hợp lệ.

Ví dụ tạo file patterns/hero-trang-chu.php:

<?php
/**
 * Title: Hero trang chủ
 * Slug: web22/hero-trang-chu
 * Categories: featured
 * Description: Khối mở đầu với tiêu đề lớn và nút kêu gọi hành động.
 * Keywords: hero, banner, mở đầu
 * Viewport Width: 1280
 */
?>
<!-- wp:group {"tagName":"section","align":"full"} -->
<section class="wp-block-group alignfull">
  <!-- wp:heading {"level":1} -->
  <h2 class="wp-block-heading">Tiêu đề chính của bạn</h2>
  <!-- /wp:heading -->
  <!-- wp:buttons -->
  <div class="wp-block-buttons">
    <!-- wp:button -->
    <div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Liên hệ</a></div>
    <!-- /wp:button -->
  </div>
  <!-- /wp:buttons -->
</section>
<!-- /wp:group -->

Phần header trên cùng là metadata WordPress đọc để đăng ký. Slug phải có không gian tên (namespace, dạng tên-theme/tên-pattern) để tránh trùng. Categories quyết định pattern hiện ở nhóm nào trong thư viện chèn. Viewport Width chỉ độ rộng khung xem trước. Phần thân file là markup block thật — bạn có thể dán thẳng từ chế độ “soạn dạng mã” của Gutenberg ra.

Đăng ký bằng register_block_pattern

Khi cần điều kiện động (chỉ đăng ký pattern nếu WooCommerce bật, hoặc nội dung sinh theo tuỳ chọn theme), bạn dùng hàm register_block_pattern() trong file PHP, gắn vào hook init:

add_action( 'init', 'web22_dang_ky_pattern' );

function web22_dang_ky_pattern() {
    register_block_pattern( 'web22/cta-cuoi-bai', array(
        'title'       => __( 'CTA cuối bài', 'web22' ),
        'description' => __( 'Hộp kêu gọi hành động đặt cuối bài viết.', 'web22' ),
        'categories'  => array( 'featured' ),
        'source'      => 'theme',
        'content'     => '<!-- wp:paragraph --><p>Cần dựng website?</p><!-- /wp:paragraph -->',
    ) );
}

Muốn nhóm pattern vào một danh mục riêng (thay vì dùng nhóm có sẵn như featured), bạn đăng ký danh mục trước bằng register_block_pattern_category(), cũng trên hook init:

register_block_pattern_category( 'web22/khoi-trang', array(
    'label' => __( 'Web22: Khối trang', 'web22' ),
) );

Sau đó đặt web22/khoi-trang vào trường Categories của file pattern hoặc mảng categories của hàm. Với theme tự dựng, đây là kỹ thuật nền tảng — Web22 áp dụng chính cách này khi đóng gói các khối bố cục lặp lại vào theme custom để bàn giao cho khách tự dùng lại.

Pattern khác synced pattern (mẫu đồng bộ) thế nào

Từ WordPress 6.3, “reusable block” (khối tái sử dụng) cũ được đổi tên thành synced pattern và gộp chung vào hệ thống Patterns. Hai loại nhìn giống nhau nhưng hành xử ngược nhau ở điểm mấu chốt:

Nói gọn: dùng pattern thường cho khung bố cục mà người biên tập sẽ điền nội dung khác nhau. Dùng synced pattern cho khối phải giữ y hệt khắp nơi — ví dụ một dải “Đăng ký nhận tin” hay khối thông tin liên hệ xuất hiện trên hàng chục trang, sửa một lần là tất cả cập nhật theo.

Khi nào dùng pattern, khi nào viết custom block

Một câu hỏi hay gặp lúc làm theme: bố cục lặp lại này nên gói thành pattern hay code hẳn một block tuỳ biến? Ranh giới khá rõ.

• Chọn pattern khi layout chỉ là sự sắp xếp các block lõi có sẵn (group, heading, columns, image, button). Không cần logic, không cần thuộc tính riêng — chỉ là khung dàn sẵn để chèn nhanh.
• Chọn custom block khi cụm đó cần hành vi riêng: ô nhập liệu trong thanh cài đặt, render động từ dữ liệu (bài mới nhất, sản phẩm theo điều kiện), hoặc ràng buộc cấu trúc mà bạn không muốn người dùng phá vỡ.

Thực tế hai thứ bổ trợ nhau: bạn viết một block tuỳ biến cho phần “lõi động”, rồi gói nó cùng vài block trang trí thành một pattern để người biên tập chèn cả cụm trong một bước. Nếu muốn đi sâu hơn về việc tự lập trình một khối riêng, bài về tạo custom block cho FSE đi kèm cùng cụm này sẽ hữu ích.

Vài lưu ý khi pattern không hiện

Pattern không xuất hiện trong thư viện chèn thường do vài nguyên nhân quen thuộc: file đặt sai thư mục (phải là /patterns ở gốc theme), thiếu dòng Title hoặc Slug trong header, hoặc danh mục ghi trong Categories chưa được đăng ký. Khi đăng ký bằng hàm, nhớ luôn gọi trong hook init — gọi sớm hơn sẽ không có tác dụng.

Câu hỏi thường gặp

Pattern lưu trong theme có theo qua site khác không?

Có. Pattern đặt trong thư mục /patterns hoặc đăng ký bằng register_block_pattern() nằm trong mã theme, nên đi theo theme khi bạn cài sang site khác. Pattern tạo qua giao diện thì lưu trong cơ sở dữ liệu, không đi kèm.

Sửa pattern gốc có cập nhật các trang đã chèn không?

Với pattern thường thì không — các trang đã chèn là bản sao rời. Chỉ synced pattern mới cập nhật đồng loạt mọi nơi khi bạn sửa bản gốc.

Pattern có thay được trang con và mẫu trang không?

Không hẳn. Pattern là khối nội dung chèn vào một bài/trang. Còn mẫu trang (template) và phần mẫu (template part) là cấu trúc khung của theme. Pattern bổ trợ cho chúng chứ không thay thế.

Nếu bạn đang chuẩn hoá một theme WordPress với hệ thống mẫu khối gọn gàng để người dùng tự dựng trang, Web22 nhận dựng theme tuỳ biến theo yêu cầu dựa trên đúng những kỹ thuật trong bài.