WordPressのSimple GA Rankingでカテゴリ別の人気記事をウィジェットに表示する

2018/11/21 6:15
2024/1/12 11:20
4
- WordPress
- WordPress
- Google Analytics

サイドバーに Simple GA Ranking というプラグインにて Google アナリティクスのデータを使って人気記事を表示しているのですが、サイト全体の人気記事となっていて回遊性が悪いので、訪れてくれた方の興味にある記事にするためにカテゴリ別の人気記事を表示して、アイキャッチも表示してみることにしました。

→ Simple GA Ranking ： Simple GA Ranking

以下のキャプチャのようにサイト全体の人気記事が表示されています。

やり方を検索していると以下のページを見つけたのですが、表示する関数を作りそれをウィジェット化しています。

→ akatsuki ：【 WordPress 】「 Simple GA Ranking 」で同じカテゴリーの人気記事ランキングを作る方法

これでもよさそうですが Simple GA Ranking のデフォルトのウィジェットをいじれるのではないかと思い、ソースを見てみることにしました。

カテゴリで絞り込んだ人気記事を取得する

ソースのを確認すると simple-ga-ranking.php の 254 行目の sga_widget_shortcode_argument というフィルターフックが使えそうでした sga_ranking_shortcode() という関数に渡す配列を変更することでウィジェットに出力されるデータを変えられるようです。

→ WordPress.org ： Plugin Directory : source: simple-ga-ranking/trunk/simple-ga-ranking.php

個別の投稿とカテゴリのアーカイブのページにてカテゴリ別の人気記事を表示することにして、以下のような関数を function.php に書きました。カテゴリ絞り込みのロジックは先に上げたページを参考にさせていただきました。カテゴリアーカイブにて子カテゴリがあるページは親と子を合わせた投稿の人気記事のが表示されます。また個別投稿にて複数カテゴリがチェックされている場合は複数カテゴリを合わせた人気記事を表示します。

/***********************
 * Simple GA Ranking でカテゴリごとの人気記事を表示
 ***********************/
function my_sga_widget_array( $sga_args ){
	//投稿 or カテゴリーアーカイブページならカテゴリーで絞り込む
	if ( is_single() || is_category() ) {
		$cat_slug = my_sga_widget_category();
		
		$args = array(
			'display_count' => 10,
			'period'        => 7,
			'post_type'     => 'post',
			'category__in'  => implode( ',', $cat_slug )
		);
		$sga_args = wp_parse_args( $args, $sga_args );
	}
	return $sga_args;
}
add_filter( 'sga_widget_shortcode_argument', 'my_sga_widget_array' );

//記事およびカテゴリページのカテゴリ一覧を配列で取得
function my_sga_widget_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;
	}
	return $cat_slug;
}

これで表示は変更できるのですが、 Google アナリティクスから取得するデータがデフォルトでは 100 件なので、アクセスが少ないカテゴリでは人気記事が表示されない自体になりました。そこで sga_ranking_limit_filter というフィルターフックを使って取得するデータの件数を 500 件にしました。

//GAからのデータ取得件数を500件にする
add_filter( 'sga_ranking_limit_filter', function( $limit ) { return 500; } );

ウィジェットタイトルを変更

このままだとウィジェットのタイトルが「人気記事」のままなので「カテゴリ名＋の人気記事」という体裁にすることにしました。ウィジェットのタイトルを変更するには widget_title というフィルターフックを使用するようです。 3 番目の引数の $id_base が simple_ga_rankig の場合のみカテゴリ名を取得しそれを前に追加しています。

//Simple GA Rankingのウィジェットのタイトルにカテゴリ名を追加
function change_widget_title_sga_widget_category( $widget_title, $instance, $id_base ) {
	if( is_single() || is_category() ){
		if( $id_base === 'simple_ga_rankig' ){
			//絞り込み対象のカテゴリー一覧を取得
			$cat_slug = my_sga_widget_category();
			
			//カテゴリアーカイブの時は子カテゴリは表示しない
			if( is_category() ){
				array_splice( $cat_slug, 1 );
			}
			
			//タイトルの生成
			$before_widget_title = '';
			foreach( $cat_slug as $key => $value ){
				if( $key != 0 ){
					$before_widget_title .= 'と';
				}
				$idObj = get_category_by_slug( $value );
				$before_widget_title .= '「' . $idObj->name . '」';
			}
			$widget_title = $before_widget_title . 'の' . $widget_title;
		}
	}
	return $widget_title;
}
add_filter( 'widget_title', 'change_widget_title_sga_widget_category', 10, 3 );

以上のコードで以下のキャプチャのように表示がカテゴリごとに変更されました。

ランキングにアイキャッチを表示する

ランキングにアイキャッチ（サムネイル）表示して目を引きやすいようにしてみました。以下の記事のコードを参考にして、使うフックを sga_ranking_after_title にしてタイトルの後ろにアイキャッチを出力するように変更しました。

→メモ置き場のブログ： WordPress 高速化 : WordPress Popular Posts から Simple GA Ranking へ移行


//ランキングにアイキャッチを表示する
function show_thumbnail_sga( $ret, $id ) {
	$post_url = get_permalink( $id ); // 記事のURL
	$title = get_the_title( $id ); //タイトル
	$ret = '';
	if( has_post_thumbnail(  $id  ) ) { // アイキャッチ画像の有無
		$str = get_the_post_thumbnail( $id, array( 60, 60, true ), array( 'title' => $title, 'class' => 'lazyload' ) );
		$ret = "<a href=\"{$post_url}\" title=\"{$title}\" class=\"ranking-img\">"  . $str . "</a>";
	}
	return $ret;
}
add_filter( 'sga_ranking_after_title', 'show_thumbnail_sga', 10, 2 );

CSS は以下のようにしています。


.sga-ranking-list{
	margin-bottom: 0.2em;
	list-style:none;
	margin-left: -0.5em;
}
.sga-ranking-list > a:first-child {
	display: block;
	float: right;
	width: calc(100% - 60px - 1em);
	margin-top: 0.2em;
}
.ranking-img {
	display: block;
	float: left;
}
.ranking-img > img {
	border: 0.3em solid #cccccc;
	border-radius: 50%;
	width: 60px;
	height: 60px;
}
.sga-ranking-list::after {
	display: block;
	content: "";
	clear: both;
}

上記のコードで人気記事にアイキャッチ（サムネイル）がつきました。