WordPressでウィジェットとして人気記事ランキングを表示するのは、WordPress Popular Postsというプラグインをインストールすればすぐだけど、それを固定ページや投稿（記事）として掲載する方法は、なかなかやり方が見つけれず、結構苦戦しました。
以下、その方法を共有したいと思います。
スポンサーリンク
目次
人気ランキングページのデモページ
まずは、実際どのようになるかをこのブログで実践しているので、ご覧ください。
どうでしょう？
普通に１つのページとして成立していると思います。
では、このページをどうやって作るかというと以下のようにします。
WordPressで人気記事ランキングを記事として掲載する方法
手順は至って簡単。3ステップ！
WordPressにプラグインWordPress Popular Postsをインストール
人気記事ランキングを表示するためのウィジェットを生成する定番のプラグイン「WordPress Popular Posts」をインストールします。
管理画面から、プラグイン → 新規追加 → 「WordPress Popular Posts」で検索してインストールで簡単に導入できます。
固定ページor投稿を作成する
固定ページなら、管理画面から「固定ページ → 新規追加」。投稿なら「投稿 → 新規追加」で編集画面に遷移し、任意のタイトルとパーマリンクを入力後、投稿タイプを「テキスト」にする。
コードをコピペする
記事の入力欄に、以下のコードをコピペします。
上のコード部分はWordPress Popular Postsのパラメータを利用して作成したランキング表示用のコード。
下のCSS部分は、ランキングの順位を数字で表示させるためのスタイルシートです。（参考＝ringo-12.com）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
[wpp range="monthly" order_by="views" limit=30 pid=703 thumbnail_width=120 thumbnail_height=120 excerpt_format=0 excerpt_length=120 wpp_start='<ol class="wpp-list2" style="margin:0">' wpp_end="</ol>" post_html=' <li style="list-style:none;border-bottom:1px gray dotted;"><p style="margin-right:1em;float:left">{thumb}</p><p><b><a href="{url}">{text_title}</a></b><br /><span>{summary}</span></p><p style="clear:both"></p></li> '] <style> .wpp-list2{counter-reset:no;} .wpp-list2 li:before{ content:counter(no); counter-increment:no; color: white; /*文字色*/ background-color: black; /*背景色*/ text-align: center; opacity: .999; float: left; line-height: 30px; width: 30px; height: 30px; border-radius: 2px; -moz-border-radius: 2px; margin-right: -25px; } </style> |
ちなみに、コード部分の各項目値は以下を意味します。
- range 集計期間
- order_by 集計方法
- limit 何位まで表示するか
- thumbnail_width サムネイルの幅（px）
- tumbnail_height サムネイルの高さ（px）
なので例えば、「limit=30」を「limit=50」にすればランキング数が30から50に増えます。
CSS等自由にカスタマイズして、自分だけのオリジナルランキングページを作成しましょう♪
このブログの現在の順位はこちら→∩(´∀｀)∩