WordPressテーマをJINからSWELLに変更SWELL公式サイト

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

あいうえおLIFE

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

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

くろーむ

cocoonからJINにテーマ変更して、2週間が経過しました!
(2020年3月現在)

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

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

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

こんな人におすすめ
  • どうしたらJINで固定ページに人気記事ランキング作れるんだ?
  • WordPress Popular Postsでサイドバーには設置できたけどそれ以上ムリ
  • cocoonのときはショートコードがあったから固定ページにできたのに

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

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

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

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

  • サイトマップ作成
  • 人気記事ランキングを好きな場所に表示(記事中でも)

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

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

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

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

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

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

サイドバーに人気記事
  1. WordPressPopularPostsのプラグイン入れる
  2. 【外観】→【ウィジェット】→サイドバーに【WordPress Popular Posts】をドラッグ&ドロップ
  3. WordPress Popular Postsの設定をする
  4. これでサイドバーに表示させるのは完了

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

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

もくじ

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

3つの詳細

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

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

  • 独立した1つの固定ページとして人気記事ランキングへ誘導できる
  • 記事中に読者回遊率をアップさせるために固定ページとしてリンク先貼れる
  • サイドバーには【全期間の人気記事ランキング】と固定ページには【ここ1週間の人気記事ランキング】のように期間ごとの人気順表示の工夫がこなせる

上記のメリット3点に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"]

以下で、作業手順解説します↓↓

  • 【全期間の人気記事ランキング】
  • 固定ページの人気記事ランキングは【1週間】

というように分けることが可能(2021年6月〜SWELLにしてからは、WPPPプラグインは廃止したので、1週間ごとの人気記事ランキングにはなっていません)。

下記から【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='

②:期間の指定

' range='last7days' の場合は、【過去7日間】

14日間なら' range='last14days'

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

thumbnail_width=150 thumbnail_height=80 サムネイルのサイズ

幅150高さ80ということ

幅150高さ80と、幅80高さ80のときの違いは下記↓

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

views=1 【期間内でのPV数の表示】1→表示 0→表示しない

ちなみに【表示】の場合は、【●●ビュー】と表示されます

⑤:表示させる記事の数

limit=15 表示させたい記事数 

この場合は、15記事を表示させます

⑥:表示する判断基準

order_by="views" この場合はPVごと

※おまけに書きましたが、【コメント数順】も可能

あいうえおLIFE

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

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

\ Udemyの人気講座 /

1時間のビデオ学習

出来上がりを見てみる

3つのコンテンツ
  • 【右】サイドバーに表示させた場合
  • 【左】固定ページに人気記事ランキングを作った場合

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

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

  • 【人気記事ランキング】の固定ページを【JIN】のピックアップコンテンツにするもよし!
  • 【フッターメニューやヘッダーメニューやグローバルメニュー】にも誘導できる!

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

くろーむ

よっしゃ!これでガツガツアクセス集めて、ブログで稼いでやるぜ!って野心燃えてきた人は下記がおすすめ。

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

モンタニエ教授

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プラグインなしで、カテゴリ別や、新着記事、人気記事を呼び出し可能です。

それでは、今日はここまで読んでいただき、ありがとうございます。

人気記事【JINからSWELLへテーマ変更】注意点とバックアップの手順とやり方【解説】

もくじ
閉じる