Mặc định giao diện trang chủ của genesis là các giao diện được sắp xếp theo list, ví dụ bài viết mới ngoài trang chủ chẳng hạn, trong khi đó tôi muốn thay đổi chút giao diện của mình để sử dụng bố cục hiện đại và tôi sử dụng đến Genesis Grid, vậy Genesis Grid là gì?
Trên thực tế thì Bill Erickson đã viết ra một plugin Genesis Grid nó rất tiện lợi nếu bằng đang tìm kiếm một plugin tiện lợi thể thay đổi cách bố trí bài viết trên blog của mình.
Khi sử dụng Genesis Grid các bài viết của bạn sẽ được thay đổi xắp xếp theo dạng lưới mạng lại phong cách hiện đại cho trang web của bạn. Tuy nhiên thay vì sử dụng plugin bạn chỉ cần sử dụng một vài dong code php trong file functions.php và thêm CSS cho nó để đạt được một khung lưới trong mẫu bài viết mới.
Trước khi sử dụng phương pháp này tôi khuyên bạn nên backup dữ liệu file functions.php trước khi chỉnh sửa nó.
Dưới đây là demo tôi đã sử dụng trên theme genesis sample
Bài viết hướng dẫn bạn cách hiển thị bài viết dạng lưới trong genesis theme
Bước 1: Thêm chức năng hiển thị lưới vào functions.php
//* Grid Style Content Archive
function be_archive_post_class( $classes ) {
// Don't run on single posts or pages
if( !is_home() )
return $classes;
$classes[] = 'one-half';
global $wp_query;
if( 0 == $wp_query->current_post || 0 == $wp_query->current_post % 2 )
$classes[] = 'first';
return $classes;
}
add_filter( 'post_class', 'be_archive_post_class' );
function he_archive_post_class( $classes ) {
// Don't run on single posts or pages
if( !is_category() )
return $classes;
$classes[] = 'one-half';
global $wp_query;
if( 0 == $wp_query->current_post || 0 == $wp_query->current_post % 2 )
$classes[] = 'first';
return $classes;
}
add_filter( 'post_class', 'he_archive_post_class' );
Thêm đoạn mã code bên dưới vào cuối cùng file funcions.php trong thư mục child theme của bạn.
Bước 2: Tùy chỉnh CSS cho nó.
Thêm đoạn mã CSS sau vào cuối cùng file style.css
.blog .entry {
padding: 35px 40px;
}
Đó là tất cả những gì bạn cần làm để chia bài viết mới của bạn thành 2,3 lưới khác nhau.
Lưu ý: Mã trên đã áp dụng chế độ xem dạng lưới tới khu vực blog, lưu trữ, doanh mục, hơn nữa nếu bạn muốn nó hiển thị thành ba cột bại chỉ cần chỉnh sửa đoạn current_post% 2 thành current_post% 3.
Đây chỉ là hướng dẫn cơ bản về cách áp dụng bố trí dạng lưới vào blog Genesis của bạn. Nếu chúng ta thay đổi vị trí của hình ảnh nổi bật và các phần tử bao quanh khác chẳng hạn như bài đăng meta và thông tin bài, thì nó sẽ trông đẹp hơn. Tuy nhiên, Chúng ta hãy dành nó cho một bài đăng trong tương lai.
Hãy cho tôi biết nếu bạn có bất cứ thắc mắc nào.
