Hiển thị author box trên blog WordPress

Chào các bạn, cũng khá lâu rồi không ra bài viết mới, hôm nay mình trở lại với một thủ thuật nhỏ giúp hiển thị author box cuối mỗi bài viết trong các blog WordPress. Author box là một khung bao gồm hình ảnh đại diện của tác giả bài viết và một số thông tin giới thiệu của tác giả.

author boxTrước tiên bạn cần viết thông tin giới thiệu về mình bằng cách vào mục Users -> Your Profile, tìm đến mục About Yourself và điền thông tin giời thiệu của bạn vào khung Biographical Info.

Tiếp theo là cho hiển thị author box ra bên ngoài. Đối với các bạn sử dụng Genesis thì việc này rất đơn giản, bạn chỉ cần thêm đoạn code này vào file function.php của child theme:

add_filter( 'get_the_author_genesis_author_box_single', '__return_true' );

Bạn chú ý rằng ảnh đại diện chính là Gravatar của bạn. Để thay đổi kích thước Gravatar, bạn sử dụng theme đoạn code nay:

add_filter('genesis_author_box_gravatar_size', 'rayno_author_box_gravatar_size');
function rayno_author_box_gravatar_size($size) {
    return '80';
}

Trong đó 80 là kích thước ảnh đại diện, bạn có thể tăng hoặc giảm nó theo ý muốn.

Để thiết kế cho khung author box, bạn có thể sử dụng code sau chèn vào file style.css hoặc chỉnh sửa lại nếu đã có sẵn trong file này.

.author-box {
	margin: 0 0 20px;
	padding: 20px;
	overflow: hidden;
	border-bottom: #999999 dotted 1px;
	border-top: #999999 dotted 1px;
}
.author-box .avatar {
	background-color: #fff;
	float: left;
	margin: 0 10px 0 0;
}

Đối với các themes không hổ trợ sẵn author box, bạn có thể bổ sung nó bằng cách sử dụng đoạn code sau chèn vào file single.php tại vị trí mà bạn muốn hiển thị author box, thường là cuối bài viết và trên phần comments.

<div id="authorarea">
    <?php if (function_exists('get_avatar')) { echo get_avatar( get_the_author_email(), '100' ); }?>
   <div class="authorinfo">
       <h3>About <?php the_author_posts_link(); ?></h3>
       <p><?php the_author_description(); ?></p>
    </div>
</div>

Bổ sung một số lớp css và file style.css để thiết kế lại cho khung author box:

#authorarea{
	background: #f0f0f0;
	border: 1px solid #d2d2d2;
	padding: 10px;
	width:100%;
	overflow:hidden;
	color: #333;
}
#authorarea h3{
	font-size: 18px;
	color:#333;
	margin:0;
	padding:10px 10px 5px 10px;
}
#authorarea h3 a{
	text-decoration:none;
	color: #333;
	font-weight: bold;
}
#authorarea img{
	margin:0;
	padding:10px;
	float:left;
	border: 1px solid #ddd;
	width: 100px;
	height: 100px;
}
#authorarea p{
	color:#333;
	margin:0;
	padding:0px 10px 10px 10px;
}
#authorarea p a{
	color:#333;
}
.authorinfo{
	padding-left:120px;
}

Để tạo ảnh Gravatar, bạn truy cập vào địa chỉ gravatar.com đăng ký một tài khoản sử dụng địa chỉ email bạn sử dụng trong tài khoản author. Chúc bạn thành công!

Đánh giá bài viết này

Chú ý - WordPress Hosting 1$/tháng - miễn phí tên miền

Bạn có biết GoDaddy đang có khuyến mãi WordPress hosting chỉ còn 1$/tháng kèm theo một tên miền .COM .NET .ORG miễn phí. Hãy đăng ký ngay để tiết kiệm chi phí nhất nhé.
Xem ngay

ĐĂNG KÝ NHẬN TIN QUA EMAIL

Nếu thấy bài viết trên blog có ích cho bạn, hãy đăng ký nhận tin qua email để cập nhật bài viết mới nhanh nhất và thỉnh thoảng nhận quà bất ngờ!

Comments

  1. MobGame.Net says:

    cái này rất hay. thanks

  2. Ad cho mình hỏi….Có đoạn code nào add vào function.php để cho khung author nó hiện ra thêm mấy cái page không…Mình add code của bạn vào nó chỉ hiện ở những bài post, còn những page và catagory thì nó không hiện…Thanks nhiều

  3. Kia Bình Tân says:

    Ad ơi cho mình hỏi, mình làm giống bạn rồi nhưng mình không thay đổi được khung hiện thị author, nhìn xấu lắm. Template style của mình không có gì hết nên mình thêm đoạn code ở trên vào thì không có tác dụng. Giúp mình với. Website của mình : http://www.kiaoto.com

  4. Mình sử dụng một số plugin tuy nhiên kiểm tra tốc độ load trang thì có nhiều js quá nên sẽ mày mò mần theo cách của bạn. Cám ơn bạn nhiều nhé! {c6}

  5. Bạn cho mình hỏi mình dùng theme wordpress thì đoạn code chèn vào có khác không, với lại mình thay cái avatar trong gravatar.com không được bạn ạ, bạn giúp mình với. Tks!

  6. Hô hô, làm phát đc luôn nè, Tks Bảo

  7. mình đăng ký trên avatar nhưng ko được nhỉ

  8. Cảm ơn bác đã hướng dẫn

  9. anh ơi, em muốn sửa lại cái code robots.txrt mà làm đủ kiểu những vẫn không được
    trang web: phodongchuyennhuong.com

Gửi bình luận

Lưu ý: Không sử dụng keyword để thay cho tên của bạn, hãy sử dụng tên thật. Cảm ơn bạn đã tham gia bình luận trên blog!