Đột phá với CSS Grid trong Genesis

Hướng dẫn này cung cấp các bước để tạo và sử dụng mẫu trang tùy chỉnh cho nội dung có chiều rộng cố định với hình ảnh có chiều rộng đầy đủ (hoặc bất kỳ nội dung nào khác) dựa trên bài viết này từ cloudfour trong Genesis.

Mặc dù hướng dẫn đã được viết cho Genesis Sample, nhưng nó sẽ hoạt động với một vài điều chỉnh trong bất kỳ chủ đề Genesis nào.

Bước 1

Tạo một tệp có tên say, template-breakout.php có như sau:

// Template Name: Break Out

add_filter( 'body_class', 'break_out_body_class' );
/**
 * Adds a css class to the body element
 *
 * @param  array $classes the current body classes
 * @return array $classes modified classes
 */
function break_out_body_class( $classes ) {
    $classes[] = 'break-out';

    return $classes;
}

add_action( 'genesis_entry_header', 'custom_entry_header_wrap_open', 7 );
function custom_entry_header_wrap_open() {
    echo '<div class="wrap">';
}

add_action( 'genesis_entry_header', 'custom_entry_header_wrap_close' );
function custom_entry_header_wrap_close() {
    echo '</div>';
}

// Force full width content.
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

genesis();

Bước 2

Thêm phần sau vào style.css của chủ đề con :

.break-out .site-inner {
    max-width: none;
    padding-top: 0;
}

.break-out .content .entry {
    margin-bottom: 0;
    padding: 70px 0;
}

.break-out .content .entry-header {
    margin-bottom: 30px;
    text-align: center;
}

.break-out .content .entry-content {
    display: -ms-grid;
    display: grid;

    -ms-grid-columns: [full-start] minmax(1em, 1fr) [main-start] minmax(0, 800px) [main-end] minmax(1em, 1fr) [full-end];
    grid-template-columns: [full-start] minmax(1em, 1fr) [main-start] minmax(0, 800px) [main-end] minmax(1em, 1fr) [full-end];
}

.break-out .content .entry-content > * {
    grid-column: main;
}

.break-out .content .splash {
    margin-bottom: 40px;
    background-color: #ddd;

    grid-column: full;
}

.splash img {
    width: 100%;
    margin-bottom: 0;
    vertical-align: top;
}

Bước 3

Tạo một Trang có HTML ở định dạng này và áp dụng mẫu cho nó.Break Out

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis enim sit amet metus laoreet, ut condimentum metus dapibus. Phasellus sed gravida augue, eu finibus felis. Integer augue libero, aliquam lacinia nisl sed, sagittis fringilla nisl. Phasellus sapien mi, porttitor in metus sed, iaculis dignissim mauris.</p>

<div class="splash">
    <img src="https://local.test/wp-content/uploads/2018/02/SM2_MRBLE-PNY-flatlay.jpg" alt="" width="1600" height="350" class="alignnone size-full wp-image-639" />
</div>

<p>Vivamus fringilla orci dui, vitae aliquet tortor hendrerit eget. Nam nec dui accumsan, posuere ligula sed, dictum velit. Praesent in lorem ac libero lacinia luctus. Duis sed ante sit amet massa tempus dignissim. Mauris vitae finibus risus. In nec diam velit. Aenean pulvinar urna ut ligula elementum tincidunt. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut libero tortor, lacinia eu pharetra at, bibendum vitae turpis. Aenean at bibendum dui. Curabitur sit amet tempus nisi, at molestie ligula. Aliquam tristique ligula a hendrerit luctus. Curabitur tristique quis erat et egestas.</p>

<div class="splash">
    <img src="https://local.test/wp-content/uploads/2018/02/SM2-MRBLE-PNY-laptop.jpg" alt="" width="1600" height="350" class="alignnone size-full wp-image-637" />
</div>

<p>Ut rutrum egestas lectus tempus pellentesque. Suspendisse vulputate risus at justo iaculis viverra. Integer ligula nisl, facilisis at justo vel, sodales lobortis nisl. Pellentesque eget tempor ex. Donec neque lacus, consequat eget fermentum at, sodales sit amet augue. Donec turpis ipsum, tincidunt et venenatis ac, hendrerit nec mauris. Sed tristique justo sed est finibus euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pulvinar ut justo sit amet vestibulum. Fusce quis risus ac ligula varius rhoncus vitae id nisi. Proin ullamcorper imperdiet gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam accumsan congue enim, eu fermentum nibh fringilla ut.</p>

Bao gồm bất kỳ nội dung có chiều rộng đầy đủ nào bên trong và .<div class="splash"> </div>