如何用图片替换 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(); ?>函数。你可以commnet这个代码然后页面标题不会出现。 对于图片，您可以使用特色图片，在每个页面上设置特色图片。现在您可以使用此代码显示图像

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

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

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