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

Wordpressテクニック
スポンサーリンク

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

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

【WordPress】「Simple GA Ranking」で同じカテゴリーの人気記事ランキングを作る方法
先日紹介した「Simple GA Ranking」というプラグインで同じカテゴリ

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

コードの修正点

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

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

サムネイル表示の修正

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

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

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

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

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

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

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

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

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

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

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

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

おまけサンプル

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

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

スポンサーリンク
スポンサーリンク
Wordpressテクニック IT・通信
この記事を書いた人
Taka

スマートホーム x IT x 子育て。大手SIer勤務→ITアーキテクトの経験から面白そうな情報を発信していきます。独学でプログラミング勉強してWEBアプリ作ったり、Pythonいじったりしています。日曜プログラマ&エンジニアさんへタメになる情報をお届けします。

\フォローする/
\この記事が役に立ったらシェアしよう/

オススメキャンペーン

学生なら入らないと損!
タダ同然で使い放題サービス多数のPrime Studentが無料で6ヶ月も見れる!
大学生・院生・専門学生・高専生なら誰でもOK!

Prime Studentなら本や日用品の購入が10%〜15%OFFになる特典や他にも通常のPrime特典が多数あるのに、通常のPrime金額の半額で全部利用できちゃう

お急ぎ便・時間指定使い放題、Prime Videoで映画やテレビ番組も見放題、Prime Musicで音楽も聴けちゃうし、動画・音楽・写真の保存などの特典が多数利用可能

今すぐチェックする
デジモノ
Subscribe
更新通知を受け取る »
guest
0 Comments
Inline Feedbacks
View all comments
タイトルとURLをコピーしました