WordPress Popular Posts ショートコードで人気ランキングを表示する

スポンサーリンク

WordPress Popular Postsとは

WordPress Popular Posts(以下wppと記す)は、サイドバーやフッターにウィジェットで、サイト内の記事を人気順(閲覧数やコメント数順)にランキング表示できるWordPressのプラグインです。

ウィジェットでは非常に多くの方が利用していますが、wppの「ショートコード」を活用すれば、投稿記事中にランキング表示したり、固定ページにランキングページを作成することが簡単にできます。

これから紹介する方法は、「WordPress Popular Posts」のインストールが必要です。こちらを参考にインストールして下さい。

インストールの手順 インストールするプラグインを検索 「ダッシュボード」→「プラグイン」→「新規追加」を選択し、検索窓にインストールした...

wppのショートコードで人気ランキングを表示する

wppショートコードのパラメータ

パラメータの詳細は、「管理画面」の「設定」>「Wordpress Popular Posts」から「パラメータ」タブで確認できます。よく使うものは以下のとおりです。

パラメータ 説明 デフォルト値
header 表題 Popular Posts
header_start 表題の開始タグ <h2>
header_end 表題の終了タグ </h2>
limit 表示件数 10
range 集計期間(”daily”, “weekly”, “monthly”, “all”) daily
order_by ソート順
“comments”, “views”, “avg” (1日の平均閲覧数)
views
post_type 投稿タイプ 投稿(post), 固定ページ(page) post,page
cat カテゴリーID(”1,55,-74″)マイナスは除外の意
title_length 記事タイトルの最大表示文字数 25
thumbnail_width サムネイル画像の幅 15
thumbnail_height サムネイル画像の高さ 15
wpp_start リストの開始タグ <ul>
wpp_end リストの終了タグ </ul>
stats_views 閲覧数を表示(1), 非表示(0) 表示(1)
stats_comments コメント数を表示(1), 非表示(0) 非表示(0)

デフォルト設定[wpp]でランキングを表示してみる

記事内でショートコードを使うには、「wpp」を[]で囲み記事内の表示させたい場所に記述します。パラメータをなにも指定しないデフォルト設定では、

  • ソート順 閲覧数(views)
  • 集計単位 1日(daily)
  • 表示件数 10
  • 閲覧数を表示(stats_views=1)

になります。

表示サンプル

パラメータを設定してランキングらしく表示を整える

表題を表示するなど、パラメータを設定してランキングらしく表示を整えます。パラメータの設定は、下記のように「wpp+表示したい項目」で表示したい項目や形式を指定します。

ショートコード

【パラメータの説明】

  • 表題(header=”人気ランキング”、h4タグ)
  • 集計期間 過去1ヵ月間で(range=”monthly”)
  • 一日平均の閲覧数の多い順(order_by=”avg”)
  • 固定ページは含めずに(post_type=”post”)
  • 表示件数最大8件まで(limit=8)
  • 記事タイトルの表示文字数は最大35文字まで(title_length=35)
  • 閲覧数を表示し(stats_views=1)
  • ランキングらしくリスト記号を番号表記にする(<ul> → <ol>)

人気ランキング

  1. 安全で覚えやすいID/パスワードの作り方... 6ビュー / 1日
  2. phpMyAdminを使ってMySQLのデータをバックアップ・復元する... 4.03ビュー / 1日
  3. WordPress Popular Posts ショートコードで人気ラ... 3.62ビュー / 1日
  4. XREAドメインメールのカスタムフィルターの使い方とスパムメール対策... 3.34ビュー / 1日
  5. WordPressの「インポート/エクスポート」を使ってサイトをバック... 2.24ビュー / 1日
  6. WordPressのメタ情報の不要項目を非表示にする3つの方法... 1.86ビュー / 1日
  7. 自動目次生成プラグインTable of Contents Plusの設... 1.41ビュー / 1日
  8. 当サイトで行っているWordPress/Simplicityの各種設定... 1.34ビュー / 1日

表示サンプル

ランキング表示らしくなりました。表題に<h4>タグを指定したので、ページの<h4>見出し項目と同じデザインで表示されます。

リスト表示を横並び表示に変更する

ページトップにも表示できるよう、CSSを使ってリスト表示を横並び1行表示に変更します。

記事本文中に、ショートコード版のコードを記述するか、Simplicityをご利用の方は、「投稿本文上」のウィジェットエリアに「テキスト」ウィジェットを設定して、その中にこのショートコードを記述すれば、すべての投稿記事のページトップに人気ランキングが表示されるので便利です。

表示がブログ横幅内に1行で収まらないときは、CSSのwidth、margin-right、font-sizeで調整するか、表示件数を減らしてご利用ください。

ソースコード(ショートコード版)

  • 表題(週間人気ランキング TOP 5)
  • 表示件数最大5件まで(limit=5)
  • 集計期間 1週間(range=”weekly”)
  • 固定ページはランキングしない(post_type=”post”)
  • 30x30pxのサムネイル付き(thumbnail_width=30 thumbnail_height=30)
  • 閲覧数を表示しない(stats_views=0)
<style type="text/css">
div.mywpp li {
  display: inline-block;
  vertical-align: top;
  width: 9em;
  margin-right: 5px;
  font-size: 13px;
  line-height: 1em;
}
</style>
<div class="mywpp">
<table><tr>
<th><span><a href="http://wp.kikuchisan.net/wpp-cat-shortcode.html">by ブログ工房</a> </span>週間人気ランキング TOP 5</th>
</tr><tr>
<td>



</td>
</tr></table>
</div>

表示サンプル

サムネイル付の横並び1行で表示したサンプルは下記のようになります。

(参考)ソースコード(PHP版)

header.php、footer.phpや、投稿ページsingle.php、固定ページpage.phpなどのテンプレートファイルに直接記述する場合は、PHP版のコードを使います。

ショートコード版との違いは、

  • ショートコード版:ショートコードタグ[wpp パラメーター]
  • PHP版:テンプレートタグ <?php wpp_get_mostpopular(‘パラメーター’); ?>

と、ショートコードタグで記述するか、テンプレートタグで記述するか、です。

<style type="text/css">
div.mywpp li {
  display: inline-block;
  vertical-align: top;
  width: 9em;
  margin-right: 5px;
  font-size: 13px;
  line-height: 1em;
}
</style>
<div class="mywpp">
<table><tr>
<th><span><a href="http://wp.kikuchisan.net/wpp-cat-shortcode.html">by ブログ工房</a> </span>週間人気ランキング TOP 5</th>
</tr><tr>
<td><?php wpp_get_mostpopular('limit=5&range="weekly"&post_type="post"&thumbnail_width=30&thumbnail_height=30&stats_views=0'); ?></td>
</tr></table>
</div>

カテゴリー別人気ランキングをショートコードで表示する

「カテゴリー別」の人気ランキングを表示するためには、ユーザーが閲覧中のページのカテゴリーをその都度取得する必要があります。

記事やウィジェットには PHP プログラムを書くことができないので、このページの「人気ランキング」のように直接記事中に、ショートコードを書くことができません。

解決方法には、次の2通りがあります。

  1. PHP版をショートコード化し、記事にショートコードタグを書く
  2. single.phpなどのテンプレートファイルに、直接 PHP版を記述する

こちらのコードは、1つのコードで、カテゴリーのあるページには「カテゴリー別ランキング」、ないページには「全記事のランキング」を自動で切り替えて表示します。具体的にはこちらをご覧ください。

WordPress Popular Postsとは WordPress Popular Posts(以下wppと記す)は、サイドバーやフッ...

WordPress 関連 おススメ記事

スポンサーリンク