Trở về

Custom Fields cho thông tin thành viên WordPress

bởi Vi Nè

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ể.

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.

Để làm việc này mình sẽ sử dụng các Hook Action user_profile. Đầu tiên bạn mở file functions.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' );

Giải thích:

  • 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. 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ó.
  • edit_user_profile để hiển thị tất cả.
  • 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 sau:

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 này xuống cơ sở dữ liệu bạn cũng cần sử dụng 2 hook như personal_options_update 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é.

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úng tôi tạm dừng chức năng bình luận, mọi thắc mắc vui lòng gửi thông qua mục liên hệ. Xin cám ơn!

Bài 5: Cách tạo comment trong Python

Bài 4: Cách khai báo biến trong Python

Bài 3: Cài đặt Intellij IDEA và chạy Hello World trong Python

Bài 2: Hướng dẫn download và cài đặt python trên Windows

Bài 5: Tìm hiểu về Props trong ReactJS

Bài 4: Components trong ReactJS

Bài 3: Giới thiệu JSX trong ReactJS

Bài 2: Cài đặt môi trường chạy ReactJS

Bài 18: Thuộc tính icon trong CSS

Các biểu tượng có thể dễ dàng được thêm vào trang HTML của b...

Bài 17: Thuộc tính box model trong CSS

Bài 16: Thuộc tính outline trong CSS

Bài 15: Thuộc tính Height/Width trong CSS

Chat Icon Close Icon