Wordpressのhome.phpに記事のタイトルが表示されない

お世話になります。
Wordpressの記事一覧が表示される記事トップページ（home.php）を作成中です。
記事のタイトルとサムネイルを表示させようとしています。
「サムネイルは表示されるがタイトルが表示されない」というのが現在起こっている問題です。
Googleの開発者ツールで確認したところ、タイトルは出力されています。
ただ、画面に表示されません。

画面に表示されないのはこのページだけで、同じコードを使用しているタグのアーカイブページではタイトルが表示されています。

お力添えいただければ幸いです。
どうぞよろしくお願いいたします。

発生している問題・エラーメッセージ

特にエラーメッセージは出ていません。

該当のソースコード

lang
1<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
2	<?php
3	if ( is_sticky() && is_home() ) :
4		echo twentyseventeen_get_svg( array( 'icon' => 'thumb-tack' ) );
5	endif;
6	?>
7	<header class="entry-header">
8		<?php
9		if ( 'post' === get_post_type() ) {
10			echo '<div class="entry-meta">';
11			if ( is_single() ) {
12				twentyseventeen_posted_on();
13			} else {
14				echo twentyseventeen_time_link();
15				twentyseventeen_edit_link();
16			};
17			echo '</div><!-- .entry-meta -->';
18		};
19
20		if ( is_single() ) {
21			the_title( '<h1 class="entry-title">', '</h1>' );
22		} elseif ( is_front_page() && is_home() ) {
23			the_title( '<h3 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h3>' );
24		} else {
25			the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
26		}
27
28		?>
29	</header><!-- .entry-header -->
30
31	<div class="entry-content">
32		<?php
33		if( has_post_thumbnail() ){
34			echo get_the_post_thumbnail( $post->ID, 'thumbnail', array( 'class' => 'archive-thumbnail' ) );
35		} else {
36			echo catch_that_image();
37		}
38
39		?>
40		<?php
41		// the_content(
42		// 	sprintf(
43		// 		__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ),
44		// 		get_the_title()
45		// 	)
46		// );
47
48		wp_link_pages(
49			array(
50				'before'      => '<div class="page-links">' . __( 'Pages:', 'twentyseventeen' ),
51				'after'       => '</div>',
52				'link_before' => '<span class="page-number">',
53				'link_after'  => '</span>',
54			)
55		);
56		?>
57	</div><!-- .entry-content -->

試したこと

GoogleとSafariで同現象を確認
プラグインの競合チェック

補足情報（FW/ツールのバージョンなど）

Wordpressは最新5.6です
PHPは7.4です
使用テーマはTwenty Seventeenです（最新）
使用サーバーはさくらインターネットのレンタルサーバー（スタンダード）です

行動規範の内容に同意します

回答1件

ベストアンサー

開発ツールで見て<h2 class="entry-title">が出力されているのでしたら問題の原因はPHPでなくCSSかJavaScriptで、たぶんCSSだと思います。

開発ツールの画像黒枠内の<h2 class="entry-title">をマウスでクリックしていただくと、右側にCSSが表示されるので、そのCSSに下記の指定がないか確認してみてください。

css
1.entry-title {
2  /* 非表示にする指定 */
3}

上記のように直接.enty-titleに対する指定がなければ、例えば下記のように他の要素がかぶっているということも考えられます。

html
1<head>
2  <style>
3  .entry-header {
4    position: relative;
5  }
6  .entry-meta {
7      position: absolute;
8      z-index: 2;
9      background: white;
10      height: 100%;
11      width: 100%;
12  }
13  </style>
14</head>
15<body>
16  <header class="entry-header">
17    <div class="entry-meta">entry-meta</div>
18    <h2 class="entry-title">entry-title</h2>  
19  </header>
20  <p>上は.enty-titleの上に.enty-emetaがかぶっており、.entry-titleが見えない状況</p>
21</body>
22