Tùy biến ảnh đại diện, avatar tác giả lên đầu bài viết Monochrome Pro

Monochrome Pro là một trong những chủ đề Genesis gần đây được phát hành bởi StudioPress, có thiết kế khá gọn gàng và nhỏ gọn tập trung vào nội dung.

Hình ảnh đại diện ở trên cùng và avatar tác giả phía trên tiêu đề, làm cho bài viết của bạn đơn giản và đẹp hơn.

Bài viết này được thực hiện trên Monochrome Pro đối với những theme khác bạn có thể tùy chình CSS theo cách riêng của bạn, download miễn phí theme tại đây monochrome-pro.zip

Các bước Tùy biến ảnh đại diện, avatar tác giả lên đầu bài viết Monochrome Pro

Bước 1: Hiển thị hình ảnh đại diện trên các bài viết

Bước 2: Avatar của Tác giả Hiển thị phía trên Tiêu đề bài viết

Bước 3: Tùy chỉnh CSS phần ảnh đại diện và avatar

Mã tùy biến hiển thị hình ảnh đại diện trên các bài viết trong theme genesis

// Hiển thị ảnh đại diện trên bài viết

add_action( 'genesis_after_header', 'topleague_hero_image' );
function topleague_hero_image() {
 
 if ( !is_singular( 'post' ) ) { // if we are not on a single Post, abort.
 return;
 }
 
 if ( has_post_thumbnail() ) {
 $image = genesis_get_image( 'format=url&size=post-image' ); // set $image to URL of featured image. 
 } ?>

<div class="post-hero" style="background-image: url('<?php echo $image; ?>')">
 </div>

<?php
}

Mã tùy biến hiển thị avatar lên trên tiêu đề bài viết

// Hiển thị avatar trên đầu bài viết genesis
add_action('genesis_before_entry', 'topleague_post_author_avatar');

function topleague_post_author_avatar() {
if (is_single() ) {

echo '<div class="entry-avatar">';
 echo get_avatar(get_the_author_meta('email'), 110);
 echo '</div>';
}}

Thêm CSS tùy chỉnh khu vực ảnh đại diện và avatar.

.site-inner {
 clear: both;
 padding-top: 0;
 word-wrap: break-word;
 background-color: #fff;
 clear: both;
 margin-bottom: 100px;
 margin-top: 100px;
 max-width: 1200px;
 position: relative;
 z-index: 999;
}

.full-width-content .content {
 float: none;
 margin-left: auto;
 margin-right: auto;
 width: 680px;
}

.entry-title {
 letter-spacing: -0.5px;
}

.single.full-width-content .entry-header {
 text-align: center;
}

.single.full-width-content .site-inner {
 margin-top: -180px;
}

.entry, .single.full-width-content .entry {
 padding: 0;
 margin-top: 40px;
}

.entry-avatar .avatar {
 background-color: #fff;
 float: none;
 margin-bottom: 40px;
 margin-top: -60px;
 padding: 5px;
}

.entry-avatar {
 float: none;
 margin-left: 40%;
}

.post-hero {
 padding: 200px 0;
 background-size: cover;
 background-repeat: no-repeat;
 background-position: center;
}

@media only screen and (max-width: 1023px) {
.full-width-content .content {
 width: 100%;
}
}

Lưu ý: Bạn cần phải chuyển tới trang Cài đặt chủ đề Genesis và chọn bố cục toàn chiều rộng để mọi việc hoạt động như mong muốn, ngoài ra bạn có thể tham khảo thêm một số dịch vụ mua theme wordpress giá rẻ để tìm cho mình một theme đẹp.

Đó là tất cả những gì bạn cần phải làm! Và bây giờ, hãy tải lại các bài đăng trên blog của bạn và xem kết quả nào.

Nếu bạn không thể tìm thấy kết quả mong muốn hoặc chỉ cần có bất kỳ câu hỏi nào về điều này, vui lòng để lại nhận xét bên dưới.