記事一覧のクリック範囲を拡げて、タイトルとサムネイル以外の所のクリックでも記事に飛ぶようにしたい

使用テーマ:Affinger5
WordPressでの「カテゴリーページ」の記事一覧についての質問です。

同じようなファイルが多すぎて、どのファイルがカテゴリーページのファイルか特定できていないのですが、可能性の高い複数のファイルで試行したところ、うまくいきませんでした。
また、webサイト制作初心者のため、かなり的外れな手を打っているかもしれません。

参考サイトは次の２つです。
https://calico.xyz/2014/09/23/stinger5-8/
https://life-jam.com/stingerplus-itiran-click/#st-toc-h-3

下記が全体のソースです。

php
1
2<?php
3	if(trim($GLOBALS['stdata214']) !== ''):
4		$st_infeed = $GLOBALS['stdata214'];
5	else:
6		$st_infeed = '';
7	endif;
8	$st_infeed_count = 1;
9?>
10<div class="kanren <?php st_marugazou_class(); //サムネイルを丸くする ?>">
11	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
12			<?php //インフィード広告
13			if( (is_active_sidebar( 26 ) && (trim($st_infeed) !== '')) && ($st_infeed_count % $st_infeed === 0) ){ ?>
14				<div class="st-infeed-adunit">
15					<?php if ( function_exists( 'dynamic_sidebar' ) && dynamic_sidebar( 26 ) ) : else : ?>
16					<?php endif; ?>
17				</div>
18			<?php
19			}
20			$st_infeed_count ++;
21			?>
22		<dl class="clearfix">
23
24			<dt><a href="<?php the_permalink(); ?>">
25					<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
26						<?php get_template_part( 'st-thumbnail' ); //アイキャッチ画像 ?>
27					<?php else: // サムネイルを持っていないときの処理 ?>
28						<?php if(trim($GLOBALS['stdata97']) !== ''){ ?>
29							<img src="<?php echo esc_url( ($GLOBALS['stdata97']) ); ?>" alt="no image" title="no image" width="100" height="100" />
30						<?php }else{ ?>
31							<img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="100" height="100" />
32						<?php } ?>
33					<?php endif; ?>
34				</a></dt>
35			<dd><a href="<?php the_permalink(); ?>">
36				<?php if ( trim( $GLOBALS['stdata465']) === '' ) : get_template_part( 'st-single-category' ); endif; //カテゴリー ?>
37				<h3><a href="<?php the_permalink(); ?>">
38						<?php the_title(); ?>
39					</a></h3>
40
41				<?php get_template_part( 'itiran-date-tag' ); //投稿日 ?>
42
43				<?php get_template_part( 'st-excerpt' ); //抜粋 ?>
44				<?php if ( isset( $GLOBALS['stdata465']) && $GLOBALS['stdata465'] === 'yes' ) :
45					echo '<div class="st-catgroup-under">';
46					get_template_part( 'st-single-category' ); //カテゴリー
47					echo '</div>';
48				endif; //カテゴリー ?>
49              </a></dd>
50		</dl>
51	<?php endwhile;
52	else: ?>
53
54	<?php endif; ?>
55</div>
56

【試行したこと】
※(1)は参考サイトより試した。

(1)この中のdtにしかリンクが張られていなかったところを、親のdl自体にリンクを張ることによって範囲を広げようとした。

PHP
1
2<dl class="clearfix"  data-href="<?php the_permalink(); ?>">
3
4

(2)dlのもう一つの子であるddにリンクを張ることで範囲を広げようとした。

PHP
1
2<dd><a href="<?php the_permalink(); ?>"> 
3        <?php if ( trim( $GLOBALS['stdata465']) === '' ) : get_template_part( 'st-single-category' ); endif; //カテゴリー ?>
4           <h3><a href="<?php the_permalink(); ?>">
5		  <?php the_title(); ?>
6	       </a></h3>
7

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

回答1件

ベストアンサー

<dl>をつかうのをやめ、以下のように書き換えてみるのがよさそうに見えます。

HTML
1<a href="<?php the_permalink(); ?>" class="dl clearfix"><!--<dt>から変更-->
2    <div class="dt">
3        <!--<a href="<?php the_permalink(); ?>">を削除-->
4            <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
5                <?php get_template_part( 'st-thumbnail' ); //アイキャッチ画像 ?>
6            <?php else: // サムネイルを持っていないときの処理 ?>
7                <?php if(trim($GLOBALS['stdata97']) !== ''){ ?>
8                    <img src="<?php echo esc_url( ($GLOBALS['stdata97']) ); ?>" alt="no image" title="no image" width="100" height="100" />
9                <?php }else{ ?>
10                    <img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="100" height="100" />
11                <?php } ?>
12            <?php endif; ?>
13        <!--</a>を削除-->
14    </div><!--</dt>から変更-->
15    
16    <div class="dd"><!--<dd>から変更-->
17        <!--<a href="<?php the_permalink(); ?>">を削除-->
18        <?php if ( trim( $GLOBALS['stdata465']) === '' ) : get_template_part( 'st-single-category' ); endif; //カテゴリー ?>
19            <h3>
20                <a href="<?php the_permalink(); ?>">
21                    <?php the_title(); ?>
22                </a>
23            </h3>
24
25            <?php get_template_part( 'itiran-date-tag' ); //投稿日 ?>
26
27            <?php get_template_part( 'st-excerpt' ); //抜粋 ?>
28            <?php if ( isset( $GLOBALS['stdata465']) && $GLOBALS['stdata465'] === 'yes' ) :
29                echo '<div class="st-catgroup-under">';
30                get_template_part( 'st-single-category' ); //カテゴリー
31                echo '</div>';
32            endif; //カテゴリー ?>
33        <!--</a>を削除-->
34    </div><!--</dd>から変更-->
35</div><!--</dl>から変更-->

CSS
1a.dl {
2  /* <dl>に指定していた記述 */
3  
4  display: block; /* こちらは、おそらく必要になる */
5}
6a.dl .dt {
7  /* <dt>に指定していた記述 */
8}
9a.dl .dd {
10  /* <dd>に指定していた記述 */
11}