あいうえおLIFEタイトル通りですが、WordPress有料テーマJINで、固定ページに人気記事ランキングを作成していきましょう（所要時間10分）。
※作業条件として、WordPressPopularPostsで人気記事ランキングを表示させている人に限ります
くろーむcocoonからJINにテーマ変更して、２週間が経過しました！
（2020年3月現在）
おかげさまで、いい具合にJINの使い心地が馴染んでいます（2021年9月現在、SWELL）。
おそらくこの記事を見ている人は、以前のぼくと同じ悩みを持っているかも。
下記のようなお困りごとを解決
- どうしたらJINで固定ページに人気記事ランキング作れるんだ？
- WordPress Popular Postsでサイドバーには設置できたけどそれ以上ムリ
- cocoonのときはショートコードがあったから固定ページにできたのに
ぼくもcocoon→JINにテーマ変更した際デメリットにあげた内容の１つが「人気記事ランキング単体記事ができないこと」。
ちなみに、有料テーマSWELLは、ブログパーツや、SWELLブロックの「投稿リスト」で好きな条件で記事を呼び出しできるよ。
cocoonは、無料テーマなのに、痒い所に手が届くテーマだったってことですよね。
- サイトマップ作成
- 人気記事ランキングを好きな場所に表示（記事中でも）
cocoonでは、上記が可能でした。
とはいえ、産みの苦労を実感していたら問題解決できました！
今回、参考にさせていただいた記事はこちら
ずっとサイドバーにしか人気記事ランキングを表示できないストレスを一気に解消してくれましたので、紹介させていただきます！
- WordPressPopularPostsのプラグイン入れる
- 【外観】→【ウィジェット】→サイドバーに【WordPress Popular Posts】をドラッグ&ドロップ
- WordPress Popular Postsの設定をする
- これでサイドバーに表示させるのは完了
WordPressPopularPostsのプラグインを入れてない人は、本記事はそのままにインストールしにいきましょう。
どうぞ、最後までお読みくださいね。
固定ページに人気記事ランキング表示するにはWPPPプラグインのショートコードを使う
サイドバーに表示させる際に入れたWordPressPopularPosts（長いので以下WPPP）のプラグインのショートコードを使用します。
ちなみに【人気記事ランキング】を固定ページや記事中に表示させるメリットは下記。↓↓
- 独立した1つの固定ページとして人気記事ランキングへ誘導できる
- 記事中に読者回遊率をアップさせるために固定ページとしてリンク先貼れる
- サイドバーには【全期間の人気記事ランキング】と固定ページには【ここ１週間の人気記事ランキング】のように期間ごとの人気順表示の工夫がこなせる
上記のメリット３点に１つでも共感されました方は是非とも実践くださいませ。
WPPPのショートコードの使い方【所要時間5〜10分】
このショートコードで解決！
[wpp header='1WeekリアルタイムランキングTOP15
' header_start='
' header_end='
' range='last7days' thumbnail_width=150
thumbnail_height=80 stats_views=1 limit=15
order_by="views"]以下で、作業手順解説します↓↓
- 【全期間の人気記事ランキング】
- 固定ページの人気記事ランキングは【１週間】
というように分けることが可能（2021年6月〜SWELLにしてからは、WPPPプラグインは廃止したので、1週間ごとの人気記事ランキングにはなっていません）。
- まずは固定ページで【人気ランキング】を作成
- 【固定ページ】→【新規追加】
- 本文には人気ランキングの記事の紹介文を書きます
※作業環境はブロックエディタ
下記のショートコードを好みで書き換えてカスタマイズしてくださいね↓↓
[wpp header='1WeekリアルタイムランキングTOP15' header_start='' header_end='' range='last7days' thumbnail_width=150 thumbnail_height=80 stats_views=1 limit=15 order_by="views" ]※頭と最後に [ ]をつけるのをお忘れなく！
下記で解説します。
①：タイトルの付け方
[wpp header='ここにはランキングのタイトル' header_start='
' header_end='
②：期間の指定
' range='last7days' の場合は、【過去７日間】
１４日間なら' range='last14days'
③：表示するサムネイルのサイズ
thumbnail_width=150 thumbnail_height=80 サムネイルのサイズ
幅150高さ80ということ
幅150高さ80と、幅80高さ80のときの違いは下記↓
④：PV数を表示するかどうか
views=1 【期間内でのPV数の表示】１→表示 ０→表示しない
ちなみに【表示】の場合は、【●●ビュー】と表示されます
⑤：表示させる記事の数
limit=15 表示させたい記事数
この場合は、１５記事を表示させます
⑥：表示する判断基準
order_by="views" この場合はPVごと
※おまけに書きましたが、【コメント数順】も可能
あいうえおLIFEどうでしょうか？できましたでしょうか？
ぜひ出来ましたら、「できたよっ」って教えてくださいm(__)m
出来上がりを見てみる
- 【右】サイドバーに表示させた場合
- 【左】固定ページに人気記事ランキングを作った場合
メリットの部分にも書きましたが、固定ページには【パーマリンク｜URL】がありますよね。
人気記事ランキングのリンク活用例
- 【人気記事ランキング】の固定ページを【JIN】のピックアップコンテンツにするもよし！
- 【フッターメニューやヘッダーメニューやグローバルメニュー】にも誘導できる！
固定ページのリンク先を活用できるので、読者さんの回遊率アップと直帰率の改善につながります！
くろーむよっしゃ！これでガツガツアクセス集めて、ブログで稼いでやるぜ！って野心燃えてきた人は下記がおすすめ。
おまけ｜プラグインの公式ページのサンプル解説
WPPPはメジャーなプラグインですが、固定ページに組み込むのはなかなか解決できなかったんじゃないかと。
あいうえおLIFEWPPPの【設定】からショートコードのヒントを解説してみます。
下記のサンプル例をひもといてみましょう。
[wpp range="last7days" limit=5 stats_views=1
order_by="views"]this would display the top 5 viewed posts from the last 7 days
上記だけだとサムネイルのサイズ指定とかがないから、ちょっともの足りないかな。
下記も見ていきましょう。
[wpp range="last30days" stats_comments=1
order_by="comments"]this would output the 10 most commented posts from the last 30 days
なるほど！コメント順もね！
Facebookとかと違ってブログとかはコメント少ないよね。
ブログで解決したとしてもお礼とかコメントすること稀かも笑
あいうえおLIFEぼくはコメント投稿はいまのところないので不採用です笑
たくさんコメントをもらっている人はおすすめかも。
【コメント数順】で表示したい場合
order_by="views" → order_by="comments" と書き換えましょう。
SWELLテーマなら、ワンタッチでWPPPプラグインなしで、カテゴリ別や、新着記事、人気記事を呼び出し可能です。
それでは、今日はここまで読んでいただき、ありがとうございます。