WordPress Popular Postsのリンク範囲をタイトルも含ませる方法
どうも、石田です！
wordpressの定番のプラグイン「WordPress Popular Posts」ですが、
aタグで囲われている部分がアイキャッチの部分のみなので、スマホでタップした際にタイトルをタップすると記事に飛ばないので、少々不便かと思います。
そのため、今回はaタグをアイキャッチとタイトルを一緒に囲むようにする方法をご紹介します！
functions.phpを開く
といっても方法は簡単で、functions.phpを開きます。
そして、functions.phpのどこでもいいので、下記を記述します。
// 人気記事
function custom_single_popular_post( $content, $p, $instance ){
// 投稿のIDを取得
$thumbnail_id = get_post_thumbnail_id( $p->id);
// サムネイル画像を取得
$thumbnail_img = wp_get_attachment_image_src( $thumbnail_id, 'thumbnail' );
// ここに出力したい内容を記述
$output = '<li><a href="' . get_the_permalink($p->id) . '" title="' . esc_attr($p->title) . '">
<img src="' . $thumbnail_img[0] .'" title="' . esc_attr($p->title) . '" width="100" height="70"></span>
<span class="rpwwt-post-title">' . $p->title . '</span>
</span></a></li>';
return $output;
}
add_filter( 'wpp_post', 'custom_single_popular_post', 10, 3 );
//※画像は適宜取得してください。今回はアイキャッチを表示させています。
以上でaタグでサムネイルもタイトルも囲われます。
あとはstyle.cssなどで、デザインを整えれば大丈夫です！
popular postsについてかなり詳しく書いてある記事が下記になりますので、
見てみてください。
では！
