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位用：好きな色に変更する*/
}

この記事が気に入ったら
いいねまたはフォローしてね！

Follow @digiline_ Follow Me

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

この記事を書いた人

Taka

AIエンジニア / AIエージェント開発者 / テックブロガー

生成AI・AIエージェント・IoT技術を活用し、業務自動化からスマートホームまで幅広いソリューションの設計・開発を行っています。

本業ではAIエンジニアとして企業向けAIエージェントの開発・技術支援に携わる一方、個人ではAI・IoT・クラウドを組み合わせたシステム開発や技術検証を継続しています。

DIGI LINEでは、ChatGPTやAIエージェントを活用した業務効率化、個人開発、WordPress活用、IoT・スマートホーム構築など、「実際に使えるAI」をテーマに、実践的なノウハウや最新技術をわかりやすく発信しています。

机上の理論ではなく、自ら検証・開発・運用した経験をもとに、仕事や生活をより便利にするテクノロジーの活用方法をお届けします。