「WordPress Popular Posts」というプラグインを使ってウェジェットに人気記事を表示させている場合、サムネイルがリンクの中に入ってなくてクリック出来なかったので出力内容をカスタマイズしました。

デフォルトの出力内容

デフォルトの場合は下記のように出力されます。

<ul class="wpp-list">
  <li>
    <a href="https://example.com/post-url/" title="記事のタイトル" class="wpp-post-title" target="_self">記事のタイトル</a>
    <span class="wpp-meta post-stats"><span class="wpp-views">00ビュー(閲覧数)</span></span>
  </li>
</ul>

出力内容を変更

functions.phpへ下記のように記述します。

<?php 
add_filter( 'wpp_custom_html', 'custom_wpp_html_list', 10, 2 );
function custom_wpp_html_list( $popular_posts, $instance ) {
  $output = '<div class="ranking">' . "\n";
  foreach( $popular_posts as $popular_post ) {
    // タイトル
    $title = $popular_post->title;
    // リンク
    $permalink = get_permalink( $popular_post->id );
    // サムネイル
    $thumb_id = get_post_thumbnail_id($popular_post->id);
    $thumb_img = wp_get_attachment_image_src($thumb_id, $size);
    $thumb_src = $thumb_img[0];
    // 閲覧数
    $pageviews = $popular_post->pageviews;
    $output .= '<div class="ranking-items">' . "\n";
    $output .= '<a href="' . $permalink . '" title="' . $title . '"><span class="ranking-image"><img src="' . $thumb_src . '" alt="' . $title . '"></span><span class="ranking-title">' . $title . '</span><span class="ranking-view">' . $pageviews . ' view</span></a>' . "\n";
    $output .= '</div>' . "\n";
  }
  $output .= '</div>' . "\n";
  return $output;
} ?>

下記のようなHTMLで出力されます。

<div class="ranking">
  <div class="ranking-items">
    <a href="https://example.com/post-url/" title="記事のタイトル">
      <span class="ranking-image"><img src="" alt="記事のタイトル"></span>
      <span class="ranking-title">記事のタイトル</span>
      <span class="ranking-view">00view(閲覧数)</span>
    </a>
  </div>
</div>

出力内容にカテゴリと日付を追加

functions.phpへ下記のように記述します。

<?php 
add_filter( 'wpp_custom_html', 'custom_wpp_html_list', 10, 2 );
function custom_wpp_html_list( $popular_posts, $instance ) {
  $output = '<div class="ranking">' . "\n";
  foreach( $popular_posts as $popular_post ) {
    // タイトル
    $title = $popular_post->title;
    // 日付
    $date = get_the_date( 'Y.m.d', $popular_post->id );
    // リンク
    $permalink = get_permalink( $popular_post->id );
    // カテゴリー
    $category = '';
    $terms = get_the_terms( $popular_post->id, 'category' );
    if ( $terms ) {
      foreach ( $terms as $term ) {
        $category .= $term->name . ', ';
      }
      $category = rtrim( $category, ', ');
    }
    // サムネイル
    $thumb_id = get_post_thumbnail_id($popular_post->id);
    $thumb_img = wp_get_attachment_image_src($thumb_id, $size);
    $thumb_src = $thumb_img[0];
    // 閲覧数
    $pageviews = $popular_post->pageviews;
    $output .= '<div class="ranking-items">' . "\n";
    $output .= '<a href="' . $permalink . '" title="' . $title . '"><span class="ranking-image"><img src="' . $thumb_src . '" alt="' . $title . '"></span><span class="ranking-title">' . $title . '</span><span class="ranking-category">' . $category . '</span><time class="ranking-date">' . $date . '</time><span class="ranking-view">' . $pageviews . ' view</span></a>' . "\n";
    $output .= '</div>' . "\n";
  }
  $output .= '</div>' . "\n";
  return $output;
} ?>

下記のようなHTMLで出力されます。

<div class="ranking">
  <div class="ranking-items">
    <a href="https://example.com/post-url/" title="記事のタイトル">
      <span class="ranking-image"><img src="" alt="記事のタイトル"></span>
      <span class="ranking-title">記事のタイトル</span>
      <span class="ranking-category">カテゴリ</span>
      <time class="ranking-date">2020.00.00</time>
      <span class="ranking-view">00view(閲覧数)</span>
    </a>
  </div>
</div>