Code Author Box theme generatepress

Chia sẻ code hiển thị Author box ở phần cuối bài viết trên theme generatepress cho những ai đang cần.

1. Code hiển thị Authorbox

Các bạn thêm đoạn code sau vào functions.php nhé

function author_box() {
	ob_start(); ?>
	<div class="author-box">
		<?php global $post;	?>	
		<div class="avatar"><?php echo get_avatar( get_the_author_meta( 'ID' )); ?></div> 
		<div class="author-info">		
			<h5 class="author-title"><?php printf( esc_attr__( 'Về %s', 'the author' ), get_the_author_meta( 'display_name') );?></h5>	
			<div class="author-summary">	
				<p class="author-description"><?php echo wp_kses( get_the_author_meta( 'description' ), null ); ?></p> 
			</div> 
		</div>
	</div>
	<?php
	$author_box = ob_get_contents();
	ob_end_clean();
	echo $author_box;
}
add_action('generate_before_comments_container','author_box');

Đoạn code này có thể áp dụng cho theme khác, nhưng chỗ dòng add_action bạn phải thay hook cho phù hợp với theme mình dùng nhé.

2. Css author box

Dĩ nhiên là phải có cái này nhìn nó mới đẹp chứ. Các bạn thêm đoạn code sau vào style.css nhé.

/* css author box */
.author-box {
    display: flex;
    flex-direction: row;
    align-items: center;
	border: 1px solid #c2c2c2;
    margin: 15px 0;
    padding: 20px;
    border-radius: 7px;
}
.author-info {
    padding-left: 15px;
}
h5.author-title {
    margin-bottom: 0 !important;
}
.avatar {
    border-radius: 100%;
    max-width: 100px;
}

Về phần nội dung giới thiệu, bạn vào sửa phần Biographical Info trong profile. Về avatar, bạn vào web gravatar.com, đăng ký tài khoản bằng email của user đang dùng. Up avatar lên bên đó, tự khắc bên này sẽ hiện.

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