Hướng Dẫn Render Block Bằng PHP Trong WordPress

Giới Thiệu

Trong quá trình phát triển website WordPress, việc tạo block tùy chỉnh đóng vai trò cực kỳ quan trọng, đặc biệt trong môi trường Gutenberg. Các block giúp tổ chức nội dung trực quan, linh hoạt và hiện đại. Một trong những kỹ thuật quan trọng nhất là render block bằng PHP trong WordPress, cho phép bạn kiểm soát hoàn toàn cách block hiển thị trên frontend. Bài viết này sẽ hướng dẫn chi tiết cách tạo, đăng ký và render block bằng PHP một cách chuẩn SEO và dễ triển khai.

Block WordPress Là Gì?

Block là thành phần nội dung trong trình soạn thảo Gutenberg, cho phép chèn văn bản, hình ảnh, gallery, video hoặc các module nâng cao. Block được thiết kế dạng modular, dễ tùy biến và mở rộng. Khi bạn tự tạo block bằng PHP, bạn có toàn quyền kiểm soát giao diện và logic hiển thị.

Cài Đặt Môi Trường Phát Triển

Trước khi bắt đầu tạo block PHP, bạn cần chuẩn bị môi trường WordPress đầy đủ:

  • Cài đặt WordPress trên localhost hoặc hosting.
  • Kích hoạt theme đang sử dụng hoặc theme con (child theme).
  • Chuẩn bị một plugin custom hoặc file functions.php để thêm mã.

Cách Tạo Block Mới Bằng PHP

Để tạo block WordPress bằng PHP, bạn sẽ sử dụng hàm register_block_type(). Đây là bước quan trọng nhất để định nghĩa block, thuộc tính, icon, category và hàm render.

Ví Dụ Mã PHP Tạo Block Cơ Bản


function my_custom_block() {
    register_block_type('mytheme/my-custom-block', array(
        'title'       => __('My Custom Block', 'mytheme'),
        'description' => __('Một block tùy chỉnh render bằng PHP', 'mytheme'),
        'render_callback' => 'render_my_custom_block',
        'category'    => 'widgets',
        'icon'        => 'smiley',
        'supports'    => array(
            'align' => true,
            'html'  => false,
        ),
        'attributes' => array(
            'content' => array(
                'type' => 'string',
                'default' => 'Nội dung mặc định của block',
            ),
        ),
    ));
}
add_action('init', 'my_custom_block');

function render_my_custom_block($attributes) {
    return '
' . esc_html($attributes['content']) . '
';
}

Mã trên đăng ký block mới và sử dụng render_callback để render nội dung bằng PHP. Đây là cách tối ưu nhất để tạo block động hoặc block có logic server-side.

Thêm Block Vào Bài Viết

Sau khi đăng ký block, bạn có thể sử dụng nó trong trình soạn thảo Gutenberg:

  1. Vào Bài viết → Thêm mới.
  2. Tìm block theo tên đã khai báo.
  3. Chèn block và nhập nội dung.
  4. Lưu hoặc xuất bản bài viết.

Block sẽ hiển thị theo đúng HTML mà bạn render từ PHP.

Tùy Biến Block Bằng Thuộc Tính (Attributes)

Bạn có thể cho phép người dùng thay đổi nội dung, màu sắc, kích thước,… bằng cách khai báo thêm thuộc tính.


'attributes' => array(
    'content' => array(
        'type' => 'string',
        'default' => 'Nội dung mặc định',
    ),
    'color' => array(
        'type' => 'string',
        'default' => '#000000',
    ),
),

Thuộc tính này có thể được sử dụng bên trong hàm render:


function render_my_custom_block($attributes) {
    $color = esc_attr($attributes['color']);
    return '
' . esc_html($attributes['content']) . '
';
}

Thêm JavaScript Để Tạo Block Editor UI

Nếu bạn muốn block có giao diện chỉnh sửa trong editor, bạn cần thêm file JS:


function my_custom_block_scripts() {
    wp_enqueue_script(
        'my-custom-block-editor',
        plugins_url('block.js', __FILE__),
        array('wp-blocks', 'wp-element', 'wp-editor'),
        true
    );
}
add_action('enqueue_block_editor_assets', 'my_custom_block_scripts');

Điều này giúp block tùy chỉnh hiển thị sinh động, dễ sử dụng và thân thiện với người dùng.

Kiểm Tra Và Bảo Trì Block

  • Kiểm tra block trong nhiều trình duyệt.
  • Đảm bảo block không gây lỗi khi theme thay đổi.
  • Cập nhật block khi WordPress phát hành phiên bản mới.

Kết Luận

Tạo và render block WordPress bằng PHP là kỹ thuật quan trọng giúp bạn xây dựng theme, plugin và giao diện tùy chỉnh mạnh mẽ. Khi nắm vững cách sử dụng register_block_type kết hợp với render_callback, bạn có thể tạo ra những block động, linh hoạt và tối ưu SEO. Hãy bắt đầu áp dụng ngay để nâng cấp chất lượng website WordPress của bạn!