Như các bạn biết, phần post info thường nằm bên dưới hoặc bên trên tiêu đề của mỗi bài viết, chưa các thông tin như tác giả bài viết, thời gian publish bài viết, số lượng bình luận trên bài viết đó…Ở bài viết này mình sẽ trình bày một số thủ thuật nhỏ giúp bạn có thể tùy chỉnh cho phần này.
2 cách xóa bỏ post info
Cách thứ nhất, ta sử dụng code sau chèn vào file functions.php:
|
1 |
remove_action( 'genesis_before_post_content', 'genesis_post_info' ); |
Cách thứ hai, ta sẽ sử dụng css:
|
1 2 3 |
.post-info { display: none; } |
Loại bỏ các thành phần trong post info
Thông thường post info sẽ bao gồm các thông tin: ngày xuất bản bài viết, tác giả, số comments trên bài viết, nút chỉnh sửa bài viết, tương ứng với các shortcode [ post_date ], [ post_author_posts_link ], [ post_comments ], [ post_edit ]. Bạn có thể thay đổi thứ tự các shortcode này. Ví dụ code đoạn code sau sẽ loại bỏ tên tác giả bài viết trong post info:
|
1 2 3 4 5 6 |
add_filter( 'genesis_post_info', 'post_info_filter' ); function post_info_filter($post_info) { if (!is_page()) { $post_info = '[ post_date ] [ post_comments ][ post_edit ]'; return $post_info; }} |
Trong shortcode [ post_comments ] mặc định sẽ hiển thị “Leave a Comment” nếu bài viết không có bình luận và “n comments” với n là số comments trên bài viết. Bài có thể sửa lại bằng cách sử dụng shortcode sau thay thế:
|
1 |
[ post_comments zero="0 bình luận" one="1 bình luận" more="% bình luận" ] |
Chú ý nếu bạn copy các đoạn code trên thì phải bỏ các khoảng trắng trong các shortcode.
Chèn icon vào post info
Như các bạn thấy mình đã chèn các icon vào phần post info trên blog của mình. Việc này rất đơn giản, trước hết bạn cần chuẩn bị các ảnh icon tương ứng với các mục với kích thước 16x16px, đặt vào folder images trong theme.
Tiếp theo ta sẽ sử dụng các lớp css tương ứng:
- Icon trước ngày tháng:
|
1 2 3 4 |
.post-info .date { background: url(images/date.png) no-repeat left; padding: 0 10px 0 20px; } |
- Icon trước tên tác giả:
|
1 2 3 4 |
; html-script: false ].post-info .author { background: url(images/user.png) no-repeat left; padding: 0 10px 0 20px; } |
- Icon trước số comments
|
1 2 3 4 |
; html-script: false ].post-info .post-comments { background: url(images/comment.png) no-repeat left; padding: 0 10px 0 20px; } |
Ngoài ra bạn cũng có thể sử dụng css để loại bỏ một vài thành phần trong post info bằng cách thêm thuộc tính display: none; và các lớp css tương ứng bên trên. Chúc bạn thành công!
