VK Blocks Pro 1.67.0 でカテゴリーバッジブロックを追加しました


  1. 製品更新情報
  2. VK Blocks Pro
  3. VK Blocks Pro 1.67.0 でカテゴリーバッジブロックを追加しました

VK Blocks Pro 1.67.0 でカテゴリーバッジブロックを追加しました。このブロックを使えば、投稿一覧で記事のカテゴリーをバッジで表示させることができます。X-T9 など主にブロックテーマ向けのブロックですが、Lightning などクラシックテーマでも利用できます。

このブロックを利用するには?

Vektor Passport(ベクトルパスポート)に含まれる VK Blocks Pro があれば、ご利用いただけます。

Vektor Passportは、コピペで使える豊富なプロ品質プレミアムパターンをはじめ、WordPressテーマ・プラグインなどのベクトル主要製品・サービスを好きなだけ使える大変お得なライセンス製品です。

使い方

たとえば、クエリーループを利用して投稿一覧を表示させて、カテゴリーも表示したい場合、WordPress標準のカテゴリーブロックを利用すると、テキストのみでシンプルに表示されます。

WordPress標準 カテゴリーブロック

  • カテゴリーがテキストのみで表示される
  • 記事に複数のカテゴリーを設定していると、カテゴリーが複数表示されて表示が崩れてしまう

WordPress標準 カテゴリーブロックを使用したパターン

トップページ用 お知らせ一覧 – VK パターンライブラリ

コピペで使える WordPress のブロックパターンライブラリ「トップページ用 お知らせ一覧」のパターンです。

カテゴリーをバッジで表示させたいときに、VK Blocks Pro のカテゴリーバッジブロックをご利用ください。

VK Blocks Pro カテゴリーバッジブロック

  • VK Blocks Pro の投稿リストブロックのように、カテゴリーをバッジで表示できる
  • カテゴリーの背景には、各投稿タイプのカテゴリーで指定している色が反映される
  • ブロックだから、バッジの表示をより思いどおりに調整できる
  • 記事に複数のカテゴリーを設定していても、カテゴリーはひとつのみを表示するので表示が崩れない

クエリーループで投稿タイプを選んだあと、カテゴリーバッジブロックの「タクソノミーを選択」にて、その投稿タイプに割り振られているタクソノミーを選べます。

カテゴリーバッジブロックを使用したパターン

トップページ用 お知らせ一覧 カラム表示 – VK パターンライブラリ

コピペで使える WordPress のブロックパターンライブラリ「トップページ用 お知らせ一覧 カラム表示」のパターンです。

なお、VK Blocks Pro の投稿リストブロックであれば、投稿一覧でカテゴリーを簡単に見映えよく表示できます。投稿リストブロックを使わずに、投稿一覧のレイアウトをブロックを組み合わせて作り、カテゴリーの表示をお好みに調整したいときにカテゴリーバッジブロックを利用する、といった使い分けが可能です。

VK Blocks Pro 投稿リストブロック(テキスト1カラム)

  • カテゴリーがバッジで表示される
  • カテゴリーの背景には、各投稿タイプのカテゴリーで指定している色が反映される
  • 記事に複数のカテゴリーを設定していても、カテゴリーはひとつのみを表示する
2024年3月26日WordPress

コピペで簡単!現場で使えるブログカードを使ったブロックパターン12選!

2024年3月25日WordPress

グループブロックを使い倒せ -WordPressのブロックエディター

2024年3月16日WordPress

WordCamp Asia 2024 振り返り

カテゴリーバッジブロックについては、以下の動画でも詳しく解説しています。ぜひご覧ください。

フルサイト編集に対応したブロックテーマ X-T9

フルサイト編集対応ブロックテーマ

WordPress テーマ X-T9 は、WordPress 5.9 から実装されたフルサイト編集機能に対応した「ブロックテーマ」と呼ばれる新しい形式のテーマです。
ヘッダーやフッターなど、今までのテーマではカスタマイズが難しかったエリアもノーコードで簡単・柔軟にカスタマイズする事ができます。

パターンを使って

よりクオリティの高いサイトに

パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中!コピペしながら高品質なサイトを簡単に作れます。

PAGE TOP

このデモサイトは Vektor,Inc. のテーマとプラグインで構築されています。ご購入や詳細情報は下記のリンクもご参考ください。