WP Manifestindependent plugin directory
manifest / editor / next-related-posts-query

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

0stars
0forks

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.zip

WordPress ブロックエディター(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 を含むあらゆるテーマで動作

インストール

  1. プラグインファイルを /wp-content/plugins/next-related-posts-query/ にアップロード
  2. WordPress 管理画面の「プラグイン」から有効化
  3. 投稿テンプレートまたは個別投稿に 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