Cách thêm Guest Author cho WordPress bằng MetaBox (P1)

Cách-thêm-guest-author-cho-wordpress-bằng-metabox

Guest Author là một loại tài khoản giúp khách truy cập website đăng bài dễ dàng mà không cần tài khoản admin. Việc này sẽ giúp bạn có thêm nhiều bài đăng hơn, làm phong phú thêm nội dung cho website của bạn. Xuất phát từ nhu cầu của một khách hàng, mình thấy thêm tính năng này vào web khá là hay, nên muốn chia sẻ cho các bạn cách làm.

Vị khách của mình có yêu cầu như này:

  1. Người dùng (guest user) khi vào website có thể đăng kí và chỉnh sửa thông tin tài khoản ở Frontend để tạo thành một tài khoản Guest Author;
  2. Sau khi đăng ký, Guest Author được quyền đăng bài lên website;
  3. Các bài viết của Guest Author cần phải được kiểm duyệt;
  4. Guest Author có thể xem danh sách các bài viết của mình, ngoài ra có thể chỉnh sửa các bài chưa duyệt.

Mình sẽ hướng dẫn các bạn thực hiện các yêu cầu trên trong 2 bài viết. Bài đầu tiên này, mình sẽ làm yêu cầu số 1 và 2. Phần còn lại, các bạn theo dõi tiếp ở bài số 2 nhé.

Chuẩn bị

Để thực hiện cả 4 yêu cầu trên, mình sẽ sử dụng đồng thời plugin Meta Box và 3 extension của Meta Box như sau:

  • Meta Box: framework để tạo custom fields
  • Meta Box Builder (premium): giúp tạo custom fields với UI trực quan. Cái này không bắt buộc.
  • MB User Profile (premium): cho phép tạo form đăng ký, đăng nhập, quản lý tài khoản ở ngoài frontend.
  • MB Frontend Submission (premium): giúp người dùng có thể đăng bài ở Frontend.

Bây giờ, cùng mình thao tác theo hướng dẫn dưới đây nhé.

1. Tạo trang đăng ký và quản lý tài khoản ở frontend

Bước 1: Mở chức năng đăng ký và đăng nhập cho Guest Author

Việc mở chức năng đăng ký và đăng nhập này khá đơn giản. Trong giao diện Admin Dashboard, bạn hãy vào menu Settings > General, và đánh dấu tích vào ô Anyone can register ở mục Membership nhé.

Cho phép đăng ký

Cho phép đăng ký

Tiếp theo, ở mục New User Default Role bạn nên chọn là Subscriber để giới hạn người dùng đăng ký mới sẽ có quyền hạn với vai trò là một subscriber thôi.

Lúc này, khi vào trang đăng nhập WordPress (URL là yourdomain.com/wp-login), bạn sẽ thấy mục Register hiển thị ra.

Có thêm mục đăng ký trên WordPress

Có thêm mục đăng ký trên WordPress

Bạn click vào Register thì sẽ được chuyển qua trang đăng ký tài khoản.

Bước 2: Tạo các trường thông tin cho tài khoản của user

Ở bước này, mình sẽ dùng đến MB User Profile của Meta Box để tạo các trường thông tin tài khoản có thể chỉnh sửa được từ frontend.

Đầu tiên, mình tạo một custom field group mới (custom meta box) bằng cách tìm đến menu Meta Box > Custom Fields > Add New từ trong giao diện admin dashboard.

Tạo custom field group (hay còn gọi là custom meta box)

Tạo custom field group (hay còn gọi là custom meta box)

Mình đặt ID cho field group này là user-profile. Sau đó, tạo các trường thông tin cần thiết cho một tài khoản như: họ, tên, giới thiệu ngắn.

Tất cả các trường trên đều hạng text, nên mình sẽ tạo text field cho họ, và tên, còn giới thiệu ngắn thì là textarea field. ID của các field này lần lượt là: first_name, last_name, description.

Tạo các trường thông tin cho User Profile

Tạo các trường thông tin cho User Profile

Nếu bạn muốn bổ sung các thông tin khác như ảnh avatar, chức danh,… thì bạn chỉ cần tạo thêm field tương ứng là được nhé.

Bạn xem chi tiết hướng dẫn các field cơ bản tại đây nhé.

Sau khi tạo xong các field cần thiết, vẫn trong giao diện Edit Field Group, bạn chọn tab Settings, và chọn Users ở mục Show for nhé.

Cài đặt để các custom fields sẽ hiển thị trong tài khoản của Users

Cài đặt để các custom fields sẽ hiển thị trong tài khoản của Users

Cuối cùng, bạn nhấn Publish để lưu các cài đặt này lại nhé.

Bước 3: Tạo trang “Thông tin tài khoản” của người dùng ở frontend

Trang thông tin tài khoản là trang cho phép người dùng cập nhật, chỉnh sửa và quản lý các thông tin về tài khoản cá nhân của mình trên website.

3.1. Tạo template cho trang Thông tin tài khoản của User

Đầu tiên, bạn tạo một file mới trong thư mục theme với tên là page-account.php và chứa nội dung khai báo như sau:

<?php
/*
*      Template Name: My Account
*/
?>

Ngoài ra, bạn hãy thêm đoạn code dưới đây vào file nhé:

<?php if ( !is_user_logged_in() ) {
       auth_redirect();
} ?>

Đoạn code này có ý nghĩa rằng nếu như người dùng chưa đăng nhập tài khoản nào, thì khi vào trang quản lý thông tin tài khoản, họ sẽ được redirect đến trang đăng nhập.

3.2. Tạo trang My account ngoài frontend để làm trang thông tin tài khoản

Quay trở lại giao diện admin dashboard, bạn tìm đến menu Page > Add New để tạo một trang mới cho website.

Tạo một trang mới cho website

Tạo một trang mới cho website

Mình đặt tên trang này là “My Account”. Trong phần chỉnh sửa nội dung trang này, ở mục Page Attributes > Template ở khu vực sidebar bên phải, bạn chọn loại template tên là My Account mà mình đã tạo ở bước 3.1 nhé.

Chọn template cho trang

Chọn template cho trang

Bạn hãy lưu trang lại.

3.3. Hiển thị nội dung và các field cần thiết lên trang My Account

Bạn lại mở file page-account.php trong thư mục theme ra, thêm hàm the_content() vào sau phần get_header() và trước get_footer().

Bạn có thể tham khảo đoạn code sau của mình (mình sử dụng theme mặc định là Twenty Seventeen):

Quay lại giao diện chỉnh sửa nội dung trang My Account trong phần admin, bạn thêm đoạn shortcode sau vào:

[mb_user_profile_info id="user-profile" label_submit="Update"]
Thêm shortcode để hiển thị các field ra trang My Account

Thêm shortcode để hiển thị các field ra trang My Account

Trong đó:

  • mb_user_profile_info: Shortcode hiển thị form chỉnh sửa thông tin user;
  • id: ID của Custom Field Group;
  • label_submit: đoạn text hiển thị cho nút submit. Ở đây, mình đặt tên nút này là “Update”.

Ngoài ra, còn có nhiều thông số khác của shortcode được tạo bởi MB User Profile. Bạn có thể tìm hiểu thêm tại đây để áp dụng nhé.

Bạn hãy lưu lại chỉnh sửa, và truy cập vào trang My Account ở ngoài frontend, bạn sẽ thấy kết quả giống của mình như này:

Giao diện trang My Account

Giao diện trang My Account

Nếu bạn muốn người dùng được phép thay đổi password (mật khẩu) ngay tại trang My Account này, thì bạn thêm đoạn shortcode dưới đây vào phần nội dung của trang My Account nữa nhé:

[mb_user_profile_info id="rwmb-user-info"]

Vậy là bạn đã hoàn thiện trang quản lý thông tin tài khoản cho user ở frontend rồi đó.

2. Cho phép người dùng đăng bài từ frontend

Cách làm để cho phép người dùng đăng bài viết từ frontend cũng giống như với cách làm để cho phép người dùng đăng các tin rao vặt mà mình đã hướng dẫn ở bài “Cách dùng Meta Box để tạo trang tin rao vặt”.

Bước 1: Tạo Custom Fields Group

Tương tự như tạo field group cho trang thông tin tài khoản, mình tạo một field group mới như sau:

Tạo field group mới

Tạo field group mới

Ở đây, các trường thông tin mà user sẽ sử dụng đăng bài chỉ có tiêu đề và nội dung bài viết, nên mình không tạo thêm custom field bên trong field group này. Nếu bạn cần thêm các trường thông tin khác khác để Guest Author nhập thì bạn tạo thêm các field mới tương tự như đã hướng dẫn ở các bước trước nhé.

Lúc này, ở trang danh sách các field group (Meta Box > Custom Fields) bạn sẽ thấy đoạn shortcode của field group bạn vừa tạo.

Shortcode của field group

Shortcode của field group

Bạn copy đoạn shortcode trên và lưu lại nhé.

Bước 2: Tạo trang đăng bài viết ngoài frontend

Bạn tạo một page mới bằng cách vào Page > Add New. Sau đó dán đoạn shortcode đã copy ở trên vào phần nội dung của trang này.

Tạo trang đăng bài viết

Tạo trang đăng bài viết

Lưu trang này lại. Lúc này, bạn truy cập vào trang đăng bài ngoài frontend sẽ thấy kết quả như sau:

Trang đăng bài viết ngoài frontend

Trang đăng bài viết ngoài frontend

Bước 3: Tạo layout cho trang và yêu cầu đăng nhập khi đăng bài

Trang đăng bài có layout giống như trang My Account và cũng cần người dùng đăng nhập trước khi truy cập. Vì vậy, mình cũng làm tương tự như với trang My Account như sau:

Tạo file page-publish.php trong thư mục theme với nội dung y hệt như file page-account.php nhưng thay tên template thành “Publish Post” như sau:

<?php
/*
*      Template Name: Publish Post
*/

?>
<?php if ( !is_user_logged_in() ) {
       auth_redirect();
} ?>

Toàn bộ đoạn code của trang đăng bài của mình như sau:

Sau đó quay trở lại phần chỉnh sửa trang đăng bài viết, chọn template ở mục Page Attributes Publish Post.

Tạo giao diện cho trang Publish Post

Tạo giao diện cho trang Publish Post

Lúc này, bạn đã hoàn thành xong trang đăng bài viết từ frontend rồi nhé.

Lời cuối

Vậy là chúng ta đã cùng nhau tạo xong 2 trang là My Account và trang đăng bài viết cho Guest Author sử dụng rồi. Bạn lưu ý là để làm được tất cả những thao tác như trên đây, thì bạn cần phải cài đặt đầy đủ 3 extension của Meta Box nhé. Đặc biệt, có một số bước bạn thấy mình tạo custom fields khá là đơn giản, thì đó là nhờ vào Meta Box Builder đó. Nếu bạn ngại động vào code, thì nên dùng plugin này nhé.

Tất cả các plugin này sẽ được sử dụng tiếp cho phần 2 (bài viết tiếp sau đây) để làm thêm tính năng số 3 và 4 cho Guest Author, đó là kiểm duyệt bài viết, quản lý và chỉnh sửa bài viết từ frontend.

Các bạn nhớ theo dõi phần tiếp theo nhé!

Gửi phản hồi