WordPress:authorページを一括リダイレクト
AMPの公式イメージ利用方法とガイドライン【画像ダウンロード】
【MAC】スクリーンショットの保存フォルダを変更・JPGファイルにする
MAMPでMySQLが起動しない時の解決方法
AMP化と一緒にHTTPSにすることにした:設定方法
@ 2016 fwary

タイトルとサムネイルをaタグに入れて大きなリンクにする方法

人気記事や関連記事の一つのページに対するタイトル、サムネイル、ページ概要のリンクは、全く同じなのに、バラバラにパーマリンクを設定していました。一括してボタン化できる方法を見つけたので、メモです。
 
先日、「Another HTML-lint gateway」でサイトのhtmlエラーチェックをしてみたところ、「<a></a>の中に<P></P>を入れたらダメよ。」というエラーがでてしまいました。よくわかっていなかったのですが、エラーの出たのは関連記事を表示する部分です。関連記事の一覧を、サムネイル、タイトル、60字程度の概要の3点で表示しています。なんとかしてこれを囲んでボタンのようにして、空白部分もリンクにできたらタップしやすいだろうと思い、設定していました。これが、方法が間違っていたようです。ただ、思ったように動作はしていました。html構文エラーということなので、もっとスマート且つ正しい方法があるに違いないと思い、調べることにしました。
 

suponserd link


解決方法

こんな風にしてみました。


<!--aタグで全て囲まれている-->
<a class="related_a" href="<?php esc_url(the_permalink()); ?>" title="<?php esc_attr(the_title_attribute()); ?>">

  <!--サムネイル-->
  <div class="thumbnail">
  <?php the_post_thumbnail('thumbnail'); ?>
  </div>

  <!--タイトル-->
  <h3 class="title">
  <?php the_title(); ?>
  </div>

  <!--内容抜粋-->
  <div class="except">
  <?php echo mb_substr( strip_tags( $post->post_content  ), 0, 60 ) . '...'; ?>
  </div>

</a>

パーマリンクは<a>の中で1回出てくるだけです。aの中にpはありません。というか、divにすればよかったのか。
これだけだと、ボタンのようにはならないので、CSSを設定します。
 


.related_a{
	display: inline-block;
	width: 100%;
	background: red;
}

これだけです。リンクしている部分が分かりやすいように背景を赤にしてあります。全てを囲むa要素にclass=”related_a”をつけてあります。簡単でした。

sharing is caring