Trong mặc định WordPress có hỗ trợ bạn một số field nhập thông tin user như Username, Last Name, First Name, Nickname, Website, Biographical,..nhưng không phải field nào cũng được hiển thị ra bên ngoài để mọi người có thể thấy.
Thể theo yêu cầu, mình xin hướng dẫn bạn cách tạo một field thông tin tùy chọn cho user và lấy giá trị của field bất kỳ để hiển thị ra ngoài theme.
Cần xem trước: Hướng dẫn Filter
Trong bài này mình xin chia ra làm 3 bước chính như sau:
- Tạo ô nhập dữ liệu cho user và làm cho nó lưu vào database.
- Hiển thị ra ngoài theme với
hàm get_the_author_meta(), bạn vẫn có thể dùngthe_author_meta()nếu thích. Do trong bài này mình sử dụng filter để tránh đụng vào file single.php nên mình dùng get. - Thêm CSS
Và từ bước 1 đến bước 3, chúng ta sẽ viết code vào file functions.php trong theme hoặc tự tạo một plugin mới.
Bước 1. Tạo ô nhập dữ liệu
Để tạo field nhập dữ liệu, chúng ta sẽ sử dụng hook edit_user_profile và show_user_profile để có thể viết một cái form nhập thông tin ở bên dưới trang sửa thông tin user. Ta có như sau:
/*
* TẠO FIELD CHO USER
*//*–Kích hoạt function cho các hooks–*/
add_action( ‘show_user_profile’, ‘add_custom_user_field’ );
add_action( ‘edit_user_profile’, ‘add_custom_user_field’ );
/* Khởi tạo các field dữ liệu */
function add_custom_user_field( $user )
{ ?>
<h3>Thông tin tùy chọn</h3><table class="form-table">
<tr>
<th><label for="diachi">Địa chỉ của bạn</label></th>
<td>
<input type="text" id="diachi" name="diachi" size="20" value="<?php echo esc_attr( get_the_author_meta( ‘diachi’, $user->ID )); ?>">
</td>
</tr><tr>
<th><label for="facebook">Facebook của bạn</label></th>
<td>
<input type="text" id="facebook" name="facebook" size="20" value="<?php echo esc_attr( get_the_author_meta( ‘facebook’, $user->ID )); ?>">
</td>
</tr>
</table>
<?php }
Như trong code, mình đã tạo ra 2 field với tên là diachi và facebook. Và xíu nữa ta sẽ gọi nó ra là get_the_author_meta('diachi'),…
Nhưng cái đó chỉ là tạo thôi, chúng ta cần sử dụng thêm $_POST để lấy giá trị nhập từ field rồi gửi đến hàm update_user_meta() mà lưu lại các thông tin đó. Ta viết tiếp.
/*
* LƯU DỮ LIỆU TỪ FIELD NHẬP VÀO
*/
add_action( ‘personal_options_update’, ‘save_custom_user_field’ );
add_action( ‘edit_user_profile_update’, ‘save_custom_user_field’ );/* Function để lưu field mà gửi vào database */
function save_custom_user_field( $user_id ) {
if ( !current_user_can( ‘edit_user’, $user_id ) ) { return false; }
update_user_meta( $user_id, ‘diachi’, $_POST[‘diachi’] );
update_user_meta( $user_id, ‘facebook’, $_POST[‘facebook’] );
}
Bây giờ bạn có thể thử nhập thông tin vào 2 field vừa tạo và ấn Save Change, nếu nó lưu lại bình thường là coi như thành công bước 1.
Bước 2. Hiển thị vào dưới nội dung bằng Filter
Để tránh tối thiểu việc sửa trực tiếp theme nên mình khuyên các bạn nên sử dụng Filter để hiển thị. Sau này có đổi theme thì chỉ cần bốc nguyên đoạn code ở trên và code này đi là oke. :D
/* Hiển thị field dưới mỗi bài viết */add_filter( ‘the_content’, ‘show_user_field’ );
function show_user_field($content) {$user_field =’
<div class="tp_user_field"><div class="avatar">’.get_avatar( get_the_author_meta(‘ID’), 85 ) .'</div>
<div class="info">
‘.get_the_author_meta(‘description’).’
<ul><li><strong>Địa chỉ: </strong>’.get_the_author_meta(‘diachi’).'</li>
<li><div class="fb-follow" data-href="’.get_the_author_meta(‘facebook’).’" data-colorscheme="light" data-layout="button_count" data-show-faces="true"></div></li>
</ul>
</div></div>’;
if ( is_singular(‘post’) ) {
return $content.$user_field;
} else {
return $content;
}
}
Giải thích ngắn gọn là ở đoạn này chúng ta sử dụng hàm get_the_author_meta() để hiển thị thông tin của user và bên trong đó là một tham số chứa field mà bạn cần gọi ra. Nếu bạn muốn biết các tham số của những field mặc định thì có thể tham khảo bên dưới.
- user_login
- user_pass
- user_nicename
- user_email
- user_url
- user_registered
- user_activation_key
- user_status
- display_name
- nickname
- first_name
- last_name
- description (Biographical Info from the user’s profile)
- jabber
- aim
- yim
- user_level
- user_firstname
- user_lastname
- rich_editing
- comment_shortcuts
- admin_color
- plugins_per_page
- plugins_last_view
- ID
Bước 3. Thêm Facebook script vào footer
Do bước 2 mình có sử dụng nút Follow của Facebook kết hợp với field nhập link Facebook nên ở đây mình phải thêm một đoạn script của Facebook để có thể hiển thị nó. Dùng action luôn nhé.
add_action(‘wp_footer’, ‘tp_footer_scripts’);
function tp_footer_scripts() {?><!–Facebook Script–>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=446126555427820";
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script><?php }
Bạn có thể thay 446126555427820 thành APP ID của bạn.
Bước 4. Thêm tí CSS
Để hiển thị như demo thì bạn có thể chèn thêm một vài đoạn CSS bên dưới vào file style.css
.tp_user_field {
overflow: hidden;
border: 1px solid #E8E8E8;
padding: 1em;
width: 90%;
margin: 0 auto;
background: #F7F7F7;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-bottom: 1em;
}
.tp_user_field:after { clear: both }
.tp_user_field .avatar img {
float: left;
margin-right: 2em;
}
.tp_user_field .info {
float: right;
width: 72%;
}
CSS này mình viết nhanh để làm demo nên không chắc là nó hiển thị tốt ở mọi theme đâu nên tốt nhất bạn nên sửa lại theo phù hợp với theme của mình nếu có lỗi xảy ra nhé.
Ok bây giờ ta có kết quả là:
Không khó phải không nào? Và đây là toàn bộ code PHP trong bài, nhắc lần nữa là bạn chèn vào file functions.php hoặc tự tạo một plugin nhé.
/*
* TẠO FIELD CHO USER
*//*–Kích hoạt function cho các hooks–*/
add_action( ‘show_user_profile’, ‘add_custom_user_field’ );
add_action( ‘edit_user_profile’, ‘add_custom_user_field’ );
/* Khởi tạo các field dữ liệu */
function add_custom_user_field( $user )
{ ?>
<h3>Thông tin tùy chọn</h3><table class="form-table">
<tr>
<th><label for="diachi">Địa chỉ của bạn</label></th>
<td>
<input type="text" id="diachi" name="diachi" size="20" value="<?php echo esc_attr( get_the_author_meta( ‘diachi’, $user->ID )); ?>">
</td>
</tr><tr>
<th><label for="facebook">Facebook của bạn</label></th>
<td>
<input type="text" id="facebook" name="facebook" size="20" value="<?php echo esc_attr( get_the_author_meta( ‘facebook’, $user->ID )); ?>">
</td>
</tr>
</table>
<?php }/*
* LƯU DỮ LIỆU TỪ FIELD NHẬP VÀO
*/
add_action( ‘personal_options_update’, ‘save_custom_user_field’ );
add_action( ‘edit_user_profile_update’, ‘save_custom_user_field’ );/* Function để lưu field mà gửi vào database */
function save_custom_user_field( $user_id ) {
if ( !current_user_can( ‘edit_user’, $user_id ) ) { return false; }
update_user_meta( $user_id, ‘diachi’, $_POST[‘diachi’] );
update_user_meta( $user_id, ‘facebook’, $_POST[‘facebook’] );
}/*
* HIỂN THỊ FIELD DƯỚI BÀI VIẾT
*/
add_filter( ‘the_content’, ‘show_user_field’ );
function show_user_field($content) {$user_field =’
<div class="tp_user_field"><div class="avatar">’.get_avatar( get_the_author_meta(‘ID’), 85 ) .'</div>
<div class="info">
‘.get_the_author_meta(‘description’).’
<ul><li><strong>Địa chỉ: </strong>’.get_the_author_meta(‘diachi’).'</li>
<li><div class="fb-follow" data-href="’.get_the_author_meta(‘facebook’).’" data-colorscheme="light" data-layout="button_count" data-show-faces="true"></div></li>
</ul>
</div></div>’;
if ( is_singular(‘post’) ) {
return $content.$user_field;
} else {
return $content;
}
}
Tips: Tạo field nhanh chóng với plugin
Nếu bạn muốn tạo nhiều field nhanh chóng thì có thể sử dụng các plugin sau:
Chúc các bạn làm thành công!
Cách gửi code lên comment
Nếu bạn làm không được, hãy cho mình xem code của bạn. Bạn nên vào Pastebin.com và dán code của bạn vào đó, sau đó gửi link ở comment.
