Giới thiệu về Advanced Custom Fields và Block

Advanced Custom Fields (ACF) là một plugin phổ biến trong WordPress giúp người dùng mở rộng khả năng tùy chỉnh nội dung một cách dễ dàng. Một trong những tính năng nổi bật của ACF là khả năng tạo ra các block tuỳ chỉnh, cho phép bạn thêm nội dung phong phú vào các bài viết và trang. Trong bài viết này, chúng ta sẽ hướng dẫn tích hợp block với ACF, giúp bạn tận dụng tối đa tính năng này trong dự án WordPress của mình.

Cài đặt Advanced Custom Fields

Trước khi bắt đầu, bạn cần cài đặt plugin ACF. Bạn có thể làm theo các bước sau:

1. Đăng nhập vào trang quản trị WordPress.
2. Đi đến phần Plugins và chọn Add New.
3. Tìm kiếm Advanced Custom Fields trong ô tìm kiếm.
4. Cài đặt và kích hoạt plugin.

Tạo Custom Block với ACF

Bây giờ bạn đã cài đặt ACF, chúng ta sẽ bắt đầu tạo một block tùy chỉnh.

1. Đi đến Custom Fields trong menu quản trị.
2. Chọn Add New để tạo một nhóm trường mới.
3. Đặt tên cho nhóm trường, ví dụ: My Custom Block.
4. Thêm các trường mà bạn muốn sử dụng trong block của mình, ví dụ: trường văn bản, hình ảnh, hoặc màu sắc.
5. Dưới phần Location, chọn Block và sau đó chọn tên block mà bạn sẽ tạo.

Đăng ký Block trong theme

Bước tiếp theo là đăng ký block trong theme của bạn. Bạn sẽ cần thêm một số mã vào file functions.php của theme.

function my_acf_block_init() {

    // Đăng ký block

    acf_register_block_type(array(

        'name'              => 'my-custom-block',

        'title'             => __('My Custom Block'),

        'description'       => __('A custom block that does something special.'),

        'render_template'   => 'template-parts/blocks/my-custom-block.php',

        'category'          => 'formatting',

        'icon'              => 'block-default',

        'keywords'          => array('custom', 'block'),

    ));

}

add_action('acf/init', 'my_acf_block_init');

Mã trên sẽ đăng ký một block mới với tên là my-custom-block. Bạn cần điều chỉnh tên block và đường dẫn đến file template cho phù hợp với dự án của mình.

Tạo Template cho Block

Bạn sẽ cần tạo một file template cho block của mình. Tạo một file mới với tên my-custom-block.php trong thư mục template-parts/blocks của theme. Trong file này, bạn sẽ viết mã HTML và PHP để hiển thị nội dung của block.

    <?php if( have_rows('my_custom_block_fields') ): ?>

        <?php while( have_rows('my_custom_block_fields') ) : the_row(); ?>

            <h2><?php the_sub_field('title'); ?></h2>

            <p><?php the_sub_field('description'); ?></p>

        <?php endwhile; ?>

    <?php endif; ?>

Bạn có thể tùy chỉnh mã này để phù hợp với các trường mà bạn đã tạo trong ACF.

Kiểm tra và Sử dụng Block

Sau khi hoàn thành các bước trên, bạn có thể kiểm tra xem block của mình đã hoạt động chưa bằng cách:

1. Đi đến phần Pages hoặc Posts trong trang quản trị.
2. Chọn Add New để thêm một trang hoặc bài viết mới.
3. Trong trình dựng block, tìm đến block của bạn (my-custom-block) và thêm nó vào nội dung.
4. Điền các thông tin cần thiết cho các trường mà bạn đã tạo trong ACF.
5. Lưu và xem trước trang hoặc bài viết để kiểm tra kết quả.

Các tính năng mở rộng

ACF cho phép bạn mở rộng nhiều tính năng hơn nữa cho các block của mình. Bạn có thể sử dụng các filter và action hooks của WordPress để tùy chỉnh hơn nữa cách mà block hoạt động. Một số ý tưởng để mở rộng tính năng bao gồm:

• Thêm các yếu tố tương tác như nút bấm hoặc hình ảnh động.
• Tùy chỉnh các kiểu hiển thị dựa trên điều kiện cụ thể.
• Sử dụng JavaScript để nâng cao trải nghiệm người dùng trên giao diện.

Kết luận

Việc tích hợp block với Advanced Custom Fields trong WordPress là một cách tuyệt vời để làm cho nội dung của bạn trở nên phong phú và linh hoạt hơn. Với các bước hướng dẫn trên, bạn có thể dễ dàng tạo ra các block tùy chỉnh mà không cần quá nhiều kiến thức lập trình. Hy vọng rằng bài viết này sẽ giúp bạn khởi đầu tốt trong việc sử dụng ACF để tùy biến nội dung trên trang web của mình.