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

[Thủ thuật WordPress] Hướng dẫn cách tùy chỉnh Post Info cho giao diện Genesis chuyên nghiệp – Với một giao diện mặc định của Post Info trên giao diện Genesis mặc định nó rất đơn điệu và không nổi bật và bạn muốn tùy biến Post Info cho giao diện Genesis mà không cần sử dụng Plugin thì phải làm sao. Post Info là một thành phần không thể thiếu trong mỗi bài viết nó thể hiện các thông tin như ngày đăng bài, tác giả, số lượng bình luận… vì thế nó là một thông tin rất quan trọng của một trang Web, tuy nhiên để tùy biến Post Info cho giao diện Genesis thì phải làm sao?

Trong bài viết trước đây mình có hướng dẫn các bạn cách tùy chỉnh Post meta cho giao diện Genesis chuyên nghiệp giúp bạn có thể thay thế giao diện Post meta theo phong cách mới và độc đáo, 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 Info cho giao diện Genesis chuyên nghiệp.

Cách tùy chỉnh Post Info cho giao diện Genesis

Thông thường các thông tin Post Info thường hay xuất hiện sau mỗi tiêu đề bài viết tùy theo mỗi giao diện mà có sự bố trí khác nhau, đối với giao diện Genesis thì nó thường hay xuất hiện sau mỗi tiêu đề 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 Info cho giao diện Genesis chuyên nghiệp nhất.

Đầu tiên bạn hãy truy cập vào tập tin functions.php 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 functions.php 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 sao chép đoạn các đoạn mã tương ứng bên dưới và dán vào functions.php.

Đầu tiên đoạn mã sử dụng Font Awesome

//Font awesome
add_action( 'wp_enqueue_scripts', 'load_font_awesome' );
function load_font_awesome() {
	wp_enqueue_style( 'font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', array(), '4.7.0' );	
}

Hiện tại Font Awesome mới nhất là 4.7 hãy sao chép đoạn mã trên dán vào sau thẻ <?php là được. Sau khi dán xong tiếp tục sử dụng đoạn mã sau đây và cũng dán trực tiếp vào  functions.php.

/** Date */
function crunchify_get_updated_date_for_post() {
    $date = get_the_modified_date(); 
    return $date;
}
add_shortcode( 'crunchify_modified_date', 'crunchify_get_updated_date_for_post' );
 
add_filter( 'genesis_post_info', 'crunchify_add_updated_date_info' );
function crunchify_add_updated_date_info($post_info) {
	$post_info = '<i class="fa fa-clock-o"></i> [post_date] <i class="fa fa-refresh"></i> [crunchify_modified_date] <i class="fa fa-user"></i> [post_author_posts_link] <i class="fa fa-commenting-o"></i> [post_comments] [post_edit]';
	return $post_info;
}

Với đoạn mã trên sẽ giúp bạn hiển thị các thông tin như ngày viết bài, ngày sửa bài, tác giả… Sau khi thực hiện xong ra ngoài trang chủ và tận hưởng thành quả. Và bạn sẽ thấy kết quả như bên dưới.

Xem video hướng dẫn tùy chỉnh Post Info cho giao diện Genesis

Với các thao tác đơn giản ở trên bạn có thể thiết kế cho mình một Post Info chuyên nghiệp rồi đấy, quá đơn giản để bạn có thể tùy chỉnh Post Info cho giao diện Genesis 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!