GeneratePress Author Box tạo khung tác giả bài viết

Bài viết này chia sẻ đến bạn mẫu GeneratePress Author Box – khung tác giả hiển thị ở cuối một bài viết mà không cần dùng plugin. Mẫu này được tinh chỉnh với giao diện đơn giản, gọn nhẹ, tối ưu SEO, hiệu suất và tương thích với php 8.4 | Nếu website WordPress của bạn đang dùng theme GeneratePress thì sẽ không có sẵn cái này, phải tự thêm.

GeneratePress Author Box - khung tác giả cho bài viết
GeneratePress Author Box – khung tác giả cho bài viết

Để thực hiện thì bạn copy đoạn code bên dưới và chèn vào cuối file functions.php của theme/ child theme đang dùng. Trong trường hợp không có child theme thì chèn vào file functions của theme cha cũng được, nhớ lưu bài viết này lại để theme cập nhật thì mất code, có cái copy dán vào lại ^^

Dưới đây sẽ bao gồm 2 phiên bản, phiên bản dành cho nhu cầu chung và phiên bản dành riêng cho Hocban.vn | Bạn sử dụng phiên bản thứ nhất nhé, phiên bản 2 mình lưu lại dành riêng cho Hocban.vn | Đây là bản dành cho bạn:

// GeneratePress Author Box - dùng chung
add_action('generate_before_comments_container', function() {
if (!is_singular('post')) return;
$author_id = get_the_author_meta('ID');
$author_url = get_author_posts_url($author_id);
$author_bio = get_the_author_meta('description');
$author_name = get_the_author();
$avatar = get_avatar($author_id, 100, '', $author_name, ['itemprop' => 'image']);
echo '<style>.rectangular-author-box .author-content{display:flex;align-items:flex-start;gap:25px}.rectangular-author-box .author-avatar-block{flex-shrink:0}.rectangular-author-box .author-avatar img{border-radius:4px;display:block}.rectangular-author-box .author-info-wrapper{flex:1}.rectangular-author-box .author-name{margin:0 0 10px 0!important;font-size:130%!important;font-weight:700}.rectangular-author-box a{color:#1b78e2!important;text-decoration:underline!important;box-shadow:none!important}.rectangular-author-box a:hover{color:#000!important;text-decoration:none!important}.rectangular-author-box .author-bio{line-height:1.6;color:#333}.rectangular-author-box .author-bio p{margin-bottom:0;text-align:left}@media (max-width:768px){.rectangular-author-box .author-content{flex-direction:column;align-items:center;gap:15px}.rectangular-author-box .author-name{text-align:center;width:100%}.rectangular-author-box .author-bio{text-align:left;width:100%}.rectangular-author-box .author-bio p{text-align:left!important}}</style>';
echo '<div class="separate-container"><div class="inside-article rectangular-author-box" itemscope itemtype="https://schema.org/Person"><div class="author-content"><div class="author-avatar-block"><div class="author-avatar"><a href="'.esc_url($author_url).'" rel="author">'.$avatar.'</a></div></div><div class="author-info-wrapper"><h3 class="author-name" itemprop="name"><a href="'.esc_url($author_url).'" rel="author">'.esc_html($author_name).'</a></h3>';
if ($author_bio) {
echo '<div class="author-bio" itemprop="description">'.wp_kses_post(wpautop($author_bio)).'</div>';
}
echo '</div></div></div></div>';
});
// GeneratePress Author Box - dùng chung

Đây là bản dành cho Hocban.vn | Nhờ người ae Quốc Điền bình luận bên dưới mình mới biết là code Author box bản của Hocban.vn chỉ dùng cho trên web mình (có thiết lập riêng) mới hiện, web của ae sẽ không hiện. Cảm ơn người ae Quốc Điền đã phản hồi giúp mình kiểm tra lại và bổ sung phiên bản ở trên.

//GeneratePress Author Box - khung tác giả đơn giản cho blog

function gp_should_show_author_box() {
static $check = null;
return $check ??= ( is_single() && get_the_author_meta( 'description' ) );
}
function gp_custom_author_box() {
if ( ! gp_should_show_author_box() ) return;
$author_id = get_the_author_meta( 'ID' );
$user_data = get_userdata( $author_id );
$role = ( 'administrator' === $user_data->roles[0] ) ? 'Admin' : ucfirst( $user_data->roles[0] ?? 'author' );
?>
<div class="inside-article rectangular-author-box" itemscope itemtype="https://schema.org/Person">
<div class="author-content">
<div class="author-avatar-block">
<div class="author-avatar" itemprop="image">
<?php echo get_avatar( $author_id, 120, '', get_the_author(), ['loading' => 'lazy'] ); ?>
</div>
<div class="author-role-label"><?php echo esc_html( $role ); ?></div>
</div>
<div class="author-info-wrapper">
<h4 class="author-name">
<a href="<?php echo esc_url( get_author_posts_url( $author_id ) ); ?>" itemprop="url" rel="author">
<span itemprop="name"><?php echo esc_html( get_the_author() ); ?></span>
</a>
</h4>
<div class="author-bio" itemprop="description">
<?php echo wp_kses_post( wpautop( get_the_author_meta( 'description' ) ) ); ?>
</div>
</div>
</div>
</div>
<?php
}
add_action( 'generate_before_comments_container', 'gp_custom_author_box' );
function gp_author_box_styles() {
if ( ! gp_should_show_author_box() ) return;
wp_add_inline_style( 'generate-style', '.rectangular-author-box{margin:50px 0 45px;padding:0}.rectangular-author-box .author-content{display:flex;align-items:flex-start;gap:25px}.rectangular-author-box .author-avatar-block{flex-shrink:0;width:120px;height:150px;background:#f0f0f0;border:1px solid #ddd;display:flex;flex-direction:column;overflow:hidden;border-radius:5%;margin-top:2%}.rectangular-author-box .author-avatar{flex:8;height:80%;overflow:hidden}.rectangular-author-box .author-avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:5% 5% 0 0}.rectangular-author-box .author-role-label{flex:2;height:20%;background:#203864db;color:#FFC107;font-size:80%;font-weight:700;text-align:center;display:flex;align-items:center;justify-content:center;letter-spacing:1px}.rectangular-author-box .author-name{margin:0 0 10px;font-size:1.82em;font-weight:600;color:#096fc0;text-decoration:underline}.rectangular-author-box .author-name a{color:inherit;text-decoration:inherit;font-weight:inherit;transition:color .3s}.rectangular-author-box .author-name a:hover{color:#e43900!important}.rectangular-author-box .author-bio{margin:0;line-height:1.6;color:#333}.rectangular-author-box .author-bio p{margin:0 0 12px}.rectangular-author-box .author-bio a{color:#0066cc;text-decoration:underline;transition:color .3s}.rectangular-author-box .author-bio a:hover{color:#e43900!important}@media(max-width:1024px){.rectangular-author-box .author-content{flex-direction:column;align-items:center;gap:20px}.rectangular-author-box .author-avatar-block{width:150px;height:188px}.rectangular-author-box .author-name{text-align:center;font-size:1.755em;margin-top:-.2em;padding-bottom:.5em;margin-bottom:.5em;border-bottom:1px dashed #607D8B}.rectangular-author-box .author-info-wrapper{width:100%}}@media(max-width:480px){.rectangular-author-box .author-avatar-block{width:130px;height:162.5px}.rectangular-author-box .author-role-label{font-size:75%}.rectangular-author-box .author-name{font-size:1.625em}}' );
}
add_action( 'wp_enqueue_scripts', 'gp_author_box_styles', 15 );

//Hết code GeneratePress Author Box
Tịnh Nguyễn
Admin

Mình hay vọc về WordPress, HTML & CSS để cải thiện trải nghiệm duyệt web trên Hocban.vn | Bạn có thể vào mục giới thiệuliên hệ để xem thêm thông tin chi tiết hơn nè.

5 1 đánh giá
Đánh giá bài viết
guest

4 Bình luận
Phản hồi nội tuyến
Xem tất cả bình luận
Quốc Điền
Khách

Add vào không hiện ad nhỉ, chỉ hiện lúc đầu khi còn trang wp-admin, tắt đi hoặc ẩn danh không hiện. Mình add thẳng vào file functions luôn

Quốc Điền
Khách
Trả lời  Tịnh Nguyễn

đã hiện rồi bác, theme này gọn nhưng phải custom thêm nhiều thứ quá =)))