WordPress プラグインなしで人気記事を自動表示させる設定
プラグインなしで人気記事を自動表示
レッスンノート、レッスンクチコミ記事の下（設定次第で好きな場所にできます）に人気投稿記事が自動で表示されるように設定しました。
プラグインはサイトの負担になるので、php、cssで設置します。
仕上がりはこちらのページの下「人気記事」を参照ください。
＊＊2026年5月26日にリライト済み
１、サイトの「今」を察知する
記事のPV閲覧数をカウントできる関数を作成し、functions.php に記述します
// 記事のPV閲覧数取得
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';
}
// 記事PVのカウント
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);
２、記事ページで閲覧数をカウントする」
投稿記事をカウントする際は、sinlge.php に、
サイト全体が良いなら、header.php に記載します。
<?php if( !is_user_logged_in() && !is_robot() ) { setPostViews( get_the_ID() ); } ?>
３、載せたいところに記載
人気記事を載せたい箇所に貼り付けます。
一般的にはsidebar.php が多いと思いますが
私のサイトでは投稿記事 single.php の記事下に載せています。
<!-- 人気記事 -->
<div class="ninki">
<h3 class="related_post_title">人気記事</h3>
<?php if( is_single() && !is_user_logged_in() && !isBot() ): //個別投稿の場合人気記事を表示 管理者とボットのアクセス除外
set_post_views();
endif; ?>
<?php
$args = array(
'post_type' => 'post',
'numberposts' => 4, //表示数
'meta_key' => 'pv_count',
'orderby' => 'meta_value_num',
'order' => 'DESC',
);
$posts = get_posts( $args );
if( $posts ): ?>
<ul>
<?php foreach( $posts as $post ) : setup_postdata( $post ); ?>
<li><a href="<?php the_permalink(); ?>" >
<div class="ninki-thumb">
<?php if( has_post_thumbnail() ): ?>
<?php echo get_the_post_thumbnail($post->ID, 'thumb100'); ?>
<?php else: ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/no-image.png" alt="NO IMAGE" title="NO IMAGE" width="25px" />
<?php endif; ?>
</div>
<div class="ninki-title">
<?php the_title(); ?>
</div>
</a></li>
<?php endforeach;
wp_reset_postdata(); ?>
</ul>
<?php else : ?>
<p> 現在集計中です</p>
<?php endif; ?>
</div>
<!-- 人気記事ここまで -->
４、CSSの設定
.related は関連記事 →「WordPress プラグインなしで関連記事を自動表示させる設定」はこちら
.ninki は人気記事
＊.box4-1 はそれらを内包する div
.related, .ninki {
box-sizing: border-box;
padding-left: 20px;
padding-right: 20px;
}
.related_post_title {
margin-top: 2em;
margin-bottom: -0.5em;
text-align: left;
padding: 0 55px;
font-size: 1.4em;
color: #FF9C00;
}
.related ul, .ninki ul {
margin-bottom: 3em;
margin-top: -0.1em;
}
.related li, .ninki li {
list-style-type: none;
border-bottom: dotted 1px #4C4B4B;
padding-top: 0.5em;
font-size: 0.9em;
line-height: 1.9em;
}
.box4-1 .related li a, .box4-1 .ninki li a {
color:#222;
}
.box4-1 .related li a:hover, .box4-1 .ninki li a:hover {
color: #F0A04C;
}
.related img, .ninki img {
float: left;
width:27px;
height:27px;
padding: 0 1em 0.3em 0;
vertical-align: bottom;
}
@media (max-width: 767px) {
.box4-1 .related ul, .box4-1 .ninki ul {
font-size: 0.8em;
}
.related_post_title {
text-align: center;
margin-top: 2em auto 0 auto;
}
.related li, .ninki li{
line-height: 1.6em;
}
.related, .ninki {
padding-left: 0px;
}
.related img, .ninki img {
display: none;
}
}
表示数を変えたり、レイアウト変更はCSSで調整して下さい。
試す前に、バックアップをとって作業を行なって下さい。
以前 閲覧数をカウントする関数を functions.php に記載して観測していたら、コードにバグが出て投稿記事のレイアウトが壊れることがありました。
それ以降、人気記事一覧の表示をやめていたのですが、今回もう一回挑戦してみたら、意外とスルッと上手くいったので、備忘録としてリライトしブログアップにいたりました。
ココフラッペ公式LINE
LINEで簡単にお申し込み・お問い合わせ・レッスン予約ができます。
ぜひお気軽にご参加ください。
