Dễ dàng tùy chỉnh post info trong Genesis

Post info trong genesis là dòng chữ xuất hiện ở phía dưới tiêu đề bài viết gồm các thông tin như: tác giả của bài viết, ngày đăng bài, số lượng bình luận trên bài viết đó…Trong bài viết này mình có một vài thủ thuật giúp bạn chỉnh sửa cho phần này.

Cách xóa bỏ post info

Phần post info được quản lý bởi hook genesis_before_post_content nó có tên callback genesis_post_info. Bạn dễ dàng xóa post info bằng cách sử dụng hàm remove_action.

remove_action( 'genesis_before_post_content', 'genesis_post_info' );

Ngoài cách này ra, đơn giản bạn có thể sử dụng CSS để ẩn post info cũng được.

.post-info {
    display: none;
}

Các thành phần trong post info

Như các bạn đã thấy các thành phần của post info, mỗi một thành phần được genesis thiết kế vào một shortcode. Thứ tự các shortcode tương ứng với các thành phần như sau:
ngày xuất bản bài viết=[ post_date ], tác giả=[ post_author_posts_link ], số comments trên bài viết=[ post_comments ], nút chỉnh sửa bài viết=[ post_edit ].

Bạn có thể thay đổi thứ tự các shortcode này. Xem ví dụ sau chúng ta sẽ loại bỏ ngày đăng bài và tác giả.

add_filter( 'genesis_post_info', 'post_info_filter' );
function post_info_filter($post_info) {
if (!is_page()) {
    $post_info = '[post_comments][post_edit]';
    return $post_info;
}}

Nếu bạn copy shortcode ở đoạn code trên thì bỏ dấu cách ở đầu và cuối shortcode đi.

Shortcode đầy đủ sử dụng cho genesis post info như sau:

/** Customize the post info function */
add_filter( 'genesis_post_info', 'post_info_filter' );
function post_info_filter($post_info) {
if ( !is_page() ) {
    $post_info = '[ post_date ] by [ post_author_posts_link ] [ post_comments ] [ post_edit ]';
    return $post_info;
}}

/** Code courtesy of StudioPress Code Snippets */

Chúng ta chỉ việc sửa đổi lại nội dung của biến $post_info, thêm, xóa shortcode và sử dụng HTML markup nếu muốn.
Bạn có thể tùy chỉnh shortcode nâng cao hơn, như ví dụ trên shortcode [ post_comments ] mặc định sẽ hiển thị “Leave a comment“, nếu có bình luận thì hiển thị là “n comments” trong đó n là số lượng comments. Chúng ta có thể đổi dòng chữ này với thuộc tính của shortcode post_comments như dưới đây:

[ post_comments zero="0 bình luận" one="1 bình luận" more="% bình luận" ]

Trang chí post info

Như bạn thấy hình trên, mình có thêm icon vào trước ngày tháng và bình luận trên blog của mình. Trước hết bạn hãy chuẩn bị các icon có kích thước 16x16px rồi đặt vào images trong genesis child theme.

Làm đẹp post info với css sau đây.

/*icon trước ngày tháng*/
.post-info .date {
  background: url(images/date.png) no-repeat left;
  padding: 0 10px 0 20px;
}
/*Icon trước tên tác giả:*/
.post-info .author {
  background: url(images/user.png) no-repeat left;
  padding: 0 10px 0 20px;
}
/*Icon trước số comments*/
.post-info .post-comments {
  background: url(images/comment.png) no-repeat left;
  padding: 0 10px 0 20px;
}

Tùy biến Genesis post info sử dụng plugin

Cài đặt plugin Genesis Simple Edits plugin, plugin này thiết kế dành riêng cho genesis.
Sau khi tải và kích hoạt plugin, bạn có thể tùy chỉnh nội dung của hook genesis_post_info thông qua mục settings của plugin.

Ví dụ bạn không cần shortcode [ post_date ] thì có thể xóa.

Sau đó nhấn Save Settings. Kết quả post info đã được thay đổi, bạn không cần thêm code trong file functions.php nữa.

Chú ý: không được kích hoạt plugin Genesis Simple Edits trong khi đang sửa hook genesis_post_info trong theme functions.php, do đó nếu bạn thay đổi nội dung post Info sử dụng một trong 2 cách thì thôi cách kia. Ví dụ nếu sửa post info trong plugin thì xóa hook genesis_post_info trong functions.php và ngược lại.

Chúc bạn thành công.

Nếu bạn thích bài viết này, hãy ủng hộ chúng tôi bằng cách đăng ký nhận bài viết mới ở bên dưới và đừng quên chia sẻ kiến thức này với bạn bè của bạn nhé. Bạn cũng có thể theo dõi blog này trên Twitter và Facebook