Cách tùy chỉnh Post meta cho giao diện Genesis chuyên nghiệp

[Thủ thuật WordPress] Hướng dẫn cách tùy chỉnh Post meta cho giao diện Genesis – Trong một giao diện Web hai thông tin Post info và Post meta là hai thông tin không thể thiếu nó mang tính chất về thông tin của bài viết như ngày tháng, tác giả, tổng số bình luận, chuyên mục… trong đó Post info sẽ hiển thị các thông tin về ngày tháng, tác giả… và Post meta sẽ hiển thị các chuyên mục, thẻ tag… tùy thuộc theo giao diện mà hai yếu tố này có thể được đặt ở các vị trí khác nhau như phía dưới tiêu đề, bên dưới nội dung…

Trong bài viết về thủ thuật WordPress trước đây mình có hướng dẫn các bạn cách tạo bài viết liên quan có hình ảnh cho giao diện Genesis không Plugin giúp bạn có thể tạo bài viết liên quan một cách chuyên nghiệp mà không cần phải sử dụng Plugin tiếp tục trong bài viết này mình sẽ hướng dẫn các bạn cách tùy chỉnh Post meta cho giao diện Genesis.

Tùy chỉnh Post meta cho giao diện Genesis

Như mình đã nói ở trên Post meta sẽ hiển thị các chuyên mục, thẻ tag… thông thường trong giao diện Genesis nó nằm ở cuối bài viết. Trong bài viết này mình sẽ hướng dẫn các bạn cách tùy chỉnh Post meta cho giao diện Genesis theo phong cách chuyên nghiệp nhất, hãy cùng blog thủ thuật tìm hiểu cách tùy chỉnh Post meta cho giao diện Genesis.

Hình bên dưới là giao diện mặc định của Post meta (như bạn thấy nó rất đơn điệu và xấu xí).

Đầu tiên bạn hãy truy cập vào tập tin style.css của giao diện đang sử dụng (nếu bạn dùng giao diện Genesis thì chắc chắn bạn sẽ có một giao diện con (child theme) hãy truy cập vào tập tin style.css của giao diện con) bằng cách truy cập vào trang quản lý WordPress > Vào Giao diện > Kích chọn Sửa (bạn có thể tham khảo bài viết sửa giao diện, plugin WordPress không cần FTP để nắm rõ hơn cách chỉnh sửa các tập tin của giao diện). Sau đó hãy tìm đoạn mã sau trong tập tin style.css.

p.entry-meta {
 font-size: 16px;
 margin-bottom: 0;
}
.entry-header .entry-meta {
 margin-bottom: 24px;
}
.entry-footer .entry-meta {
 border-top: 2px solid #f5f5f5;
 padding-top: 24px;
}
.entry-categories,
.entry-tags {
 display: block;
}

Và tiến hành thay đổi các đoạn mã ở trên tương ứng như sau.

Thay đổi màu nền Post meta

.entry-footer .entry-meta {
 border-top: 2px solid #f5f5f5;
 padding: 24px;
 background: #DCDADA;
}

Chú ý: Thay mã màu tại thuộc tính background thành màu sắc mà bạn muốn là được.

Hiển thị Post meta trên một dòng

Hãy chỉnh sửa đoạn lệnh

.entry-categories,
.entry-tags {
 display: block;
}

thành

.entry-categories,
.entry-tags {
}

Ở đoạn lệnh này bạn chỉ cần loại bỏ thuộc tính display: block; là được.

Tùy chỉnh màu nền khi di chuyển chuột đến thuộc tính

Đầu tiên bạn hãy xóa đoạn mã sau

.entry-categories,
.entry-tags {
 display: block;
}

Sau đó thay thế toàn bộ đoạn lệnh bên dưới

.entry-categories a,
.entry-tags a {
padding: 6px 5px;
margin-right: 0;
margin-bottom: 4px;
line-height: 100%;
display: inline-block;
background-color: #ffffff;
border-radius: 3px;
-webkit-border-radius: 3px;
}

.entry-categories a:hover,
.entry-tags a:hover {
background-color: #DA4453;
border-color: #DA4453;
color: #ffffff;
text-decoration: none;
}

Sau khi thực hiện xong hãy lưu lại và kiểm nghiệm kết quả.

Tùy chỉnh hiển thị

Ngoài ra nếu bạn muốn thay đổi chữ Filed Under và Tagged With thành chữ khác thì có thể sử dụng đoạn lệnh sau đây dán vào file Functions.php của giao diện con Genesis.

//* Customize the post meta function
add_filter( 'genesis_post_meta', 'sp_post_meta_filter' );
function sp_post_meta_filter($post_meta) {
if ( !is_page() ) {
	$post_meta = '[post_categories sep="/" before="Chuyên mục: "] [post_tags sep="/" before="Thẻ tag: "]';
	return $post_meta;
}}

Sau đó hãy cập nhật tập tin. Sau khi thực hiện xong bạn sẽ có được kết quả như hình dưới.

Quá đơn giản để bạn có thể tùy chỉnh Post meta cho giao diện Genesis theo cách chuyên nghiệp phải không?

Cuối cùng không có gì hơn nếu bạn cảm thấy bài viết có ích hãy subscribe blog của mình thường xuyên để cập nhật những bài viết mới nhất qua Email – Chân thành cảm ơn!