NExT Related Posts Query Block
WordPress block plugin: Related Posts Query Block. Works like the core Query Loop — add inner blocks to design each post's layout.
by NExT-Season, WordPress Telex · github.com/atsushia/next-related-posts-query
Install
No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:
wp plugin install https://github.com/atsushia/next-related-posts-query/archive/refs/heads/main.zipWordPress ブロックエディター(Gutenberg)向けの関連投稿クエリブロックです。現在の投稿が持つカテゴリーやタクソノミーをもとに関連投稿を取得・表示します。コア Query Loop ブロックと同様に、インナーブロックで各投稿のレイアウトを自由に設計できます。
機能
- Query Loop ライクな設計 —
next/post-templateインナーブロックで関連投稿ごとのレイアウトを自由にカスタマイズ - ポストタイプ選択 — 取得対象のポストタイプを指定可能(デフォルト: 現在の投稿と同じタイプ)
- タクソノミー選択 — 関連判定に使用するタクソノミーを個別に指定可能(デフォルト: すべて使用)
- クロスポストタイプ対応 — 別ポストタイプ選択時はそのタイプのタクソノミーを表示・使用。カスタムポストタイプ×カスタムタクソノミーの横断検索が可能
- グリッド / リスト切替 — ツールバーからグリッド表示またはリスト表示を切替
- カラム数設定 — グリッド時は 1〜4 列で指定可能
- ブロック間隔(blockGap)対応 — エディターで設定した間隔がフロントエンドに反映
- unitone テーマ対応(間隔: gap) — unitone テーマ使用時は標準の「ブロックの間隔」が非表示になり、unitone の「間隔: gap」コントロールで間隔を設定可能
- レスポンシブ対応 — 600px 以下で自動的に 1 カラム表示
- 並び順設定 — 投稿順(最新/過去)・タイトル順(A→Z / Z→A)から選択可能
- 表示件数設定 — 1〜12 件の範囲で指定可能
- 自動除外 — 現在表示中の投稿は結果から自動的に除外
- ブロックリンク対応 — 投稿カード全体をクリッカブルにするオーバーレイリンク機能(unitone テーマの「ブロックリンクを使用する」と同等)。
pointer-events方式により unitone を含むあらゆるテーマで動作
インストール
- プラグインファイルを
/wp-content/plugins/next-related-posts-query/にアップロード - WordPress 管理画面の「プラグイン」から有効化
- 投稿テンプレートまたは個別投稿に NExT Related Posts Query ブロックを追加
使い方
基本設定
ブロックを追加すると、サイドバーに以下の設定パネルが表示されます。
Query Settings(クエリ設定)
| 設定項目 | 内容 |
|---|---|
| Post Type | 関連投稿を取得するポストタイプ。Auto で現在の投稿と同じタイプを使用 |
| Taxonomies | 関連判定に使用するタクソノミー。未チェックの場合はすべてのタクソノミーを使用 |
ポストタイプを変更すると、選択したポストタイプのタクソノミーが表示されます。カスタムポストタイプ固有のタクソノミーも選択できます。ポストタイプを切り替えると、タクソノミー選択は自動的にリセットされます。
Display Settings(表示設定)
| 設定項目 | 内容 |
|---|---|
| Number of posts | 表示件数(1〜12) |
| 並び順 | 投稿順 (最新から) / 投稿順 (過去から) / A → Z / Z → A |
レイアウトのカスタマイズ
ブロック内の NExT Post Template ブロックでレイアウトを設計します。ツールバーのアイコンでグリッド / リストを切り替え、インスペクターでカラム数・ブロック間隔・ブロックリンクを設定できます。
NExT Post Template インスペクター設定
| 設定項目 | 内容 |
|---|---|
| Columns | グリッド時の列数(1〜4) |
| ブロックの間隔 | 投稿カード間の間隔。unitone テーマ使用時は非表示(unitone の「間隔: gap」を使用) |
| ブロックリンクを使用する | オンにすると投稿カード全体がクリッカブルになる。カード内の個別リンク・ボタンは引き続き独立してクリック可能 |
コアブロック(Post Title・Post Featured Image・Post Date・Post Excerpt など)は自動的に各関連投稿のデータを参照します。
デフォルトテンプレート:
NExT Post Template (3カラムグリッド)
└── Group (vertical flex)
├── Post Featured Image (リンクあり)
├── Post Title (h4, リンクあり)
├── Post Date
└── Post Excerpt (20 words)
動作要件
| 項目 | バージョン |
|---|---|
| WordPress | 6.3 以上 |
| PHP | 7.0 以上 |
ブロック情報
| 項目 | 値 |
|---|---|
| 外部ブロック名 | next/related-posts-query |
| テンプレートブロック名 | next/post-template |
| テキストドメイン | next-related-posts-query |
| REST 名前空間 | next-related-posts-query/v1 |
| カテゴリー | theme |
外部ブロック属性(next/related-posts-query)
| 属性 | 型 | デフォルト | 説明 |
|---|---|---|---|
postType |
string | "" |
取得対象のポストタイプ(空 = 自動) |
taxonomies |
array | [] |
関連判定に使うタクソノミースラッグの配列(空 = すべて) |
numberOfPosts |
number | 3 |
表示件数(最大 12) |
テンプレートブロック属性(next/post-template)
| 属性 | 型 | デフォルト | 説明 |
|---|---|---|---|
layout.type |
string | "grid" |
レイアウト種別("grid" / "flex") |
layout.columnCount |
number | 3 |
グリッド列数(1〜4) |
isLink |
boolean | false |
カード全体をオーバーレイリンクで覆う(ブロックリンク) |
style.spacing.blockGap |
string | — | ブロック間隔(WordPressスペーシングプリセット対応) |
開発
必要環境
- Node.js
- npm
セットアップ
npm install
ビルド
# 本番ビルド
npm run build
# 開発モード(ウォッチ)
npm run start
その他コマンド
npm run lint:js # JavaScript リント
npm run lint:css # CSS リント
npm run format # コード整形
npm run plugin-zip # プラグイン ZIP 作成
よくある質問
関連投稿が表示されない場合は? 現在の投稿と同じタクソノミータームを持つ公開済み投稿が存在しない場合、ブロックはフロントエンドで何も出力しません。タクソノミーが選択されている場合は、現在の投稿がそのタクソノミーにタームを持っているか確認してください。
カスタムポストタイプでも使えますか?
はい。Post Type を Auto にすると現在の投稿と同じカスタムポストタイプを自動的に使用します。手動で別のポストタイプを指定することも可能です。
カスタムポストタイプ×カスタムタクソノミーで関連投稿を取得するには? Post Type で対象のポストタイプを選択すると、そのポストタイプに登録されているタクソノミーが表示されます。使用するタクソノミーをチェックすると、現在の投稿がそのタクソノミーに持つタームをもとに関連投稿を検索します。現在の投稿とターゲットポストタイプの両方に同じタクソノミーが登録されている必要があります。
ブロック間隔(gap)が反映されない場合は? 投稿テンプレートブロックを選択し、インスペクターの「ブロックの間隔」から設定してください。unitone テーマ使用時は「ブロックの間隔」が非表示のため、unitone の「間隔: gap」コントロールを使用してください。
ライセンス
GPLv2 or later — https://www.gnu.org/licenses/gpl-2.0.html