人気記事をランキング表示するのにWPP、Wordpress Popular Posts を使っていたが、Simple GA Rankingに乗り換えた。
Simple GA Ranking は、Google Analytics の統計情報を利用しているので、データーベースへのアクセスが減り、高速化が期待できる。
これで、週間・月間・年間ランキングをタブで切り替え表示できるようにしてみた。
タブの作成、週間、月間、年間
外観→ヰジェットで、
サイドバーに「カスタムHTML」を作成し、次のコードを記述する。
<div class="pop-tabs"> <ul> <li class="pop-tablist is-active">週間</li> <li class="pop-tablist">月間</li> <li class="pop-tablist">年間</li> </ul> </div>
CSSを追加する。
.pop-tabs {
line-height: 24px;
overflow: hidden;
overflow-x: auto;
}
.pop-tabs li:first-child {
border-radius: 3px 0 0 3px;
}
.pop-tabs li {
width: 33.3%;
border: 1px solid #aaa;
margin-bottom: 0;
padding: 5px 0;
font-weight: 700;
text-align: center;
float: left;
cursor: pointer;
}
.pop-tabs li li {
margin-left: -1px;
}
.pop-tabs li:last-child {
border-radius: 0 3px 3px 0;
}
.pop-tabs li.is-active {
background-color: olive;
border-color: olive;
color: #fff;
}
#wpp-12,
#wpp-13 {
display: none;
}
div#wpp-11 .widgettitle {
display: none;
}
div#wpp-12 .widgettitle {
display: none;
}
div#wpp-13 .widgettitle {
display: none;
}
#execphp-17 h4.widgettitle {
display: none;
}
#execphp-20 h4.widgettitle {
display: none;
}
#execphp-21 h4.widgettitle {
display: none;
}
div#execphp-14 h4.widgettitle {
display: none;
}ランキング表示ヰジェットを3個作成
PHP Code Widget プラグインを利用する。
サイドバーのPHP Code Widget に、週間ランキング、月間ランキング、年間ランキングの3つのSimple GA Ranking ヰジェットを作成する。
次のコードを放り込む。
週間ランキングでは、
<div id="wpp-11" >
'period' => 7
月間ランキングでは、
<div id="wpp-12" >
'period' => 30
年間ランキングでは、
<div id="wpp-13" >
'period' => 365
に変更する。
<div id="wpp-11" class="widget popular-posts">
<h4 class="widgettitle"><span class="side-title-inner">
<?php
$sga_args = array(
'display_count' => 12, //5件表示する
'period' => 7, //過去7日のデータを使う（週別ランキング）
);
/**
* 投稿 or カテゴリーアーカイブページならカテゴリーで絞り込む
*/
if ( is_single() || is_category() ) {
$cat_slug = array();
$cat_list = array();
/**
* 絞り込み対象のカテゴリー一覧を作成する
*/
if ( is_single() ) {
$cat_list = get_the_category();
} else {
$cat = get_queried_object();
$cat_list[] = $cat;
$children = get_term_children( $cat->term_id, 'category' );
foreach ( $children as $cat_id ) {
$cat_list[] = get_category( $cat_id );
}
}
foreach ( $cat_list as $cat ) {
$cat_slug[] = $cat->slug;
$cat_name[] = $cat->name;
}
/**
* カテゴリーslugを指定して絞込
*/
$sga_arg_cat = array(
'category__in' => implode( ',', $cat_slug )
);
$sga_arg_cat2 = array(
'category__in' => implode( ', ', $cat_name )
);
/**
* 条件結合
*/
$sga_args = wp_parse_args( $sga_arg_cat, $sga_args );
echo '<span class="cat_title">';
echo implode( '・', $cat_name );
echo '</span>';
}
?>
カテゴリ人気記事</span></h4>
<?php
/**
* ランキングデータ取得
*/
$ranking_data = sga_ranking_get_date( $sga_args );
/**
* ランキング作成
*/
if ( !empty( $ranking_data ) ):
echo '<ul class="wpp-list wpp-list-with-thumbnails">';
foreach ( $ranking_data as $post_id ):
?>
<li>
<a href="<?php the_permalink($post_id); ?>" title="<?php the_title_attribute($post_id); ?>">
<?php
$post_title = get_the_title($post_id);
echo get_the_post_thumbnail($post_id, 'thumbnail', array( 'class' => 'wpp-thumbnail wpp_featured_stock ', 'alt' => $post_title,'title' => $post_title) );
?>
</a>
<span class="wpp-views"><?php echo get_post_meta($post_id, views, true); ?></span>
<a href="<?php echo get_permalink($post_id); ?>" title="<?php the_title_attribute($post_id); ?>" class="wpp-post-title" >
<?php echo get_the_title($post_id); ?>
</a>
<span class="wpp-excerpt"><?php echo get_the_excerpt_by_id($post_id, 100) ?></span>
<?php $archive_year = get_the_time( 'Y',$post_id ); ?>
<?php $archive_month = get_the_time( 'm',$post_id ); ?>
<a href="<?php echo get_month_link( $archive_year, $archive_month ); ?>" class="wpp-date"><span class="wpp-date"> <?php echo get_the_time('Y.n.j',$post_id); ?>
</span></a>
<span class="wpp-category-all"><?php the_category(' ','',$post_id) ?> </span>
</li>
<?php
endforeach;
echo '</ul></div>';
endif;
wp_reset_postdata();
?>
投稿記事の頁では、その投稿の所属するカテゴリーのランキングが表示され、カテゴリーアーカイブの頁ではそのカテゴリーのランキングが表示される。
トップページ、日付アーカイブでは、全カテゴリーのランキングが表示される。
<?php echo get_the_excerpt_by_id($post_id, 100) ?>
については、次を参照。抜粋を表示しない場合は削除可能。
<?php echo get_post_meta($post_id, views, true); ?>
については、次を参照。
thumbnail はサイズ変更可能。
pop-tabs.js の作成
- https://makotoiwasaki.com/wp-content/themes/jstork_custom/pop-tabs.js
のように、
pop-tabs.js を作成する。
wpp-〇〇 の番号を実際に作成したヰジェットの番号と対応させることがポイント。
jQuery(function($) {
var weekly = "11"; // 7日間の人気記事のid (wpp-〇〇)
var monthly = "12"; // 30日間の人気記事のid (wpp-△△)
var total = "13"; // 全期間の人気記事のid (wpp-□□)
// タブがクリックされたら実行
$('.pop-tablist').on('click',function(){
// クリックされたliタグにis-activeクラスを追加
$(this).addClass('is-active');
// それ以外のliタグのis-activeクラスを削除
$(this).siblings().not(this).removeClass('is-active');
// クリックされたタブが何番目か取得
var index = $('.pop-tablist').index(this);
// タブに対応するランキングを表示
if (index===0) {
// Weeklyがクリックされた場合
$('#wpp-' weekly).css('display', 'block'); // 7日間の人気記事のid
$('#wpp-' monthly).css('display', 'none'); // 30日間の人気記事のid
$('#wpp-' total).css('display', 'none'); // 全期間の人気記事のid
} else if (index===1) {
// Monthlyがクリックされた場合
$('#wpp-' weekly).css('display', 'none'); // 7日間の人気記事のid
$('#wpp-' monthly).css('display', 'block'); // 30日間の人気記事のid
$('#wpp-' total).css('display', 'none'); // 全期間の人気記事のid
} else if (index===2) {
// Totalがクリックされた場合
$('#wpp-' weekly).css('display', 'none'); // 7日間の人気記事のid
$('#wpp-' monthly).css('display', 'none'); // 30日間の人気記事のid
$('#wpp-' total).css('display', 'block'); // 全期間の人気記事のid
}
});
});
functions.php に次を追加して自動的にpop-tabs.jsを読み込むようにする。
function theme_enqueue_styles() {
wp_deregister_script( 'jquery' );
wp_register_script('jquery', 'https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js', array(), '3.4.1' );
wp_enqueue_script( 'pop-tabs', get_stylesheet_directory_uri() . '/pop-tabs.js', array('jquery'), false, true );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 100 );
// defer 遅延読込する場合に追加
if(!is_admin()){
function replace_script_tag ( $tag ) {
return str_replace( "type='text/javascript'", 'defer ', $tag );
}
add_filter( 'script_loader_tag', 'replace_script_tag' );
}
HTMLソースにはヘッダーかフッターの位置に次の様に記述される。
<script defer src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js'></script> <script defer src='https://makotoiwasaki.com/wp-content/themes/jstork_custom/pop-tabs.js'></script>
以上で完成。
の下の方に表示されている。
順位を表示する方法
順位を表示するには、次のようにCSSを追加する。
ul.wpp-list {
counter-reset: number;
}
ul.wpp-list li:before {
counter-increment: number;
content: counter(number);
background: #000000;
margin-right: 3px;
color: #fff;
width: 1.5em;
height: 1.5em;
font-size: 0.75em;
font-weight: bold;
display: block;
text-align: center;
line-height: 1.5em;
position: absolute;
left: 0;
top: 0;
background: #006400;
color: #ffffff;
z-index: 1;
border-radius: 13px 0;
}
Google Analytics Post Pageviews は機能しなかった
Google Analytics Post Pageviews プラグインを入れてみたが、ビュー数、閲覧数は表示されなかった。
WP-PostViews プラグインのビュー数を表示する。
記事IDから閲覧数を取得する方法
WP-PostViewsで、
$post_id からビュー数を取得するには、get_post_meta を使用する。
<?php echo get_post_meta($post_id, views, true); ?>
WP-PostViews でも人気記事のランキング表示はできるのだが、週間、月間等の期間別にすることができない。
WordPress Popular Posts との違い
WordPress Popular Posts では週間、月間のビュー数、閲覧数、がそれぞれ異なる数字で表示されるが、Simple GA Ranking 単独では、そもそもビュー数を表示することはできない。
WP-PostViews の機能を借りて表示すると、通算のビュー数しか表示することはできない。
今見ている記事を除外することができない。
'post__not_in' => array(get_the_ID())
が効かない。
大問題
Simple GA Ranking で投稿記事が所属するカテゴリーの人気ランキングを表示させると、表示される記事の数が少ない。
12個表示するように設定しているのに、5個しか表示されないとか。
例えば、このサイトの「ラオス」カテゴリには57件の記事があるのに、5件しか表示されない。
特定カテゴリーの人気記事については、WP-PostViews のメタデータを利用してランキング表示する方が良いのではないか。
参考：
