【JIN】固定ページに人気記事ランキングを作るやり方【ショートコード】

あいうえおLIFE

タイトル通りですが、WordPress有料テーマJINで、固定ページに人気記事ランキングを作成していきましょう（所要時間10分）。

※作業条件として、WordPressPopularPostsで人気記事ランキングを表示させている人に限ります

くろーむ

cocoonからJINにテーマ変更して、２週間が経過しました！
（2020年3月現在）

おかげさまで、いい具合にJINの使い心地が馴染んでいます（2021年9月現在、SWELL）。

おそらくこの記事を見ている人は、以前のぼくと同じ悩みを持っているかも。

下記のようなお困りごとを解決

ぼくもcocoon→JINにテーマ変更した際デメリットにあげた内容の１つが「人気記事ランキング単体記事ができないこと」。

ちなみに、有料テーマSWELLは、ブログパーツや、SWELLブロックの「投稿リスト」で好きな条件で記事を呼び出しできるよ。

cocoonは、無料テーマなのに、痒い所に手が届くテーマだったってことですよね。

cocoonのショートコードは便利だった。

cocoonでは、上記が可能でした。

JINになってから、プラグインをプラスアルファ入れないといけないことに、ちょっとだけですが、手間を感じていました。

とはいえ、産みの苦労を実感していたら問題解決できました！

今回、参考にさせていただいた記事はこちら

ずっとサイドバーにしか人気記事ランキングを表示できないストレスを一気に解消してくれましたので、紹介させていただきます！

※以下はできている前提で進めていきます

WordPressPopularPostsのプラグインを入れてない人は、本記事はそのままにインストールしにいきましょう。

どうぞ、最後までお読みくださいね。

運営者：あいうえおLIFE

• HTML名刺とプロフ（日々メンタルアップ）
• モッピーでコインチェックをセルフバックし、元手5万円を取引後、報酬1万円GET
• ブログをWordPressで始め、ブログ運営、カスタマイズ、登録販売者、動画編集にまつわる記事をアップ
• ブロックエディタ完全対応テーマSWELLに変更後、収益UP（レビュー記事）
• 鬼滅の刃の記事が上位表示されSEOに自信をもつ

こんにちは

固定ページに人気記事ランキング表示するにはWPPPプラグインのショートコードを使う

サイドバーに表示させる際に入れたWordPressPopularPosts（長いので以下WPPP）のプラグインのショートコードを使用します。

ちなみに【人気記事ランキング】を固定ページや記事中に表示させるメリットは下記。↓↓

上記のメリット３点に１つでも共感されました方は是非とも実践くださいませ。

当ブログの人気記事ランキングの固定ページはこちら。

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週間ごとの人気記事ランキングにはなっていません）。

下記から【１週間の人気記事ランキング】という実例でやってみます。

STEP

【固定ページで人気ランキング】をつくっていきます

• まずは固定ページで【人気ランキング】を作成
• 【固定ページ】→【新規追加】
• 本文には人気ランキングの記事の紹介文を書きます

※作業環境はブロックエディタ

STEP

プラグインのパラメータから、カスタマイズのショートコードを探ります

下記のショートコードを好みで書き換えてカスタマイズしてくださいね↓↓

[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='

②：期間の指定

③：表示するサムネイルのサイズ

④：PV数を表示するかどうか

⑤：表示させる記事の数

⑥：表示する判断基準

あいうえおLIFE

どうでしょうか？できましたでしょうか？

ぜひ出来ましたら、「できたよっ」って教えてくださいm(__)m

出来上がりを見てみる

メリットの部分にも書きましたが、固定ページには【パーマリンク｜URL】がありますよね。

人気記事ランキングのリンク活用例

固定ページのリンク先を活用できるので、読者さんの回遊率アップと直帰率の改善につながります！

くろーむ

人気記事ランキングは、SWELLならデフォルトで可能です。

おまけ｜プラグインの公式ページのサンプル解説

WPPPはメジャーなプラグインですが、固定ページに組み込むのはなかなか解決できなかったんじゃないかと。

あいうえおLIFE

WPPPの【設定】からショートコードのヒントを解説してみます。

下記のサンプル例をひもといてみましょう。

[wpp range="last7days" limit=5 stats_views=1 
order_by="views"]

this would display the top 5 viewed posts from the last 7 days

Google 訳）これにより、過去7日間に閲覧された上位5件の投稿が表示されます。

上記だけだとサムネイルのサイズ指定とかがないから、ちょっともの足りないかな。

下記も見ていきましょう。

[wpp range="last30days" stats_comments=1 
order_by="comments"]

this would output the 10 most commented posts from the last 30 days

Google 訳）これにより、過去30日間で最もコメントが多かった10件の投稿が出力されます。

なるほど！コメント順もね！

Facebookとかと違ってブログとかはコメント少ないよね。

ブログで解決したとしてもお礼とかコメントすること稀かも笑

あいうえおLIFE

ぼくはコメント投稿はいまのところないので不採用です笑

たくさんコメントをもらっている人はおすすめかも。

【コメント数順】で表示したい場合

order_by="views"　→　order_by="comments"　と書き換えましょう。

以上、マニアックでしたが、WPPPのショートコードを書き換えれば、違った条件で人気記事ランキングを表示させることが可能。

SWELLテーマなら、ワンタッチでWPPPプラグインなしで、カテゴリ別や、新着記事、人気記事を呼び出し可能です。