簡単に記事をランキング化。WPプラグイン『WordPress Popular Posts』の使い方

WordPress

2015年6月15日 02:31

WPプラグイン,改善余地アリ

ある方からリクエストがあり、久しぶりに記事を書くことにしました。
『WordPress Popular Posts』は誰でも簡単に使える便利なプラグインですが、設定にコツがあります。
現在のテーマに沿った使い方になりますが、簡単にご紹介。

この記事は最終更新日から1年以上が経過しています。

プラグインのインストール

まず、プラグインを入れましょう。
WordPress Popular Postsダウンロード

当たり前ですが、プラグインを有効にしましょう。

プラグインの設定

メニューの設定にプラグインの設定が表示されますが、今回はこちらは必要ありません。
ウィジェットで設定してしまいます。

※ライトボックスが開いてしまい、詳細が見づらくなるので、その後、新しいタブで画像を開いてください。

画像見てもらうことを前提に、上から説明していきます。

Title
ウィジェットの題名ですね。
『人気記事』とか、なんでもかまいません。

Show up to
表示件数です。
10件出せば、TOP10という話です。

Sort posts by
並び順ですね。
Total views：総閲覧数
Comment：コメント数
Avg. daily views：一日平均閲覧数

Time Range
集計期間のことです。
Last 24 hours：24時間集計
Last 7 days：一週間集計
Last 30 days：一か月間集計
All time：全期間集計
※全期間はプラグインを導入してからの集計となります。
※※ 「Display only posts published within the selected Time Range」にチェックを入れると設定した期間内で書かれた記事で集計され、チェックを入れないと、全ての記事の中で設定した期間内での集計を行うらしいです。

Post type(s)
集計対象の投稿タイプの設定です。
一般的には、記事として投稿される『post』と、固定ページとして投稿される『page』を設定しておきます。

Post(s) ID(s) to exclude
表示させたくない記事をIDで指定します。
基本的には使いませんね。

Category(ies) ID(s)
特定のカテゴリでランキングを作りたいときに使用します。
ウイジェットを二つぐらい作って、片方は全体のランキングで、もう片方はwordpressカテゴリランキングなどとして表示したい場合に使います。

Author(s) ID(s)
投稿者の指定ができます。
こちらも複数投稿者がいた場合に、この人が書いた記事のランキングみたいに表示することができますね。

Posts settings
Shorten title：タイトルを一定文字数で短縮するときにチェックを入れます。
Display post excerpt：記事の抜粋を表示したい場合にチェックを入れます。
Display post excerpt：記事の抜粋を表示したい場合にチェックを入れます。
Display post thumbnail：記事のサムネイルを表示したい場合にチェックを入れます。

Stats Tag settings
Display comment count：コメント件数を表示します。
Display views：閲覧件数を表示します。
Display author：投稿者を表示します。
Display date：記事の投稿日時を表示します。
Display category：記事のカテゴリを表示します。

HTML Markup settings
このプラグインにおいて、最後に重要となるのがこれです。
デザインに幅を持たせるには、ここを何となく理解しましょう。
Use custom HTML Markup：HTMLをカスタマイズしたいときにチェックを入れます。
参考までに以下の使用例をご覧ください。


Before / after title（ウイジェットタイトルにクラスを追加できる）
<h3 class="ac-popular-posts-title"> / </h3>

Before / after Popular Posts: （ランキングブロックを囲むタグを追加できる）
<ul class="wpp-list ac-popular-posts"> / </ul>

Post HTML Markup:（一つのブロックに対するHTMLタグをカスタマイズができる）
<li>
    <span class="position">{thumb}</span>
    <div class="details">
        <span class="category">{category}
        </span>
        {title} 
<div style="width: {views}%" class="the-percentage"></div>
        <a class="comments-number">{views} views</a>
    </div>
</li>

多少解説しますと、重要なのは『Post HTML Markup』の箇所で、こちらで数値を代入してHTMLを形成ができます。
{thumb}ならば、サムネイルを呼び出すといったように、これによって色々な使い方ができます。
上記の%バーなどは、そのいい例ですが、悲しいかな%数値化していないため、{views}が100を超えると、100%以上の表示になるわけで、失敗といえば失敗です。
いずれは直したいところですが、今のところはこれでなんとなくやっています。

説明は以上です。