はぴすぷ

【WordPress Popular Posts】ショートコードでサクッと人気記事ランキングの固定ページを作る方法

      2015/11/04

前回、「WordPress Popular Posts」で表示したランキングに順位を付ける方法について触れました。

【WordPress】人気記事ランキングに「順位」をCSSだけでいい感じに表示させる【WordPress Popular Posts】

そして最後に、サイドバーで表示している「デイリーのランキング」を、もっと見れるようにしたり、「ウィークリー、マンスリー、トータル」それぞれを見れるようにしたい。と言っていました。

今回はその、「デイリー、ウィークリー、マンスリー、トータル」のランキングついて、それぞれ50位くらいまで誰でも見られるようにしようという内容です。

一生懸命作り込む気もなかったので、サクッと出来る方法を紹介します！

スポンサーリンク

実装方法は3種類ある

「WordPress Popular Posts」を使う方法は大きく分けると以下の3種類があります。

  • phpでコードを書く
  • ウィジェットを使う
  • ショートコードを書く

今回は3つ目の「ショートコードを書く」方法を紹介します。

ショートコードで実装する方法

まず新規の固定ページを用意します。別に投稿でも同じ方法で利用できます。

そして実装は以下のサンプルにあげるサンプルのようなショートコードをコピペするだけ。

サンプル1

週間集計、サムネイル50×50、閲覧数多い順に5件、記事のみ、閲覧数表示、コメントなし

[wpp range="weekly" thumbnail_width=50 thumbnail_height=50 order_by="views" limit=5 post_type="post" stats_views=1 stats_comments=0]

サンプル2

月間集計、サムネイルなし、閲覧数多い順に10件、固定ページのみ、閲覧数表示、コメントなし

[wpp range="monthly" order_by="views" limit=10 post_type="page" stats_views=1 stats_comments=0]

サンプル3

総合集計、サムネイル70×70、コメント数多い順に3件、記事と固定ページ、閲覧数なし、コメント数表示

[wpp range="all" thumbnail_width=70 thumbnail_height=70 order_by="comments" limit=3 post_type="post,page" stats_views=0 stats_comments=1]


サンプルは以上です。

ショートコードとパラメータの説明

WordPressの管理画面から「設定」→「WordPress Popular Posts」→「Parameters」に各パラメータの説明があります(^q^)

SS_3240

英語やないか( ﾟдﾟ )ｸﾜｯ!!

せめてサンプルに使ったパラメータの説明くらいしやがれ！という声が聞こえる気がするので簡単に説明します。

ショートコードの説明

まず「WordPress Popular Posts」のデフォルトのショートコードはこれだけ。

[wpp]

デフォルトはデイリー集計で、閲覧数の多い順に10件、投稿と固定ページ両方を対象に、タイトルと閲覧数を表示します。

パラメータの説明ではコメント数の表示がデフォルトで、閲覧数は非表示になってますが、実際には逆になっています。

各パラメータの説明

range

集計範囲のことで以下の4つから指定する。

  • daily：24時間
  • weekly：1週間
  • monthly：1ヶ月
  • all：プラグイン導入時からのすべての期間

thumbnail_width・thumbnail_height

サムネイル画像のサイズ。widthが幅でheightが高さです。

任意に指定可能ですが、サイズ変更される度に以下の場所に生成されるのであまり遊び過ぎないようにしましょう…。

wp-content\uploads\wordpress-popular-posts

order_by

並び順。以下の3つから指定する。

  • views：累計閲覧数
  • comments：コメント数
  • avg：1日平均の閲覧数

limit

最大表示数。これに満たない場合はある分だけ表示。

post_type

集計する投稿の種類。postが投稿で、pageが固定ページ。post,pageで両方。

stats_views

閲覧数を表示するかしないか。「*** view(s)」という形で表示される。

表示する場合は1を指定、しない場合は0を指定。

stats_comments

コメント数を表示するかしないか。「*** comment(s)」という形で表示される。

表示する場合は1を指定、しない場合は0を指定。

その他

今回サンプルで使用したものの他にも色々とパラメータが準備されているので、気になる方は最初に紹介したページを確認して見てください。

吐き出されるタグの種類を変えたりも出来ます。英語を読み解くか翻訳機能に頼るかしましょう(´・ω・`)

スタイルを整える

デフォルトのままだと、ちょっと味気ないのでスタイルを与えてあげます。

恐らくサイドバー等に埋め込んで、既にスタイルを当てている方が殆どだと思います。なので、同じでいいなら記事の中の人気記事にも適用させるように書き換えるかコピーしましょう。

当サイトのスタイルはこちらを参考に。

サイドバーに適用している全体のスタイル。
人気記事ランキングを表示する必須のWordPressプラグイン【WordPress Popular Posts】の導入手順

ランキングの「順位」を表示している部分。
【WordPress】人気記事ランキングに「順位」をCSSだけでいい感じに表示させる【WordPress Popular Posts】

今回の記事内で使用している調整部分。

/* 記事内で使うアクセス数ランキング */
.post .wpp-list {
    padding: 0;
}
.post .wpp-list li {
    border: solid 1px #ddd;
    border-radius: 0 5px 5px 5px;
    margin-bottom: 10px;
    padding: 5px;
}
.post .wpp-no-thumbnail .wpp-list li {
    padding-left: 32px;
}
.post .wpp-list .wpp-comments,
.post .wpp-list .wpp-views {
    color: #DC4E55;
    position: absolute;
    line-height: 1;
    right: 8px;
    bottom: 8px;
    font-size: 14px;
    font-weight: bold;
    background: rgba(255, 255, 255, 0.9);
    padding: 2px;
    border-radius: 2px;
}
.post .wpp-list .wpp-post-title {
    line-height: 1.5;
    font-size: 15px;
}
.post .wpp-list a {
    color: #333;
    text-decoration: none;
    font-weight: bold;
}
.post .wpp-list a:hover {
    color: #b22222;
}

終わりに

というわけで、ショートコードを貼り付けるだけで、ランキングページをサクッと作れちゃいました！

スタイルを考えて、CSS書くのは結構大変で時間かかりますけどねｗ

ランキングページが作れたので、後はそのページへの案内があればバッチリです！

どこからもリンクされてないと誰も見れないですからねｗ

どこに、どのように置くのがいいか…。これは難しい問題です。

次回は、当サイトの設置例を紹介しようと思います。↓こういうやつ。

人気記事をもっと見る

本日週間月間総合

それでは。

 - WordPress, プラグイン