Bạn muốn thêm hộp thông tin tác giả vào website của bạn?
Hộp thông tin tác giả là một hộp nhỏ thường nằm cuối bài viết. Hộp này hiển thị thông tin tác giả bài viết cùng với link đến website của tác giả và thông tin các trang mạng xã hội.
Nhiều theme WordPress đã tích hợp tính năng. Nhưng nếu theme của bạn chưa có hộp thông tin tác giả, bài viết này mình sẽ hướng dẫn bạn cách thêm hộp thông tin tác giả.
Vì sao hộp thông tin tác giả lại quan trọng?
Hộp thông tin tác giả là cách kết nối cá nhân giữa độc giả và tác giả bài viết. Nó giúp tăng độ tin cậy của trang web khi độc giả biết ai đứng đằng sau nội dung.
Nếu website của bạn còn mới, hộp thông tin tác giả lại càng quan trọng. Nó giúp cho những người mới ghé thăm trang web của bạn biết thêm về bạn. Qua thời gian, sự tin tưởng của độc giả vào website sẽ tăng lên.
Nếu website của bạn có nhiều tác giả, hộp thông tin tác giả khuyến khích độc giả tương tác với tác giả bài viết. Bên cạnh đó, nếu website của bạn có chức năng guest post, hộp thông tin tác giả sẽ thu hút nhiều cộng tác viên hơn.
Cách thêm hộp thông tin tác giả vào website WordPress
Có nhiều cách giúp bạn thêm hộp thông tin tác giả. Bài viết này mình sẽ hướng dẫn bạn sử dụng 2 plugin: một plugin thêm hộp thông tin tác giả vào cuối bài viết, plugin còn lại thêm vào sidebar sử dụng widget.
Bên cạnh đó, mình sẽ hướng dẫn thêm hộp thông tin tác giả sử dụng phương thức code thủ công.
Tính năng hộp thông tin tác giả làm việc song song với hệ thống quản lý user của WordPress.
Do vậy, trước hết bạn cần cập nhật thông tin user như email, địa chỉ website, thông tin mạng xã hội và lời giới thiệu.
Bạn cập nhật toàn bộ thông tin này ở menu users. Nếu bạn là quản trị viên, bạn có thể cập nhật thông tin của các tác giả khác.
Bạn chú ý profile trong WordPress sử dụng Gravatar của WordPress.com. Nếu bạn muốn bổ sung ảnh đại diện, bạn vào Gravatar , đăng nhập bằng tài khoản WordPress.com và bổ sung một hình ảnh bạn muốn.
Gravatar sẽ gắn liền với địa chỉ email. Do vậy bất cứ khi nào bạn comment, gravatar gắn với email đó sẽ xuất hiện
Cách 1: Thêm hộp thông tin tác giả phía dưới bài viết sử dụng plugin
Đầu tiên, bạn cài đặt plugin Guerrila’s Author Box.
Sau khi cài đặt xong, bạn sẽ thấy Author hiển thị ở phía cuối bài viết
Nếu bạn muốn tùy chỉnh giao diện của hộp Author, sử dụng đoạn code CSS sau như là code mẫu.
- Lưu ý: bạn nên tạo child theme trước khi thay đổi.
Đoạn code này sẽ thay đổi background color và ảnh profile có hình tròn thay vì hình vuông.
.guerrillawrap {
background: #ECECEC;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
border: 1px solid #d0d0d0;
float: left;
padding: 2%;
width: 100%;
}
.guerrillagravatar {
float: left;
margin: 0 10px 0 0;
width: 10%;
}
.guerrillagravatar img {
border-radius:50%;
border:1 px solid #eee;
}
.guerrillatext {
float: left;
width: 84%;
}
.guerrillatext h4 {
font-size: 20px;
line-height: 20px;
margin: 0 0 0 0;
padding: 0;
}
.guerrillatext p {
margin: 10px 0 15px 0;
font-style: italic;
}
.guerrillasocial {
float: left;
width: 100%;
}
.guerrillasocial a {
border: 0;
margin-right: 10px;
}
Cách 2: Thêm thông tin Author ở Sidebar Widget
Cách trên giúp bạn thêm phần thông tin tác giả vào cuối bài Post. Còn một ví trị nữa dành cho phần thông tin tác giả. Đó là sidebar hay bất kỳ khu vực nào chứa widget.
Đầu tiên, bạn cài đặt và kích hoạt plugin Meks Smart Author Widget.
Sau đó, bạn sẽ thấy một widget mới ở Appearance -> Widgets. Kéo widget vào khu vực bạn cần hiển thị.
Widget có một vài lựa chọn như bên dưới. Quan trọng nhất, bạn cần đánh dấu vào lựa chọn ‘Automatically detect author’. Lựa chọn này giúp tự động phát hiện tác giả và hiển thị ở phần hộp thông tin tác giả khi độc giả xem một bài viết của tác giả đó.
Sau khi lưu lại thiết lập của Widget, thông tin tác giả sẽ hiển thị như bên dưới khi bạn truy cập trang web:
Cách 3: Bổ sung hộp thông tin tác giả sử dụng code
Với 2 phương pháp trên bạn sử dụng plugin. Nhưng bạn có thể bổ sung code thủ công để thêm hộp thông tin tác giả.
Bổ sung đoạn code vào file functions.php.
function wpb_author_info_box( $content ) {
global $post;
// Detect if it is a single post with a post author
if ( is_single() && isset( $post->post_author ) ) {
// Get author's display name
$display_name = get_the_author_meta( 'display_name', $post->post_author );
// If display name is not available then use nickname as display name
if ( empty( $display_name ) )
$display_name = get_the_author_meta( 'nickname', $post->post_author );
// Get author's biographical information or description
$user_description = get_the_author_meta( 'user_description', $post->post_author );
// Get author's website URL
$user_website = get_the_author_meta('url', $post->post_author);
// Get link to the author archive page
$user_posts = get_author_posts_url( get_the_author_meta( 'ID' , $post->post_author));
if ( ! empty( $display_name ) )
$author_details = '<p class="author_name">About ' . $display_name . '</p>';
if ( ! empty( $user_description ) )
// Author avatar and bio
$author_details .= '<p class="author_details">' . get_avatar( get_the_author_meta('user_email') , 90 ) . nl2br( $user_description ). '</p>';
$author_details .= '<p class="author_links"><a href="'. $user_posts .'">View all posts by ' . $display_name . '</a>';
// Check if author has a website in their profile
if ( ! empty( $user_website ) ) {
// Display author website link
$author_details .= ' | <a href="' . $user_website .'" target="_blank" rel="nofollow">Website</a></p>';
} else {
// if there is no author website then just close the paragraph
$author_details .= '</p>';
}
// Pass all this info to post content
$content = $content . '<footer class="author_bio_section" >' . $author_details . '</footer>';
}
return $content;
}
// Add our function to the post content filter
add_action( 'the_content', 'wpb_author_info_box' );
// Allow HTML in author bio section
remove_filter('pre_user_description', 'wp_filter_kses');
Tiếp theo, bạn cần code css để cho giao diện phần thông tin tác giả trông bắt mắt hơn.
.author_bio_section{
background: none repeat scroll 0 0 #F5F5F5;
padding: 15px;
border: 1px solid #ccc;
}
.author_name{
font-size:16px;
font-weight: bold;
}
.author_details img {
border: 1px solid #D8D8D8;
border-radius: 50%;
float: left;
margin: 0 10px 10px 0;
}
Và đây là thành quả:
Lời kết
Bài viết này giúp bạn biết cách thêm phần hộp thông tin tác giả trong trường hợp theme bạn không hỗ trợ.
Nếu bạn có gì khó khăn trong việc thêm hộp thông tin tác giả, hãy để lại comment bên dưới.
Yêu thích viết blog.