【wordpress】plugin無しで人気記事ランキングを作る方法

WEB制作, wordpress

wordpressでpluginを使わずに人気記事ランキングを作る方法です。

wordpressで記事のアクセスランキングを表示したい時は、大抵plugin等を使って実装しますよね。
今回はfunctions.phpにコードを書いて実装する事にしました。

pluginを使わないことでのメリットは、拡張性。
後々になって新しい機能が欲しくなった場合に、自分でバージョンアップ出来る事です。
勉強にもなりますしね。

スポンサーリンク

実装方法

人生を変える猫の魔法

↑こんな感じのランキングを作っていきます。

機能としては
・毎月1日にアクセス数をリセット
・サムネイル画像表示
・アクセス数表示
となっています。

functions.phpにコードを記述

こちらの記事を参考に実装しました。
How to Display Popular Posts by Views in WordPress without a Plugin

まず記事のアクセスカウントを取得して、カスタムフィールドを作成します。

function wpb_set_post_views($postID) {
    $count_key = 'wpb_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);
    }
}
//To keep the count accurate, lets get rid of prefetching
remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0);

/* add post views to single page */
function wpb_track_post_views ($post_id) {
    if ( !is_single() ) return;
    if ( empty ( $post_id) ) {
        global $post;
        $post_id = $post->ID;
    }
    wpb_set_post_views($post_id);
}
add_action( 'wp_head', 'wpb_track_post_views');

次にwp_schedule_eventを使い、作成したカスタムフィールドの値を毎月1日にリセットします。
先ほどのコードの下に追記する。

add_action('my_hourly_event', 'my_hourly_action');

function my_hourly_action() {
    // 投稿記事全取得
    $args = array(
                    'posts_per_page' => -1,
                    'post_type' => array(
                        'post'
                    )
                );
    // 変数に格納
    $the_query = new WP_Query($args);
    $count_key = 'wpb_post_views_count';
    delete_post_meta_by_key('wpb_post_views_count');
    if ($the_query->have_posts()) :
        while ($the_query->have_posts()) : $the_query->the_post();
        $post_id   = $the_query->post->ID;
        $count = get_post_meta($post_id, $count_key, true);
           if(empty($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, 0);
            }
        endwhile;
    endif;
}

// イベントの時間追加

add_filter('cron_schedules', 'my_interval' );
function my_interval($schedules) {
    date_default_timezone_set( 'Asia/Tokyo' );
    $dt = new DateTime('now');
    $dt_2 = new DateTime('midnight first day of next month');
    $d = $dt_2->diff($dt, true);
    $dt_array = get_object_vars($d);
    $day = $dt_array["d"] * 24 * 60 * 60;
    $hour = $dt_array["h"] * 60 * 60;
    $minutes = $dt_array["i"] * 60;
    $second = $dt_array["s"];
    $difftime = $day + $hour + $minutes + $second + 60;
    $schedules['Nextmonth'] = array(
        'interval' => $difftime,
        'display' => 'Nextmonth'
    );
    return $schedules;
}

function my_activation() {
    // イベントが未登録なら登録する
    if(!wp_next_scheduled('my_hourly_event')){
        wp_schedule_event(time(), 'Nextmonth', 'my_hourly_event');
    }
}
add_action('wp', 'my_activation');

// イベント排除
register_deactivation_hook(__FILE__, 'my_deactivation');
function my_deactivation() {
    wp_clear_scheduled_hook('my_hourly_event');
}

HTML部分

ランキング表示させたい場所に記述します。

<?php // POPULAR POST
				$popularpost = new WP_Query( array( 'posts_per_page' => 10, 'meta_key' => 'wpb_post_views_count', 'orderby' => 'meta_value_num', 'order' => 'DESC'  ) );
				
				while ( $popularpost->have_posts() ) : $popularpost->the_post();?>
					<div class="latest_wrap">
						<a href="<?php the_permalink(); ?>">
						<?php if ( has_post_thumbnail() ) { ?>
		                    <?php the_post_thumbnail('thumbnail', array('class' => 'thumbnail')); ?>
		                <?php } else { ?>
		                	<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/no_image3.gif" />
		                <?php } ?>
		                
		                <h2 class="title"><?php the_title(); ?></h2>
		                <span class="view_count"><?php echo post_custom('wpb_post_views_count'); ?></span>
			    		</a>
			    	</div>
				<?php endwhile; ?>

posts_per_pageの値を変えることで、表示件数を変更できます。

css

表示のデザインです。
以下はこのブログのCSSです。ご参考までに。

.latest_wrap a {
	float: left;
	padding: 10px 0 0 0;
	min-height: 75px;
	width: 100%;
	border-bottom: 1px solid #f0efef;
	text-decoration: none;
	position: relative;
}

.latest_wrap img {
	float: left;
	margin: 0 20px 10px 10px;
	padding: 0;
	width: 60px;
	height: 60px;
	border: 0;
	border-radius: 0;
	transition: 0.5s;
}

.latest_wrap .title {
	margin: 5px 0 0 0;
	color: #000;
	font-weight: 400;
	font-size: 13px;
}

.latest_wrap .view_count {
	position: absolute;
	bottom: 0px;
	right: 0;
	font-family: impact;
	color: #666;
	font-size: 14px;
	background: rgba(0,0,0,0.1);
	padding: 0 0 0 5px;
}

.latest_wrap .view_count:after {
	content: "view";
	color: #000;
	margin: 0 0 0 5px;
}

あとがき

簡易的にアクセスのランキングを作りたい場合には役立つかと思います。
このブログまだアクセス少ないから、あんまり役立ってないんですけどね(´・ω・`)

この記事が気に入ったら
『いいね』しよう!