Hướng dẫn thêm hộp thông tin tác giả cho các bài viết trong WordPress

Bạn có muốn thêm hộp thông tin tác giả cho các bài viết trong WordPress? Hộp thông tin tác giả là một hộp nhỏ nằm ở các vị trí như: Cuối bài viết, trên sidebar. Nó giúp bạn hiển thị thông tin về tác giả của bài viết, liên kết đến các trang mạng xã hội…

Một số WordPress Theme tích hợp tính năng cho phép bạn hiển thị hộp thông tin tác giả một cách dễ dàng. Tuy nhiên có một số WordPress Theme không có tính năng này.

Trong bài viết này tôi sẽ chia sẻ các cách khác nhau giúp bạn dễ dàng thêm hộp thông tin tác giả vào các bài viết trong WordPress. Tôi cũng sẽ trình bày cách tùy chỉnh, biến hộp thông tin tác giả trở nên hữu dụng hơn.

Tại sao và khi nào bạn cần sử dụng hộp thông tin tác giả trong WordPress?

Chúng ta ai cũng thích sự thật. Vì vậy khi viết được tác giả thật sự của blog/website là ai sẽ giúp xây dựng sự tin tưởng lẫn nhau giữa tác giả và độc giả.

Nếu website của bạn còn mới, thì hộp thông tin tác giả là cách tốt nhất để bạn giới thiệu bản thân mình đến với toàn thể độc giả. Qua thời gian, sự tin tưởng của độc giả dành cho bạn sẽ ngày càng được củng cố và tăng lên.

Nếu website của bạn chỉ có một tác giả, bạn chỉ cần tạo trang About me (Về tôi). Nhưng đối với một blog/website có nhiều tác giả, bạn cần thêm hộp thông tin tác giả vào cuối mỗi bài viết.

Điều này giúp cho người đọc biết được nhiều thông tin hơn về các tác giả trên blog/website. Nó cũng khiến cho người viết có nhiều động lực hơn để tương tác thường xuyên với người đọc.

Nếu bạn muốn nhiều người gửi bài viết đến website của mình, thì hộp thông tin tác giả là cách tốt nhất để thu hút những cộng tác viên.

Chúng ta đã biết được lý do cũng như tầm quan trọng của hộp thông tin tác giả rồi. Giờ chúng ta cùng tìm hiểu cách thêm hộp thông tin tác giả vào các bài viết trong WordPress nhé.

Thêm hộp thông tin tác giả cho các bài viết trong WordPress

Như chúng ta đã biết WordPress là hệ quản trị nội dung phổ biến nhất thế giới hiện nay. Nguyên nhân là vì nó linh hoạt và dễ tùy biến. Và sức mạnh thật sự của WordPress đến từ kho plugin phong phú, đang dạng và hữu ích.

Có rất nhiều plugin khác nhau có thể giúp bạn thêm hộp thông tin tác giả vào các bài viết trong WordPress một cách dễ dàng.

Trong bài viết này tôi sẽ chia sẻ cách sử dụng tính năng được tích hợp trong WordPress Theme, plugin, và code để thêm hộp thông tin tác giả cho các bài viết trong WordPress.

Cách 1. Sử dụng WordPress Theme để thêm hộp thông tin tác giả

Nếu WordPress Theme của bạn tích hợp tính năng này, bạn chỉ cần sử dụng nó để hiển thị hộp thông tin cá nhân.

Để sử dụng tính năng này, bạn chỉ cần truy cập vào trang Users » All Users (Người dùng » Tất cả người dùng). Tại đây bạn cần thay đổi người dùng mà bạn muốn thay đổi.

user screen

Trong màn hình chỉnh sửa thông tin “sơ yếu lý lịch”, cuộn đến phần “Biographical info” và thêm các thông tin cần thiết của tác giả.

biographical info

Hãy sử dụng Gravatar để làm ảnh của tác giả. Nếu bạn chưa biết cách sử dụng Gravatar hãy đọc lại bài viết này.

Ngoài ra bạn cũng có thể cho phép người dùng trên website của mình tải lên hình ảnh tùy chỉnh để chỉnh sửa sơ yếu lý lịch của họ.

Đừng quên nhấp vào nút “Update user” để lưu lại các thay đổi.

Giờ bạn hãy truy cập vào bài viết trên website của mình, bạn sẽ nhìn thấy hộp thông tin tác giả hiển thị như hình bên dưới.

display author bio

Cách 2: Sử dụng plugin để thêm hộp thông tin tác giả

Nếu WordPress Theme của bạn không hỗ trợ tính năng thêm hộp thông tin tác giả hoặc bạn muốn tùy biến nó thì cách này sẽ phù hợp với bạn.

Như tiêu đề, với cách này bạn sẽ sử dụng một plugin để thêm hộp thông tin tác giả vào bài viết của mình.

Việc đầu tiên bạn cần làm là cài đặt và kích hoạt plugin có tên là Author Bio Box.

author bio box

Nếu bạn là người mới chưa biết cách cài đặt và kích hoạt plugin, hãy đọc lại bài viết này.

Sau khi kích hoạt, bạn hãy truy cập vào trang Settings » Author Bio Box để cấu hình các cài đặt.

author bio box settings

Tại đây, bạn có thể chọn màu, kích cỡ Gravatar cho ảnh của tác giả, và vị trí hiển thị hộp thông tin tác giả.

Sau khi xong, đừng quên nhấp vào nút Save changes để lưu lại các thay đổi.

Tiếp theo bạn cần truy cập vào trang Users » All Users và nhấp vào liên kết “Edit” bên dưới người dùng bạn muốn thay đổi.

user screen

Trong màn hình chỉnh sửa “sơ yếu lý lịch”, bạn hãy cuộn đến phần “Contact Info”. Tại đây bạn có thể thêm các liên kết mạng xã hội cho tác giả.

contact info

Plugin sẽ chỉ hiển thị biểu tượng các mạng xã hội mà bạn đã thêm liên kết.

Sau đó bạn có thể cuộn xuống tìm đến phần “Biographical Info” để thêm thông tin cho tác giả. Bạn có thể sử dụng HTML cho trường này để thêm liên kết một cách thủ công, hoặc dùng các tùy chọn định dạng cơ bản.

about user

Sau khi bạn đã hoàn thành công việc chỉnh sửa thông tin, hãy nhấp vào nút “Update user” để lưu lại các thay đổi.

Giờ bạn có thể truy cập vào các bài viết trước đó và bạn sẽ thấy hộp thông tin tác giả hiển thị phía bên dưới.

author bio plugin after settings

Cách 3: Hiển thị hộp thông tin tác giả trên sidebar

Bạn có muốn hiển thị hộp thông tin tác giả ở thanh bên (sidebar) thay vì ở cuối bài viết? Nếu câu trả lời là có thì đây là cách dành cho bạn. Cách này sẽ giúp bạn hiển thị hộp thông tin tác giả trong một widget ở thanh bên.

Để thực hiện được điều này, bạn cần cài đặt và kích hoạt một plugin có tên là Meks Smart Author Widget .

mesks smart author widget

Sau khi kích hoạt, bạn cần truy cập vào trang Appearance » Widgets. Tại đây bạn sẽ nhìn thấy widget Meks Smart Author trong danh sách các widget sẵn có. Việc của chúng ta lúc này là chọn vị trí thích hợp để thêm widget hiển thị hộp thông tin tác giả.

mesks smart author

Widget này có rất nhiều tùy chọn khác nhau. Nhưng tùy chọn quan trọng nhất mà bạn cần kích chọn là “Automatically detect author”. Tùy chọn này giúp plugin tự động phát hiện tác giả.

Nhấp vào nút Save để lưu lại các thiết lập cho widget. Cuối cùng, bạn chỉ cần truy cập lại vào blog/website của mình để xem widget hiển thị như thế nào.

Trong viết này tôi sử dụng WordPress Theme Twenty Seventeen để minh họa. Kết quả tôi thực hiện giống như bên dưới:

author box bio on widget

Cách 4: Sử dụng mã để thêm hộp thông tin tác giả

Để sử dụng cách này, bạn cần thêm một đoạn mã vào website của mình. Nếu từ trước đến nay bạn chưa từng thực hiện cách này và cảm thấy khó khăn, hãy đọc lại bài viết này trước khi bắt đầu.

Việc đầu tiên bạn cần làm là thêm đoạn code bên dưới vào tập tin functions.php trong WordPress Theme của mình.

function author_info_box( $content ) {
global $post;
// Kiểm tra xem một bài viết có phải của một tác giả hay không
if ( is_single() && isset( $post->post_author ) ) {
// Hiển thị tên tác giả
$display_name = get_the_author_meta( 'display_name', $post->post_author );

// Nếu không hiển thị được tên, dùng Nickname để hiển thị.
if ( empty( $display_name ) )
$display_name = get_the_author_meta( 'nickname', $post->post_author );

// Lấy thông tin sơ yếu lý lịch hoặc mô tả cả tác giả= get_the_author_meta( 'user_description', $post->post_author );

// Lấy đường dẫn website của tác giả
$user_website = get_the_author_meta('url', $post->post_author);

// Lấy liên kết đến trang lưu trữ của tác giả
$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 ) )
// Ảnh đại diện của tác giả và các thông tin khác

$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>';

// Kiểm tra nếu tác giả có một website trong hồ sơ
( ! empty( $user_website ) ) {

// Hiển thị liên kết của website
$author_details .= ' | <a href="' . $user_website .'" target="_blank" rel="nofollow">Website</a></p>';

} else {
// Nếu tác giả không có website thì đóng đoạn văn
$author_details .= '</p>';
}

// Hiển thị nội dung tất cả các thông tin
$content = $content . '<footer class="author_bio_section" >' . $author_details . '</footer>';
}
return $content;
}

// Thêm chức năng hộp thông tin vào bài viết
add_action( 'the_content', 'author_info_box' );

// Cho phép sử dụng HTML trong phần sơ yếu lý lịch của tác giả
('pre_user_description', 'wp_filter_kses');

Đoạn code trên chỉ đơn giản là lấy thông tin của tác giả sau đó hiển thị nó bên dưới bài viết. Bạn cần phải định kiểu cho hộp thông tin tác giả để nó trông đẹp hơn và đồng bộ với WordPress Theme mà mình đang sử dụng.

Bạn có thể thêm mã CSS bên dưới để tùy biến hộp thông tin tác giả của mình.

.author_bio_section{
background-color: #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ả cuối cùng mà bạn sẽ nhìn thấy trên website của mình.

style author bio box

Thật tuyệt vời đúng không?

Tôi hy vọng bài viết này sẽ giúp bạn biết cách thêm hộp thông tin tác giả vào blog/website của mình.

Nếu bạn thấy bài viết hữu ích, đừng quên Like và Share.

Hẹn gặp lại bạn trong các bài viết tiếp theo.

 

Đăng ký nhận bài viết mới nhất

Hãy đăng ký nhận tin để nhận được những nội dung thú vị và tuyệt vời!

Bình luận

Để lại bình luận