CSS Grid là một trong những tính năng mới tuyệt vời nhất của CSS được hỗ trợ bởi tất cả các trình duyệt hiện đại (hỗ trợ một phần trong IE vào thời điểm viết này) kể từ tháng 3 năm nay. Và việc tạo ra một khung lưới trên blog của bạn bây giờ trở lên đơn giản hơn như việc khai báo display thuộc tính của phần tử vùng chứa lớp như grid.
Bạn có thể xem thêm các bài viết khác xắp xếp bài viết mới dạng lưới trong genesis.
Số lượng các cột có thể được thiết lập theo các lớp fr, viết tắt của một phần của lưới có sẵn. Ví dụ, đối với lưới 3 cột mà chúng ta đặt grid-template-columns: 1fr 1fr 1fr. Bạn muốn khoảng cách 40px giữa các mặt hàng lưới? Đơn giản. Chỉ cần thêm grid-gap: 40px.
Những gì chúng ta làm được khi xem xong hướng dẫn này?
- loop-archive.php dùng PHP để loại bỏ tất cả các móc mặc định Genesis, sau đó thêm hình ảnh đặc trưng, tiêu đề bài và meta và gói tất cả các bài viết trong một div.articles Nó có thể được ví như là mạng lưới giao diện.
- Tải phần mẫu ở trên bên trong “home.php” (cho trang bài viết) và “archive.php” (cho tất cả các tệp lưu trữ khác).
- Thêm CSS cần thiết bao gồm cả dự phòng Flexbox cho các trình duyệt không được hỗ trợ.
Hướng dẫn đã được viết cho Genesis Sample nó nên làm việc với bất kỳ chủ đề nào của Genesis.
Bước 1: Chuẩn bị
Truy cập Settings > Reading hãy cài đặt 12 bài viết trên 1 trang để đảm bảo lưới được hiển thị đẹp nhất.
Genesis > Theme Settings > Content Archives để cài đặt nội dung hiển thị bao gồm các hình ảnh nổi bật.
Tạo trang trống có tiêu đề nói Blog và đặt nó làm trang bài viết ở Settings > Reading KHÔNG áp dụng Mẫu Trang Blog.
Bước 2: Tạo nội dung mẫu
Tạo một tập tin có tên là loop-archive.php trong thư mục child theme và dán toàn bộ nội dung code bên dưới.
<?php
add_filter( 'body_class', 'custom_body_class' );
/**
* Add `content-archive` class to the body element.
*
* @param array $classes the current body classes
* @return array $classes modified classes
*/
function custom_body_class( $classes ) {
$classes[] = 'content-archive';
return $classes;
}
// Force full width content.
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
// Add opening div.articles tag before the latest post.
add_action( 'genesis_before_entry', function () {
global $wp_query;
if ( 0 === $wp_query->current_post && is_main_query() ) {
echo '<div class="articles">';
}
} );
// Remove all hooks from genesis_entry_header, genesis_entry_content and genesis_entry_footer actions.
$hooks = array(
'genesis_entry_header',
'genesis_entry_content',
'genesis_entry_footer',
);
foreach( $hooks as $hook ) {
remove_all_actions( $hook );
}
// Add featured image inside entry header.
add_action( 'genesis_entry_header', 'genesis_entry_header_markup_open' );
add_action( 'genesis_entry_header', 'genesis_do_post_image' );
add_action( 'genesis_entry_header', 'genesis_entry_header_markup_close' );
// Add entry title and entry meta in entry content.
add_action( 'genesis_entry_content', 'genesis_do_post_title' );
add_action( 'genesis_entry_content', 'genesis_post_meta' );
add_filter( 'genesis_post_meta', 'custom_post_meta_filter' );
/**
* Customize entry meta.
* @param string $post_meta Existing entry meta
* @return string Modified entry meta
*/
function custom_post_meta_filter( $post_meta ) {
$post_meta = '[post_categories before=""]';
return $post_meta;
}
// Move .archive-pagination from under main.content to adjacent to it.
remove_action( 'genesis_after_endwhile', 'genesis_posts_nav' );
add_action( 'genesis_after_content', 'genesis_posts_nav' );
// Add closing div tag (for .articles) after the last post.
add_action( 'genesis_after_endwhile', function () {
if ( is_main_query() ) {
echo '</div>';
}
} );
Nếu bạn muốn nội dung được hiển thị, thêm
add_action( 'genesis_entry_content', 'genesis_do_post_content' );
phía dưới
add_action( 'genesis_entry_content', 'genesis_do_post_title' );
Bước 3: Tải nội dung mẫu bên trên loop-archive.php
Tạo tập tin có tên home.php và archive.php trong thư mục child theme và dán toàn bộ code bên dưới.
<?php get_template_part( 'loop', 'archive' ); genesis();
Bước 4: Thiết kế giao diện CSS cho nội dung phần lưới
Sao chép toàn bộ code bên dưới dán vào file style.css trong thư mục child theme yoursite/contents/themes/sample/style.css thay đổi đường dẫn cho tương ứng với theme của bạn.
Một nội dung được vắn tắt cho grid-template-columns: 1fr 1fr 1fr là grid-template-columns: repeat(3, 1fr). Vì vậy, đối với lưới 4 cột, bạn có thể sử dụng grid-template-columns: repeat(4, 1fr).
Bước 5: Flexbox
Bố cục Flexbox (Flexbox Layout) hay còn gọi là (CSS3 Flexbox Layout Module4) là một loại bố cục mới của CSS3 được tạo ra để cải tiến cách sắp xếp, hướng và trật tự của các phần tử trong một khung lớn (parent container) ngay cả khi chúng có kích thước cố định hay tự do. Đặc điểm chính của một khung linh hoạt (flex container) là có khả năng điều chỉnh kích thước của các phần tử con để lấp đầy khoảng trống một cách hiệu quả nhất trên các kích thước màn hình khác nhau.
Chúng ta có thể sử dụng display: flex trước display: grid như các trình duyệt hỗ trợ sẽ ghi đè lên và khai báo flex với lưới điện. Sau đó, trong truy vấn tính năng bỏ đặt các giá trị chiều rộng / lề, vv được sử dụng cho dự phòng Flexbox trong các trình duyệt hỗ trợ Grid.
Trong CSS đã thêm trước đó, thay đổi
.articles {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 1fr 1fr;
grid-gap: 40px;
grid-template-columns: 1fr 1fr 1fr;
}
.content-archive .content .entry {
margin-bottom: 0;
padding: 0;
border-radius: 3px;
-webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
}
Thành
.articles {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 1fr 1fr;
grid-gap: 40px;
grid-template-columns: 1fr 1fr 1fr;
}
.content-archive .content .entry {
margin-bottom: 0;
padding: 0;
border-radius: 3px;
-webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
width: 31.25%; /* http://d.pr/i/sVsJRM */
margin-bottom: 3.125%;
}
.content-archive .content .entry:last-child {
margin-right: auto;
margin-left: 3.125%;
}
@supports ((display: -ms-grid) or (display: grid)) {
.content-archive .content .entry {
width: auto;
margin-bottom: 0;
}
.content-archive .content .entry:last-child {
margin-right: 0;
margin-left: 0;
}
}
Và
@media only screen and (max-width: 1023px) {
.articles {
-ms-grid-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr;
}
}
@media only screen and (max-width: 500px) {
.articles {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
}
Thành
@media only screen and (max-width: 1023px) {
.articles {
-ms-grid-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr;
}
.content-archive .content .entry {
width: 47.5%; /* http://d.pr/i/zHWeyP */
margin-bottom: 5%;
}
.content-archive .content .entry:last-child {
margin-left: 5%;
}
@supports ((display: -ms-grid) or (display: grid)) {
.content-archive .content .entry {
width: auto;
margin-bottom: 0;
}
.content-archive .content .entry:last-child {
margin-left: 0;
}
}
}
@media only screen and (max-width: 500px) {
.articles {
flex-direction: column;
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
.content-archive .content .entry {
width: 100%; /* http://d.pr/i/zHWeyP */
}
.content-archive .content .entry:last-child {
margin-left: 0;
}
}
Đó đó là tất cả những gì bạn cần làm để có thể tùy chỉnh giao diện bài viết theo kiểu dạng lưới tuyệt đẹp và sử dụng CSS Grid, giờ đây hay lưu lại tất cả thay đổi và quay lại trang chủ ấn F5 để xem kết quả nào.
Lưu ý: Hẫy cho tôi biết tất những thắc mắc của bạn bên dưới khung comments.
