興味のある所からお読み下さい
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）
になります。
表示サンプル
- phpMyAdminを使ってMySQLのデータをバックアップ・復元する方法
- WordPressの「インポート/エクスポート」を使ってサイトをバックアップし復元する
- SEO対策に役立つGoogle アナリティクスの活用法（応用編）
- WordPress のタイトル画像の挿入とランダム表示
- WordPress データベーステーブルの接頭辞を変更する方法
- SNSを活用したアクセスアップの方法と拡散方法：Facebook編
- XREAドメインメールのカスタムフィルターの使い方とスパムメール対策
- 安全で覚えやすいID/パスワードの作り方
- WordPress /Simplicity のAMP機能とAMP Validatorの使い方
パラメータを設定してランキングらしく表示を整える
表題を表示するなど、パラメータを設定してランキングらしく表示を整えます。パラメータの設定は、下記のように「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＞見出し項目と同じデザインで表示されます。
人気ランキング
- 安全で覚えやすいID/パスワードの作り方...
- phpMyAdminを使ってMySQLのデータをバックアップ・復元する...
- XREAドメインメールのカスタムフィルターの使い方とスパムメール対策...
- WordPressの「インポート/エクスポート」を使ってサイトをバック...
- WordPress Popular Posts ショートコードで人気ラ...
- Seesaaブログから記事のURLをそのまま引き継いでWordPres...
- カテゴリーのツリー化（seesaaブログ）...
- WordPress ウィジェットのタグクラウドのカスタマイズ方法...
リスト表示を横並び表示に変更する
ページトップにも表示できるよう、CSSを使ってリスト表示を横並び１行表示に変更します。
記事本文中に、ショートコード版のコードを記述するか、Simplicityをご利用の方は、「投稿本文上」のウィジェットエリアに「テキスト」ウィジェットを設定して、その中にこのショートコードを記述すれば、すべての投稿記事のページトップに人気ランキングが表示されるので便利です。
表示がブログ横幅内に１行で収まらないときは、CSSのwidth、margin-right、font-sizeで調整するか、表示件数を減らしてご利用ください。
ソースコード（ショートコード版）
- 表題（週間人気ランキング TOP 5）
- 表示件数最大5件まで（limit=5）
- 集計期間 1週間（range=”weekly”）
- 固定ページはランキングしない（post_type=”post”）
- 30ｘ30pxのサムネイル付き（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> |
表示サンプル
サムネイル付の横並び１行で表示したサンプルは下記のようになります。
| 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 プログラムを書くことができないので、このページの「人気ランキング」のように直接記事中に、ショートコードを書くことができません。
解決方法には、次の２通りがあります。
- PHP版をショートコード化し、記事にショートコードタグを書く
- single.phpなどのテンプレートファイルに、直接 PHP版を記述する
こちらのコードは、１つのコードで、カテゴリーのあるページには「カテゴリー別ランキング」、ないページには「全記事のランキング」を自動で切り替えて表示します。具体的にはこちらをご覧ください。
WordPress 関連 おススメ記事
- インストール
- 設定・カスタマイズ
- 使い方
- エラー対処
- バックアップ・復元
- データベース
- ウィジェット
- ショートコード
- プラグイン
