WordPress プラグインなしで人気記事を自動表示させる設定
プラグインなしで人気記事を自動表示
レッスンノート、レッスンクチコミ記事の下（設定次第で好きな場所にできます）に人気投稿記事が自動で表示されるように設定しました。
プラグインはサイトの負担になるので、php、cssで設置します。
仕上がりはこちらのページの下「人気記事」を参照ください。
設定方法１
functions.php に記述
集計期間の変更は「//実行間隔の追加」で出来ます。
↓ ‘interval’ は １時間/3600 で計算（お好きな期間で変更可能）
$schedules[‘1hours’] = array(
‘interval’ => 3600,
‘display’ => ‘every 1 hours’
//投稿ページに、人気の投稿を表示する
//アクセス数をカウントする
function set_post_views() {
$postID = get_the_ID();
$num = (int)date_i18n('H'); // 現在時間で番号取得
$key = 'pv_count';
$count_key = '_pv_count';
$count_array = get_post_meta( $postID, $count_key, true );
$sum_count = get_post_meta( $postID, $key, true );
if( !is_array($count_array) ) { //配列ではない
$count_array = array();
$count_array[$num] = 1;
} else { //配列である
if ( isset( $count_array[$num] ) ) { //カウント配列[n]が存在する
$count_array[$num] += 1;
} else { //カウント配列[n]が存在しない
$count_array[$num] = 1;
}
}
//アクセス数を更新する
update_post_meta( $postID, $count_key, $count_array );
update_post_meta( $postID, $key, $sum_count + 1 );
}
//アクセス数をリセットする
function reset_post_views() {
$num = (int)date_i18n('H');
$key = 'pv_count';
$reset_key = '_pv_count';
$args = array(
'posts_per_page' => -1,
'post_type' => 'post',
'post_status'=>'publish',
'meta_key' => $reset_key,
);
$reset_posts = get_posts($args);
if($reset_posts):
foreach($reset_posts as $reset_post):
$postID = $reset_post->ID;
$count_array = get_post_meta( $postID , $reset_key, true );
if ( isset( $count_array[$num] ) ) { //カウント配列[n]が存在する
$count_array[$num] = 0;
}
//アクセス数をリセットする
update_post_meta( $postID, $reset_key, $count_array );
update_post_meta( $postID, $key, array_sum( $count_array ) );
endforeach;
endif;
}
//リセット関数を実行するアクションフックを追加
add_action( 'set_hours_event', 'reset_post_views' );
//実行間隔の追加
function my_interval( $schedules ) {
// 1時間ごとを追加
$schedules['1hours'] = array(
'interval' => 3600,
'display' => 'every 1 hours'
);
return $schedules;
}
add_filter( 'cron_schedules', 'my_interval' );
//アクションフックを定期的に実行するスケジュールイベントの追加
function my_activation() {
if ( ! wp_next_scheduled( 'set_hours_event' ) ) {
wp_schedule_event( 1451574000, '1hours', 'set_hours_event' );
}
}
add_action('wp', 'my_activation');
//ボットの判別
function isBot() {
$bot_list = array (
'Googlebot',
'Yahoo! Slurp',
'Mediapartners-Google',
'msnbot',
'bingbot',
'MJ12bot',
'Ezooms',
'pirst; MSIE 8.0;',
'Google Web Preview',
'ia_archiver',
'Sogou web spider',
'Googlebot-Mobile',
'AhrefsBot',
'YandexBot',
'Purebot',
'Baiduspider',
'UnwindFetchor',
'TweetmemeBot',
'MetaURI',
'PaperLiBot',
'Showyoubot',
'JS-Kit',
'PostRank',
'Crowsnest',
'PycURL',
'bitlybot',
'Hatena',
'facebookexternalhit',
'NINJA bot',
'YahooCacheSystem',
'NHN Corp.',
'Steeler',
'DoCoMo',
);
$is_bot = false;
foreach ($bot_list as $bot) {
if (stripos($_SERVER['HTTP_USER_AGENT'], $bot) !== false) {
$is_bot = true;
break;
}
}
return $is_bot;
}
設定方法２
掲載したい箇所にコードを貼り付ける。
当サイトは「投稿ページ」 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;
}
}
参考サイト：HTML特殊文字変換ツール
参考サイト：WORDPRESS｜プラグインなしで関連記事や人気投稿を表示させる【記事内/ウィジェットエリア】
