興味のある所からお読み下さい
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)
になります。
表示サンプル
- XREAドメインメールのカスタムフィルターの使い方とスパムメール対策
- 安全で覚えやすいID/パスワードの作り方
- Simplicityの全体レイアウトを変更して低解像度のパソコンでも表示できるようにする
- WordPress Popular Posts ショートコードで人気ランキングを表示する
- phpMyAdminを使ってMySQLのデータをバックアップ・復元する方法
- WordPress ウィジェットのタグクラウドのカスタマイズ方法
- WordPress Popular Posts ショートコードでカテゴリー別人気ランキングを表示する
- 初心者でも簡単にできる WordPress のインストール方法
- 自動目次生成プラグインTable of Contents Plusの設定と使い方
- WordPressのカテゴリとアーカイブの記事数を表示する方法
パラメータを設定してランキングらしく表示を整える
表題を表示するなど、パラメータを設定してランキングらしく表示を整えます。パラメータの設定は、下記のように「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 |
[wpp header="人気ランキング" header_start="<h4>" header_end="</h4>" range="monthly" order_by="avg" post_type="post" limit=8 title_length=35 stats_views=1 wpp_start="<ol>" wpp_end="</ol>"] |
表示サンプル
ランキング表示らしくなりました。表題に<h4>タグを指定したので、ページの<h4>見出し項目と同じデザインで表示されます。
人気ランキング
- phpMyAdminを使ってMySQLのデータをバックアップ・復元する...
- 安全で覚えやすいID/パスワードの作り方...
- WordPress Popular Posts ショートコードで人気ラ...
- WordPress ウィジェットのタグクラウドのカスタマイズ方法...
- XREAドメインメールのカスタムフィルターの使い方とスパムメール対策...
- 自動目次生成プラグインTable of Contents Plusの設...
- WordPressの「インポート/エクスポート」を使ってサイトをバック...
- WordPress データベーステーブルの接頭辞を変更する方法...
リスト表示を横並び表示に変更する
ページトップにも表示できるよう、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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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 style="border-collapse:collapse;width:100%;"><tr style="background-color:#f7f7f7;"> <th style="padding:0px"><span style="float:right;font-size:11px;"><a href="http://wp.kikuchisan.net/wpp-cat-shortcode.html" target="_blank">by ブログ工房</a> </span>週間人気ランキング TOP 5</th> </tr><tr> <td style="padding:0px">[wpp limit=5 range="weekly" post_type="post" thumbnail_width=30 thumbnail_height=30 stats_views=0]</td> </tr></table> </div> |
表示サンプル
サムネイル付の横並び1行で表示したサンプルは下記のようになります。
by ブログ工房 週間人気ランキング TOP 5 |
---|
(参考)ソースコード(PHP版)
header.php、footer.phpや、投稿ページsingle.php、固定ページpage.phpなどのテンプレートファイルに直接記述する場合は、PHP版のコードを使います。
ショートコード版との違いは、
- ショートコード版:ショートコードタグ[wpp パラメーター]
- PHP版:テンプレートタグ <?php wpp_get_mostpopular(‘パラメーター’); ?>
と、ショートコードタグで記述するか、テンプレートタグで記述するか、です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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 style="border-collapse:collapse;width:100%;"><tr style="background-color:#f7f7f7;"> <th style="padding:0px"><span style="float:right;font-size:11px;"><a href="http://wp.kikuchisan.net/wpp-cat-shortcode.html" target="_blank">by ブログ工房</a> </span>週間人気ランキング TOP 5</th> </tr><tr> <td style="padding:0px"><?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通りがあります。
- PHP版をショートコード化し、記事にショートコードタグを書く
- single.phpなどのテンプレートファイルに、直接 PHP版を記述する
こちらのコードは、1つのコードで、カテゴリーのあるページには「カテゴリー別ランキング」、ないページには「全記事のランキング」を自動で切り替えて表示します。具体的にはこちらをご覧ください。
WordPress 関連 おススメ記事
- インストール
- 設定・カスタマイズ
- 使い方
- エラー対処
- バックアップ・復元
- データベース
- ウィジェット
- ショートコード
- プラグイン