人気記事をランキング表示させるプラグイン「WordPress Popular Posts」もあるが、プラグインに頼らずに行う方法。
・カスタムフィールドにアクセスカウントを格納する
・カウントはセッション毎に行う
・wp_headをフックに使用
※画像表示について
アイキャッチ画像がある場合はアイキャッチ画像を表示。
アイキャッチ画像が無い場合は記事内の最初の画像を表示。
アイキャッチ画像も記事内の画像も無い場合はデフォルト画像を表示させる。
※デフォルト画像 default-img.pngを作成する（220×165 または 160×160くらい）
function.php
/* ---------------------------------------------------------------------------------------
◆◆◆ 投稿記事の最初の画像のサムネイル ###############################################
------------------------------------------------------------------------------------------*/
function my_first_image_thumb(){
global $post;
$img_url = '';
//デフォルト画像の設定
$defaute_url = get_stylesheet_directory_uri(). '/images/default-img.png';
//最初の画像を取得してIDを取得
preg_match_all('/<img.+?class=".+?wp-image-(.+).*?".*?>/i', $post->post_content, $matches);
if(isset($matches[1][0])){
$img_id = ($matches[1][0]);
}
//最初の画像があれば分岐
if(!empty($img_id)){
//最初の画像IDからサムネイルのパスを取得してセット
$img_url = my_wp_get_attachment_medium_url($img_id);
} else {
//最初の画像がない場合、デフォルト画像のパスをセット
$img_url = $defaute_url;
}
return $img_url;
}
//画像IDからサムネイルサイズのパスを取得（画像サイズ変更可能）
//画像サイズ (thumbnail, medium, large, full or custom size)
function my_wp_get_attachment_medium_url( $id ) {
$thumbnail_array = image_downsize( $id, 'thumbnail' );
$thumbnail_path = $thumbnail_array[0];
return $thumbnail_path;
}
/* ---------------------------------------------------------------------------------------
◆◆◆ 人気記事のランキング化 #########################################################
------------------------------------------------------------------------------------------*/
//カスタムフィールド「custom_popular_ranking」の作成とセッション毎のカウント設定 ---------
function get_custom_popular_ranking() {
if (!is_single()) return;
if (empty($post_id)) {
global $post;
$post_id = $post->ID;
}
session_start();
if (!isset($_SESSION['custom_popular_id_'.$post_id])) {
$_SESSION['custom_popular_id_'.$post_id] = 1;
$custom_key = 'custom_popular_ranking';
$cnt = get_post_meta($post_id, $custom_key, true);
if ($cnt == '') {
$cnt = 1;
add_post_meta($post_id, $custom_key, $cnt);
} else {
$cnt++;
update_post_meta($post_id, $custom_key, $cnt);
}
}
session_write_close();
}
add_action('wp_head', 'get_custom_popular_ranking');
sidebar.php（サイドバーに表示させる）
<?php /* 人気記事ここから ---------------------------------- */ ?>
<h3><i class="fa icon-doc-text"></i>人気記事</h3>
<div id="ranking">
<ul>
<?php
$custom_key = 'custom_popular_ranking';
$cat_common_id = null;
$args = array(
'cat' => $cat_common_id,
'posts_per_page'=>5,
'meta_key'=>$custom_key,
'orderby'=>'meta_value_num',
'order'=>'DESC'
);
$my_query = new WP_Query($args);
$ranking_counter = 0;
?>
<?php if( $my_query -> have_posts() ) :?>
<?php while($my_query -> have_posts()) : $my_query -> the_post();?>
<?php
$category = get_the_category();
$category_slug = $category[0]->slug;
$category_name = $category[0]->cat_name;
$thumbnail_id = get_post_thumbnail_id();
$eye_img = wp_get_attachment_image_src($thumbnail_id,'thumbnail');
$popular_ranking_cnt = get_post_meta($post->ID, $custom_key, true);
$ranking_counter++;
?>
<li class="ranking-<?php echo $ranking_counter; ?>">
<a href="<?php the_permalink();?>">
<div class="ranking-img">
<?php if (has_post_thumbnail()) : ?>
<img src="<?php echo $eye_img[0]; ?>">
<?php else : ?>
<img src="<?php echo my_first_image_thumb(); ?>">
<?php endif ; ?>
</div><!--/ranking-img-->
<div class="ranking-txt">
<div class="cat-<?php echo $category_slug;?> ranking-category"><?php echo $category_name;?></div>
<div><?php the_title(); ?></div>
<div><?php the_time('Y/m/d'); ?></div>
<div class="ranking-num"><?php echo $popular_ranking_cnt;?><span>View</span></div>
</div><!--/ranking-txt-->
</a>
</li>
<?php endwhile;?>
<?php endif;?>
</ul>
</div><!--/#ranking-->
<?php /* 人気記事ここまで ---------------------------------- */ ?>
css
/* 投稿ランキング
--------------------------------------------------*/
#aside #ranking ul li {
position: relative;
margin-bottom: 15px;
min-height: 80px;
font-size: 93%;
clear: both;
}
#aside #ranking ul li a {
text-decoration: none;
color: #666;
}
#aside #ranking ul li a:hover {
color: #999;
}
/* オンマウスで背景色を変化させる場合
#aside #ranking ul li a::before {
position: absolute;
display: block;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -10;
background: #fff;
-webkit-transition: background 0.3s ease;
-moz-transition: background 0.3s ease;
transition: background 0.3s ease;
}
#aside #ranking ul li a:hover::before {
background: #eee;
}
*/
#aside #ranking ul li::after {
pointer-events: none;
position: absolute;
display: block;
content: '';
letter-spacing: 0.1em;
font-size: 12px;
font-weight: 700;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
padding-top: 3px;
background: #bbb;
text-align: center;
color: #fff;
z-index: 9;
}
#aside #ranking ul li:nth-child(3)::after,
#aside #ranking ul li:nth-child(2)::after,
#aside #ranking ul li:nth-child(1)::after {
width: 24px;
height: 18px;
padding-top: 2px;
font-size: 13px;
}
#aside #ranking ul li:nth-child(1)::after {
content: '1';
background: #bca045;
}
#aside #ranking ul li:nth-child(2)::after {
content: '2';
background: #7d7d7d;
}
#aside #ranking ul li:nth-child(3)::after {
content: '3';
background: #9b7155;
}
#aside #ranking ul li:nth-child(4)::after {
content: '4';
}
#aside #ranking ul li:nth-child(5)::after {
content: '5';
}
#aside #ranking ul li:nth-child(6)::after {
content: '6';
}
#aside #ranking ul li:nth-child(7)::after {
content: '7';
}
.ranking-img {
width: 80px;
margin-right: 5px;
float: left;
}
.ranking-img img {
width: 100%;
height: 100%;
}
.ranking-category {
display: inline-block;
padding: 0.2em 0.5em;
border: 1px solid #999;
border-radius: 5px;
}
.ranking-num {
position: absolute;
right: 0;
bottom: 0;
}