Cách thêm Gravatar vào Post Info trong giao diện Genesis

[Thủ thuật WordPress] Hướng dẫn cách thêm Gravatar vào Post Info trong giao diện Genesis đơn giản – Trong bài viết trước đây mình đã hướng dẫn các bạn cách tùy chỉnh Post Info cho giao diện Genesis chuyên nghiệp nhất tuy nhiên để tạo tính chuyên nghiệp hơn cho Post Info bạn có thể thêm Gravatar tác giả bài viết vào cùng phần Post Info điều này không chỉ giúp độc giả khi đọc bài viết sẽ cảm thấy thích thú hơn khi biết mặt được tác giả đồng thời nó còn làm cho trang Web trở nên chuyên nghiệp hơn.

Trong bài viết trước đây về thủ thuật WordPress mình có giới thiệu với các bạn cách tạo nút Back to Top trong giao diện Genesis đơn giản giúp bạn có thể dễ dàng tích hợp nút back to top cho giao diện Genesis mà không cần sử dụng Plugin tiếp tục trong bài viết này mình sẽ hướng dẫn các bạn cách thêm Gravatar vào Post Info trong giao diện Genesis đơn giản.

Thêm GRavatar vào Post Info trong giao diện Genesis

Việc tích hợp Gravatar vào Post Info giúp cho thông tin bài viết được chi tiết hơn đồng thời còn tạo cho trang Web của bạn có một phong cách riêng vậy để tích hợp Gravatar vào Post Info trong giao diện Genesis phải làm sao? hãy cùng blog thủ thuật tìm hiểu cách thêm Gravatar vào Post Info trong giao diện Genesis đơn giản nhất.

Đầu tiên bạn hãy truy cập vào tập tin functions.php của giao diện đang sử dụng (nếu bạn dùng giao diện Genesis thì chắc chắn bạn sẽ có một giao diện con (child theme) hãy truy cập vào tập tin functions.php của giao diện con) bằng cách truy cập vào trang quản lý WordPress > Vào Giao diện > Kích chọn Sửa (bạn có thể tham khảo bài viết sửa giao diện, plugin WordPress không cần FTP để nắm rõ hơn cách chỉnh sửa các tập tin của giao diện). Sau đó hãy sao chép đoạn mã tương ứng bên dưới và dán vào cuối cùng của tập tin functions.php.

//* Add gravatar before entry title
add_action( 'genesis_entry_header', 'bg_entry_gravatar', 7 );
function bg_entry_gravatar() {
	if ( is_singular( 'post' ) ) {
		echo '<div class="entry-avatar">';
		echo get_avatar( get_the_author_meta( 'user_email' ), 240 );
		echo '</div>';
	}
}

Tùy biến Gravatar

Lúc này bạn sẽ thấy “gravatar ” xuất hiện cùng với thông tin Post Info tuy nhiên không được đẹp cho lắm vì thế bạn cần sử dụng tiếp đoạn mã bên dưới và dán vào tập tin cuối cùng tập tin Style.css của giao diện đang sử dụng.

/* Entry Avatar
--------------------------------------------- */
.entry-header .avatar {
	border: 5px solid #f5f5f5;
	border-radius: 50%;
	float: none;
	height: 120px;
	margin-bottom: 20px;
	text-align: center;
	width: 120px;
}

Xem video thêm Gravatar vào Post Info

Trong đoạn CSS này bạn hãy tùy chỉnh sao cho phù hợp với trang Web mình nhất, sau khi thực hiện xong hãy lưu lại và nhớ xóa Cache, quá đơn giản để bạn có thể thêm Gravatar vào Post Info trong giao diện Genesis phải không?

Cuối cùng không có gì hơn nếu bạn cảm thấy bài viết có ích hãy subscribe blog của mình thường xuyên để cập nhật những bài viết mới nhất qua Email – Chân thành cảm ơn!