Đặt Author Avatar trước tiêu đề bài viết trong Genesis

Hôm nay mình sẽ giới thiệu một thủ thuật rất đơn giản để chèn ảnh Avatar của tác giả vào trước tiêu đề của bài viết. Thủ thuật này sẽ hữu ích đối với các blog có nhiều tác giả hoặc chỉ đơn giản là bạn muốn tạo một nét riêng cho blog của mình. Các bạn có thể thấy demo ngay trên blog này.

Thủ thuật này chỉ áp dụng cho các blog sử dụng Genesis FrameWork.

Chúng ta đều biết rằng, để lấy ảnh Avatar của tác giả bài viết, ta chỉ cần dùng lệnh:

get_avatar( get_the_author_email(), '60' );

Trong đó 60 là kích thước của Avatar, bạn có thể thay đổi tùy thích. Bây giờ, chúng ta sẽ sử dụng một đoạn code nhỏ để đặt Avatar vào vị trí mà bạn muốn, như ở đây là trước tiêu đề bài viết.
Đầu tiên, các bạn mở file functions.php trong thư mục theme bạn sử dụng, copy và dán đoạn code này vào:

add_action(genesis_before_post_title,avatar_before_post_title);
function avatar_before_post_title(){
if(!is_page()){  
  echo '<div class="ava">';
            echo get_avatar( get_the_author_email(), '60' );
  echo '</div>';
}}

Đoạn code này sẽ giúp chèn ảnh Avatar vào ngay bên trên tiêu đề của bài viết. Để cho nó nằm về bên trái tiêu đề giống như trên trang của mình, ta sẽ thêm một lớp css vào file style.css để avatar nằm đúng vị trí. Ta sẽ thêm như sau:

.ava{
  float: left;
  width: 60px;
  height: 60px;
  -moz-border-radius: 50%; 
  -webkit-border-radius: 50%; 
  border-radius: 50%;
  overflow: hidden;
  margin: 0 0 0 15px;
}

Bạn có thể chuyển nó sang bên phải bằng cách chuyển thuộc tính float: left thành float: right. Nếu bạn không muốn avatar hình tròn thì có thể bỏ các thuộc tính border-radius đi. Chúc bạn thành công!

Đánh giá bài viết này

Chú ý - WordPress Hosting 1$/tháng - miễn phí tên miền

Bạn có biết GoDaddy đang có khuyến mãi WordPress hosting chỉ còn 1$/tháng kèm theo một tên miền .COM .NET .ORG miễn phí. Hãy đăng ký ngay để tiết kiệm chi phí nhất nhé.
Xem ngay

ĐĂNG KÝ NHẬN TIN QUA EMAIL

Nếu thấy bài viết trên blog có ích cho bạn, hãy đăng ký nhận tin qua email để cập nhật bài viết mới nhanh nhất và thỉnh thoảng nhận quà bất ngờ!

Comments

  1. Em thích cái này chèn Logo FPT và site thì tuyệt. Hi. mấy hôm nữa có thời gian phải vọc mạnh

  2. Blog của mình có title nằm ở trên cái video nên nhìn trang chủ trông rất xấu, bạn có thể làm nó nằm phía dưới như mấy cái blog video bình thường được không?

Gửi bình luận

Lưu ý: Không sử dụng keyword để thay cho tên của bạn, hãy sử dụng tên thật. Cảm ơn bạn đã tham gia bình luận trên blog!