Trang chủ được mở rộng có chiều rộng đầy đủ trong Genesis Sample 2.6.0

Bài viết này cung cấp các bước để thiết lập trang đầu được mở rộng có chiều rộng đầy đủ (với nội dung có chiều rộng cố định) trong Genesis chạy trên Genesis Sample 2.6.0 trở lên dựa trên bài viết này của Bill Erickson.

Bước 1

Hãy đăng ký 4 khu vực phụ tùng trang nhất.

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

// Registers front-page widget areas.
for ( $i = 1; $i <= 4; $i++ ) {
    genesis_register_widget_area(
        array(
            'id'          => "front-page-{$i}",
            'name'        => __( "Front Page {$i}", 'genesis-sample' ),
            'description' => __( "This is the front page {$i} section.", 'genesis-sample' ),
        )
    );
}

Bước 2

Tạo một tệp có tên front-page.php như sau:

/**
 * Homepage Template.
 */

add_filter( 'genesis_attr_site-inner', 'be_site_inner_attr' );
/**
 * Adds attributes from 'entry', since this replaces the main entry.
 *
 * @author Bill Erickson
 * @link http://www.billerickson.net/full-width-landing-pages-in-genesis/
 *
 * @param array $attributes Existing attributes.
 * @return array Amended attributes.
 */
function be_site_inner_attr( $attributes ) {

    // Add a class of 'full' for styling this .site-inner differently.
    $attributes['class'] .= ' full';

    // Add an id of 'genesis-content' for accessible skip links.
    $attributes['id'] = 'genesis-content';

    // Add the attributes from .entry, since this replaces the main entry.
    $attributes = wp_parse_args( $attributes, genesis_attributes_entry( array() ) );

    return $attributes;

}

// Displays header.
get_header();

// Displays front-page widget areas.
for ( $i = 1; $i <= 4; $i++ ) {
    genesis_widget_area( "front-page-{$i}", array(
        'before' => '<div class="front-page-' . $i . ' widget-area"><div class="wrap">',
        'after'  => '</div></div>',
    ) );
}

// Displays Footer.
get_footer();

Bước 3

Thêm phần sau vào phía trên các truy vấn phương tiện trong style.css của chủ đề con :

/* Front Page with Full-Width Sections
-------------------------------------------- */

.site-inner.full {
    max-width: none;
    padding: 0;
}

.site-inner.full .wrap {
    max-width: 1140px;
    margin: 0 auto;
    padding-left: 30px;
    padding-right: 30px;
}

.site-inner.full .widget-area {
    padding: 50px 0;
}

.site-inner.full .widget-area:nth-child(odd) {
    background-color: rgba(0,0,0,.03);
}

.site-inner.full .widget:last-child {
    margin-bottom: 0;
}

Bước 4

Tạo một Trang tĩnh có tiêu đề say Home và đặt nó làm trang chủ tĩnh tại Cài đặt> Đọc.

Nếu bạn muốn danh sách các bài đăng trên blog xuất hiện tại / blog, hãy tạo một Trang tĩnh có tiêu đề Blog (KHÔNG áp dụng Mẫu “Blog” cho Trang này) và chọn nó làm trang Bài đăng.

Bước 5

Tại Giao diện> Tiện ích, kéo các tiện ích mong muốn của bạn vào các khu vực tiện ích Trang trước 1, Trang 2, Trang 3 và Trang 4.