Cách tạo box tác giả bên dưới bài viết

Bạn muốn tạo một box giới thiệu về tác giả ngay bên dưới bài viết nhưng bạn chưa biết phải làm như thế nào. Sáu sẽ hướng dẫn cho bạn cách tạo ô giới thiệu thông tin tác giả trong bài viết này.

Đầu tiên, để làm được giống như cái hình demo bên trên thì trong thông tin cá nhân của tác giả phải được cập nhật, lưu trữ thông tin về tài khoản trên các trang mạng xã hội cũng như đôi dòng giới thiệu về bản thân của tác giả.

Bạn mở tập tin functions.php của giao diện lên và thêm vào các dòng code sau. Nếu như blog của bạn đã có tính năng này rồi thì bỏ qua và chuyển xuống bước kế tiếp.

function modify_contact_methods($profile_fields) {
	// Them thong tin 3 mang xa hoi lon nhat
	if(!isset($profile_fields['twitter'])) {
		$profile_fields['twitter'] = 'Twitter Username';
	}
	if(!isset($profile_fields['facebook'])) {
		$profile_fields['facebook'] = 'Facebook URL';
	}
	if(!isset($profile_fields['gplus'])) {
		$profile_fields['gplus'] = 'Google+ URL';
	}
	
	// Xoa thong tin khong can thiet
	if(isset($contactmethods['aim'])) {
		unset($contactmethods['aim']);
	}
	if(isset($contactmethods['jabber'])) {
		unset($contactmethods['jabber']);
	}
	if(isset($contactmethods['yim'])) {
		unset($contactmethods['yim']);
	}
	return $profile_fields;
}
add_filter('user_contactmethods', 'modify_contact_methods');

Tiếp đến, bạn mở tập tin single.php của giao diện lên và thêm vào đoạn code sau, bạn đặt vào vị trí mà bạn muốn box tác giả xuất hiện nhé. Thông thường thì bạn có thể đặt sau hàm the_content().

<div class="author-wrap">
	<div class="author-gravatar">
		<?php echo get_avatar( get_the_author_meta( 'ID' ), 100 ); ?>
	</div>
	<div class="author-info">
		<div class="vcard author author-title">
			<span class="fn">
				<a target="_blank" class="ext-link" href="<?php the_author_meta('user_url'); ?>" title="Ghé thăm website của <?php the_author_meta('user_login'); ?>" rel="author external nofollow"><?php the_author_meta('display_name'); ?></a>
			</span>
		</div>
		<div class="author-description"><?php the_author_meta('description'); ?></div>
		<ul>
			<li class="first">
				<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>">Xem tất cả bài viết của <?php the_author_meta('user_login'); ?> <span class="meta-nav">→</span></a>
			</li>
			<li>
				<a target="_blank" class="ext-link" rel="external nofollow" href="<?php the_author_meta('user_url'); ?>" title="Ghé thăm trang chủ của <?php the_author_meta('user_login'); ?>">Blog</a>
			</li>

			<li>
				<a target="_blank" class="ext-link" href="<?php echo get_the_author_meta( 'facebook' ); ?>" title="Theo dõi <?php the_author_meta('user_login'); ?> trên Facebook" rel="external nofollow">Facebook</a>
			</li>
			<li>
				<a target="_blank" class="ext-link" href="<?php echo get_the_author_meta( 'gplus' ); ?>" title="Theo dõi <?php the_author_meta('user_login'); ?> trên Goolge Plus" rel="external nofollow">Google Plus</a>
			</li>
			<li><a rel="external" title="Theo dõi <?php the_author_meta('user_login'); ?> trên Twitter" href="http://twitter.com/<?php echo get_the_author_meta( 'twitter' ); ?>">Twitter</a></li>
		</ul>
	</div>
</div>

Cuối cùng là đến phần định dạng css cho khung này, bạn mở tập tin style.css lên và cho vào những đoạn mã sau:

.author-wrap {
    background: none repeat scroll 0 0 #E8E8E8;
    border: 1px solid #C6C6C6;
    display: block;
    margin: 10px 0 30px;
    overflow: hidden;
    padding: 10px;
}
.author-gravatar {
    border-radius: 50px;
    float: left;
    height: 60px;
    line-height: 1;
    margin: 0;
    width: 60px;
}
.author-gravatar img {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 50%;
    height: 60px;
    padding: 2px;
    width: 60px;
}
.author-info {
    float: right;
    width: 86%;
}
.author-title {
    color: #555555;
    display: block;
    font-family: Raleway,sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 26px;
    margin: 0 0 10px;
}
.author-title a {
    color: #454545;
    font-size: 1.375rem;
    font-weight: 700;
}
.author-description {
    display: block;
}
.author-description p {
    margin: 0;
}
.author-wrap ul {
    list-style: none outside none;
    margin: 8px 0 0;
    overflow: hidden;
    padding: 0;
}
.author-wrap ul li {
    border-left: 1px solid #DFD5B5;
    display: inline-block;
    margin: 0;
    padding: 0 5px 0 7px;
}
.author-wrap ul li:first-child {
    border: medium none;
    padding: 0 0 0 1px;
}
.author-wrap ul li a {
    color: #4183C4;
    font-size: 16px;
}
.author-wrap ul li a:hover {
    color: #1B93DF;
    text-decoration: none;
}

Sau khi hoàn tất xong bạn lưu lại và thử tải lại trang xem nào, bạn đã có thông tin tác giả ngay bên dưới bài viết rồi đấy. Chúc bạn thành công.