WordPressでウィジェットとして人気記事ランキングを表示するのは、WordPress Popular Postsというプラグインをインストールすればすぐだけど、それを固定ページや投稿（記事）ページとして掲載する方法は、関連記事も見つからず、作成に悪戦苦闘させられました。
以下、一応その方法が分かったので共有したいと思います。
人気ランキングページのデモページ
まずは、実際どのようになるかをこのブログで実践しているので、ご覧ください。
どうでしょう？
普通に１つのページとして成立していると思います。
では、このページをどうやって作るかというと以下のようにします。
WordPressで人気記事ランキングを記事として掲載する方法
手順は至って簡単。3ステップ！
WordPressにプラグインWordPress Popular Postsをインストール
人気記事ランキングを表示するためのウィジェットを生成する定番のプラグイン「WordPress Popular Posts」をインストールします。
管理画面から、プラグイン → 新規追加 → 「WordPress Popular Posts」で検索してインストールで簡単に導入できます。
固定ページor投稿を作成する
固定ページなら、管理画面から「固定ページ → 新規追加」。投稿なら「投稿 → 新規追加」で編集画面に遷移し、任意のタイトルとパーマリンクを入力後、投稿タイプを「テキスト」にする。
コードをコピペする
記事の入力欄に、以下のコードをコピペします。
上のコード部分はWordPress Popular Postsのパラメータを利用して作成したランキング表示用のコード。
下のCSS部分は、ランキングの順位を数字で表示させるためのスタイルシートです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
[wpp range="monthly" order_by="views" limit=30 thumbnail_width=267 thumbnail_height=150 excerpt_format=0 excerpt_length=100 wpp_start='<ol class="wpp-list2">' 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{ margin: 0!important; padding-left: 0!important; counter-reset: no; } .wpp-list2 li:before{ content: counter(no); counter-increment: no; color: white; /*文字色*/ background-color: #303436; /*背景色*/ text-align: center; opacity: .999; float: left; line-height: 30px; width: 30px; height: 30px; border-radius: 2px; -moz-border-radius: 2px; margin-right: -25px; margin-top: 0 !important; } .wpp-list2 li p{ line-height: 1.3; } .wpp-list2 li p span{ font-size:0.8em; } </style> |
ちなみに、コード部分の各項目値は以下を意味します。
- range 集計期間（"daily", "weekly", "monthly", "all"）
- order_by 集計方法（"comments", "views", "avg"）
- limit 何位まで表示するか
- pid 除外する記事番号（上記コード内では未設定）
- cat カテゴリIDを指定して特定カテゴリのランキングを表示（上記コード内では未設定）
- thumbnail_width サムネイルの幅（px）
- tumbnail_height サムネイルの高さ（px）
- excerpt_format 抜粋する文にhtmlの装飾やリンクを反映（1＝反映させる,0＝反映させない）
- excerpt_length 抜粋する文の文字数
なので例えば、「limit=30」を「limit=50」にすればランキング数が30から50に増えます。
CSS等自由にカスタマイズして、自分だけのオリジナルランキングページを作成しましょう♪
なお、カテゴリ別ランキングの作成は、WordPressの記事&ウィジェットでカテゴリ別ランキングを表示させる方法で解説してるので、こちらもよろしく☆
コメント
当サイトのコードをコピペして貼り付けたのですが、5分くらい経つと、ランキングのタイトルリンクが全てブロークンリンクになってしまい横線が入ってしまいます。何か対策がございましたら教えていただけるとありがたいです。
コメントありがとうございます。
恐らくBroken Link Checker等のリンク切れチェックプラグインを使っていると思われるのですが、リンクエラーの制御画面で「リンクエラーではない」等の処理を行なえば今後は検出されないはずです。
たぶんですが、
プラグイン上でリンク先を「{url}」で認識している為に起こる現象だと思われます。
なので、新規ランキングページ作成の都度現象が現れる可能性もあるので、面倒かとは思いますが、現象が出たら、都度処理を行なってみてください。
よろしくお願いいたします♪
初めまして！
こちらの記事のおかげで無事ランキングページを作成できました。
ありがとうございます。
コードのコピペですが、何故か行番号をオンにしてコピペしないと数字が表示されなくなる現象が・・・
使用テーマはスティンガー３です。
コメントありがとうございます。
お役に立てて嬉しいです♪
コピペの件は摩訶不思議ですね。
行番号ありなしで一字一句変わらないはずなんですけどねぇ・・・
はじめまして、田中と申します。コード使わせていただきました。正常に動作しており、とても便利に使わせていただいておりますので、ここでお礼を申し上げます。
ぶしつけで申し訳ないのですが、質問がございます。この仕組みをカテゴリーでくくった記事だけで表示させることは可能でしょうか？もし可能でしたら有償にて教えていただきたいのですが。
どうぞよろしくお願い申し上げます。
田中です。再度の投稿失礼いたします。ブログを読み進めると私の質問はすでに解決しておりました。誠に申し訳ございませんでした。お詫び申し上げます。
五郎と申します。突然投稿失礼します。
このランキングページに観覧数と投稿者名を表示したいのですが
どのようなコードを追加すればよろしいでしょうか。
お忙しいところ申し訳ありませんが確認よろしくお願いいたします。
とても素敵なブログランキングが作成されました。
ありがとうございました。
順位の番号の色をカスタマイズしようとしたら、番号が表示されなくなったのでさっさとあきらめました。
でも全然ＯＫです。
ありがとうございます。
初めまして
こちらの記事を参考にランキングを作成し、無事固定ページに表示されるようになったのですが
スマホで見ると型崩れしてしまい、綺麗に表示がされません。
どのようにしたら型崩れすることなく表示されますでしょうか。