Как заменить заголовок страницы WordPress изображением? - PullRequest
0 голосов
/ 20 сентября 2018

Я пытаюсь заменить текст заголовков страниц моего сайта WordPress изображением.Я работаю локально с детской темой.Мне также нужно иметь возможность настраивать таргетинг на каждую страницу отдельно, так как изображения будут отличаться.

В настоящее время это выглядит так: enter image description here

Я хочу создать несколько пользовательскихзаголовки в Photoshop и сохраните их как Jpg / Png, а затем замените текст.

Я думаю, что определил правильную часть CSS

	.hestia-title{
}

Я пытался

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

Это выглядит так:

enter image description here

Может ли кто-нибудь указать мне на правонаправление с этим, пожалуйста?Спасибо

Теперь я смог сделать так: enter image description here

Используя этот код:

.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(); ?>

1 Ответ

0 голосов
/ 20 сентября 2018

Вы можете перейти к файлу page.php вашей активной дочерней темы, чтобы узнать функцию <? the_title(); ?>.Вы можете отправить этот код, тогда заголовок страницы не появитсяДля изображения, вы можете использовать избранные изображения, установить избранные изображения на каждой странице.Теперь вы можете использовать этот код для отображения изображения

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

Чтобы скрыть заголовок страницы от CSS, используйте этот код

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