週間/月間/年間人気ランキングのタブ切替表示: Simple GA Ranking

人気記事をランキング表示するのに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 のメタデータを利用してランキング表示する方が良いのではないか。

 

 

 

参考:

 

 

 

  • またまたこのサイトのSSL証明書が期限切れになった。 Kusanagi の自動更新ができていない。 それで手動であれこれしてみても、こんなエラーが出る。# kusanagi update cert C ...
  • Google の Indexing API を使うと、新しい投稿記事を瞬時にGoogleの検索エンジンに登録できる。 WordPress のプラグインとしてインデックスAPIが利用できる。使い方は英語 ...
  • Yoast SEO を停止して、Rank Math SEO プラグインを使ってみたらGoogle の検索結果に表示される記事抜粋スニペットの文字数が短過ぎに見えてびっくりした。#1 Yoast Alt ...
  • WP_CRON を停止して、Linux の crontab に移行する設定をこれまでに何度も試みたがうまくいかなかった。 毎日バックアップされるはずの、UpdraftPlus プラグインのクロンが動い ...
  • Kusanagi WordPress プラットフォームでは Fcache とBcache がある。 Fcache とはNginx ヱブサーバーのキャッシュ機能であり、Kusanagi の独自機能ではな ...
  • 目次 1 HTTPD アクセスログの日本語化 2 Logwatch も日本語化 HTTPD アクセスログの日本語化 Nginx,  Apache ヱブサーバーのアクセスログを見ると、日本語URLはエン ...
  • ヱブサイトの再構築中には、スタイルシート、style.css を頻繁に調整更新する。 CSSを追加、編集する度に再読み込みを繰り返して、変更の反映を確認していた。 これで編集者は反映を確認できるのだが ...
  • WordPressで使える頁カウンターをいくつか同時に使ってカウントの仕方の違いを比べてみた。WP-PostViews    長期常用中 Post Views Counter  新規インストール Go ...

タグクラウド

WordPress カテゴリ人気記事 Views most

WordPress カテゴリ人気記事 月間

20190720

タグ関連記事

閲覧履歴

    //cookieが無い場合の処理
2019
GA-views: 55
20190720