WP-PostViewsプラグインを利用して、画像付き人気記事一覧を作成してみる!

Release: 2019/10/06 Update: 2019/10/06

投稿、固定ページの閲覧数をカウントして人気記事一覧を作成するプラグインは、「WP-PostViews」や「WordPress Popular Posts」プラグインなど利用されているプラグインが多くあります。

 
ただ、取得された閲覧数データを簡単に利用することが難しいですね。
閲覧データだけ利用したい場合、どのようにデータを取り出すのかが分かりにくいのです。

 
その点、、「WP-PostViews」プラグインは、カスタムフィールドに閲覧数が保存されるので直接取り出すことが出来て、テーマに組み込みやすいと思います。

 
当ページでは、「WP-PostViews」プラグインを利用して、サイドバー用の画像付き人気記事一覧を作成してみようと思います。

 
 

WP-PostViewsプラグインのインストールと有効化

管理画面の「プラグインを追加」から、「WP-PostViews」を検索してインストールし、そのまま有効化します。

 

 

WP-PostViewsプラグインの設定

管理画面の「設定」−「PostViews」をクリックすると、次の設定画面が表示されます。

 

 
特に設定する箇所はありませんが、検索ロボット巡回はカウントしないように設定します。

 
 

投稿の閲覧数で記事を並べ替える

WP-PostViews」プラグインが取得した閲覧数は、次のように「views」の名前でカスタムフィールドに格納されます。
 

 
カスタムフィールドの値で記事を並べ替えるには、次の様に記述します。

$args = array(
	'post_type' => 'post',
	'meta_key'  => 'views',
	'orderby'   => 'meta_value_num',
);
$query = new WP_Query( $args );

では、実際に当サイトの記事を閲覧数の多い順に5記事抽出してみましょう。

<?php 
$arg = array(
	'post_type' => 'post',
	'meta_key' =>'views',
	'orderby' => 'meta_value_num', 
	'order' => 'DESC',
	'posts_per_page' => 5
); 
?> 
<ol>
<?php $the_query = new WP_Query( $arg );
	if ( $the_query->have_posts() ) :
	while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
	<li><?php echo the_title( ); ?></li>     
<?php endwhile; endif; ?>
</ol>

 
実際は、次の様に表示されます。
(枠は、勝手に追加しています。)

  1. 無料WordPressテーマ No.7012(レスポンシブWEBデザイン)
  2. 無料WordPressテーマ No.5012(レスポンシブWEBデザイン)
  3. 無料WordPressテーマ No.6012(レスポンシブWEBデザイン)
  4. 無料WordPressテーマ No.1031 ドロップシッピング仕様
  5. 無料WordPressテーマ No.1021

 
 

画像付きで人気記事を表示する

当ページのサイドバーのような人気記事一覧をサムネイル(アイキャッチ画像の)付きで表示してみましょう。

 
まず、サムネイルの表示ですが、

the_post_thumbnail()

で表示させることができます。

 
前述の投稿一覧の前に、小さなサムネイルを表示させると

<?php 
$arg = array(
	'post_type' => 'post',
	'meta_key' =>'views',
	'orderby' => 'meta_value_num', 
	'order' => 'DESC',
	'posts_per_page' => 5
); 
?> 
<ol class="p-test">
<?php $the_query = new WP_Query( $arg );
	if ( $the_query->have_posts() ) :
	while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
	<li><?php the_post_thumbnail(); ?><?php echo the_title( ); ?></li>     
<?php endwhile; endif; ?>
</ol>

 

  1. 無料WordPressテーマ No.7012(レスポンシブWEBデザイン)
  2. 無料WordPressテーマ No.5012(レスポンシブWEBデザイン)
  3. 無料WordPressテーマ No.6012(レスポンシブWEBデザイン)
  4. 無料WordPressテーマ No.1031 ドロップシッピング仕様
  5. 無料WordPressテーマ No.1021

※画像の大きさはCSSで指定しています。

 
 

当サイトのサイドバーの人気記事は?

当サイトのサイドバーで表示している人気記事も「WP-PostViews」プラグインで取得した閲覧数を基に、抽出して並べ替えています。

※実際はウィジェットとして、表示数等を設定出来るようにしています。

 
なお、表示用のCSSも例示して起きますので、参考になるといいですね。

<div class="rank-post">
<?php 
$arg = array(
	'post_type' => 'post',
	'meta_key' =>'views',
	'orderby' => 'meta_value_num', 
	'order' => 'DESC',
	'posts_per_page' => 5
); 
?> 
 <?php 	$the_query = new WP_Query( $arg );
		if ( $the_query->have_posts() ) :
		while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
  <div class="r-post">
    <?php if ( has_post_thumbnail() ): ?>
      <div class="img-set"><a href="<?php echo get_permalink(); ?>"><?php the_post_thumbnail(); ?></a></div>
	<?php endif; ?>
	  <h5><a href="<?php echo get_permalink(); ?>"><?php echo the_title(); ?></a></h5>     
	  <p><?php echo wp_html_excerpt(get_the_excerpt(), 50, '・・・'); ?></p>
	  <div class="clr"></div>
	</div>
<?php endwhile; endif; ?>
</div>

 
文字の大きさや改行幅は適当ですので、利用される場合は調整してください。

.rank-post {
	margin-top: 10px;
	padding: 0 10px;
	overflow: hidden;
	}
.rank-post .r-post {
	margin-bottom: 10px;
	padding-bottom: 10px;
	}
.rank-post  h5{
	display: block;
	padding: 0 0 5px ;
	font-size: 1em;
	line-height: 1.0em;
	font-weight: bold;
	}
.rank-post .r-post p {
	font-size: 0.7em;
	line-height: 1.2em;
	color: 666;
	}
.rank-post .r-post .img-set{
	float: left;
	margin-right: 8px;
	max-width: 120px;
	border: 1px solid #CCC;
	display: block;
	overflow: hidden;
	}

 
このページで表示すると違和感がありますが、サイドバーならうまく収まるかも・・・?

INDEX1 レスポンシブWEBデザインの新テーマを公開!!2 テーマの設定について2.1 ヘッダー・・・

INDEX1 レスポンシブWEBデザインの2カラム無料テーマです。2 テーマカスタマイザーでテーマを・・・

INDEX0.1 新レスポンシブWEBデザインの2カラム無料テーマです。0.2 テーマカスタマイザー・・・

現在は、「新もしも商品登録プラグイン」の配布が終了しています。プラグイン無しでも構築可能ですが、手間・・・

2カラムでヘッダーメニューのあるテーマです。 以前に作成したテーマの改訂版になります。ただし、メニュ・・・

 
 

HOME


関連コンテンツ



コメントはお気軽にどうぞ

メールアドレスは公開されません。
また、* が付いている欄は必須項目ですので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA