カテゴリーバッジブロックは、記事のカテゴリーをバッジで表示できるブロックです。X-T9 など主にブロックテーマ向けのブロックですが、Lightning などクラシックテーマでも利用できます。
カテゴリーブロック（WordPress 標準）との違い
たとえば、クエリーループを利用して投稿一覧を表示させてカテゴリーも表示したいとします。
カテゴリーブロック（WordPress 標準）
- カテゴリーがテキストのみで表示される
- 記事に複数のカテゴリーを設定していると、カテゴリーが複数表示されて表示が崩れてしまう
以下のパターンはカテゴリーブロックを使用しています。参考にしてください。
カテゴリーバッジ（VK Blocks Pro）
- VK Blocks Pro の投稿リストブロックのように、カテゴリーをバッジで表示できる
- カテゴリーの背景には、各投稿タイプのカテゴリーで指定している色が反映される
- ブロックだから、バッジの表示をより思いどおりに調整できる
- 記事に複数のカテゴリーを設定していても、カテゴリーはひとつのみを表示するので表示が崩れない
以下のパターンはカテゴリーバッジを使用しています。参考にしてください。
トップページ用 お知らせ一覧 カラム表示 | VK パターンライブラリ
コピペで使える WordPress のブロックパターンライブラリ「トップページ用 お知らせ一覧 カラム表示」のパターンです。
カテゴリーバッジの使い方
クエリーループで投稿タイプを選んだあと、カテゴリーバッジブロックの「タクソノミーを選択」にて、その投稿タイプに割り振られているタクソノミーを選びます。
カテゴリーやタームの複数表示
以下の例のように、カテゴリーやタームを複数表示させることもできます。制作実績一覧に実績カテゴリーと業種を同時に表示しています。
補足
上の例では、カスタム投稿「制作実績」を以下のように設定しています。
- カスタムタクソノミー：実績カテゴリー
- ターム：コーポレートサイト、採用サイト、ランディングページ（LP）…
- カスタムタクソノミー：業種
- ターム：建築土木、システム開発、士業…
- 最大表示数：すべての分類（ターム）を表示する場合は 0、一つだけ表示の場合は 1、複数表示の場合は 2 以上に設定します。
- バッジの間隔：バッジの間隔を調整できます。
以下は講師紹介ページの例です。各講師に設定した担当科目（ターム）をすべて表示しています。
なお、VK Blocks Pro の投稿リストブロックであれば、投稿一覧でカテゴリーを簡単に見映えよく表示できます。投稿リストブロックを使わずに、投稿一覧のレイアウトをブロックを組み合わせて作り、カテゴリーの表示をお好みに調整したいときにカテゴリーバッジブロックを利用する、といった使い分けが可能です。
VK Blocks Pro 投稿リストブロック（テキスト1カラム）
- カテゴリーがバッジで表示される
- カテゴリーの背景には、各投稿タイプのカテゴリーで指定している色が反映される
- 記事に複数のカテゴリーを設定していても、カテゴリーはひとつのみを表示する
カテゴリーバッジブロックについては、以下の動画でも詳しく解説しています。ぜひご覧ください。
このブロックを利用するには？
Vektor Passport（ベクトルパスポート）に含まれる VK Blocks Pro があれば、ご利用いただけます。
Vektor Passportは、コピペで使える豊富なプロ品質プレミアムパターンをはじめ、WordPressテーマ・プラグインなどのベクトル主要製品・サービスを好きなだけ使える大変お得なライセンス製品です。