【WordPress】プラグインなしで現在記事と同じカテゴリーの人気記事一覧を出力する

こんにちは、ガタガタです。

何気なく自分のブログを見ていて、縦に長い記事ページを下の方にスクロールしたとき、サイドバーが途切れた後の余ったスペースが気になりました。

そこで、人気ブログでよく見る、スクロール追従する「あなたにはこの記事もオススメです」的なウィジェットを作りました。

人気記事一覧を出力するプラグイン「WordPress Popular Posts」を使えば作れそうなのですが、当ブログではなるべくプラグインを使わない方針なので、phpを直接編集することで設置しました。

以下、その方法を紹介します。

人気記事を調べるため、記事ビュー数をカウントできるようにする

まず、以下の記事を参考に、人気記事を知るため、Wordpress内で記事ごとのビュー数をカウントできるようにします。
manablog：『プラグインなし』で人気記事一覧を出力する方法【WordPress】

function.phpを編集

以下のコードをfunction.phpにコピペします。

// 人気記事出力用
function getPostViews($postID){
	$count_key = 'post_views_count';
	$count = get_post_meta($postID, $count_key, true);
	if($count==''){
			delete_post_meta($postID, $count_key);
			add_post_meta($postID, $count_key, '0');
			return "0 View";
	}
	return $count.' Views';
}
function setPostViews($postID) {
	$count_key = 'post_views_count';
	$count = get_post_meta($postID, $count_key, true);
	if($count==''){
			$count = 0;
			delete_post_meta($postID, $count_key);
			add_post_meta($postID, $count_key, '0');
	}else{
			$count++;
			update_post_meta($postID, $count_key, $count);
	}
}
remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0);

このコードを追加することで、WordPress内で記事ごとのビュー数をカウントする機能が追加されます。

ブログのサイドバーにウィジェット追加

以下のコードを、サイドバーのウィジェットを追加したいところにコピペ。

<?php if ( is_single() ) : ?> <!-- 記事ページを見ているときだけ表示 -->
	<?php
	// views post metaで記事のPV情報を取得する
	setPostViews(get_the_ID());
	// 見ている記事のカテゴリーIDを取得する
	$category = get_the_category();
	$cat_id   = $category[0]->cat_ID;
	// 見ている記事のIDを取得する
	$post_id = get_the_ID();
	$args = array(
		'post_type' => 'post',
		'cat' => $cat_id, // 今見ている記事と同じカテゴリーの記事だけ選ぶ
		'post__not_in' => array($post_id), // 今見ている記事だけ除外する
		'meta_key' => 'post_views_count',
		'orderby' => 'meta_value_num',
		'posts_per_page' => 3,  // 表示する記事の件数
		'order'=> 'DESC'
		);
	$query = new WP_Query( $args ); ?>

	<?php
	// ループ開始
	if ($query->have_posts()) : ?>
	<?php while ($query->have_posts()) : $query->the_post(); ?>

               <!-- ここに記事一覧のhtmlを入れる -->

	<?php endwhile; ?>
        <?php wp_reset_postdata(); ?>
	<?php endif; ?>

<?php endif; ?>

上記のコードでは、phpの条件分岐により記事ページでなければ表示できないようにしています。トップページや固定ページ、カテゴリ一覧ページでは非表示になります。

「ここに記事一覧のhtmlを入れる」のところにhtmlを記述し、記事一覧をスタイリングします。人気記事一覧や最近の投稿一覧のhtmlタグをコピペすれば、いい感じに見た目が整うはずです。

また、post_per_pageの値を変えることで、表示する記事の件数を変更できます。

スクロール追従にする

あとは、ウィジェット要素にposition:sticky;を与えればスクロール追従になります。

position:sticky;を指定したのにスクロール追従にならない場合

stickyで追従するのは、親要素の範囲内だけです。ウィジェットの親要素であるサイドバーが縦方向に短ければ、position:sticky;を指定しても追従しません。

もしサイドバーの縦の長さが足りない場合は、サイドバーの縦方向の長さを見直してください。

カラム組みをfloat:left;などで行なっているサイトで主にハマるポイントな気がします。。。Flexboxの方が何かと便利なので、面倒ですがこの機会にFlexboxによるカラム構成に切り替えましょう。