Hướng Dẫn Tạo Danh Mục Sử Dụng Repeater Của ACF Qua Option Page

Trong trường hợp bạn muốn tạo danh mục động bằng cách sử dụng Repeater Field của Advanced Custom Fields (ACF) thông qua Option Page, dưới đây là hướng dẫn chi tiết.

Yêu Cầu:

Cài đặt và kích hoạt plugin Advanced Custom Fields (ACF Pro). => Plugin này mình sưu tập chứ không phải chính hãng nên bạn hãy cân nhắc trước khi dùng nha.
Kiến thức cơ bản về WordPress, PHP, và Shortcode.

Bước 1: Tạo Option Page Với ACF

Bước 2: Tạo Repeater Field Trong ACF

Vào Custom Fields → Add New.

Đặt tên cho nhóm field, ví dụ: Danh Mục Tùy Chỉnh.

Thêm một Repeater Field với các field con như sau:

Tên Field: custom_category

Field Type: Repeater

Trong Repeater Field, thêm các field con:

Xem thêm bài viết khác

Tên Field: category_name (Text)
Tên Field: category_link (URL)
Tên Field: category_image (Image)

Location: Chọn Options Page là “Danh Mục”

Nhấn Publish để lưu.

Mình đã Export phần JSON ra để bạn không cần làm theo các bước trên chỉ cần add file này vào Tools của ACF là được

Link JSON

Bước 3: Thêm danh mục trong Option Page

Bước 4: Hiển Thị Danh Mục bằng Shortcode

Để hiển thị danh mục đã tạo trên trang, bạn có thể sử dụng đoạn mã sau trong file functions.php

// Shortcode Show danh mục bằng ACF
//Author: https://tunlamweb.com/
function sc_tlw_category_home(){
 if ( have_rows('custom_category', 'option') ) : ?>
<div class="tlw-bg-category-list">
    <ul class="tlw-custom-category-list">
        <?php while ( have_rows('custom_category', 'option') ) : the_row(); 
            $category_name = get_sub_field('category_name');
            $category_link = get_sub_field('category_link');
            $category_image = get_sub_field('category_image');
        ?>
            <li class="custom-category-item">
                <a href="<?php echo esc_url($category_link); ?>">
                    <?php if ($category_image) : ?>
                        <img src="<?php echo esc_url($category_image['url']); ?>" alt="<?php echo esc_attr($category_name); ?>">
                    <?php endif; ?>
                    <h3><?php echo esc_html($category_name); ?></h3>
                </a>
            </li>
        <?php endwhile; ?>
    </ul>
</div>
<?php else : ?>
    <p>Không có danh mục nào được tạo.</p>
<?php endif; ?>
<style>
.tlw-bg-category-list {
    background: white;
    border-radius: 8px;
    padding: 0 10px;
}
.tlw-custom-category-list {
    list-style: none;
    padding: 0;
    overflow: auto;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.custom-category-item {
    text-align: center;
    width: 10%;
    margin-bottom: 1rem;
    margin-top: 1rem;
    margin-left: 0 !important;
}
.custom-category-item img {
    width: 9rem;
    height: auto;
	transition: 0.3s;
}
.custom-category-item:hover img {
   transform: scale(1.15);
}
.custom-category-item h3 {
    margin-top: 10px;
    font-size: 16px;
	font-weight:500;
}
/* 	CSS On Mobile - By Tunlamweb.com */
@media only screen and (max-width: 48em) {	
.tlw-custom-category-list {
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: row;
}
.custom-category-item {
	width: calc(100% / 4); // VD: ở mobile bạn muốn show cho 3 sp 1 hàng thì chia 100%/3
}
}
</style>
<?php
 }  
add_shortcode( 'sc_category_home', 'sc_tlw_category_home' );

// Shortcode Show danh mục bằng ACF

//Author: https://tunlamweb.com/

function sc_tlw_category_home(){

if ( have_rows('custom_category', 'option') ) : ?>

<?php while ( have_rows('custom_category', 'option') ) : the_row();

$category_name = get_sub_field('category_name');

$category_link = get_sub_field('category_link');

$category_image = get_sub_field('category_image');

<?php if ($category_image) : ?>

<?php endif; ?>

</a>

</li>

<?php endwhile; ?>

</ul>

</div>

<?php else : ?>

<p>Không có danh mục nào được tạo.</p>

<?php endif; ?>

<style>

.tlw-bg-category-list {

background: white;

border-radius: 8px;

padding: 0 10px;

}

.tlw-custom-category-list {

list-style: none;

padding: 0;

overflow: auto;

display: flex;

flex-wrap: nowrap;

justify-content: space-between;

}

.custom-category-item {

text-align: center;

width: 10%;

margin-bottom: 1rem;

margin-top: 1rem;

margin-left: 0 !important;

}

.custom-category-item img {

width: 9rem;

height: auto;

transition: 0.3s;

}

.custom-category-item:hover img {

transform: scale(1.15);

}

.custom-category-item h3 {

margin-top: 10px;

font-size: 16px;

font-weight:500;

}

/* CSS On Mobile - By Tunlamweb.com */

@media only screen and (max-width: 48em) {

.tlw-custom-category-list {

flex-wrap: wrap;

justify-content: space-between;

flex-direction: row;

}

.custom-category-item {

width: calc(100% / 4); // VD: ở mobile bạn muốn show cho 3 sp 1 hàng thì chia 100%/3

}

</style>

<?php

}

add_shortcode( 'sc_category_home', 'sc_tlw_category_home' );

Gắn shortcode vào bất cứ vị trí nào bạn muốn:

Giải Thích Mã:

have_rows('custom_category', 'option'): Kiểm tra nếu có dữ liệu trong Repeater Field tại Option Page.
get_sub_field('category_name'): Lấy giá trị của từng field con trong Repeater.
esc_url(), esc_html(), esc_attr(): Các hàm bảo mật để đảm bảo giá trị được hiển thị an toàn.
<img>: Hiển thị hình ảnh với URL và ALT text từ ACF.

Kết Luận

Với cách này, bạn có thể dễ dàng tạo danh mục tùy chỉnh qua ACF Repeater trên Option Page và hiển thị ở bất kỳ vị trí nào trên trang. Phương pháp này giúp bạn linh hoạt hơn trong việc quản lý nội dung mà không cần phải chỉnh sửa mã nguồn nhiều.

Nếu bạn gặp vấn đề hoặc cần thêm hỗ trợ, hãy cho mình biết nhé!