WordPress
その他
運営中のサブブログ
主に私のデスク周りアイテムを紹介しています。
在宅作業の参考になるかもしれません。
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を選択
投稿画面に実装
/Wordと入力し、WordPress Popular Postsを選択。
SWELLの実装方法
当サイトテーマSWELL
には、ブログパーツというあらかじめブロックを登録してショートコードで呼び出せる機能があります。
ブログパーツ内でWordPress Popular Postsブロックを作成しておけば、呼び出しコードでどこにでも使えます。
例えば、ウィジェットにもコードを貼り付けるだけで表示されます。
WordPress Popular Postsブロック項目の解説
TITLE｜タイトル設定
ランキングの見出し部分です。
デフォルトでは、h2タグが使用されます。
ウィジェット側でタイトルを付けたほうがバランスが良いですね。
LIMIT｜投稿数設定
ランキングに表示したい記事数を設定できます。
あまり多くても読んで欲しい記事が目立ちませんので、5記事以内を推奨します。
SORT POSTS BY｜集計方法の設定
何を基準にランキングを並べるかの設定です。
Total views：これまでの総閲覧数
Avg.daily views：1日の平均閲覧数
Comments：コメントが多い順
TIME RANGE｜集計期間の選択
集計期間の設定です。
Last 24 Hours：直近24時間
Last 7 Days：直近7日間
Last 30 Days：直近30日間
All-time：全期間
Custom：以下を参照
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で指定できます。
複数指定する場合は、カンマで区切ってください。
投稿IDは、投稿一覧から見たいタイトルの上にマウスを乗せると表示されます。
AUTHOR ID(S)｜ユーザーID
ランキングに表示したい記事をユーザーIDでフィルターをかけれます。
一人運営であれば、空白でOKです。
複数の著者でフィルターを書ける場合は、カンマで区切ってください。
ユーザーIDは、ユーザー一覧からユーザー名の上にマウスを乗せると表示されます。
カテゴリー(CATEGORY)
ランキングをカテゴリー単位で指定できます。
複数指定する場合は、カンマで区切ってください。
カテゴリーIDは管理画面のカテゴリーから、見たいカテゴリーの上にマウスを乗せると表示されています。
タグ(POST_TAG)
ランキングをタグ単位で指定できます。
複数指定する場合は、カンマで区切ってください。
タグIDは管理画面のタグから、見たいタグの上にマウスを乗せると表示されています。
ちなみに当サイトテーマSWELLでは、投稿・カテゴリー・タグをそれぞれ開くと右側にIDが表示されます。
Posts settings｜投稿設定
投稿の詳細を設定できます。
変更するには、各項目にチェックしてください。
Shorten title｜記事タイトル制限
チェックを入れると、記事タイトルの表示に字数制限をかけれます。
指定した文字数以上だと省略して表示されます。
characters：文字数
words：単語数
基本は”文字数“を使いましょう。
指定した字数以降は「…」と表示されます。
タイトル字数に差があると見栄えが良くないため、、25字前後で制限をかけると良いでしょう。
Display post excerpt｜抜粋制限
チェックを入れると、記事の抜粋を表示できます。
Keep text format and links
チェックをすると抜粋内にリンクがある場合、そのままリンクとして表示されます。
characters：文字数
words：単語数
抜粋の表示例。
個人的に抜粋は邪魔だと思うので、チェック非推奨です。
Display post thumbnail｜サムネイル設定
アイキャッチ画像”ナシとアリ“の比較です。
基本的にあって良いと思いますが、タイトルリンクはコンパクトに収まりますので、ランキングの設置場所によって使い分けると良いでしょう。
チェックを入れると、アイキャッチ画像を表示してくれます。
Set size manually：手動でサイズを設定
THUMBNAIL WIDTH：画像の横幅
THUMBNAIL HEIGHT：画像の高さ
Use predefined size：規定のサイズ
thumbnail：メディア設定のサムネイルサイズ
medium：メディア設定の中サイズ
large：メディア設定の大サイズ
1536px×1536px
2048px×2048px
メディア設定に何も指定していない場合は、横幅128px×高さ75pxの画像が表示されます。
画像とタイトルを横並び：128×75
画像の下にタイトル：350×200
あたりがおすすめです。
Stats Tag settings｜統計タグ設定
ランキングに表示する項目を選択できます。
表示した項目にチェックをしましょう。
※.複数設置することも可能です。
Display comments count｜コメント数
TIME RANGEで設定した期間内にあったコメント数を表示します。
Display views｜閲覧数
TIME RANGEで設定した期間内の閲覧数を表示します。
Display author｜記事を書いたユーザー名
記事を書いた方のユーザー名を表示します。
ただ名前がリンクになっており、リンク先を設定するにはphpで作成する必要があるため、良くわからない方はおすすめしません。
Display date｜日付
6通りの日付を表示できます。
デフォルトは「Month Day,Year」が選択されています。
表示パターンは以下で解説。
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：以下で設定した日付形式を表示
管理画面の一般設定
↓
日付形式設定
Display taxonomy｜タクソノミー設定
記事のカテゴリーまたはタグを表示できます。
それぞれリンクになっています。
カテゴリー：記事のカテゴリーを表示
タグ：記事のタグを表示
※.タグを選択した場合でも「カテゴリ：タグ名」と表示されます。
フォーマット：投稿設定の「デフォルトの投稿フォーマット」
HTML Markup settings｜HTMLタグ設定
WordPress Popular PostsのHTMLタグを設定する項目です。
Use custom HTML Markup｜HTMLタグを変更
BEFORE TITLE/AFTER TITLE｜タイトルタグ
TITLEを使う場合、見出しのh2タグを使用するという意味です。
デザインも見出しh2がそのまま反映されます。
ただサイドバーに表示するなら、基本タイトルは未入力の方が良いため、気にしなくてOKです。
例えば、記事内にランキングを設置する場合は、h2タグのままですと目次にも反映されてしまうため、<div>タグなどに変更したほうが良いでしょう。
ただし、divタグに自分でCSSを指定する必要があるので、よくわからなければ設定不要です。
BEFORE POPULAR POSTS/AFTER POPULAR POSTS｜リストタグの枠
ランキングを並べて表示しているリストタグの枠の指定です。
特別な理由がない限り、変更する必要はありません。
POST HTML MARKUP｜リストタグおよび専用タグ設定
<li>タグは箇条書きのタグです、基本変更しません。
{}で囲まれた部分がWordPress Popular Postsに用意されている専用タグです。
例えば、デフォルトですと
{thumb}：サムネイル画像
{title}：記事タイトル
{stats}：7つの統計データから指定されたものを取得
となります。
| タグ | 取得内容 |
|---|---|
| {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｜デザインテンプレート
デフォルトで10パターンのデザインが用意されています。
それぞれどんな風に見えるか確認してください。
None
以降のテーマで、タイトルやカテゴリーリンクは独自に青く指定しています。
デフォルトは、黒字です。
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
アイキャッチ画像：正方形
タイトル：太字
カテゴリー：タイトル上(太字)
抜粋：なし
<li class="{current_class}">{thumb_img}<div class="wpp-item-data"><div class="taxonomies">{taxonomy}</div>{title}</div></li>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
アイキャッチ画像：長方形(大サイズ)
タイトル：太字
カテゴリー：アイキャッチ左下
抜粋：なし
<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
アイキャッチ画像：なし
背景色：グラデーショングリーン
タイトル：黒字×太字
カテゴリー：なし
抜粋：なし
<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
アイキャッチ画像：なし
背景色：グラデーションミッドナイト
タイトル：白字×太字
カテゴリー：なし
抜粋：なし
<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
アイキャッチ画像：なし
背景色：グラデーションイエロー
タイトル：黒字×太字
カテゴリー：なし
抜粋：なし
<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
アイキャッチ画像：なし
背景色：グラデーションレッド
タイトル：黒字×太字
カテゴリー：なし
抜粋：なし
<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
アイキャッチ画像：長方形(大サイズ)
タイトル：白字×太字
カテゴリー：アイキャッチ左タイトル上
抜粋：なし
<li class="{current_class}">{thumb}<div class="wpp-post-data">{taxonomy} {title}</div></li>Tiny
アイキャッチ画像：なし
タイトル：太字
カテゴリー：タイトル上
抜粋：なし
<li class="{current_class}"><div class="wpp-item-data">{category}</div> {title}</li>プラグイン不要SWELLという偉大なテーマについて
ここまでWordPress Popular Postsブロックを解説してきました。
実は当サイトテーマSWELLでは、人気記事ランキングを実装できるブロックが最初から用意されています。
しかも設定方法は投稿画面のサイドバーから選ぶだけなので、超簡単です。
デザインも以下の5パターンが用意されています。
カード型
リスト型
リスト型左右交互
サムネイル型
テキスト型
もちろん表示する項目は個別に設定できます。
さらにスマホとパソコンで羅列数を変更できたりもします。
他にも便利なブロック機能満載ですので、気になった方はぜひ以下をご覧になってみてください。
結論：これからはWordPress Popular Postsブロックに慣れていこう
以上、WordPress Popular Postsのブロックの使い方について解説しました。
やり方を覚えてしまえば、ショートコード実装より、ブロック実装のほうが遥かに楽ちんです。
特にクラシックエディタをお使いの方は、ぜひブロックをお試しください。
設定方法やデザインカスタムはこちら
あわせて読みたい
あわせて読みたい
この記事が気に入ったら
フォローしてね！
記事への質問等はこちらからどうぞ