Trang chủ Tiện ích nổi bật trong Genesis Sample

Hướng dẫn này cung cấp các bước để

  • đăng ký một khu vực tiện ích Trang chủ Nổi bật
  • hiển thị khu vực tiện ích con bên dưới tiêu đề trên trang đầu
  • sửa đổi JS để lề trên cùng (bằng chiều cao của tiêu đề trang cố định) áp dụng cho vùng tiện ích con trên trang chủ và cho .site-inner trên mọi trang khác
  • thêm CSS để đặt hình nền cho phần Trang chủ nổi bật với lớp phủ tối

trong Genesis Chủ đề con mẫu cho Genesis.

Mặc dù hướng dẫn đã được viết cho Genesis Sample 2.7.1, 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

Chỉnh sửa các functions.php của chủ đề con .

// Register `home-featured` widget area.
genesis_register_widget_area(
	array(
		'id'          => 'home-featured',
		'name'        => __( 'Home Featured', 'my-theme-text-domain' ),
		'description' => __( 'This is the home featured section.', 'my-theme-text-domain' ),
	)
);

add_action( 'genesis_after_header', 'custom_home_featured' );
/**
 * Display `home-featured` widget area below the header.
 */
function custom_home_featured() {
	// if this is not the front page, abort.
	if ( ! is_front_page() ) {
		return;
	}

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

Bước 2

Chỉnh sửa ./js/genesis-sample.js

Thay đổi

/**
 * Adjust site inner margin top to compensate for sticky header height.
 *
 * @since 2.6.0
 */
var moveContentBelowFixedHeader = function() {
	var siteInnerMarginTop = 0;

	if( $('.site-header').css('position') === 'fixed' ) {
		siteInnerMarginTop = $('.site-header').outerHeight();
	}

	$('.site-inner').css('margin-top', siteInnerMarginTop);
},

đến

/**
 * Adjust site inner margin top to compensate for sticky header height.
 *
 * @since 2.6.0
 */
var moveContentBelowFixedHeader = function() {
	var siteInnerMarginTop = 0;

	if( $('.site-header').css('position') === 'fixed' ) {
		siteInnerMarginTop = $('.site-header').outerHeight();
	}

	if ( $( 'body' ).hasClass( 'home' ) ) {
		$( '.home-featured' ).css( 'margin-top', siteInnerMarginTop );
	} else {
		$( '.site-inner' ).css( 'margin-top', siteInnerMarginTop );
	}
},

Bước 3

Tải lên hình nền mong muốn của bạn cho phần Trang chủ nổi bật như trong thư mục của chủ đề con .home-featured.jpg images

Chỉnh sửa .style.css

Thêm phần sau vào trước các truy vấn phương tiện:

.home-featured {
	padding: 200px 0;
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.5))), url(images/home-featured.jpg);
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(images/home-featured.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	text-align: center;
}

.home-featured .wrap {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 30px;
	padding: 40px;
	color: #fff;
}

.home-featured .widget:last-child {
	margin-bottom: 0;
}

.home-featured h2 {
	font-size: 42px;
}

.home-featured h3 {
	margin-bottom: 0;
}

Bước 4

Tại Giao diện> Tiện ích, kéo tiện ích mong muốn của bạn vào khu vực Tiện ích nổi bật Trang chủ và định cấu hình nó.