Code Author Box theme generatepress

Hiển thị thông tin tác giả (Author Box) ở cuối mỗi bài viết là một cách tuyệt vời để tăng sự kết nối và xây dựng lòng tin với độc giả. Nó không chỉ giúp nhận diện tác giả mà còn là nơi để họ thể hiện chuyên môn và cá tính của mình.

Code Author Box theme generatepress

Thay vì phải cài thêm một plugin, hôm nay tôi sẽ chia sẻ với bạn cách tạo một Author Box đơn giản, đẹp mắt cho theme GeneratePress chỉ bằng vài đoạn code ngắn gọn.

Yêu Cầu Chuẩn Bị

  • Website WordPress đang sử dụng theme GeneratePress.
  • Đã cài đặt và kích hoạt GeneratePress Child Theme. (Đây là bước quan trọng để đảm bảo code của bạn không bị mất khi cập nhật theme gốc).

Bước 1: Thêm Code PHP để Hiển Thị Author Box

Đầu tiên, bạn cần thêm một đoạn code vào file functions.php của theme con (child theme) để tạo và hiển thị nội dung của hộp tác giả.

/**
* Tạo và hiển thị Author Box ở cuối bài viết.
* Hook vào vị trí trước khu vực bình luận của theme GeneratePress.
*/
add_action(‘generate_before_comments_container’, ‘hoidapwp_author_box’);

function hoidapwp_author_box() {
// Bắt đầu bộ đệm đầu ra để lưu trữ HTML
ob_start();
?>
<div class=”author-box”>
<div class=”avatar”>
<?php echo get_avatar( get_the_author_meta( ‘ID’ ), 100 ); // Lấy avatar với kích thước 100px ?>
</div>
<div class=”author-info”>
<h5 class=”author-title”>
<?php printf( esc_attr__( ‘Về %s’, ‘generatepress’ ), get_the_author_meta( ‘display_name’) ); // Lấy tên hiển thị của tác giả ?>
</h5>
<div class=”author-summary”>
<p class=”author-description”>
<?php echo wp_kses( get_the_author_meta( ‘description’ ), null ); // Lấy mô tả tiểu sử của tác giả ?>
</p>
</div>
</div>
</div>
<?php
// Lấy nội dung từ bộ đệm và hiển thị ra ngoài
$author_box_html = ob_get_contents();
ob_end_clean();
echo $author_box_html;
}

Giải thích code:

  • add_action('generate_before_comments_container', ...): Chúng ta “móc” hàm của mình vào hook generate_before_comments_container. Đây là vị trí mà theme GeneratePress đã định nghĩa sẵn, nằm ngay phía trên khu vực bình luận của bài viết.
  • get_avatar(...): Lấy ảnh đại diện của tác giả.
  • get_the_author_meta(...): Lấy các thông tin khác như tên hiển thị (display_name) và tiểu sử (description).

 

Bước 2: Thêm CSS để Tùy Chỉnh Giao Diện

Để Author Box trông đẹp mắt và chuyên nghiệp, bạn cần thêm một chút CSS. Hãy dán đoạn mã sau vào file style.css của theme con hoặc vào Giao diện → Tùy biến → CSS bổ sung.

/* === CSS Author Box === */
.author-box {
display: flex; /* Bố cục chính sử dụng Flexbox */
flex-direction: row;
align-items: center;
border: 1px solid #e5e5e5;
margin: 20px 0;
padding: 25px;
border-radius: 8px; /* Bo tròn các góc */
background-color: #f9f9f9;
}

.author-box .avatar img {
border-radius: 50%; /* Bo tròn ảnh đại diện */
max-width: 100px;
}

.author-box .author-info {
padding-left: 25px;
}

.author-box h5.author-title {
margin-top: 0;
margin-bottom: 5px !important;
font-size: 1.2em;
}

.author-box .author-description {
margin-bottom: 0;
font-size: 0.95em;
line-height: 1.6;
}
/* === End CSS Author Box === */

generatepress author

Bước 3: Cập Nhật Thông Tin và Ảnh Đại Diện

Sau khi đã thêm code, bạn cần cập nhật nội dung sẽ hiển thị trong Author Box.

  1. Cập nhật tiểu sử:
    • Vào Thành viên → Hồ sơ của bạn.
    • Kéo xuống phần “Thông tin tiểu sử” (Biographical Info).
    • Viết một đoạn giới thiệu ngắn về bản thân và nhấn “Cập nhật hồ sơ”.
  2. Cập nhật ảnh đại diện (Avatar):
    • WordPress sử dụng dịch vụ toàn cầu có tên là Gravatar để quản lý ảnh đại diện.
    • Truy cập trang gravatar.com.
    • Đăng ký một tài khoản bằng đúng địa chỉ email mà bạn đang sử dụng cho tài khoản WordPress của mình.
    • Tải ảnh đại diện của bạn lên Gravatar. Sau vài phút, ảnh sẽ tự động được đồng bộ và hiển thị trên website của bạn.

Sau khi hoàn tất các bước trên, bạn sẽ có một Author Box chuyên nghiệp hiển thị ở cuối mỗi bài viết.

Chúc các bạn thực hiện thành công!

4.8/5 - (71 bình chọn)
Đăng ký
Thông báo về
guest
0 Bình Luận
Oldest
Newest Most Voted
Inline Feedbacks
Xem tất cả
0
Rất thích suy nghĩ của bạn, hãy bình luận.x
()
x