Tạo thêm thông tin user WordPress và hiển thị ra theme

Tạo user field

Hiển thị user field trong WordPress

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:

  1. Tạo ô nhập dữ liệu cho user và làm cho nó lưu vào database.
  2. Hiển thị ra ngoài theme với hàm get_the_author_meta(), bạn vẫn có thể dùng the_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.
  3. 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_profileshow_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'),…

Tạo user field

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


/* 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à:

Hiển thị user field trong WordPress

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.

Nguồn: Tạo thêm thông tin user WordPress và hiển thị ra theme | Thạch Phạm

Categories: Content Marketing, Digital Marketing, Google Ads, Kinh doanh, PHP, SEO, Server - Hosting, WordPress, WordPress Development, Wordpress Plugin, WordPress Theme, Wordpress Tutorial,
Tags: baemin, bán hàng online, bán hàng online trên facebook, bán hàng qua facebook, bán hàng quần áo, bán hàng thời trang, bán hàng trên baemin, bán hàng trên facebook, bán hàng trên fanpage, bán hàng trên grab, bán hàng trên marketplace, bán hàng trên now, bán hàng trên tiktok, báo cáo kết quả hoạt động kinh doanh, bí quyết kinh doanh online, bít tết Âu việt, black friday, buôn bán hàng thùng, buôn bán hàng thùng tuyển chọn, cách bán hàng online đắt khách, cách bán hàng trên marketplace, cách bán hàng trên tiktok, câu chuyện kinh doanh, câu chuyện thành công, chương trình khuyến mãi, công nghệ phần mềm bán hàng, cửa hàng cafe, cửa hàng minh tuấn mobile, cửa hàng phụ kiện, cửa hàng thời trang, cửa hàng thực phẩm, cửa hàng thực phẩm sạch, doanh số bán hàng, dox garage & coffee, dox garage &amp; coffee, đăng ký bán hàng trên baemin, đăng ký bán hàng trên go food, đăng ký bán hàng trên grab, đăng ký bán hàng trên now, facebook, facebook pos, fanpage, file excel, file excel báo cáo kết quả kinh doanh, file excel quản lý kho, foodngon, go food, go jek, grab, halo mobile, khởi nghiệp, khởi nghiệp kinh doanh, khởi nghiệp kinh doanh thời trang, kinh doanh cafe, kinh doanh điện thoại, kinh doanh điện tử điện máy, kinh doanh đồ handmade, kinh doanh gì sau dịch, kinh doanh mỹ phẩm, kinh doanh mỹ phẩm online, kinh doanh nhà hàng, kinh doanh online, kinh doanh phụ kiện, kinh doanh quán cafe, kinh doanh shop thời trang, kinh doanh siêu thị mini, kinh doanh spa, kinh doanh thành công, kinh doanh thời trang, kinh doanh thời trang trẻ em, kinh doanh thực phẩm, kinh doanh thực phẩm sạch thành công, kinh doanh trên facebook, kinh doanh trên grab, kinh nghiệm bán hàng, kinh nghiệm kinh doanh, làm đồ handmade, lily shop, link kháng tài khoản quảng cáo, lụa tơ tằm bá minh, marketing online, mặt hàng dễ bán, mẹo bán hàng, mẹo bán hàng trên facebook, mẹo hay, ngày black friday năm 2020 là ngày nào?, now, now - foody, phầm mềm quản lý bán hàng miễn phí, phần mềm chốt đơn, phần mềm chốt đơn hàng, phần mềm miễn phí, phần mềm pos, phần mềm quản lý bán hàng, phần mềm quản lý bán hàng đáng tin cậy, phần mềm quản lý bán hàng miễn phí, phụ kiện ben & tony, phụ kiện ben &amp; tony, phụ kiện hà xinh, quán cafe hiệu quả, quản lý cửa hàng, quản lý cửa hàng thời trang, quản lý nhà hàng, quản lý nhân viên, quản lý nhân viên cứng đầu, quản lý nhân viên thời vụ, quảng cáo thương hiệu, shop thời trang, shopee, siêu thị minimart, status, status bán hàng, status quảng cáo mỹ phẩm, stella spa, stt bán hàng online hài hước, stt tương tác bán hàng, t.u.s shop, tài khoản bị vô hiệu hóa, tài khoản facebook, tài khoản facebook bị vô hiệu hóa, tải miễn phí file excel quản lý kho, tăng doanh thu mùa black friday, thời trang kosta, thời trang mine, thời trang tú trần shop, thực phẩm sạch, thực phẩm sạch 02, thực phẩm sạch tâm an, thuê mặt bằng kinh doanh, tiki, tiktok, tú trần shop,
Cách lấy link ảnh bên ngoài làm ảnh thumbnail trong WordPress
Yoast SEO – Hướng dẫn chi tiết để SEO website WordPress
Tác giả

Bình luận

risnia generic

I enjoy you because of all of your effort on this blog. Debby enjoys conducting internet research and it’s easy to see why. A number of us hear all about the compelling manner you create efficient ideas by means of the blog and boost contribution from other ones about this article and my child is being taught a great deal. Enjoy the remaining portion of the new year. You’re carrying out a fantastic job.

Leave a Message

Registration isn't required.

NguyenLp LarTheme