当サイトでも採用していますが、人気記事ランキングを作成するプラグインはいくつかありますが、やはりその中でも軽量で使いやすいと言われているのがSimple GA Rankingですよね。
Google Analyticsを使用したランキング何ですが、今回これを使ってカテゴリー別のランキングを作ってみたいと思い、色々調べた結果以下のakatsukiさんのブログにたどり着きました。
とても参考になったんですが、一部コードに修正を加えた方がより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位用：好きな色に変更する*/
}
Comments