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

2016/10/7 ブログ カスタマイズ 0

アクセスランキング表示24hと週間）

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

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

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

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

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

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

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

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

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

[FC2ブログ]記事の拍手ランキングを追加
[FC2ブログ]記事の拍手ランキングを追加
ブログをやっていて励みになるのは、「アクセスカウンタ」と「拍手」です。 それでアクセス数と同じように、記事の拍手ランキングを集計したいと思い調べたところ、これまで使ってきた「ブログ拍手」ではできないことがわ...
ファビコンe-farm.org
はてブ数
2015-01-27 21:24
[WordPress]FC2のカウンター･拍手･アクセスランキングを利用する
[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のプラグイン検索から簡単に導入できます。

ランキングページを作成する

参考サイト

で、具体的にはどうすればよいのかなとネット検索するといくつも出てきます。一番簡単そうな下記サイトのコードを試してみました。

やり方は、この記事中のコードをコピーしてきて貼り付けます。注意点として上部のコードは記事中に、<style>の部分はスタイルシートに記入します。

これで実に簡単にランキング表示できることが確認できました。後はこれをアレンジして、希望の形で表示ができるようにすることです。

構成を決めてコーディング

次に固定ページにどのように表示するか構成を決めます。

  • 期間は4種とも掲載
  • 各top30のランキングを表示
  • 4つを一ページに掲載するのは無理なので2ページに分ける
    各ページは簡単に行き来できるようにする
  • 一ページ横2列のランキングだが画面の小さいモバイルでは縦並びになる
  • 表示は順位、アイコン、タイトル、アクセス数を表示したい

上記参考サイトのコードを希望の構成になるよう変更し一応表示できるようになりました。

問題点とその対応

ただ、まだ下記の問題が残りました。

  1. リストの左側に余分なスペースができてしまう
    標準のスタイルで判断されてしまうようです
  2. タイトルに取り消し線が入る
    リンク切れとみなされてしまうようです
  3. 右側ブロックのアイコンが一旦ページ下部までスクロールしないと表示されない

１と２は後述のように、スタイルシートで個別指定して対処しました。３は原因がわからず、今のところ我慢しています。

最終コード

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

記事中

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


<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」表示に、もっと詳しく知りたい人を誘導するのために、今回作成した固定ページのアクセスランキングへのリンクを張りたいと検討しました。

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

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

サイドバーのリンク

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

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

スポンサーリンク
  • このエントリーをはてなブックマークに追加

コメントをどうぞ

メールアドレスが公開されることはありません。

トップへ戻る