【WordPress】人気記事一覧をプラグインを使わずに表示させる方法！

　WordPressでブログを運営する時に、上の画像で赤く囲ってあるところのようにどの記事がどれくらいの人に読まれているのか、いわゆる人気記事一覧を表示できるようになるとブログとしてより充実したものにさせることができます。
　WordPressでは人気記事一覧を自動的に取得・表示してくれる「WordPress Popular Posts 」というプラグインがありますが、プラグインを多く実装してしまうとプラグイン同士で競合しあってしまい、うまくプラグインが動かない…という事態が起きてしまうことがあります。そういう時はPHPで人気記事を取得・表示してくれるようコードを記述する必要があるのですが、今回はいくつかある実装方法の中でも自分が実際に使っている人気記事を取得・表示してくれるPHP構文を紹介したいと思います！

作業の流れ

　まず、WordPressにて人気記事一覧を取得・表示させるには以下の作業を行うことで可能になります！
1. 「WP-PostViews」というプラグインをインストールおよび有効にする
2. 人気記事一覧を表示させたいところにPHP構文を記述

1. 「WP-PostViews」というプラグインをインストールおよび有効にする

　まず、WordPressに「WP-PostViews」というプラグインをインストールおよび有効にします。この「WP-PostViews」というプラグインは記事1つ1つに閲覧数を取得してくれるViewsというカスタムフィールドを自動的に設定してくれるもので、今回の人気記事一覧をPHP構文で実装するためには必要なものとなっています！

　ちなみにこのプラグインを使えば、よく人気記事一覧で表示されているような“○○ View”といった閲覧数も表示させることができるので、ぜひとも活用しましょう(^-^)

2. 人気記事一覧を表示させたいところにPHP構文を記述

　それでは実際に人気記事一覧を表示させたいところに記述する構文について解説していきたいと思います。

　今回は当サイトで人気記事を表示しているHTMLコードを元に解説します。当サイトでは

<ul>
	<li>
		<a href="記事のリンクURL">
			<div class="popular-img"><img src="画像のURL" ></div>		
			<div class="popular-title"><span>○○ Views</span><br>記事タイトル</div>
		</a>
	</li>

	<li>
		<a href="記事のリンクURL">
			<div class="popular-img"><img src="画像のURL" ></div>		
			<div class="popular-title"><span>○○ Views</span><br>記事タイトル</div>
		</a>
	</li>

	<li>
		<a href="記事のリンクURL">
			<div class="popular-img"><img src="画像のURL" ></div>		
			<div class="popular-title"><span>○○ Views</span><br>記事タイトル</div>
		</a>
	</li>

</ul>

上のようにコードを記述しています。概要としては

<div class="popular-img"><img src="画像のURL" ></div>

上のコードで記事のアイキャッチ画像を表示し、

<div class="popular-title"><span>○○ Views</span><br>記事タイトル</div>

上で閲覧数および記事タイトルを表示させています。
あとはCSSで自分の希望するレイアウトにしていけばとりあえずの骨組みは完成となります。

　では次に完成したコードに人気記事一覧を表示してくれるPHPを当てはめていって自動的に人気記事一覧を取得・表示されるようにしていきたいと思います！
まずは実装したPHP構文を紹介したいと思います。

<ul>
	<?php
	$args = array( 'posts_per_page' => 5,
	'orderby' => 'meta_value_num',
	'meta_key' =>'views',
	'order' => 'DESC',
	);
	$my_query = new WP_Query( $args );
	if($my_query->have_posts()) : while($my_query->have_posts()) : $my_query->the_post(); ?>
		<li>
			<a href="<?php the_permalink(); ?>">
				<div class="popular-img"><?php the_post_thumbnail('thumbnail'); ?></div>
				<div class="popular-title"><span><?php echo post_custom('views'); ?> Views</span><br><?php the_title(); ?></div>
			</a>
		</li>
	<?php endwhile; endif; wp_reset_postdata(); ?>

</ul>

上のPHP構文を人気記事一覧を表示させたいところに記述してあげることで、「WP-PostViews」で自動計算された閲覧数を元に閲覧が多い順に記事を表示してくれるようになります！それでは細かな解説に入っていきたいと思います。

表示件数を指定する

　まず、上の見本のPHP構文の3行目

$args = array( 'posts_per_page' => 5,

こちらで記事の表示数を設定しています。今回は閲覧が多い記事5つを表示させたいので“5”と数値を設定しています。

アイキャッチ画像を取得・表示する

　12行目の

<div class="popular-img"><?php the_post_thumbnail('thumbnail'); ?></div>

上のコードの中にある

<?php the_post_thumbnail('thumbnail'); ?>

このコードを記述することで記事のアイキャッチ画像を自動的に取得・表示させています。

閲覧数を表示する

　続いて13行目の

<div class="popular-title"><span><?php echo post_custom('views'); ?> Views</span><br><?php the_title(); ?></div>

こちらの

<?php echo post_custom('views'); ?> Views

上のコードが、「WP-PostViews」で自動計算された閲覧数を表示させるものになります。なので、もし閲覧数を表示させたくないのであれば上のコードを記述しなければ済む、ということですねo(^-^)o

まとめ

　以上にて人気記事一覧をPHPのみで実装することが可能となります！まだPHPに慣れてない…という場合、手こずるところが多いかとは思いますがこの書き方をニュアンスだけでもわかるようになると全然違ってくると思うので、是非とも活用してみてください(^^)