サブヘッダーの表示方法

いつもお世話になっております。

テーマはBusinesspressを使用しております。
カテゴリーページにヘッダー画像を表示させる方法を教えていただき、表示させています。

このヘッダー内にはタイトルが表示されているのですが、そこへ他の固定ページ
ヘッダー画像内と同じ様にサブヘッダーを表示させたいと試みております。
惜しいところまでは来ていると思うのですが、これが限界です。

header.phpへ、「カテゴリーアーカイブページにヘッダー画像を表示させる」ために教えていただいたコードをヒントに get_option( ‘page_for_posts’ ) のpage部分を、get_option( ‘category_for_posts’ ) とcategoryに変え

<?php if ( is_category() ) : ?><!--カテゴリーのヘッダー画像の表示-->
<div class="jumbotron"<?php businesspress_post_background(); ?>>
	<div class="jumbotron-overlay">
		<div class="jumbotron-content">
			

<!--ここからカテゴリーのヘッダー画像にサブヘッダーを表示するアイデア--><?php if ( ! get_theme_mod( 'businesspress_hide_subheader' ) ) : ?>
			<div class="subheader"><?php echo esc_attr( str_replace( '-', ' ', get_post_field( 'post_name', get_option( 'category_for_posts' ) ) ) ); ?></div>
			<?php endif; ?><!--ここまでカテゴリーのヘッダー画像にサブヘッダーを表示するアイデア-->
			

<?php the_archive_title( '<h2 class="jumbotron-title">', '</h2>' ); ?>
		</div><!-- .jumbotron-content -->
	</div><!-- .jumbotron-overlay -->
</div><!-- .jumbotron -->
<?php endif; ?>

この様なコードを追記したのですが文字化けしてしまい、うまく表示されません。
表示させたいのは<h2 class="jumbotron-title">に書かれている文字と同じものです。

また<h2 class="jumbotron-title">に表示されてしまう「カテゴリー:」という文字だけを消す方法も教えてください。

分かりにくい説明かもしれませんが、どうかよろしくお願いします。

ヘルプの必要なページ: [リンクを見るにはログイン]