WEBEER – Web制作の覚えがき –

【WordPress】Popular Postsの表示を大胆にカスタマイズする

WordPress
WordPress 更新日:2020.08.21 公開日:2020.08.21

人気記事を表示するプラグインのWordPress Popular Postsは自由度が高くて便利です。

ウィジェットから変更できる「カスタムHTML」でも簡単な変更をすることができますが、アクションフックも用意されているので完全なるオリジナルバージョンで作ることもできるんです。

やりたいこと

カテゴリーごとに違う画像を表示したいので、WordPress Popular Postsのアクションフックを使ってカスタムすることにします。

カスタムする方法

画像はslugと同じファイル名で画像を用意しておくことにします。

// popular postsのカスタマイズ
function my_custom_single_popular_post2($post_html, $popular_post, $instance){

  // term slugを使ってimg srcを作成
  $img = get_template_directory_uri() . '/assets/image/term/' . get_the_terms($popular_post->id, 'category')[0]->slug . '.png';

  $output = '<li>';
  // $popular_post->idに$post->IDが入っている
  $output .= '  <a href="' . get_permalink($popular_post->id) . '">';
  $output .= '    <figure><img src="' . $img . '" alt=""></figure>';
  // $popular_post->titleに記事タイトルが入っている
  $output .= '    <div>' . esc_attr($popular_post->title) . '</div>';
  $output .= '  </a>';
  $output .= '</li>';

  return $output;
}
// wpp_postのアクションフックを使う
add_filter( 'wpp_post', 'my_custom_single_popular_post2', 10, 3 );

出力されるHTMLはこんな感じ

<li>
  <a href="https://webeer.tech/thema/">
    <figure><img src="https://webeer.tech/wp-content/uploads/2020/08/wp.png" alt=""></figure>
    <div class=" has-brackets">【WordPress】テーマを作るときのディレクトリ構造</div>
  </a>
</li>

wpp_postがアクションフックになります。

自由にカスタムできるので完全オリジナルのランキング表示が作れますよ。

詳しいことは公式で確認してみてください。