[WordPress]固定ページに4種の期間ごとのアクセスランキングを表示

ブログページのアクセスランキングが季節により変化するのは興味深いです。これまで固定ページに「月毎のアクセスランキングTOP30」を表示していましたが、手動の更新が滞りがちでした。それで「お知らせ」で告知したように、サイドバーの「人気記事」と同じ仕組みで自動表示し、期間も4種と充実させましたので作成法などを紹介します。

当サイトの人気記事ランキング表示の現状
固定ページのアクセスランキングを自動更新化
サイドバーの「このブログの人気記事」にリンクを追加

当サイトの人気記事ランキング表示の現状

これまでこのサイトでは以下の4種類の人気記事のランキングを掲載してきました。

1.このサイトの人気記事（week)　（サイドバー）

サイドバーに「週間のアクセスランキング」（ TOP10）をウイジェットを使用して表示しています。

2.このカテゴリの人気記事（サイドバー）

同じくサイドバーに30日間のアクセスランキング（TOP5）をウイジェットを使用して表示しています。

3.拍手ランキング(固定ページ）

FC2拍手のランキング(TOP30)で、実際の表示ページはこちらです。作成法は以下の2つの記事で紹介しています。

[FC2ブログ]記事の拍手ランキングを追加

ブログをやっていて励みになるのは、「アクセスカウンタ」と「拍手」です。それでアクセス数と同じように、記事の拍手ランキングを集計したいと思い調べたところ、これまで使ってきた「ブログ拍手」ではできないことがわ...

e-farm.org

2015-01-27 21:24

[WordPress]FC2のカウンター･拍手･アクセスランキングを利用する

私はかってFC2ブログでFC2カウンター、FC2拍手、FC2アクセスランキング、FC2アクセス解析等のサービスを使用していましたが、これらはFC2ブログでなくても無料で利用できます。当ブログの環境(WordPress＋Simplicity) においても、上記サービスを全て設定して利用することができましたので紹介します。

e-farm.org

2016-02-11 14:20

4.月間アクセスランキング（固定ページ）

FC2のアクセスランキングを利用して、毎月ごとアクセスランキングを表示していました。これも上記FC2のサービスを利用する記事で紹介しています。

しかし、以下の不満がありました。

毎月、月初にリセットと表の更新をしなければならない
自動更新ではなく月初めに前月の結果の記録とカウンターのリセットを行っていました。
リセット直後はサンプルが少ないのでランキングに偏りが発生していた
タイトルだけのリストで、アイコンがなかった

この記事の主テーマは、この固定ページのアクセスランキングも、サイドバーの人気記事ランキングと同じ仕組みで自動表示するように改善しようというもので、以下がその内容です。

固定ページのアクセスランキングを自動更新化

WordPress のプラグイン WordPress Popular Post

サイドバーに人気記事としてランキングを表示していますが、ウイジェットで表示しています。そのウイジェットはWordPress Popular Postというプラグインを利用しています。

このプラグインを使えば投稿ページや固定ページにも表示可能で、集計する期間も下記4つがあり選択できるのです。

集計期間：24hours、weekly、30days、all term

プラグインの導入

WordPress Popular PostはテーマSinplicityのサイドバーのウイジェットに必須でしたから、私はSinplicity導入当初から入れていました。

まだの人はWordPressのプラグイン検索から簡単に導入できます。

最終コード

最終のコードは以下の通りです。

記事中

固定ページに以下の記述をします。


<h2>人気記事－期間別アクセスランキング</h2>
<div id="r-button" class="button"><a href="https://e-farm.org/post-0-3-3">24時間と週間はこちら</a></div>
当ブログ記事のアクセス数によるランキング (TOP30)
<div style="clear: both;"></div>
<div class="left-box-1">
<h4>月間ランキング<span style="float: right;">last 30days</span></h4>
  [wpp range="monthly" order_by="views" post_type=post limit=30 thumbnail_width=70 thumbnail_height=70 excerpt_format=0 excerpt_length=120 wpp_start='
    <ol class="wpp-list2">' wpp_end="</ol>" post_html='
    <ul>
      <li id="noline" style="list-style: none;">
        <span style="margin-right: 0em; float: left;">{thumb}</span><a href="{url}">{text_title}</a>
        <span style="Font-size : small;">{views} views </span>
        <div style="clear: both;"></div>
      </li>
    </ul>
  ']
</div>
<div class="left-box-2">
  <h4>累積ランキング<span style="float: right;">all time</span></h4>
  [wpp range="all" order_by="views" post_type=post limit=30 thumbnail_width=70 thumbnail_height=70 excerpt_format=0 excerpt_length=120 wpp_start='
    <ol class="wpp-list2">' wpp_end="</ol>" post_html='
    <ul>
      <li id="noline" style="list-style: none;">
        <span style="margin-right: 0em; float: left;">{thumb}</span>
        <a href="{url}">{text_title}</a><span style="Font-size : small;">{views} views </span>
        <div style="clear: both;"></div>
      </li>
   </ul>
  ']
</div>
<div style="clear: both;"></div>

スタイルシート

WordPressテーマのスタイルシート (style.css)に以下の記述を貼り付け追加します。

/* 人気記事ランキング */
.wpp-list2{
    margin:0 !important;
    padding:0 !important;
    counter-reset: no;
}
.wpp-list2 a { 
  color:#333; /*文字色*/
  text-decoration: none;
}
.wpp-list2 ul{
    padding:0 !important;
}
.wpp-list2 li:before{
    content: counter(no);
    counter-increment: no;
    color: white; /*文字色*/
    background-color: gray; /*背景色*/
    text-align: center;
    opacity: .999;
    float: left;
    line-height: 18px;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    margin-right: -18px;
}
.left-box-1{
    float : left ;
    width : 340px ;
    margin-right: 20px;
}
.left-box-1 ul, .left-box-1 ol, .left-box-2 ul, .left-box-2 ol{
 line-height: 150%;
}
.left-box-1 h4, .left-box-2 h4{
  margin-bottom: 10px;
  margin-top: 10px;
  font-size:18px;
  color: #eee;
  padding:10px 10px;
  background-color:#375547;/* 旧 #3a3a17 */
  border-radius: 3px; 
}
#r-button {
    float : right ;
}
.left-box-2{
    float : left ;
    width : 340px ;
}

3,4,12行目は左側のスペースをなくしています。

8,9行目は、タイトルがリンクになっているが、文字色は普通に黒に、アンダーラインはつけないようにしています。

完成の姿

できたものが頭初のスクリーンショットですが、実際の表示ページはこちらです。

なお、私は固定ページに表示していますが、投稿ページでもまったく同じです。

サイドバーの「このブログの人気記事」にリンクを追加

サイドバーの「週間のアクセスランキングTOP10」表示に、もっと詳しく知りたい人を誘導するのために、今回作成した固定ページのアクセスランキングへのリンクを張りたいと検討しました。

しかし、現在のウイジェットはリンクを追加するようなことはできませんでした。

それで簡単な代替案としてランキングウイジェットの直ぐ下に、リンクのための別のテキストウイジェットを追加する方法を考えました。追加するウイジェットは以下のようにします。

タイトルなし
このウイジェットのタイトルは無しにします
本文にリンクを張る
固定ページへのリンクを貼ります
上部スペースを詰める
アクセスランキングウイジェットとの間を詰め一体に見せます。

こうしてできたのが現状のサイドバーのリンクです。記録のためスクリーンショットを掲げます。

[WordPress]固定ページに4種の期間ごとのアクセスランキングを表示