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

先日紹介した「Simple GA Ranking」というプラグインで同じカテゴリーに属する記事ランキングを作成する方法を紹介します

「Simple GA Ranking」で同じカテゴリーの人気記事ランキングを作る

今回は個別記事ページやカテゴリー一覧ページで、関連するカテゴリーに属する記事の人気記事ランキングを作ります

絞り込みパラメータ

まずはパラメータの確認です

ランキングの元になるデータを取得する関数sga_ranking_get_dateの引数に指定する配列に絞り込み用のパラメーターを指定できます

//例
$sga_args = array(
    'category__in' => 'cat1,cat2' //「cat1」と「cat2」というカテゴリーで絞り込み
);

カテゴリーの絞り込みは上の例のように'category__in'で指定します

指定するのはカテゴリーのスラッグで、複数指定したい場合はカンマ区切りで記述します

カテゴリーで絞り込んだランキングを実際に使えそうな形にしてみる

それでは、関連するカテゴリーに属する記事の人気記事ランキングを作るコードを紹介します

次のコードは週別の人気記事ランキングを5件表示する例です

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 );
  /**
   * ランキング作成
   */
  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>';
  }
}

ちょこっとスタイル調整するためのCSS

.sga-ranking-list {
  margin-bottom:1em;
  overflow: hidden;
  zoom: 1;
}
.sga-ranking-list img {
  width: 100px;
  height: auto;
  margin-right: 1em;
  float: left;
}

CSSはご自身のテーマに合わせて微調整してみて下さい

▲サイドバーに表示した感じは上の写真のようになりました！

個別投稿ページとカテゴリーアーカイブページでの違い

個別投稿ページとカテゴリーアーカイブページでは微妙にカテゴリーでの絞り込みに差があります

• 個別投稿ページ：投稿についているカテゴリーに関連する記事のランキング
• カテゴリーアーカイブ：該当カテゴリーとその子孫カテゴリーに属する記事のランキング

カテゴリーアーカイブでは記事の一覧が子孫カテゴリーのものも表示されるので、ランキング表示もWordPressの表示合わせました

また、個別投稿ページとカテゴリーアーカイブページ以外ではサイト全体の週別ランキングも表示できるようになっています

おまけ：サイドバーで今すぐ使えるようにするコード

今回、確認のためにサイドバーにランキング表示させたのですが、その時に使ったコードも紹介します

functions.phpにゴリッとコピペすれば使えるはずです

wp_register_sidebar_widget(
  'sga_ranking_sample_cat',
  'Simple GA Ranking カテゴリー絞込サンプル',
  '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 );
    /**
     * ランキング作成
     */
    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>';
    }
  }
  echo $args['after_widget'];
}

「Simple GA Ranking カテゴリー絞込サンプル」とか「Simple GA Rankingを使ってカテゴリーで絞り込んだランキングを作成するサンプル」の部分はうまく書き換えて下さいー

まとめ

無事、今見ている記事に関連する人気記事をレコメンド出来るようになりますね！

直帰率の改善に役立てば幸いです

出来れば個別投稿ではいま表示している記事を除外したかったのですが、わりとコードが長くなりそうなので今回は割愛しました…

ではまた。