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:
|
1 |
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:
|
1 2 3 4 5 6 7 |
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:
|
1 2 3 4 5 6 7 8 9 10 |
.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!
