Simple GA Rankingを使ってカテゴリー別のランキングを作成する

当サイトでも採用していますが、人気記事ランキングを作成するプラグインはいくつかありますが、やはりその中でも軽量で使いやすいと言われているのがSimple GA Rankingですよね。

Google Analyticsを使用したランキング何ですが、今回これを使ってカテゴリー別のランキングを作ってみたいと思い、色々調べた結果以下のakatsukiさんのブログにたどり着きました。

https://yosiakatsuki.net/blog/wp-simple-ga-ranking-category/

とても参考になったんですが、一部コードに修正を加えた方がよりCSS等でいじりやすくなるので、少し修正を加えたコードを公開しようかと思います。

コードの修正点

元のakatsukiさんのコードはちゃんと最低機能してくれるんですが、サムネイル画像の部分がシンプルに画像データimpだけ引っ張って来ているので、よくこういうサムネイル でありがちな、「画像をクリックするとページに飛ぶ」ということができませんので、この部分の修正をします

その次にランキングのリストが全て同じclassで指定されてしまうので、css側でランキングごとに表示を変えるようなやり方にしたいので、その部分も直していきます。

サムネイル表示の修正

先ずは元コードをみてみるとこんな感じになっていると思います。

    /**
     * ランキング作成
     */
    if ( ! empty( $ranking_data ) ) {
      echo '<ol class="sga-ranking">';
      foreach ( $ranking_data as $post_id ) {
        echo '<li class="sga-ranking-list">' . get_the_post_thumbnail( $post_id, 'thumbnail' ) . '<a href="' . esc_url_raw( get_permalink( $post_id ) ) . '">' . esc_html( get_the_title( $post_id ) ) . '</a></li>';
      }
      echo '</ol>';
    }

これでhtmlをみるとざっくりこんな感じで出来上がります。

<li class="sga-ranking-list">
 <img.....>
<a href...></a>
</li>

これだと単に左にサムネイル 画像ができて、右に記事タイトルをあるだけ。また画像をクリックしても何も起きません。

なので、これをこんな感じに直してあげます。

<li class="sga-ranking-list">
 <figure class="sga-ranking-thumb">
   <a href...>
     <img.....>
   </a>
<a href...></a>
</li>

こうすることでサムネイル 画像側にもリンクが入るようになりますね。

具体的なコードとしてはこんな感じなりました。少しごちゃごちゃしてキレイではないんですが、とりあえずこれで動きます。

        echo '<li class="sga-ranking-list">' .'<figure class="sga-ranking-thumb">'. '<a href="' . esc_url_raw( get_permalink( $post_id ) ) . '" title = " ' . esc_html( get_the_title( $post_id ) ) . '">' . get_the_post_thumbnail( $post_id, 'thumbnail' ) .'</a></figure>'. '<a href="' . esc_url_raw( get_permalink( $post_id ) ) . '" title = " ' . esc_html( get_the_title( $post_id ) ) . '">' . esc_html( get_the_title( $post_id ) ) . '</a></li>';

順位別のランキングクラスの追加

次に順位別にCSSをいじれるようにコードを修正していきましょう。

これは結構簡単です。元のコードを先ずは見てみましょう。

    /**
     * ランキング作成
     */
    if ( ! empty( $ranking_data ) ) {
      echo '<ol class="sga-ranking">';
      foreach ( $ranking_data as $post_id ) {
        echo '<li class="sga-ranking-list">'

シンプルにリストにClassを追加しているだけですが、これを順位別にclass名が変わるようにしてしまいましょう。

具体的にはカウント用に変数($num)を準備してあげて、カウントアップするようにしてあげれば良いだけです。元々foreachでリストを回しているだけなので、sga-ranking-list-‘.$num++.’を末尾追加すれば、あとは１位であれば、sga-ranking-list-1、２位であれば、sga-ranking-list-2となります。

    /**
     * ランキング作成
     */
	  $num = 1;
	  if ( ! empty( $ranking_data ) ) {
      echo '<ol class="sga-ranking">';
      foreach ( $ranking_data as $post_id ) {
        echo '<li class="sga-ranking-list sga-ranking-list-'.$num++.'">'.......

あとはそれぞれの順位別にsga-ranking-list-xxへのCSSをいじってあげればおしまいです。

おまけサンプル function.php & CSS

function.phpに以下を記述する。

///////////////////////////////
//---Simple GA Ranking Category別---/////
//////////////////////////////
wp_register_sidebar_widget(
  'sga_ranking_sample_cat',
  'カテゴリー別の人気ランキング',
  'widget_sga_ranking_sample_cat',
  array(
    'description' => 'Simple GA Rankingを使ってカテゴリーで絞り込んだランキングを作成する',
    'title'       => ''
  )
);

function widget_sga_ranking_sample_cat( $args ) {
  echo $args['before_widget'];
  echo $args['before_title'] . $args['widget_name'] . $args['after_title'];
  if ( function_exists( 'sga_ranking_get_date' ) ) {
    $sga_args = array(
      'display_count' => 5, //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;
      }
      /**
       * カテゴリーslugを指定して絞込
       */
      $sga_arg_cat = array(
        'category__in' => implode( ',', $cat_slug )
      );
      /**
       * 条件結合
       */
      $sga_args = wp_parse_args( $sga_arg_cat, $sga_args );
    }
    /**
     * ランキングデータ取得
     */
    $ranking_data = sga_ranking_get_date( $sga_args );
    /**
     * ランキング作成
     */
	  $num = 1;
	  if ( ! empty( $ranking_data ) ) {
      echo '<ol class="sga-ranking">';
      foreach ( $ranking_data as $post_id ) {
        echo '<li class="sga-ranking-list sga-ranking-list-'.$num++.'">' .'<figure class="sga-ranking-thumb">'. '<a href="' . esc_url_raw( get_permalink( $post_id ) ) . '" title = " ' . esc_html( get_the_title( $post_id ) ) . '">' . get_the_post_thumbnail( $post_id, 'thumbnail' ) .'</a></figure>'. '<a href="' . esc_url_raw( get_permalink( $post_id ) ) . '" title = " ' . esc_html( get_the_title( $post_id ) ) . '">' . esc_html( get_the_title( $post_id ) ) . '</a></li>';
      }
      echo '</ol>';
    }
  }
  echo $args['after_widget'];
}

ランキング別のCSSをいじるには以下を小テーマ のstyle.cssに記載しましょう。色を適当にお好みで変えてください。

.sga-ranking {
	counter-reset: number;  /*順位付け用*/
}
.sga-ranking li {
	position: relative;
	list-style: none;
}
.sga-ranking li:before {
	counter-increment: number;
	content: counter(number);
	position: absolute;
	top: 0;
	left: 0;
	width: 1.6em;
	height: 1.6em;
	line-height: 1.6em;
	font-size: 12px;
	color: #fff;
	text-align: center;
	background: rgba(0,153,255,0.4);  /*好きな色に変更する。特に順位別に指定が無ければこの色になる。*/
	z-index: 1;
}
.sga-ranking li.sga-ranking-list.sga-ranking-list-1:before {
	background: rgba(218,179,0,0.6); /*１位用：好きな色に変更する*/
}
.sga-ranking li.sga-ranking-list.sga-ranking-list-2:before {
	background: rgba(192,192,192,0.4); /*2位用：好きな色に変更する*/
}

.sga-ranking li.sga-ranking-list.sga-ranking-list-3:before {
	background: rgba(129,90,43,0.5); /*3位用：好きな色に変更する*/
}