2017.07.22
wordpress

【WordPress】プラグインなしで人気の記事をランキングで載せる方法

人気記事プラグインなし

ワードプレスでアクセス数の多い人気の記事やページをランキングにして表示させる方法。Popular Postsというプラグインがとても有名ですね。

プラグインを使う方法もありますが、今回はプラグインを使わず、テーマファイルをカスタマイズすることで実装できます。

個人的にはプラグインはできるだけ使わないほうがよいと思っています。

当ブログで左サイドバーにとうとう設置したので紹介します。

もちろんすばらしいプラグインはたくさんありますが、サイトが重たくなったりアップデートでトラブルになったりとデメリットも考えなければなりません。

今回は2つのステップで簡単に実装できるのでぜひお試しください。

functions.phpに記述してカウントする

テーマファイルのfunctions.phpに以下を記述します。

function my_custom_popular_posts($post_id) {
	$count_key = 'popular_posts';
	$count = get_post_meta($post_id, $count_key, true);
	if ($count == '') {
		$count = 0;
		delete_post_meta($post_id, $count_key);
		add_post_meta($post_id, $count_key, '0');
	} else {
		$count++;
		update_post_meta($post_id, $count_key, $count);
	}
}
function my_custom_track_posts($post_id) {
	if (!is_single()) return;
	if (empty($post_id)) {
		global $post;
		$post_id = $post->ID;
	}
	my_custom_popular_posts($post_id);
}
add_action('wp_head', 'my_custom_track_posts');

ここでは2つのファンクションを設定しています。
最初のはアクセスがある度にカスタムフィールドに数が加算されていくようにしています。2つ目のは、シングルページつまり投稿記事が読み込まれるたびに最初のファンクションを呼び出すようにwp_headにフックしています。

もっと詳しく知りたい場合は以下について調べてみてくださいね。

  • get_post_meta()
  • add_post_meta()
  • update_post_meta()
  • delete_post_meta()

人気記事を表示する

人気の記事をランキングで表示したいテーマファイルの任意の場所に以下を記述。

まずはシンプルにリンクつきタイトルのランキングを表示させる方法。

<h3>Popular Posts</h3>
<ol>
<?php $popular = new WP_Query(array('posts_per_page'=>7, 'meta_key'=>'popular_posts', 'orderby'=>'meta_value_num', 'order'=>'DESC'));
	while ($popular->have_posts()) : $popular->the_post(); ?>
	<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
	<?php endwhile; wp_reset_postdata(); ?>
</ol>

上記では人気の記事が7件、ランキングで表示されます。

  • ‘posts_per_page’=>7で表示件数
  • ‘orderby’=>’meta_value_num’を’orderby’=>’comment_count’にするとコメント数が多い順
  • ‘order’=>’DESC’ を ‘order’=>’ASC’にすると不人気順(・・・使うか分かりませんが)

リンクつきサムネイルも一緒に表示したい場合は以下のように。

<ol>
<?php $popular = new WP_Query(array('posts_per_page'=>7, 'meta_key'=>'popular_posts', 'orderby'=>'meta_value_num', 'order'=>'DESC'));
	while ($popular->have_posts()) : $popular->the_post(); ?>
<li>
<div class="popular_thumbnail">
  <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
        <?php if ( has_post_thumbnail() ):  ?>
        <?php echo get_the_post_thumbnail(); ?>
        <?php else:  ?>
         No image
        <?php endif; ?>
        </a>
  </div>
<div class="popular_entrytitle">
  <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
</div>
</li>
	<?php endwhile; wp_reset_postdata(); ?>
</ol>

CSSはpopular_thumbnailpopular_entrytitleというクラスでカスタマイズしてください。

人気順のアーカイブページを作る方法

全記事を人気順に表示する方法です。

functions.phpに以下を記述。

function my_custom_display_popular_posts($query) {

if ( !is_admin() && $query->is_main_query() ) {
	
	$get_pop = (isset($_GET['popular-posts']) && !empty($_GET['popular-posts'])) ? true : false;
	
	if ($get_pop) {
		$query->set('meta_key', 'popular_posts');
		$query->set('orderby', 'meta_value_num');
		$query->set('order', 'DESC');
		add_action('loop_start' , 'my_custom__before_loop');
		}
	}
}
add_action('pre_get_posts', 'my_custom_display_popular_posts');
function my_custom__before_loop() {
	echo '<h3>アクセス数が多い人気順</h3>';
}

そして「サイトのアドレス/?popular-posts=display」にアクセス。
http://ri-mode.com/rainbow/?popular-posts=displayのように。

しかし、titleタグ部分がうまくできないのでもっとよい方法でアーカイブ表示できないか検討中。パンくずリストなどがあるサイトだとうまく表示されないと思います。

よい方法が見つかったら報告します。

参考サイト
DIY WordPress Popular Posts

関連する記事

コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP