Hướng dẫn tạo nhóm các tuỳ chọn lồng nhau trong danh sách thả xuống với ACF

Ngày đăng: 30 - 12 - 2021 Lượt xem: 86 lượt

Danh sách thả xuống với nhóm các tùy chọn lồng nhau sử dụng <optgroup> là một tính năng cơ bản nhưng vẫn còn thiếu trong ACF.

Trong bài viết này, chúng ta sẽ tìm hiểu cách tạo và sử dụng chúng giống như hình dưới đây. Hãy cùng tìm hiểu nào!

kết quả tùy chọn lồng nhau danh sách thả xuống với acf

Định dạng lựa chọn tùy chọn lồng nhau trong danh sách thả xuống với ACF

các miền của tùy chọn lồng nhau trong danh sách thả xuống với acf

Cài đặt của Choices chỉ là một ô textarea đơn giản (được hiển thị như trên), vì vậy chúng ta cần định nghĩa lại để biết đâu là tiêu đề của nhóm các tuỳ chọn.

Đối với ví dụ này, dòng bắt đầu bằng # sẽ được chuyển thành tiêu đề của nhóm các tuỳ chọn.

Đây là cài đặt Choices của mình:

#America
us : United States
ca : Canada
mx : Mexico
#Europe
uk : United Kingdom
de : German
fr : France

Sử dụng ACF Hook

Những gì mình đang cố gắng đạt được là tạo một mảng lồng nhau bằng cách sử dụng tiêu đề của nhóm các tuỳ chọn. Sau đó truyền nó vào mảng choices.

// Đừng quên thay đổi giá trị của 'name'
add_filter('acf/prepare_field/name=country', 'acf_allow_optgroup');

function acf_allow_optgroup( $field ) {
  if( $field['ID'] === 0 ) { return $field; }

  $raw_choices = $field['choices'];
  $choices = [];

  $current_group = '';
  foreach( $raw_choices as $value => $label ) {

    // Nếu chữ cái đầu tiên bắt đầu bằng "#", chuyển nó thành tiêu đề
    if( preg_match( '/^#(.+)/', $label, $matches ) ) {
      $current_group = str_replace( '#', '', $label );
      $choices[ $current_group ] = [];
    }
    // Nếu tiêu đề đã được định nghĩa từ trước
    elseif( !empty( $current_group ) ) {
      $choices[ $current_group ][ $value ] = $label;
    }
    else {
      $choices[ $value ] = $label;
    }
  }

  $field['choices'] = $choices;
  return $field;
}

Vậy là bạn đã hoàn tất! Đừng quên thay đổi giá trị của các tuỳ trọng để phù hợp với trường của bạn.

Lời kết

Đây là một hướng dẫn nhỏ giúp bạn có thể dễ dàng tuỳ biến website của mình với ACF hơn.

Nếu các bạn thấy hay có thể theo dõi chuyên mục WordPress cơ bản để biết thêm nhiều kiến thức mới nha.

Hãy follow fanpage để nhận được những bài viết mới nhất nhé : Hocwordpress Group

0 0 votes
Đánh giá bài viết

guest
0 Góp ý
Inline Feedbacks
View all comments

Bài viết liên quan

Cách đặt hình ảnh đại diện mặc định trong WordPress

Cách đặt hình ảnh đại diện mặc định trong WordPress

08 - 05 - 2022

Bạn có muốn đặt hình ảnh đại diện mặc định trong WordPress không? Nhiều theme sử dụng hình ảnh đại...

Hiển thị ngày đăng ký của người dùng vào trang tất cả người dùng

Hiển thị ngày đăng ký của người dùng vào trang tất cả người dùng

06 - 05 - 2022

Giả sử rằng có một cuộc tấn công spam vào trang web của bạn. Có gần 50 người dùng...

Làm việc với DateTime trong WordPress

Làm việc với DateTime trong WordPress

04 - 05 - 2022

Một năm trước, mình phát triển một plugin liên quan đến thời gian biểu. Và mình sớm nhận ra...

Tạo form tìm kiếm bằng shortcode trong WordPress

Tạo form tìm kiếm bằng shortcode trong WordPress

02 - 05 - 2022

Bạn muốn thêm form tìm kiếm vào bài viết, trang, hoặc sidebar của website? Thêm form tìm kiếm vào nội...

Thêm cột ảnh đại diện trong trang quản trị danh sách bài viết

Thêm cột ảnh đại diện trong trang quản trị danh sách bài viết

28 - 04 - 2022

Bạn có muốn hiển thị ảnh đại diện ra ngoài trang danh sách bài viết không? Hôm nay mình sẽ...

Làm thế nào để chuyển hướng URL trong WordPress?

Làm thế nào để chuyển hướng URL trong WordPress?

20 - 04 - 2022

Chuyển hướng URL, là một cách để làm cho một đường dẫn có thể truy cập được dưới nhiều...

0
Would love your thoughts, please comment.x
()
x