如何用图像替换WordPress页面标题？

Question

我正在尝试用图像替换WordPress网站页面标题上的文本。我正在本地处理儿童主题。我还需要能够分别定位每个页面，因为图像会有所不同。

当前看起来像：

我想在Photoshop中设计一些自定义标题，并将其另存为Jpg / Png，然后替换文本。

我认为我已经确定了CSS的正确部分

	.hestia-title{
}

我尝试过

.hestia-title{
		font-size: 0px;
		background-image:url(assets/img/quick_test.jpg);
}

这看起来像这样：

有人可以为此指出正确的方向吗？谢谢

我现在已经能够使它看起来像这样：

使用此代码：

.page-id-88 .page-header .hestia-title{
		color:transparent;
		background-image: url(assets/img/title_mock.png);
}
	.page-header.header-small .hestia-title{
		background-size:contain; 
		background-repeat: no-repeat;
}
	.home .hestia-title{
		display:none;
}

这是page.php内容

<?php
/**
 * The template for displaying all single posts and attachments.
 *
 * @package Hestia
 * @since Hestia 1.0
 */

get_header();

do_action( 'hestia_before_single_page_wrapper' );

?>
<div class="<?php echo hestia_layout(); ?>">
	<?php
	$class_to_add = '';
	if ( class_exists( 'WooCommerce' ) && ! is_cart() ) {
		$class_to_add = 'blog-post-wrapper';
	}
	?>
	<div class="blog-post <?php esc_attr( $class_to_add ); ?>">
		<div class="container">
			<?php
			if ( have_posts() ) :
				while ( have_posts() ) :
					the_post();
					get_template_part( 'template-parts/content', 'page' );
				endwhile;
			else :
				get_template_part( 'template-parts/content', 'none' );
			endif;
			?>
		</div>
	</div>
	<?php get_footer(); ?>

Answer 1

您可以转到您的活动子主题的page.php文件，以查找<? the_title(); ?>函数。您可以通过此代码进行通讯，然后页面标题将不会显示。 对于图像，您可以使用精选图像，在每个页面上设置精选图像。现在，您可以使用此代码显示图片

if (has_post_thumbnail()) { 
the_post_thumbnail('full');            // just the image        
} 

要从CSS隐藏页面标题，请使用此代码

.page h1.hestia-title {
    font-size: 0;
}