Tùy biến post info trong Genesis

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.

post-info-author-date

 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:

remove_action( 'genesis_before_post_content', 'genesis_post_info' );

Cách thứ hai, ta sẽ sử dụng css:

.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:

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ế:

[ 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:
.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;
}

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!

Đá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. Nguyễn Ngọc Tú says:

    Bài viết rất hay. Genesis dùng rất nhẹ và hỗ trợ SEO tốt. Mình hiện cũng đang dùng Genesis và có một vấn đề cương mắc muốn được Bảo chỉ dẫn.
    Mình muốn customize homepage bằng việc sử dụng các widgets như home-top, home-middle, home-bottom kèm theo pagination phía cuối. Khi click chuyển trang thì sẽ hiện thị dạng blog.
    Cảm ơn rất nhiều! {c1}

  2. Mình dùng plugin Genesis dimple edit để chỉnh post info. Cách này rất hay, mình có thể không cần xài plugin nữa.

  3. Bác cho em hỏi shorcode hiện ra cái chyện mục mà bài viết được gửi vào là gì ạ? Em đang dùng theme mdcopy của bác, có phải nó là [post_category] không hả bác???

  4. genesis mình cũng mới tìm hiểu nó khá hay, tiết kiệm thời gian làm web wordpress, nhanh và nhẹ. Thank y

  5. remove_action( ‘genesis_before_post_content’, ‘genesis_post_info’ ); bạn ơi đoạn code này chèn vào chỗ nào file functions.php đấy ? mình làm mà không được

  6. chào bạn hiện tại web của mình đang bị lỗi phần home page khi mình chon hompge là recent post thì nó ko hiện ra j cả, có lẽ do mình thêm function xóa ngày tháng, khi chọn nó là trang tĩnh thì sẽ có recent post. Tuy nhiên lại bị vấn đề là sẽ hiển thị tiêu đề của post trước rồi ms hiển thị tên trang web tren thanh tiêu đề của trình duyệt .bác nào có kinh nghiệm chỉ e với ạ.
    http://sanvoucher.com/

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!