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

Question

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

目前看起来像:

我想在 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;
}