Trang trước được mở rộng toàn bộ chiều rộng trong Genesis

Hướng dẫn này cung cấp các bước để thiết lập một trang chủ mở rộng toàn chiều rộng cơ bản trong Genesis.

Chúng tôi sẽ đăng ký 5 khu vực widget ở trang đầu và hiển thị các widget được đặt trong chúng bên trong div.site-inner bằng cách sử dụng mẫu tùy chỉnh cho trang đầu.

Bước 1

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

Bước 2

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

// Register front-page widget areas
for ( $i = 1; $i <= 5; $i++ ) {
    genesis_register_widget_area(
        array(
            'id'          => "front-page-{$i}",
            'name'        => __( "Front Page {$i}", 'my-theme-text-domain' ),
            'description' => __( "This is the front page {$i} section.", 'my-theme-text-domain' ),
        )
    );
}

Bước 3

Tạo một tệp có tên front-page.php trong thư mục chủ đề con có như sau:

// Enqueue styles
wp_enqueue_style( 'front-styles', get_stylesheet_directory_uri() . '/style-front.css', array(), CHILD_THEME_VERSION );

/**
 * Add attributes for site-inner element, since we're removing 'content'.
 *
 * @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 the attributes from .entry, since this replaces the main entry
    $attributes = wp_parse_args( $attributes, genesis_attributes_entry( array() ) );
    return $attributes;
}
add_filter( 'genesis_attr_site-inner', 'be_site_inner_attr' );

// Header.
get_header();

// Content.
for ( $i = 1; $i <= 5; $i++ ) {
    genesis_widget_area( "front-page-{$i}", array(
        'before' => '<div class="front-page-' . $i . ' front-page-section"><div class="wrap">',
        'after'  => '</div></div>',
    ) );
}

// Comments.
// genesis_get_comments_template();

// Footer.
get_footer();

Bước 4

Tạo một tệp có tên style-front.css trong thư mục chủ đề con có CSS ​​mẫu sau và điều chỉnh thêm cho phù hợp với nhu cầu của bạn:

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

.front-page-section {
    padding: 150px 0;
}

.front-page-section:nth-child(odd) {
    background-color: #f7f7f7;
}

.front-page-section:nth-child(even) {
    background-color: #fff;
}

.front-page-section .widget-title {
    text-align: center;
    font-size: 40px;
    margin-bottom: 40px;
}

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 1, 2, 3, 4 và 5.