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

カテゴリー別人気ランキング

WordPress Popular Postsとは

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

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

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

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

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>)

表示サンプル

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

人気ランキング

  1. WordPressの「インポート/エクスポート」を使ってサイトをバックアップし復元する 50.26 views per day
  2. スマホ版の広告を非表示にする方法(seesaaブログ) 16.52 views per day
  3. WordPress のバージョンアップと自動更新 13.90 views per day
  4. WordPress で画面が真っ白になってしまった場合の3つの対処法 13.74 views per day
  5. Google XML Sitemapsの設定と使い方 13.58 views per day
  6. WordPressのメタ情報の不要項目を非表示にする3つの方法... 13.23 views per day
  7. パソコンでスマートフォン表示を見る方法(Google Chrome/Safari) 12.65 views per day
  8. 子テーマを利用してサイトデザインをカスタマイズする方法 11.97 views per day

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

ページトップにも表示できるよう、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)

表示サンプル

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

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

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

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

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

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

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

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

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

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

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

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

WordPress Popular Posts ショートコードでカテゴリー別人気ランキングを表示する
WordPress Popular Postsとは WordPress Popular Posts(以下wppと記す)は、サイドバーやフッ...
スポンサーリンク
wp_レクタングル (大)
wp_レクタングル (大)
☆最後までお読みいただきましてありがとうございます。
☆この記事がお役に立ちましたらシェア・フォローしていただけると嬉しいです!