WordPress

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

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

すすむくん

cocoonからJINにテーマ変更して、2週間が経過しました!

おかげさまでいい具合に進捗しています。

おそらくこの記事を見ている人は以前のぼくと同じ悩みを持っているかもしれません。下記のような内容でお困りでないですか?

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

ぼくもcocoon→JINにテーマ変更した際デメリットにあげた内容の1つがこれです

【WordPress比較】CocoonからJINへのテーマ変更する【メリット・デメリット】この記事はWordPressでブログを始めて、無料テーマのcocoonから有料テーマのJINにテーマ変更してみようかなとお悩み中の方に向けた内容になっています。記事を読んでいただくことで、JINにしたときのメリット・デメリットどちらもわかるように書きました。...
らいふちゃん

てかデメリットじゃなくてJINになって手間が増えた感じだったんでしょ笑

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

cocoonでは

ショートコードで

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

が可能でした。

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

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

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

一向にサイドバーにしか表示できないストレスを一気に解消してくれましたので紹介させていただきます!

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

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

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

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

3つの詳細

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

ちなみに【人気記事ランキング】を固定ページや記事中に表示させるメリットはぼくの中ではこんな感じです↓↓

  1. 独立した1つの固定ページとして人気記事ランキングへ誘導できる
  2. 記事中に読者回遊率をアップさせるために固定ページとしてリンク先貼れる
  3. サイドバーには【全期間の人気記事ランキング】と固定ページには【ここ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週間】

というように分けています。

下記から【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=’ここはタイトル〜の冒頭に「 [ 」をつけて、”views”の最後に「 ] 」をつけるということです。

もう1度言うと、ショートコードの冒頭と最後に[ ]をつけてくださいね、という意味です。

それぞれ解説します!

①【タイトルの付け方】

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ごと

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

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

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

出来上がりを見てみる

3つのコンテンツ

【右】こんな感じでサイドバーに表示させた場合

【左】固定ページに人気記事ランキングを作った場合のイメージ

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

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

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

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

くろーむ

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

ブログで本気で稼ぎたい人向け

スキルハックスのブログ講座»

動画は学びやすい

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

モンタニエ教授

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とかと違ってブログとかはコメント少ないよね。解決したとしてもお礼とかコメントすること稀かも笑

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

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

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

order_by=”views” → order_by=”comments”

と書き換えましょう。

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

おしゃれかっこいいならTHOR

» WordPressテーマ 「WING(AFFINGER5)」も大人気テーマ

こちらも読まれてます