Mẫu trang trước cho các phần có chiều rộng đầy đủ trong Genesis

Xu hướng hiện tại với hầu hết các trang chủ của trang web ngày nay là các phần có chiều rộng đầy đủ đi từ mép này sang mép kia của trình duyệt giữa đầu trang và chân trang.

Bill Erickson có một bài viết xuất sắc về chủ đề này ở đây. Trong bài viết này, tôi muốn chia sẻ front-page.php tùy chỉnh của tôi dựa trên mã của Bill.

Mẫu này xử lý việc thêm đánh dấu lược đồ và vào div.site-inner .itemprop="mainContentOfPage"``role="main"

Ngoài ra, chúng tôi đang gỡ bỏ lớp bọc của .site-inner.

add_filter( 'genesis_attr_site-inner', 'sk_attributes_site_inner' );
/**
 * Add attributes for site-inner element.
 *
 * @since 2.0.0
 *
 * @param array $attributes Existing attributes.
 *
 * @return array Amended attributes.
 */
function sk_attributes_site_inner( $attributes ) {

	$attributes['role']     = 'main';
	$attributes['itemprop'] = 'mainContentOfPage';

	return $attributes;

}

// Remove div.site-inner's div.wrap
add_filter( 'genesis_structural_wrap-site-inner', '__return_empty_string' );

// Display header
get_header();

// Content
echo 'Hello World';

// Display Footer
get_footer();
/* Front Page Template for Full Width Sections
-------------------------------------------- */

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

functions.php

// Register widget areas
genesis_register_sidebar( array(
	'id'            => 'home-featured',
	'name'          => __( 'Home Featured', 'themename' ),
	'description'   => __( 'This is the homepage featured section', 'themename' ),
));

genesis_register_sidebar( array(
	'id'          => 'home-strap-text',
	'name'        => __( 'Home Strap Text', 'themename' ),
	'description' => __( 'This is the home strap text section.', 'themename' ),
));

front-page.php

add_filter( 'genesis_attr_site-inner', 'sk_attributes_site_inner' );
/**
* Add attributes for site-inner element.
*
* @since 2.0.0
*
* @param array $attributes Existing attributes.
*
* @return array Amended attributes.
*/
function sk_attributes_site_inner( $attributes ) {

$attributes['role'] = 'main';
$attributes['itemprop'] = 'mainContentOfPage';

return $attributes;

}

// Remove div.site-inner's div.wrap
add_filter( 'genesis_structural_wrap-site-inner', '__return_empty_string' );

// Display header
get_header();

// Content

// Display Home Featured widget area
genesis_widget_area( 'home-featured', array(
'before' => '<div class="home-featured widget-area">',
'after' => '</div>',
));

// Display Home Strap Text widget area
genesis_widget_area( 'home-strap-text', array(
'before' => '<div class="home-strap-text widget-area"><div class="wrap"',
'after' => '</div></div>',
));

// Display Footer
get_footer();

style.css

/* Front Page Template for Full Width Sections
-------------------------------------------- */

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

.home .site-inner .widget-area {
	padding: 40px 0;
}

.home .site-inner .home-featured {
	padding: 0;
}

.home-featured .soliloquy-container {
	margin-bottom: 0 !important;
}

.soliloquy-container .wrap {
	margin: 0 auto;
	padding: 40px;
	line-height: 1.3;
}

.home-strap-text {
	text-align: center;
}

.home-strap-text .button {
	margin-top: 20px;
}