Cách phủ tiêu đề mục nhập trên hình ảnh nổi bật trong các bài đăng đơn lẻ

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

Xin chào các bạn, tôi đã có thể di chuyển tiêu đề mục nhập của mình ra ngoài vòng lặp và làm cho nó có chiều rộng đầy đủ, nhờ Sridhar Katakam! Tuy nhiên, tôi muốn đưa hình ảnh nổi bật của mình ra bên ngoài vòng lặp (tốt nhất là phía trên entry-header).

Đây là giao diện hiện tại của nó: How to Choose a Web Hosting Service: A Quick Guide - League WP

Đây là cách tôi muốn nó xuất hiện trên một bài đăng: http://www.nab.com.au/personal/learn/managing-your-debts/pay-less-interest-on-your-home-loan-with- 100 phần trăm bù đắp

Tôi đánh giá cao bất kỳ sự giúp đỡ nào. Cảm ơn trước!

Trong hướng dẫn này, chúng tôi sẽ

  • thêm tiêu đề div.post-hero bên dưới trên các Bài đăng đơn lẻ và đặt hình ảnh nổi bật làm nền bìa của nó.
  • sử dụng hình ảnh dự phòng từ thư mục hình ảnh nếu không có bộ hình ảnh nổi bật
  • hiển thị tiêu đề mục nhập bên trong div và xóa nó khỏi tiêu đề mục nhập

Bước 1

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

// Register a custom image size for hero images on single Posts
add_image_size( 'post-image', 1600, 400, true );

add_action( 'genesis_after_header', 'sk_hero_image' );
function sk_hero_image() {
// if we are not on a single Post, abort.
if ( !is_singular( 'post' ) ) {
return;
}

// set $image to URL of featured image. If featured image is not present, set it to post-image.jpg in child theme's images directory.
if ( has_post_thumbnail() ) {
$image = genesis_get_image( 'format=url&size=post-image' );
} else {
$image = get_stylesheet_directory_uri() . '/images/post-image.jpg';
} ?>

<div class="post-hero" style="background-image: url('<?php echo $image; ?>')">
<div class="wrap">
<?php genesis_do_post_title(); ?>
</div>
</div>

<?php
// Remove entry title
remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
}

Tải hình ảnh dự phòng mong muốn của bạn lên images thư mục của chủ đề con có tên là post-image.jpg .

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 :

.post-hero {
	padding: 200px 0;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.post-hero .entry-title {
	margin-bottom: 0;
	color: #fff;
	background-color: rgba(0,0,0,.75);
	padding: 15px;
	text-transform: uppercase;
	max-width: 50%;
}

@media only screen and (max-width: 1023px) {

	.post-hero .entry-title {
		max-width: none;
	}

}