Hiển thị danh sách người dùng trên frontend với plugin Meta Box

Khi sử dụng WordPress chắc bạn cũng đã biết đến việc quản lý danh sách người dùng ở Admin panel. Đây cũng là một trong những nhu cầu được nhiều người quan tâm. Nhất là nhu cầu hiển thị người dùng chỉ khi người dùng đó muốn công khai tài khoản của mình.

Vậy nên hôm nay, mình sẽ hướng dẫn các bạn cách hiển thị danh sách các User trong WordPress ra Frontend với plugin Meta Box và cài đặt chỉ hiển thị các tài khoản được người dùng đó cho phép, đồng thời ẩn những tài khoản mà người dùng không muốn công khai.

Chuẩn bị

Để có thể thực hiện việc hiển thị danh sách người dùng trên frontend và cài đặt chỉ hiển thị khi được người dùng cho phép, chúng ta cần các công cụ sau:

  1. Meta Box: Đây là một plugin WordPress miễn phí cung cấp framework để tạo các custom field, vậy nên bạn chắc chắn cần dùng nó nhé. Hãy tải về plugin Meta Box trên WordPress.org.
  2. Meta Box Builder: Đây là một extension cao cấp trả phí của Meta Box. Nó cung cấp cho bạn một tính năng cao cấp đó là tạo custom field bằng giao diện người dùng (UI) trực quan với các thao tác kéo thả dễ dàng trong backend. Nếu bạn có thể code để tạo custom field thì bỏ qua extension này cũng được nhé. Tuy nhiên, có một công cụ hoàn toàn miễn phí nếu bạn vẫn muốn sử dụng UI, đó là Online Generator của Meta Box.
  3. DataTables: Là một thư viện sử dụng jQuery nhằm bổ sung các tính năng nâng cao vào table trong html. Nó sẽ giúp bạn hiển thị và tạo các chức năng với table dễ dàng hơn.

Thực hiện hiển thị danh sách user trên frontend với plugin Meta Box

Bước 1: Tạo field mới để người dùng chọn chế độ hiển thị tài khoản

Để tạo một trang danh sách user chỉ bao gồm những tài khoản được người dùng đồng ý công khai, minh cần tạo một trường thông tin để người dùng đó chỉnh sửa tài khoản của họ là đặt ở chế độ riêng tư hay công khai. Vì vậy, mình sẽ dùng Meta Box để tạo trường thông tin này.

Đầu tiên, vào Meta Box / Add new để tạo field group mới. Sau đó ở mục Basic, bạn chọn loại field là Radio.

Tạo một field mới trong plugin Meta Box
Tạo một field mới cho phép người dùng cài đặt tài khoản ở chế độ riêng tư hoặc công khai

Bạn thấy đấy, ở phần Choices mình đưa ra 2 lựa chọn là Yes / No, tương ứng với việc Publish / không Publish tài khoản. Đồng thời, mình đặt Default value của trường này là Yes. Mình cũng đặt tên cho field này là Publish or not? (mình sẽ sử dụng tên này để chỉ field này ở các phần tiếp theo). Cái này thì bạn cứ tùy chỉnh theo yêu cầu của bản thân cho phù hợp.

Tiếp theo, bạn chuyển qua tab Settings và chọn giá trị cho mục Show ForUser để field group này được hiển thị trong trang User.

Cài đặt plugin Meta Box để custom field được hiển thị trong phần User
Cài đặt để custom field được hiển thị trong phần User

Bây giờ, hãy lưu lại và đến trang User để kiểm tra kết quả nhé. Nếu bạn thực hiện đúng thì sẽ thấy custom field mới hiển thị như sau:

Một custom field mới của Meta Box được hiển thị.

Ngoài ra, cũng bằng cách này, bạn có thể tạo thêm các trường thông tin khác nữa cho user đấy. Ví dụ:

Dùng plugin Meta Box để tạo thêm các trường thông tin khác cho user.
Tạo custom field cho người dùng điền thêm thông tin

Bước 2: Tạo mới một trang trống ngoài frontend

Ở bước này mình sẽ tạo một trang mới ở ngoài frontend với nội dung trắng (chưa đưa danh sách người dùng vào). Đồng thời mình sẽ tạo cho nó một template riêng.

Đầu tiên, bạn đi đến thư mục theme, tạo 1 file mới tên là users-listing-page.php và add đoạn code sau vào.

<?php
/*
* Template Name:  Users Listing Page
*/
?>
<?php get_header(); ?>
<h1>Users List</h1>
<table id="Userslist">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
<tbody>
           </tbody>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
</table>
<?php get_footer(); ?>

Tiếp theo, vào Page / Add new và tạo một trang mới có tiêu đề là Users List. Trong phần Settings của trang này, ở mục Template của Page Attributes, chọn Users Listing Page. Đây chính là Template Name mà mình đã tạo cho file ở trên đấy.

Tạo trang danh sách người dùng bằng Meta Box
Tạo trang danh sách người dùng Users List

Bước 3: Import thư viện và file JavaScript vào website

Trước tiên hãy import thư viện DataTables đã chuẩn bị từ bước 1. Ở đây mình không download về mà dùng trực tiếp bằng CDN trên jsDelivr cho nhanh gọn.

Để import thư viện và file script, các bạn mở file functions.php và thêm đoạn code sau vào:

function libs_import() {
          	wp_enqueue_style( 'datatable-style', 'https://cdn.jsdelivr.net/npm/[email protected]/media/css/jquery.dataTables.min.css', '1.10.18', true );
          	wp_enqueue_script( 'datatable-script', 'https://cdn.jsdelivr.net/npm/[email protected]/media/js/jquery.dataTables.min.js', array( 'jquery' ) );
wp_enqueue_script( theme-script', get_template_directory_uri() . '/js/script.js' );
}
add_action( 'wp_enqueue_scripts', 'libs_import' );

Tiếp theo, bạn hãy tạo một file script.js trong thư mục js của theme để viết JavaScript cho theme.

Bước 4: Hiển thị danh sách user ra frontend

Bây giờ các bạn hãy mở file users-listing-page.php mà chúng ta vừa tạo ở bước 2 và thực hiện thao tác như sau:

Bạn dùng hàm sau để lấy dữ liệu users với điều kiện là field Publish or not? (ID là publish_account) phải có giá trị là yes:

$users = get_users(array(
	'meta_key' 	=> publish_account',
	'meta_value'   => 'yes'
));

Tiếp đó, chúng ta sử dụng vòng lặp foreach để lấy các thông tin user và output ra HTML, thêm đoạn code sau vào thẻ <tbody>.

<?php
foreach ($users as $user) { $user_id = $user->ID; ?>
           <tr>
                   <td><?php echo $user->display_name; ?></td>
                   <td><?php echo rwmb_meta( 'position', array( 'object_type' => 'user' ), $user_id ); ?></td>
                   <td><?php echo rwmb_meta( 'office', array( 'object_type' => 'user' ), $user_id ); ?></td>
                   <td><?php echo rwmb_meta( 'age', array( 'object_type' => 'user' ), $user_id ); ?></td>
                   <td><?php echo rwmb_meta( 'start_date', array( 'object_type' => 'user' ), $user_id ); ?></td>
                   <td>$<?php echo number_format(rwmb_meta( 'salary', array( 'object_type' => 'user' ), $user_id ),3,",","."); ?></td>
 </tr>
<?php } ?>

Trong đó:

  • $user_id = $user->ID: lấy giá trị user ID và gán vào biến $user_id.
  • rwmb_meta( 'position', array( 'object_type' => 'user' ), $user_id ): lấy giá trị của field có ID là position từ user ID.

Bây giờ bạn sẽ thấy danh sách người dùng được hiển thị bên ngoài frontend như sau:

Danh sách người dùng được hiển thị bên ngoài frontend .

Có một vấn đề là danh sách của mình chỉ có dưới 100 người dùng thôi nhưng trông đã khá là dài. Nếu số lượng người dùng trên website của bạn nhiều hơn thế rất nhiều thì bạn sẽ không thể hiển thị nó chỉ trong một trang như thế này. Đó chính là lý do mà mình cần sử dụng thư viện DataTables vì công cụ này sẽ giúp mình phân trang, sắp xếp, và tìm kiếm các dữ liệu trong bảng một cách dễ dàng hơn.

Để sử dụng thư viện này, các bạn mở file script.js và thêm đoạn code sau vào:

$(document).ready(function() {
    $('#Userslist').DataTable();
} );

Trong đó: #Userslist là ID của table mình đã tạo từ file users-listing-page.php trước đó. Các bạn chỉ cần thay ID tương ứng của bạn khi cài đặt phần này nhé.

Để không cần phải thiết lập thêm nhiều, mình dùng datatable với dạng Zero configuration.

Ngoài ra còn nhiều lựa chọn tùy biến khác. Các bạn có thể tham khảo thêm thư viện tại đây để tùy chỉnh theo nhu cầu của bản thân nhé!

Và đây là kết quả cuối cùng:

Thành quả khi tạo List User thành công.

Bạn có thể tham khảo full source code tại đây:

https://github.com/wpmetabox/tutorials/tree/master/list-users

Kết luận

Bây giờ bạn đã có thể hiển thị danh sách user ra frontend với sự hỗ trợ của plugin Meta Box, extension Meta Box Builder và Datatable jQuery rồi. Các thao tác cũng không hề phức tạp nếu như các bạn bám sát các bước mình đã chỉ đúng không?

Ngoài ra, Meta Box còn có rất nhiều ứng dụng khác nữa, các bạn có thể vào đây để tìm hiểu thêm công dụng của plugin này trong việc xây dựng các tính năng hữu ích cho website nhé.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *