Я пытаюсь заменить текст заголовков страниц моего сайта 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(); ?>