MENU
  • ホームHOME
  • スマートホームSmart Home
    • スマートリモコン
    • スマートライト
    • スマートロック
    • スマートカメラ
    • スマートセンサー
    • スマートスピーカー
    • その他スマートデバイス
  • ガジェットGadgets
    • iPhone & iPad
    • アップルウォッチ
    • パソコン関連
    • 充電器
    • キーボードマウス
    • デスク関連
    • アプリソフト関連
    • オーディオその他
  • 生活家電&インテリアAppliances
    • Wi-Fiルーター
    • PCモニター
    • ロボット掃除機
    • モバイル&光回線
    • その他家電
  • ライフLife Style
    • ライフハック
    • 便利なサービス
    • プログラミング
    • ブログ運営
    • コラム
  • DIGI Radio
    (特設サイト)
    • 一陸技アプリ
    • 一陸特アプリ
    • 二陸特アプリ
  • 勉強アプリEducation
    • ビジネス資格
      • MCPCモバイルシステム技術
      • MCPC IoT検定 中級対応
      • ビジネスマネジャー検定
    • クラウド系アプリ
      • AWS SAAアプリ
      • AZ-900勉強アプリ
      • AI-900勉強アプリ
  • まとめ記事Summary
  • お問合せContact
ガジェット&お得なサービス情報をお届けするブログメディア「デジライン」
DIGILINE (デジライン)
  • ホームHOME
  • スマートホームSmart Home
    • スマートリモコン
    • スマートライト
    • スマートロック
    • スマートカメラ
    • スマートセンサー
    • スマートスピーカー
    • その他スマートデバイス
  • ガジェットGadgets
    • iPhone & iPad
    • アップルウォッチ
    • パソコン関連
    • 充電器
    • キーボードマウス
    • デスク関連
    • アプリソフト関連
    • オーディオその他
  • 生活家電&インテリアAppliances
    • Wi-Fiルーター
    • PCモニター
    • ロボット掃除機
    • モバイル&光回線
    • その他家電
  • ライフLife Style
    • ライフハック
    • 便利なサービス
    • プログラミング
    • ブログ運営
    • コラム
  • DIGI Radio
    (特設サイト)
    • 一陸技アプリ
    • 一陸特アプリ
    • 二陸特アプリ
  • 勉強アプリEducation
    • ビジネス資格
      • MCPCモバイルシステム技術
      • MCPC IoT検定 中級対応
      • ビジネスマネジャー検定
    • クラウド系アプリ
      • AWS SAAアプリ
      • AZ-900勉強アプリ
      • AI-900勉強アプリ
  • まとめ記事Summary
  • お問合せContact
DIGILINE (デジライン)
  • ホームHOME
  • スマートホームSmart Home
    • スマートリモコン
    • スマートライト
    • スマートロック
    • スマートカメラ
    • スマートセンサー
    • スマートスピーカー
    • その他スマートデバイス
  • ガジェットGadgets
    • iPhone & iPad
    • アップルウォッチ
    • パソコン関連
    • 充電器
    • キーボードマウス
    • デスク関連
    • アプリソフト関連
    • オーディオその他
  • 生活家電&インテリアAppliances
    • Wi-Fiルーター
    • PCモニター
    • ロボット掃除機
    • モバイル&光回線
    • その他家電
  • ライフLife Style
    • ライフハック
    • 便利なサービス
    • プログラミング
    • ブログ運営
    • コラム
  • DIGI Radio
    (特設サイト)
    • 一陸技アプリ
    • 一陸特アプリ
    • 二陸特アプリ
  • 勉強アプリEducation
    • ビジネス資格
      • MCPCモバイルシステム技術
      • MCPC IoT検定 中級対応
      • ビジネスマネジャー検定
    • クラウド系アプリ
      • AWS SAAアプリ
      • AZ-900勉強アプリ
      • AI-900勉強アプリ
  • まとめ記事Summary
  • お問合せContact
\ ポイント最大10%アップ! /
  1. ホーム
  2. ライフ
  3. プログラミング
  4. Simple GA Rankingを使ってカテゴリー別のランキングを作成する

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

2022 11/23
AD
プログラミング ブログ運営
Google



当サイトでも採用していますが、人気記事ランキングを作成するプラグインはいくつかありますが、やはりその中でも軽量で使いやすいと言われているのが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++.’を末尾追加すれば、あとは1位であれば、sga-ranking-list-1、2位であれば、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); /*1位用:好きな色に変更する*/
}
.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位用:好きな色に変更する*/
}
プログラミング ブログ運営
Google

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

Follow @digiline_ Follow Me
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする コメントをキャンセル

人気記事
  • IKEA TRADRI(トロードフリ)のリモコン/センサーが反応しない!?電球がペアリングできないときの復旧方法
    ライフハック
  • iPhoneの電池の減りが異常に早いのでバッテリー交換しに行ったら断れた話。AppleCare+未加入の人は注意しよう!
    便利なサービス
  • セゾンカードの携行品保険ならスマホもパソコンも保証!月300円のお買い物安心プラン[Y]がコスパ最強!
    保険のこと
  • Apple Watch (アップルウォッチ)向けの保険としてapplecare+はいらないよ
    保険のこと
  • iPhoneのフィールドテストモード。隠しコマンドを入れたらこうなるなんて!?【専門家が解説】
    ライフハック
新着記事
  • 【レビュー】Loop Quiet & Engage Plus|スタイリッシュな耳栓。勉強/仕事/執筆作業に最適かもしれない。
    2023年9月24日
  • 【2023年上半期ベストバイ】生活が変わる買ってよかったガジェット Best 10
    2023年9月20日
  • 【レビュー】Ulike Air3|光脱毛で解決?メンズのすね毛チクチク問題とその対処
    2023年9月18日
  • アレクサ対応のスマート家電エアコン|後付けもできるけど、おすすめはスマートリモコン!
    2023年9月18日
  • IoTシステム技術検定[上級]に合格したので、今日からIoTプロフェッショナルって名乗っていいよね?
    2023年9月16日
目次
DIGILINEオススメのサービス
TAKA
メディア監修
IoTコンサルタント&ガジェットブロガー|IoTの専門知識を活かし、スマートホーム化や最新のガジェット、生活家電のレビュー記事を執筆しています。自宅をスマートなテックハブに変えることで、効率的で便利なライフスタイルを実現しています。テクノロジーの進化に常に目を光らせ、読者の皆さんに役立つ情報を提供することに情熱を注いでいます。テクノロジーとライフスタイルを融合させる楽しさを共有し、一緒に未来のスマートライフを築いていきましょう!

レビュー依頼などはお問合せからお願いします。
新着記事
  • 【レビュー】Loop Quiet & Engage Plus|スタイリッシュな耳栓。勉強/仕事/執筆作業に最適かもしれない。
  • 【2023年上半期ベストバイ】生活が変わる買ってよかったガジェット Best 10
  • 【レビュー】Ulike Air3|光脱毛で解決?メンズのすね毛チクチク問題とその対処
  • アレクサ対応のスマート家電エアコン|後付けもできるけど、おすすめはスマートリモコン!
記事を探す
メーカーで探す
Aiseesoft Amazon Anker Apple BenQ(ベンキュー) BLUETTI Bose Broadlink Buffalo CANDY HOUSE(キャンディハウス) Coomooy DELL EaseUS FlexiSpot(フレキシースポット) Garmin(ガーミン) GenHigh Google Hysure IKEA Insta360 iRobot j5create LinkJapan Logicool LoopEarplugs MiniTool MOFT(モフト) Nature Philips PITAKA(ピタカ) QNAP Qrio(キュリオ) Rakuten Satechi(サテチ) SwitchBot(スイッチボット) TP-Link(ティーピーリンク) Tranya Ulanzi Ulike VOLTME Zenosyne お得情報 まとめ
  • DIGI LINE(デジライン)について
  • 製品レビュー依頼
  • 特定商取引法に関する表記
  • 免責事項/プライバシーポリシー
  • お問合せ

© DIGILINE (デジライン)

目次