Thêm các trường thông tin cho thành viên trong WordPress

Thêm các trường thông tin cho thành viên trong WordPress

Mặc dù có nhiều Plugin có thể giúp bạn thực hiện việc thêm các trường (field) vào cho mục thành viên, tuy nhiên bạn vẫn nên hạn chế sử dụng Plugin ở mức nhiều nhất có thể. Nếu không sử dụng Plugin thì làm thế nào để thêm các trường vào trong mục thành viên? dưới đây là một chia sẻ của mình.

Một số trường mặc định của WordPress

Một số trường mặc định của WordPress

Một số trường mình thêm vào để người dùng thêm link mạng xã hội.

Một số trường mình thêm vào để người dùng thêm link mạng xã hội.

Hiển thị thêm trường trong mục người dùng của WordPress

Để làm việc này mình sẽ sử dụng các Hook Action user_profile. Nếu bạn chưa biết Hook là gì có thể tham khảo tại đây: Tìm hiểu về Action Hook, Filter Hook và cách sử dụng chúng trong WordPress

Đầu tiên bạn mở file fucntions.php và add thêm vào 2 hook như sau:

add_action( 'show_user_profile', 'social_fields' );
add_action( 'edit_user_profile', 'social_fields' );

Tại sao lại là 2 hook?, Cái hook show_user_profile nó chỉ móc vào cái trang của người dùng hiện tại đăng nhập thôi. Ví dụ mình vào phần user của mình sẽ thấy các trường mình add, còn vào của người ta thì không có. Để hiển thị tất cả thì bạn phải add thêm cái hook nữa đó là edit_user_profile.

social_fields là một hàm chứa các trường mà mình muốn add vào. Ví dụ về đoạn code của mình.

function social_fields( $user ) { ?>

  <h3>Link mạng xã hội</h3>
   <table class="form-table">
     <tbody>
       <tr>
         <th><label for="facebook">Facebook</label></th>
         <td>
           <input type="text" name="facebook" id="facebook" value="<?php echo esc_attr( get_the_author_meta( 'facebook', $user->ID ) ); ?>" class="regular-text" /><br />
           <span class="description">Nhập link trang cá nhân Facebook.</span>
         </td>
      </tr>
 
      <tr>
        <th><label for="twitter">Twitter</label></th>
        <td>
          <input type="text" name="twitter" id="twitter" value="<?php echo esc_attr( get_the_author_meta( 'twitter', $user->ID ) ); ?>" class="regular-text" /><br />
          <span class="description">Nhập link trang cá nhân Twitter.</span>
        </td>
     </tr>
 
     <tr>
       <th><label for="pinterest">Pinterest</label></th>
       <td>
         <input type="text" name="pinterest" id="pinterest" value="<?php echo esc_attr( get_the_author_meta( 'pinterest', $user->ID ) ); ?>" class="regular-text" /><br />
         <span class="description">Nhập link trang cá nhân Pinterest.</span>
       </td>
     </tr>
 
     <tr>
       <th><label for="youtube">Youtube</label></th>
       <td>
         <input type="text" name="youtube" id="youtube" value="<?php echo esc_attr( get_the_author_meta( 'youtube', $user->ID ) ); ?>" class="regular-text" /><br />
         <span class="description">Nhập link trang cá nhân Youtube.</span>
       </td>
     </tr>
 
     <tr>
       <th><label for="linkedin">Linkedin</label></th>
       <td>
         <input type="text" name="linkedin" id="linkedin" value="<?php echo esc_attr( get_the_author_meta( 'linkedin', $user->ID ) ); ?>" class="regular-text" /><br />
         <span class="description">Nhập link trang cá nhân Linkedin.</span>
       </td>
     </tr>

 <tbody>
 </table>
<?php }

Bạn lưu ý là hàm này mình có cho truyền vào một biến $user, biến này sẽ dùng trong câu lệnh echo esc_attr( get_the_author_meta( ‘name-fields’, $user->ID ) ); để lấy ra giá trị đã lưu. Nếu bạn không làm như thế này thì sau khi lưu bạn sẽ không thấy value của các trường được hiển thị nữa vì bạn không lấy. Các name-fields đó chính là cái tên của trường, bạn phải nhập chính xác với tên trường để nó lấy dữ liệu lên chính xác nhé. Cái hàm esc_attr là một hàm để mình loại bỏ các ký tự không cần thiết để không bị hỏng cấu trúc HTML thôi.

Về cấu trúc thì các bạn có thể Design tùy ý nhưng phải làm sao để nó phù hợp với giao diện của WP-Admin. bạn cũng nên chú ý để tên và id cho các trường này tránh trùng lặp với các name meta của WP hay Plugin khác nhé. Khuyên bạn là nên thêm tiền tố cho nó, chẳng hạn như fu_facebook…

Bây giờ bạn có thể thấy các trường này hiển thị trong mục thành viên rồi đấy. Việc tiếp theo là lưu nó xuống cơ sở dữ liệu khi nhấn cập nhật.

Lưu các trường mới thêm trong mục người dùng của WordPress

Để lưu các trường này xuống cơ sở dữ liệu bạn cũng cần sử dụng 2 hook như personal_options_update và edit_user_profile_update tương tự như 2 hook trên thì nếu bạn chỉ sử dụng hook personal_options_update thì bạn chỉ có thể update được cái của mình thôi, còn nếu sử dụng thêm edit_user_profile_update thì bạn có thể update được cho người khác nữa. Ở đây mình dùng cả 2.

add_action( 'personal_options_update', 'save_social_fields' );
add_action( 'edit_user_profile_update', 'save_social_fields' );

function save_social_fields( $user_id ) {

if ( !current_user_can( 'edit_user', $user_id ) )
  return false;
  update_usermeta( $user_id, 'facebook', $_POST['facebook'] );
  update_usermeta( $user_id, 'twitter', $_POST['twitter'] );
  update_usermeta( $user_id, 'pinterest', $_POST['pinterest'] );
  update_usermeta( $user_id, 'youtube', $_POST['youtube'] );
  update_usermeta( $user_id, 'linkedin', $_POST['linkedin'] );
}

Với hàm này bạn cần kiểm tra liệu người dùng này có quyền edit user hay không bằng cách sử dụng hàm current_user_can. nếu không có quyền thì trả về kết quả là false để dừng lại. còn nếu có thì tiếp tục sử dụng hàm update_usermeta để truyền các giá trị vào. Ở đây bạn cần truyền 3 tham số là id người dùng, metaname là tên và id của input, và biến Post lấy name của input. Biến $user_id nó sẽ tự lấy nhé.

Hiển thị các trường đã thêm

Các trường này sau khi lưu sẽ được lưu vào trong bảng usermeta của WordPress. Vì vậy nên để lấy nó ra bạn cần dùng hàm the_author_meta(). trền cái tên meta và id user cần lấy là được.

<?php the_author_meta( 'facebook', $id_user );?>

Chúc bạn thành công.

Các bài liên quan

Tuấn ĐC

Tuấn ĐC

Tôi thích tự do, làm những gì mình thích, thích đi nhiều nơi và học được nhiều thứ.

Liên hết bài viết: ""