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に記載しましょう。色を適当にお好みで変えてください。

コメント

タイトルとURLをコピーしました