Phần hình ảnh nổi bật cho Pages in Genesis

Thủ thuật WordPress
#1

Trong cuộc trò chuyện Genesis Slack, một người dùng đã hỏi:

Xin chào mọi người, có bất kỳ ý tưởng nào về cách tôi tạo vùng hình ảnh nổi bật phía trên một trang trong chủ đề chuyên nghiệp dành cho doanh nghiệp trông như thế này: http://puu.sh/lZpz2/954b84e870.png

Trong bài viết này, tôi chia sẻ mã để thêm một phần có đường dẫn, tiêu đề và đoạn trích ở bên trái và hình ảnh nổi bật ở tiêu đề bên phải bên dưới trên các Trang tĩnh trong Genesis.

Bước 1

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

// Enables the Excerpt meta box in Page edit screen.
function wpcodex_add_excerpt_support_for_pages() {
	add_post_type_support( 'page', 'excerpt' );
}
add_action( 'init', 'wpcodex_add_excerpt_support_for_pages' );

// Register a custom image size for featured images on Pages
add_image_size( 'page-featured', 560, 175, true );

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

Bước 2

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

add_action( 'genesis_after_header', 'sk_featured_section_pages' );
function sk_featured_section_pages() { ?>

<div class="featured-section">
<div class="wrap">
<div class="one-half first">
<?php genesis_do_breadcrumbs();
genesis_do_post_title();
the_excerpt(); ?>
</div>
<div class="one-half">
<?php genesis_image( 'size=page-featured' ); ?>
</div>
</div>
</div>

<?php }

// Remove breadcrumbs
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );

// Remove entry header
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_open', 5 );
remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_close', 15 );

// Modify breadcrumb arguments
add_filter( 'genesis_breadcrumb_args', 'sp_breadcrumb_args' );
function sp_breadcrumb_args( $args ) {

$args['sep'] = ' > ';
$args['labels']['prefix'] = '';

return $args;

}

genesis();

Bước 3

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

.featured-section {
	padding: 30px 0;
	background-color: #ededed;
	border-bottom: 1px solid #d2d2d2;
}

.featured-section .breadcrumb {
	margin-bottom: 10px;
}

.featured-section .entry-title {
	margin-bottom: 20px;
}