質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

解決済

1回答

1210閲覧

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

miroku

総合スコア14

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

0グッド

0クリップ

投稿2020/04/08 22:57

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

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

参考サイトは次の2つです。
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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

<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}

いつでも戻せるようにいまのファイルを別名で保存しておき、上記のようにしてみて、
うまくいきそうなら (対処できそうなら) そのまま、ぐちゃぐちゃに崩れたら戻す..

というようにしてみてはいかがでしょうか?

投稿2020/04/08 23:20

new1ro

総合スコア4528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Takumiboo

2020/04/09 00:51

子テーマとして作成し、WordPressでライブプレビューするというのが一番影響が少ないかと
miroku

2020/04/11 21:45

ご回答ありがとうございます。 画像が拡大し、ぐちゃぐちゃになり上手くはいきませんでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問