人気記事ランキングを任意サイズのサムネイルで表示(ページビューランキング)

プラグイン WP-PotView をインストールしておきます。
このプラグイン自体にはサムネイル表示機能がないらしく、みなさんカスタマイズしていらっしゃるのですが、私の場合、ネット上にある皆さんの方法ではうまく行かずにけっこう悪戦苦闘しました。

プラグインの設定の前にまずは前準備から。

アイキャッチ画像を用意する

お使いのテーマに調度良いサイズのサムネイルがあればそれを使えばよいですが、設定がない場合は先に用意します。

私は テーマ作成時から沢山の種類のサムネイルを用意しています。

今回は80pxサイズのサムネイル”thunb80″(任意の名前) を使用します。
用意がない場合は以下のようにfunctions.phpに記載をすれば適応されます。

私の場合↓↓↓

//++++++++++++++++++++++++++++++++++++++++++++++
//アイキャッチ画像
add_theme_support('post-thumbnails');

set_post_thumbnail_size(510, 9999);
add_image_size('thumb250',250,250,true);
add_image_size('thumb150',150,150,true);
add_image_size('thumb120',120,120,true);
add_image_size('thumb80',80,80,true);
add_image_size('thumb60',60,60,true);

こんなになくても必要なサイズだけで大丈夫ですが、後で気が変わったりテーマを変えたりしたときに色々あった方が便利です。

プラグインの編集をする!

ダッシュボード>プラグイン>プラグインの編集>WP-PostView>wp-postviews/wp-postviews.php

検索をかけてこの箇所↓↓↓を探す

$thumbnail = get_the_post_thumbnail($post->ID,'thumbnail',true);

バージョンの場合は六ヶ所ありました。その行を以下↓↓↓に置き換えます。

$thumbnail = get_the_post_thumbnail($post->ID,'thumb80',true);

thumbnail → thum80 の部分が変更されました。

さてお次は本題。

プラグインの設定をしましょう!

設定>PostViews

<li><div class="side_views"><a href="%POST_URL%">%POST_THUMBNAIL%</a><a href="%POST_URL%" title="%POST_TITLE%">%POST_TITLE%</a>%VIEW_COUNT% views</div></li>

サイドバーヴィジェットに表示させましょう!

通常投稿もカスタム投稿タイプも全部取得させる!
表示・歩表示関わらずすべての投稿のランキング

<div class="sideviews">
  <?php if (function_exists('get_most_viewed')): ?>
<ol>
    <?php get_most_viewed(); ?>
</ol>
<ol>
<?php the_post_thumbnail('thumb80'); ?>
</ol>
<?php endif; ?>
</div>

通常投稿もカスタム投稿タイプも全部取得させる!

サイドバーヴィジェットに以下コピペ

<?php if (function_exists('get_most_viewed')): ?>
<ol>
    <?php get_most_viewed(); ?>
</ol>
<?php endif; ?>

表示中の投稿と同じタイプの投稿のランキング

<?php $posts = get_posts(array(
    'posts_per_page' => 5,
    'meta_key' => 'views',
    'orderby' => 'meta_value_num',
)); ?>
<?php foreach($posts as $post) : ?>
<div class="side_views"><div class="side_thumb"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumb80'); ?></a></div>
<p class="side_text">
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?></a></p>
<ul class="side_count"><?php echo get_post_meta($post->ID, 'views', true); ?>-Views</ul>
</div>
<?php endforeach; ?>

通常投稿の場合

<?php
 global $post;
 $args = array(
 'posts_per_page' => 5,
 'meta_key' => 'views',
 'orderby' => 'meta_value_num'
);
 $posts = get_posts( $args );
 foreach( $posts as $post ) {
 setup_postdata($post);
 ?>
<div class="side_views"><div class="side_thumb"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumb80'); ?></a></div>
<p class="side_text">
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?></a></p>
<ul class="side_count"><?php echo get_post_meta($post->ID, 'views', true); ?>-Views</ul>
</div>
<?php
 }
wp_reset_postdata();
?>

あとはCSSで見栄えを整えてね。
これが私はまだ悪戦苦闘中なのだが・・・