Menu
テーマ切り替え

WordPress Popular Postsのショートコードで連番で順位表示

SS 4

WordPress Popular Postsはサイトに人気記事を表示させる際に便利なプラグイン。ウィジェットなどを使用して表示することができますが、今回は『post_html』利用した表示について。

人気記事を表示させることができるWordPressのプラグイン。導入するとウィジェットなどから人気記事を表示できるようになります。 導入方法も簡単で、基本的にインストールし有効化すれば使用可能になります。

https://ja.wordpress.org/plugins/wordpress-popular-posts/

実際に表示してみましょう

今回はpost_htmlを使用した連番(順位)の表示です。 post_htmlで使用できる変数{item_position}を使用することにより表示。

ショートコードでの使用はこんな感じ。 今回は順番表示だけなので余計なのもありますが、30日前までの集計期間の投稿をPV数の順で最大100件サムネイル付き表示って感じで指定しています。

[wpp range='last30days' order_by='views' post_type='post' limit='100' thumbnail_width='120' thumbnail_height='90' post_html='<li><span class="badge badge-danger">{item_position}</span>{thumb} <a href="{url}">{text_title}</a></li>']

同様の内容をテーマに直接記述するならこのような形になります。

<?php
$args = array(
  'range' => 'last30days',
  'order_by' => 'views',
  'post_type' => 'post',
  'limit' => 100,
  'thumbnail_width' => 120,
  'thumbnail_height' => 90,
  'post_html' => '<li><span class="badge badge-danger">{item_position}</span>{thumb} <a href="{url}">{text_title}</a></li>'
);
wpp_get_mostpopular($args);
?>

上記の内容でこのように表示されます。 数字の部分はBootstrapの.badgeを使用して簡単にやってますが、装飾はお好みに合わせてどうぞ。

人気順番号表示

ulタグをolに変更して出力させる

wpp_startやwpp_endを使用して、出力される値の先頭や末尾につける文字列を指定も可能。 こっちの方が装飾しやすいかな。

'wpp_start' => '<ol>',
'wpp_end' => '</ol>',

post_htmlで使用できる変数

標準で結構用意してくれています。

{author}:リンクされた著者名を返します。 {thumb}:投稿/ページにリンクされたサムネイルを返します。thumbnail_widthやthumbnail_heightでサイズ指定可能。 {thumb_img}:投稿/ページにリンクされないサムネイル画像を返します。thumbnail_widthやthumbnail_heightでサイズ指定可能。 {thumb_url}:サムネイルのURLを返します。 {title}:リンクされた投稿/ページのタイトルを返します。 {pid}:投稿/ページIDを返します。 {excerpt}(または{summary}):投稿/ページの抜粋を返します。 {stats}:デフォルトの統計タグを返します。 {rating}:投稿/ページの現在の評価を返します。WP-PostRatingsをインストールして有効にする必要あり。 {score}:投稿/ページの現在の評価を整数として返します。WP-PostRatingsをインストールして有効にする必要あり。 {url}:投稿/ページのURLを返します。 {text_title}:投稿/ページのタイトルテキストを返します。 {author_copy}:リンクされた著者名をコピーとともに返します。 {category}:リンクされたカテゴリ名を返します。 {category_copy}:コピー付きのリンクされたカテゴリ名を返します。 {taxonomy}:リンクされた分類名を返します。 {taxonomy_copy}:リンクされた分類名をコピーとともに返します。 {views}:ビュー数のみを表示。 {views_copy}:コピーでビュー数を返します。 {comments}:コメント数のみを返す。 {comments_copy}:コピーでコメント数を返します。 {date}:投稿/ページの日付を返します。stats_dateの使用が必要。 {date_copy}:投稿/ページの日付をコピーとともに返します。 {total_items}:投稿の数を出力(人気記事に該当するトータル数)。 {item_position}:リスト内の投稿の位置を出力。

慣れているならWPP_Queryを使った方が楽かも

バージョン4から追加されたWPP_Query。 wp_queryのような使い方が可能になっているので、そっちの方でいろいろやった方が楽な方も多いかもしれませんが、プラグインをインストールすればウィジェットやショートコードで簡単に実装できますので、お好きな方法で使ってみてください。

WordPress Popular PostsのPV数を投稿一覧に表示

RU DESIGN
AUTHOR

RU DESIGN

個人開発者として、Webサイト制作やAIを活かした開発に取り組んでいます。このブログでは、私が実際に試して「これは使える!」と思った技術や、自作の便利ツールをシェアしています。一緒に技術を楽しんでいきましょう!

この記事をシェア:

関連記事