Hướng dẫn setup cây phả hệ – WordPress Flatsome

Mục tiêu là làm cái view cho sơ đồ phả hệ dòng họ, phân biệt rõ ràng parent/ children. Có link cho single hoặc không.

Mình search trên mạng thấy một số đoạn code mẫu, có cả html/ css hoặc thư viện javascript, tuy nhiên đều ko ưng ý vì xấu hoặc quá phức tạp để setup, ko phù hợp với người việt.
Vì vậy mình viết element này cho anh em tiện setup hơn.

• Nguyên mẫu : Link, Link
• Only flatsome vì css/js được build dựa trên base của flatsome

Bài hướng dẫn bao gồm 3 phần.

I. Khai báo dữ liệu

Là post type như page/ post, Cần được phân chia theo cha/ con rõ ràng, Anh em có thể tạo một post type mới bằng cách viết code hoặc dùng plugin.

Kiểu thế này,

Đây là link mà mình setup. post_type ở đây là “pha_he”. bạn cần nhập cái này vào element ở phần 2 của bài viết

https://flatsome.local/wp-admin/edit.php?post_type=pha_he

II. Element

Element có tên là “Family Tree”

post_type: nhập post_type vào đây. mặc định là page

parent_id: Id của 1 parent mà bạn chỉ định. nó sẽ lấy bắt đầu từ item này.
include parent first: Có gọi luôn parent này vào làm item trên cùng hay ko.
Max level: Số hàng tối đa mà sơ đồ gọi ra. Ví dụ là 3 cấp. Mặc định là ko giới hạn.

III. Custom

Theo mặc định, sơ đồ chỉ gọi mỗi tên ra thôi.
Các thuộc tính khác có thể kể đến như: tên tự, ngày mất, … mà bạn muốn thêm vào thì trước tiên bạn cần khai báo meta cho nó. Có thể là post meta hoặc taxonomy gì đó, dùng ACF hoặc tự code. Sau đó gọi ra bằng hook.

đây là code mẫu, bạn có thể đặt trong file functions.php

Đứng trên name

add_action( 'adminz_family_tree_before_name', function ($item) {
echo "<div><small>[id:" . ( $item['id'] ) . "]</small></div>";
echo "<div><small>[parent:" . ( $item['parent'] ) . "]</small></div>";
}, 10, 1 );

Đứng dưới name

add_action( 'adminz_family_tree_after_name', function ($item) {
echo "<div><small>[level:" . ( $item['level'] ) . "]</small></div>";
echo "<div><small>[children:" . ( $item['children'] ) . "]</small></div>";
echo "<div><small>[fixY:" . ( $item['fixY'] ) . "]</small></div>";
}, 10, 1 );

Filter hook cho name:

add_filter('adminz_family_tree_item_name', function($html){
return $html ."xxxx";
},10,1);

Quên mất. đây là link tải plugin