【WordPress】コピペでOK！カテゴリ別サムネイル付の人気記事を新着と重複なしで表示！Popular Posts

公開2014.06.12（2時間前）

WordPressプラグイン「Popular Posts」で、カテゴリー別のサムネイル画像付き人気記事一覧を表示する方法を紹介します。新着一覧との重複もなしです。訪問別PVアップ、直帰率の低下を期待できます。

ゆめぴょん(@yume_pyon)です。こんちはっ！

WordPressで人気記事一覧を表示できる「Popular Posts」プラグインについては、過去にも何度か記事にしてきました。下記事も参考にしてみてください。

今回は基本的な設置方法だけでなく、少しだけ応用した例も紹介します。

カテゴリー別の人気記事一覧を表示するメリット

人気記事一覧を表示しているブログは多いですが、これをカテゴリー別にするメリットは下のとおりです。

同じカテゴリーの人気記事を見れると、訪問者が記事を探しやすい
同じカテゴリーなら関連度も高いため、訪問別PV・回遊率が上がる
関連度の高い記事へのリンクは、内部リンク施策でSEO対策になる

ちなみに、人気記事一覧にサムネイル画像を付けると、見栄えもよくなるし、クリック率も上がるかもしれません。

また今回は、最新記事一覧や現在読んでいる記事は重複表示されないようにします。それにより、紹介できる記事も増えるのでオススメです。

WordPress Popular Postsプラグインの特徴・設置・活用方法

「WordPress Popular Posts」プラグインの特徴とできることは、下のとおりです。

ページビュー（閲覧数）の高い記事順に表示できる
表示する記事数も自由自在
タイトルだけでなく、サムネイルつきも可能。画像サイズも自由
24時間以内・過去7日間・1ヶ月間・全期間のページビュー順が可能
特定カテゴリーを選択可能
特定記事をのぞくことが可能

インストールと設定方法

WordPress管理画面の左メニュー「プラグイン」→「新規追加」で、「WordPress Popular Posts」を検索してインストールしてください。有効化するのも忘れずに。

設定は、管理画面の左メニュー「設定」→「WordPress Popular Posts」をクリックしてください。人気記事のPVなどを確認できます。

その上方の「ツール」リンクをクリックすると設定画面になります。デフォルト値で問題ありませんが、好みに応じて変更してください。

人気記事一覧を簡単に設置するには、左メニュー「外観」→「ウィジェット」でも可能ですが、今回はプラグインが用意しているPHP関数と、テンプレートタグを用いて実装してみます。

サイドバーにサムネイル付き人気記事一覧を表示

テーマファイルは、WordPressで最重要ファイルです。修正前には必ずバックアップをとってください。もし問題が起こったらすぐ元に戻してください。全て自己責任でお願いします。

「WordPress Popular Posts」をインストールした後で、下コードを表示したい場所にコピペしてください。サイドバーならテーマファイル「sidebar.php」です。

CSS（スタイルシート）はあくまでも例なので、あなたの好みに修正してください。サイドバー以外（記事下とか）に表示する場合も、CSSを修正した方がいいでしょう。

<style type="text/css">
.wpp-list {
  margin: 0;
  padding: 0;
  border: 2px solid #888;
}
.wpp-list li {
  overflow: auto !important;
  display: block !important;
  margin: 8px 0;
  border-bottom: 1px dashed #666;
}
.wpp-thumbnail {
  float: left !important;
  margin: 0 5px 0 0;
}
</style>

<?php
if(function_exists('wpp_get_mostpopular')) {
  global $ex_id; // 重複の記事
  $ex_id = (empty($ex_id)) ? get_the_ID() : $ex_id . "," . get_the_ID(); //現記事のぞく
  $cat = get_the_category();
  $cate_ids = $cat[0]->term_id;
  for($i=1; $i<count($cat); $i++) { // 複数カテゴリに対応
    $cate_ids .= "," . $cat[$i]->term_id;
  }
  ob_start();
  wpp_get_mostpopular(
    'range=daily&
    order_by=views&
    limit=10&
    pid=' . $ex_id . '&
    cat=' . $cate_ids . '&
    post_html="<li>{thumb} {title}</li>"&
    thumbnail_width=60&
    thumbnail_height=60' );
  $popular = ob_get_clean();
  echo "<p>★人気記事一覧</p>" . $popular;
}
?>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

.wpp-list {

margin: 0;

padding: 0;

border: 2px solid #888;

}

.wpp-list li {

overflow: auto !important;

display: block !important;

margin: 8px 0;

border-bottom: 1px dashed #666;

}

.wpp-thumbnail {

float: left !important;

margin: 0 5px 0 0;

}

</style>

<?php

if(function_exists('wpp_get_mostpopular')) {

global $ex_id; // 重複の記事

$ex_id = (empty($ex_id)) ? get_the_ID() : $ex_id . "," . get_the_ID(); //現記事のぞく

$cat = get_the_category();

$cate_ids = $cat[0]->term_id;

for($i=1; $i<count($cat); $i++) { // 複数カテゴリに対応

$cate_ids .= "," . $cat[$i]->term_id;

}

ob_start();

wpp_get_mostpopular(

'range=daily&

order_by=views&

limit=10&

pid=' . $ex_id . '&

cat=' . $cate_ids . '&

post_html="<li>{thumb} {title}</li>"&

thumbnail_width=60&

thumbnail_height=60' );

$popular = ob_get_clean();

echo "<p>★人気記事一覧</p>" . $popular;

}

?>

最新・新着記事一覧と重複しないように表示

上のコードはそのままでも、現在表示している記事はのぞいてくれます。

もう一歩ふみこんで、最新・新着記事の一覧とも重複しないようにも、簡単にできます。

ただしプラグインやウィジェットなどで新着を表示している場合は、記事idを取得するためのコードを新たに書く必要があります。あまり需要はなさそうなので今回は書きません。

新着記事一覧を自力コードで設置している人は、記事idを次のように取得するだけでOKです。ただし人気記事のコードより上方でないとダメです。

global $ex_id;
$ex_id = "1,2,3,4,5";

1 2	global $ex_id; $ex_id = "1,2,3,4,5";

このようにグローバル変数で定義した「$ex_id」に、カンマ区切りで記事idを入力するだけで、人気記事一覧からのぞかれます。

下記事では、私が自作した最新・新着記事一覧のコードを紹介しています。ぜひ参考にしてください。プラグインを不要にする記事も読んでみてください。

【WordPress】プラグイン不要で新着記事一覧！サムネイル付・カテゴリー別の表示方法

このブログではサイドバーに、カテゴリー別の最新記事一覧を表示しています。…

【WordPressまとめ】プラグインを減らして高速化！私が外した13つとおすすめ設定方法

WordPressプラグインは便利ですが、多用しすぎると高速化を阻害する…

そして、この記事で紹介してるコードを利用した場合、下のようになります。5行目と18行目にコードを追加しただけです。

<div class="side-new">
<p>★新着記事（カテゴリ別）</p>
<ul>
<?php
  global $ex_id;
  $cat = get_the_category();
  $post_id = get_the_ID();
  $cate_ids = $cat[0]->term_id;
  for($i=1; $i<count($cat); $i++) {
    $cate_ids .= "," . $cat[$i]->term_id;
  }
  $newposts = get_posts( array(
    'category' => $cate_ids,
    'posts_per_page' => 5,
    'exclude' => $post_id ));
  foreach( $newposts as $post ):
    setup_postdata( $post );
    $ex_id .= ',' . get_the_ID();
    $new_title = get_the_title();
    echo "<li><a href='" . get_permalink() . "'>";
    if(has_post_thumbnail()) {
      $img = wp_get_attachment_image_src(get_post_thumbnail_id(),array(60,60));
      echo "<img src='{$img[0]}' alt='{$new_title}'>";
    }
    echo "{$new_title} <span style='font-size:13px'>(" . get_post_time('Y.m.d') . ")</span></a></li>";
  endforeach;
  wp_reset_postdata();
  echo '</ul></div>';
?>

1

2

3

4

5

6

7

8

9

10

11

12