週間/月間/年間人気ランキングのタブ切替表示: 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 Challenge failed for domain makotoiwasaki.com Challenge failed for domain www.makotoiwasaki.com Attempting to renew cert (makotoiwasaki.com) from /etc/letsencrypt/renewal/makotoiwasaki.com.conf produced an unexpected error: Some challenges hav...
  • Google の Indexing API を使うと、新しい投稿記事を瞬時にGoogleの検索エンジンに登録できる。 WordPress のプラグインとしてインデックスAPIが利用できる。使い方は英語だが、この通り: ⏱️ Get Google To Index Your Website Instantly Using the Indexing API ⚡Take a look at how you can use Google's new indexing API & to get your website's pages and content crawled instantly instead of waiting for Google to...
  • Yoast SEO を停止して、Rank Math SEO プラグインを使ってみたらGoogle の検索結果に表示される記事抜粋スニペットの文字数が短過ぎに見えてびっくりした。#1 Yoast Alternative You Deserve - Rank Math SEO vs. Yoast SEORank Math SEO plugin for WordPress is hands down the best Yoast alternative WordPress plugin. And the best thing is, Rank Math is completely FREE!Rank Math
  • WP_CRON を停止して、Linux の crontab に移行する設定をこれまでに何度も試みたがうまくいかなかった。 毎日バックアップされるはずの、UpdraftPlus プラグインのクロンが動いていない。やっと成功した設定方法を記録しておく。wp-config.php に次の行を追加する。define('DISABLE_WP_CRON', true);/var/spool/cron  に、  httpd という名前のファイルを作成し、次の1行を追加する。 所有者を httpd.www など、httpd nginx サーバーの稼働ユーザー名と同じにする。nginx.conf に書いてある。root@s4:/v...
  • Kusanagi WordPress プラットフォームでは Fcache とBcache がある。 Fcache とはNginx ヱブサーバーのキャッシュ機能であり、Kusanagi の独自機能ではない。Nginx のアクセスログを眺めていると、  BYPASS MISS EXPIRED のみで、HITが殆どない。 トップ頁、アーカイブリストの頁ではHIT、 個別投稿頁では、BYPASS MISS EXPIRED ばかりでHITがない。Kusanagi fcache on とすると、fcache は有効になったかのように思えるが、本当にキャッシュが効いているのかどうかはログで確認しないとわからない。まず、Wordpressの編集画面にログインし...
  • HTTPD アクセスログの日本語化 Nginx,  Apache ヱブサーバーのアクセスログを見ると、日本語URLはエンコードされていて読めない。 そこで、デコードして表示させる。 ログのファイル名が ssl_access.log だとすると、tail -f ssl_access.log| perl -ne 'use URI::Escape; print uri_unescape($_);' tail -f access.log | php -R 'echo urldecode($argn)."\n";'で、日本語URlが読める状態で出力される。 Apacheのログをデコードする方法 - Life with ITプログラマ x ...
  • ヱブサイトの再構築中には、スタイルシート、style.css を頻繁に調整更新する。 CSSを追加、編集する度に再読み込みを繰り返して、変更の反映を確認していた。 これで編集者は反映を確認できるのだが、一般閲覧者はわざわざ再読み込みしたり、キャッシュを削除したりするはずはないので、変更が反映されていない崩れたデザインを見ているかもしれない。わざわざリロードしたりキャッシュを削除したりしなくても変更が確実に反映されるような設定方法を発見した。wp_enqueue_scripts で CSS、JS の読み込みを管理している場合には、次のようにfunctions.php に記述する。// 子テーマのstyle.cssを最後に読み込む add_acti...
  • 2679年8月25日

    頁カウンターの比較 WordPress

    WordPressで使える頁カウンターをいくつか同時に使ってカウントの仕方の違いを比べてみた。WP-PostViews    長期常用中 Post Views Counter  新規インストール Google Analytics Post Pageviews Pjaxblog の付属カウンター機能WP-PostViews は他のカウンターよりもカウントが多くなりがちなことに気づいた。一度のアクセスなのに2回カウントされることもあるようだ。ロボットクローラー Bots のリスト数も不十分に少ないような気がする。それで数が多くなりやすいのではないか。 それで Post Views Counter に乗り換えることにした。Post Views Cou...

WordPress カテゴリ人気記事 Views most

タグ関連記事

閲覧履歴