MENU

運営中のサブブログ

主に私のデスク周りアイテムを紹介しています。
在宅作業の参考になるかもしれません。

マンニメバナー画像

趣味の1つ漫画アニメについて書いています。
鬼滅のレビューはコメント600件以上きました。

カゲオ
サイト管理人
当ブログはWordPressが今より楽しく、便利になるをテーマに分かりやすい解説記事を心がけています。
サブブログ|デスク環境構築サイト運営中⇒見てみる

WordPress Popular Postsブロックの使い方

当ページのリンクには広告が含まれています。
WordPress Popular Postsブロックの使い方

当記事では、人気記事WordPress Popular Postsのブロックの使い方を徹底解説します。

ウィジェットでの実装は、2024年6月頃に廃止される予定です。
今後はブロックまたは[wpp]ショートコードの実装が推奨されています。

設定方法やデザインカスタムはこちら

目次

管理人のデスク環境ブログも運営中です

在宅作業の参考になるアイテムがあるかもしれません。
デスク周りのアップデートを検討されている方はぜひ覗いてみてください。

WordPress Popular Postsの使い方

wppショートコードの実装方法

[wpp limit=5 range="last30days" stats_views=0]

クラシックエディタの方は、ウィジェットなら”カスタムHTML“または”テキスト“にショートコードを貼ります。
投稿画面ならそのままショートコードを貼ってください。
ショートコードに使えるパラメータは、こちらの記事が参考になります。
パラメータ・コンテンツタグまとめ

※.ただし今後はブロックエディタが主流になっていくため、早めの切り替えを推奨します。
そのため、以下のブロック実装方法も覚えておくと良いでしょう。

ブロックの実装方法

WordPress Popular Postsブロック

ウィジェットに実装

WordPress Popular Postsブロックウィジェット実装

管理画面サイドバーの”外観“→”ウィジェット
実装したいウィジェットを選択
+マークを押してブロックの中からWordPress Popular Postsを選択

投稿画面に実装

WordPress Popular Postsブロック投稿画面実装

/Wordと入力し、WordPress Popular Postsを選択。

SWELLの実装方法

当サイトテーマには、ブログパーツというあらかじめブロックを登録してショートコードで呼び出せる機能があります。

SWELLブログパーツの使い方

ブログパーツ内でWordPress Popular Postsブロックを作成しておけば、呼び出しコードでどこにでも使えます。
例えば、ウィジェットにもコードを貼り付けるだけで表示されます。

WordPress Popular Postsブロック項目の解説

TITLE|タイトル設定

WordPress Popular Postsブロックタイトル

ランキングの見出し部分です。
デフォルトでは、h2タグが使用されます。

ただしウィジェットに設置する場合、他の項目とのバランスが悪いため、未入力のほうが良いでしょう。

WordPress Popular Postsブロックとウィジェットタイトル

ウィジェット側でタイトルを付けたほうがバランスが良いですね。

LIMIT|投稿数設定

ランキングに表示したい記事数を設定できます。
あまり多くても読んで欲しい記事が目立ちませんので、5記事以内を推奨します。

SORT POSTS BY|集計方法の設定

WordPress Popular PostsブロックSORT POSTS BY設定

何を基準にランキングを並べるかの設定です。
Total views:これまでの総閲覧数
Avg.daily views:1日の平均閲覧数
Comments:コメントが多い順

TIME RANGE|集計期間の選択

WordPress Popular Postsブロック TIME RANGE設定

集計期間の設定です。
Last 24 Hours:直近24時間
Last 7 Days:直近7日間
Last 30 Days:直近30日間
All-time:全期間
Custom:以下を参照

WordPress Popular Postsブロック TIME RANGEカスタム設定

Minute(s):分
Hour(s):時間
Day(s):日
で調整できます。

Display only posts published within the selected Time Range

上記で設定した期間内の投稿だけを表示したい場合は、チェックします。
通常はノーチェックでOK。

POST TYPE(S)|投稿の週類

ランキングに表示する投稿の種類を指定できます。
通常の記事だけでよければ、デフォルトの「post」でOKです。

例えば、アクセスの多い固定ページもランキングに表示させたい場合は、以下のようにカンマで区切って入力してください。

post,page

POST ID(S) TO EXCLUDE|投稿ID

ランキングから除外したい記事を投稿IDで指定できます。
複数指定する場合は、カンマで区切ってください。

WordPress投稿ID確認方法

投稿IDは、投稿一覧から見たいタイトルの上にマウスを乗せると表示されます。

AUTHOR ID(S)|ユーザーID

ランキングに表示したい記事をユーザーIDでフィルターをかけれます
一人運営であれば、空白でOKです。

複数の著者でフィルターを書ける場合は、カンマで区切ってください。

WordPressユーザーID確認方法

ユーザーIDは、ユーザー一覧からユーザー名の上にマウスを乗せると表示されます。

カテゴリー(CATEGORY)

ランキングをカテゴリー単位で指定できます。

複数指定する場合は、カンマで区切ってください。

WordPressカテゴリーID確認方法
WordPressカテゴリーID確認方法

カテゴリーIDは管理画面のカテゴリーから、見たいカテゴリーの上にマウスを乗せると表示されています。

タグ(POST_TAG)

ランキングをタグ単位で指定できます。

複数指定する場合は、カンマで区切ってください。

WordPressタグID確認方法

タグIDは管理画面のタグから、見たいタグの上にマウスを乗せると表示されています。

SWELL投稿 カテゴリー タグID確認方法

ちなみに当サイトテーマでは、投稿・カテゴリー・タグをそれぞれ開くと右側にIDが表示されます。

Posts settings|投稿設定

WordPress Popular Posts Posts settings設定

投稿の詳細を設定できます。
変更するには、各項目にチェックしてください。

Shorten title|記事タイトル制限

WordPress Popular Posts Shorten title設定

チェックを入れると、記事タイトルの表示に字数制限をかけれます。
指定した文字数以上だと省略して表示されます。
characters:文字数
words:単語数
基本は”文字数“を使いましょう。

WordPress Popular Postsタイトル省略

指定した字数以降は「…」と表示されます。
タイトル字数に差があると見栄えが良くないため、、25字前後で制限をかけると良いでしょう。

Display post excerpt|抜粋制限

WordPress Popular Posts Display post excerpt設定

チェックを入れると、記事の抜粋を表示できます。
Keep text format and links
チェックをすると抜粋内にリンクがある場合、そのままリンクとして表示されます。
characters:文字数
words:単語数

WordPress Popular Posts抜粋表示

抜粋の表示例。
個人的に抜粋は邪魔だと思うので、チェック非推奨です。

Display post thumbnail|サムネイル設定

WordPress Popular Postsサムネイル画像有り無し

アイキャッチ画像”ナシとアリ“の比較です。
基本的にあって良いと思いますが、タイトルリンクはコンパクトに収まりますので、ランキングの設置場所によって使い分けると良いでしょう。

WordPress Popular Posts Set size manually設定

チェックを入れると、アイキャッチ画像を表示してくれます。
Set size manually:手動でサイズを設定
THUMBNAIL WIDTH:画像の横幅
THUMBNAIL HEIGHT:画像の高さ

WordPress Popular Posts Use predefined size設定

Use predefined size:規定のサイズ
thumbnail:メディア設定のサムネイルサイズ
medium:メディア設定の中サイズ
large:メディア設定の大サイズ
1536px×1536px
2048px×2048px

WordPress メディア設定の画像サイズ

メディア設定に何も指定していない場合は、横幅128px×高さ75pxの画像が表示されます。

WordPress Popular Postsサムネイルおすすめサイズ

画像とタイトルを横並び:128×75
画像の下にタイトル:350×200
あたりがおすすめです。

Stats Tag settings|統計タグ設定

WordPress Popular Posts Stats Tag settings

ランキングに表示する項目を選択できます。
表示した項目にチェックをしましょう。
※.複数設置することも可能です。

Display comments count|コメント数

WordPress Popular Postsコメント数表示

TIME RANGE設定した期間内にあったコメント数を表示します。

Display views|閲覧数

WordPress Popular Postsビュー数表示

TIME RANGE設定した期間内の閲覧数を表示します。

Display author|記事を書いたユーザー名

WordPress Popular Postsユーザー名表示

記事を書いた方のユーザー名を表示します。
ただ名前がリンクになっており、リンク先を設定するにはphpで作成する必要があるため、良くわからない方はおすすめしません。

Display date|日付

WordPress Popular Posts日付表示

6通りの日付を表示できます。
デフォルトは「Month Day,Year」が選択されています。
表示パターンは以下で解説。

WordPress Popular Posts Display date設定

Ralative:◯年前に投稿(今年度から投稿した日の年度を逆算)
Month Day,Year:1月 1,2024に投稿された(投稿日)
yyyy/mm/dd:2024/01/08に投稿された(投稿日)
mm/dd/yyyy:01/08/2024に投稿された(投稿日)
dd/mm/yyyy:08/01/2024に投稿された(投稿日)
WordPress Date Format:以下で設定した日付形式を表示

WordPress日付形式設定

管理画面の一般設定

日付形式設定

Display taxonomy|タクソノミー設定

WordPress Popular Postsタクソノミー表示

記事のカテゴリーまたはタグを表示できます。
それぞれリンクになっています。

WordPress Popular Posts Display taxonomy設定

カテゴリー:記事のカテゴリーを表示
タグ:記事のタグを表示
※.タグを選択した場合でも「カテゴリ:タグ名」と表示されます。
フォーマット:投稿設定の「デフォルトの投稿フォーマット」

フォーマットはテーマにより反映されないため、基本使いません

HTML Markup settings|HTMLタグ設定

WordPress Popular PostsのHTMLタグを設定する項目です。

Use custom HTML Markup|HTMLタグを変更

BEFORE TITLE/AFTER TITLE|タイトルタグ

WordPress Popular Posts  BEFORE TITLE/AFTER TITLE設定

TITLEを使う場合、見出しのh2タグを使用するという意味です。
デザインも見出しh2がそのまま反映されます。
ただサイドバーに表示するなら、基本タイトルは未入力の方が良いため、気にしなくてOKです。

例えば、記事内にランキングを設置する場合は、h2タグのままですと目次にも反映されてしまうため、<div>タグなどに変更したほうが良いでしょう。

ただし、divタグに自分でCSSを指定する必要があるので、よくわからなければ設定不要です。

BEFORE POPULAR POSTS/AFTER POPULAR POSTS|リストタグの枠

WordPress Popular Posts  BEFORE POPULAR POSTS/AFTER POPULAR POSTS設定

ランキングを並べて表示しているリストタグの枠の指定です。
特別な理由がない限り、変更する必要はありません。

POST HTML MARKUP|リストタグおよび専用タグ設定

WordPress Popular Posts  POST HTML MARKUP設定

<li>タグは箇条書きのタグです、基本変更しません。
{}で囲まれた部分がWordPress Popular Postsに用意されている専用タグです。
例えば、デフォルトですと
{thumb}:サムネイル画像
{title}:記事タイトル
{stats}:7つの統計データから指定されたものを取得
となります。

次のTHEMEを選択すると、専用タグが自動で割り当てられます。
使えるタグを列挙しておきました。

タグ取得内容
{author_copy}投稿者:ユーザー名を取得
Display authorにチェックする必要があります。
{author}ユーザー名のみ取得
Display authorにチェックする必要があります。
{category_copy}
{taxonomy_copy}
カテゴリ:カテゴリまたはタグ名を取得(リンク)
Display taxonomyにチェックし、カテゴリーまたはタグを選択する必要があります。
{category}
{taxonomy}
カテゴリーまたはタグ名のみ取得(リンク)
Display taxonomyにチェックし、カテゴリーまたはタグを選択する必要があります。
{comments_copy}◯件のコメント
Display comments countにチェックする必要があります。
{comments}コメント数のみ取得
Display comments countにチェックする必要があります。
{date_copy}DATE FORMATで設定した日付形式に投稿された
Display dateにチェックする必要があります。
{date}DATE FORMATで設定した日付形式のみ取得
Display dateにチェックする必要があります。
{views_copy}◯件のビュー
Display viewsにチェックする必要があります。
{views}ビュー数のみ取得
Display viewsにチェックする必要があります。
{stats}ユーザー名、カテゴリー、タグ、コメント、日付、ビュー数、投稿フォーマットの7つをこのタグ1つで取得
取得したい項目をStats Tag settingsでチェックを入れれば、赤字のタグは個別に設定する必要ありません。
{title}リンク付きの記事タイトルを取得
{text_title}
{title_attr}
リンクなしの記事タイトルを取得
{thumb}リンク付きのアイキャッチ画像を取得
{thumb_img}リンクなしのアイキャッチ画像を取得
{thumb_url}リンクなしのアイキャッチ画像のURLを取得
Display post thumbnailにチェックをする必要があります。
基本使いません。
{url}リンクなしの記事URLを取得
基本使いません。
{excerpt}記事の抜粋を取得
Display post excerptにチェックをする必要があります。
{item_position}ランキングの数値を取得
例えば{item_position}位とすると、1位,2位,3位…と表示可能。
{pid}投稿IDを取得
基本使用しません。
{rating}WP-PostRatings(記事の評価)プラグインを使用している方は、記事の評価を取得
{score}WP-PostRatings(記事の評価)プラグインを使用している方は、記事の評価を整数で取得
{current_class}デザインテンプレートを使用する際、WordPress Popular Posts側で用意されたCSS用classを割り当てる。
個別設定では使用しません。
{total_items}LIMTで設定したランキング表示数を取得
基本使いません。

色の付いていないタグがメインで使うものです。

THEME|デザインテンプレート

WordPress Popular Posts THEME設定

デフォルトで10パターンのデザインが用意されています。
それぞれどんな風に見えるか確認してください。

WordPress Popular Postsテーマ設定変更箇所

デザインテンプレートを使用すると、①Posts settings(投稿設定)以下の項目は自動で選択されます。
それにより、②POST HTML MARKUP(専用タグ)も置き換わります。
ただし、そこから部分的に微調整することも可能です。

None

デフォルトです。
画像サイズやタイトル、表示したい項目を1から設定できます。

以降のテーマで、タイトルやカテゴリーリンクは独自に青く指定しています。
デフォルトは、黒字です。

Cards

WordPress Popular Posts テーマCards表示

アイキャッチ画像:正方形
タイトル:太字
カテゴリー:タイトル上(太字)
抜粋:あり

<li class="{current_class}">{thumb_img} <div class="wpp-item-data"><div class="taxonomies">{taxonomy}</div>{title} <p class="wpp-excerpt">{excerpt}</p></div></li>

Cards Compact

WordPress Popular Posts テーマCards ComPact表示

アイキャッチ画像:正方形
タイトル:太字
カテゴリー:タイトル上(太字)
抜粋なし

<li class="{current_class}">{thumb_img}<div class="wpp-item-data"><div class="taxonomies">{taxonomy}</div>{title}</div></li>

Cardview

WordPress Popular Posts テーマCardview表示

アイキャッチ画像:長方形(大サイズ)
タイトル:太字
カテゴリー:アイキャッチ左下
抜粋:あり

<li class="{current_class}"><div class="wpp-thumbnail-container">{thumb}<div class="taxonomies">{taxonomy}</div></div> <div class="wpp-item-data">{title} <p class="wpp-excerpt">{excerpt}</p></div></li>

Cardview Compact

WordPress Popular Posts テーマCardview ComPact表示

アイキャッチ画像:長方形(大サイズ)
タイトル:太字
カテゴリー:アイキャッチ左下
抜粋なし

<li class="{current_class}"><div class="wpp-thumbnail-container">{thumb}<div class="taxonomies">{taxonomy}</div></div> <div class="wpp-item-data">{title}</div></li>

Evergreen

WordPress Popular Posts テーマEvergreen表示

アイキャッチ画像なし
背景色:グラデーショングリーン
タイトル:黒字×太字
カテゴリーなし
抜粋なし

<li class="{current_class}" style="--item-position: {item_position}; --total-items: {total_items};"><div class="item-position"></div> <div class="item-data">{title}</div></li>

Midnight

WordPress Popular Posts テーマMidnight表示

アイキャッチ画像なし
背景色:グラデーションミッドナイト
タイトル:白字×太字
カテゴリーなし
抜粋なし

<li class="{current_class}" style="--item-position: {item_position}; --total-items: {total_items};"><div class="item-position"></div> <div class="item-data">{title}</div></li>

Sunrise

WordPress Popular Posts テーマSunrise表示

アイキャッチ画像なし
背景色:グラデーションイエロー
タイトル:黒字×太字
カテゴリーなし
抜粋なし

<li class="{current_class}" style="--item-position: {item_position}; --total-items: {total_items};"><div class="item-position"></div> <div class="item-data">{title}</div></li>

Sunset

WordPress Popular Posts テーマSunset表示

アイキャッチ画像なし
背景色:グラデーションレッド
タイトル:黒字×太字
カテゴリーなし
抜粋なし

<li class="{current_class}" style="--item-position: {item_position}; --total-items: {total_items};"><div class="item-position"></div> <div class="item-data">{title}</div></li>

Tiles

WordPress Popular Posts テーマTiles表示

アイキャッチ画像:長方形(大サイズ)
タイトル:白字×太字
カテゴリー:アイキャッチ左タイトル上
抜粋なし

<li class="{current_class}">{thumb}<div class="wpp-post-data">{taxonomy} {title}</div></li>

Tiny

WordPress Popular Posts テーマTiny表示

アイキャッチ画像なし
タイトル:太字
カテゴリー:タイトル上
抜粋なし

<li class="{current_class}"><div class="wpp-item-data">{category}</div> {title}</li>

プラグイン不要SWELLという偉大なテーマについて

ここまでWordPress Popular Postsブロックを解説してきました。

実は当サイトテーマでは、人気記事ランキングを実装できるブロックが最初から用意されています。

SWELL投稿リストブロック設定
SWELL投稿リストブロック設定2

しかも設定方法は投稿画面のサイドバーから選ぶだけなので、超簡単です。
デザインも以下の5パターンが用意されています。

カード型

リスト型

リスト型左右交互

サムネイル型

テキスト型

もちろん表示する項目は個別に設定できます。
さらにスマホとパソコンで羅列数を変更できたりもします。
他にも便利なブロック機能満載ですので、気になった方はぜひ以下をご覧になってみてください。

結論:これからはWordPress Popular Postsブロックに慣れていこう

以上、WordPress Popular Postsのブロックの使い方について解説しました。

やり方を覚えてしまえば、ショートコード実装より、ブロック実装のほうが遥かに楽ちんです。

特にクラシックエディタをお使いの方は、ぜひブロックをお試しください。

設定方法やデザインカスタムはこちら

WordPress Popular Postsブロックの使い方

この記事が気に入ったら
フォローしてね!

シェアしていただけると励みになります
  • URLをコピーしました!

記事への質問等はこちらからどうぞ

コメントフォーム

※日本語が含まれない内容は投稿できません。

目次