Cách thay đổi vị trí hình ảnh nổi bật có điều kiện trong Genesis dựa trên bố cục của Trang

Trong nhóm Genesis của Facebook, một người dùng đã hỏi:

Tôi có một số trang ba cột (sidebar / content / sidebar-alt) và một số trang hai cột (sidebar / content). Trong ba trang cột, tôi đặt hình ảnh nổi bật ở đầu phần bao bọc thanh bên nội dung, đặt nó trên vùng nội dung và thanh bên phụ. Trong hai trang cột, tôi muốn hình ảnh nổi bật ở trên cùng của khu vực nội dung. Tôi đang cố gắng thiết lập một câu lệnh điều kiện trong functions.php để phân biệt giữa hai trường hợp.

Điều này có thể được thực hiện bằng cách bố trí những ứng dụng trang hiện tại, kiểm tra nó chống lại và bố trí và hooking để móc hành động đúng theo vị trí mong muốn cho hình ảnh đặc trưng.sidebar-content-sidebar content-sidebar genesis_image()

Bước 1

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

// Register custom image size for featured image on static Pages
add_image_size( 'static-page', 1200, 250, true );

// Call the function to display featured image depending on which layout is in use on static Pages
add_action( 'genesis_after_header', 'sk_conditional_featured_image' );
function sk_conditional_featured_image() {

	// if we are not on a static Page, abort.
	if ( ! is_singular( 'page' ) ) {
		return;
	}

	// get the page layout
	$site_layout = genesis_site_layout();

	// if the page uses sidebar-content-sidebar layout, show featured image above sidebar-content-sidebar.
	if ( 'sidebar-content-sidebar' == $site_layout ) {
		add_action( 'genesis_before_content_sidebar_wrap', 'sk_featured_image' );
	}

	// if the page uses content-sidebar layout, show featured image above content.
	if ( 'content-sidebar' == $site_layout ) {
		add_action( 'genesis_before_entry', 'sk_featured_image' );
	}

}

// Function to display featured image
function sk_featured_image() {

	genesis_image( array( 'size' => 'static-page' ) );

}

Bước 2

Tạo lại hình thu nhỏ.

Bước 3

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

.attachment-static-page {
	margin-bottom: 40px;
	vertical-align: top;
}