私は VK Dynamic If Block をこんなふうに使っています

石川さんの昨日の記事「知ってました？WordPressのブロックテーマって実は多言語サイトにめちゃめちゃ相性がいいんです。」、ご覧になりましたか。VK Dynamic If Block で言語で条件分岐してコンテンツを出し分ける使い方が紹介されています。

それでは、石川さんに続いて12月18日の記事を投稿します。タイトルでおわかりの通り、この記事も VK Dynamic If Block に関する内容です😊

ご覧になっている画面左上に↓このようなコンテンツが表示されていますが、邪魔だと思いますので、ひとまず閉じるボタンをクリックして非表示にしてから読み進めてください。

VK Dynamic If Block ってなに？

VK Dynamic If Block の概要についてはベクトルスタッフの久納さんが VWS アドベントカレンダーに12月3日に投稿された記事「VK Dynamic If Block の痒い所に手が届く使い方紹介」で最初にわかりやすく説明されています。久納さんのこの記事にも VK Dynamic If Block の便利な使い方がいくつも紹介されていますので、まだご覧になっていない方はぜひどうぞ。

VK Dynamic If Block はブロックテーマのサイト編集画面で利用することを主眼に置いて開発されたプラグインで、久納さん、石川さんの記事でもブロックテーマでの利用について書かれていますが、このプラグイン、私が大好きな Lightning などのクラシックテーマでも活躍してくれるんです。

私はお客様の WordPress サイトを Lightning で制作することがほとんどですが、最近 VK Dynamic If Block をある目的で使わせていただくようになって、これがとても役に立っています。

久納さんの記事の王道的なネタに対して、この記事はニッチな小ネタですが、WordPress サイトを受託制作されている方のお役に立てると思いますので、紹介させていただきます。

私が VK Dynamic If Block を使っている場面

標準投稿と共通の操作でお客様がコンテンツを追加できるように、コンテンツをカスタム投稿タイプで作ることがあります。

例えば、こちらのページの「測量機器」と「ソフトウェア」はそれぞれが別々のカスタム投稿タイプになっていて、クエリーループを使って固定ページにカスタム投稿タイプの投稿リストを表示しています。

このような作りになっていても、もしかしたらお客様が操作に戸惑ってしまうかもしれませんし、勘違いしてクエリーループ内の投稿テンプレートを書き換えてしまうかもしれません。

そこで、VK Dynamic If Block の出番です。

いまご覧になっているこの記事をブラウザで再読み込みしてください。画面左上に「このページを更新する際の注意事項」が表示されます。

お客様がログインした状態でページを表示したときにこの説明が表示されるようになっていて、さらに動画を使った操作マニュアルを参照できるようにしてあるので、「紙のマニュアルよりわかりやすいし、操作を忘れてしまったらどうしようという不安がない」と多くのお客様からご好評をいただいています。

作り方

作り方は以下の通りです。

ブロックエディターが使える環境であれば、ほとんどのテーマで実装できると思いますが、ベクトル製プラグイン VK Blocks Pro が必要です。
VK Blocks Pro の入手方法についてこの記事の最後に書いてあります。

手順① Dynamic If ブロックを置く

Dynamic If ブロックを置いて、以下のように設定します。

条件タイプ	ログインユーザーのみ
ログインユーザーにのみ表示	有効

この設定により、ログインしている状態のときだけブロックを表示することができます。

この記事に表示しているブロックは説明の都合上、Dynamic If ブロックを使用していません。

固定ページ内のどこに Dynamic If ブロックを置いても動作しますが、固定ページにお客様が書き換える部分もあると思いますので、最後に置くのがいいでしょう。

手順② 固定表示ブロックを置く

Dynamic If ブロックの中に VK Blocks Pro の固定表示ブロックを置いて、固定表示ブロックを以下のように設定します。

条件タイプ	常に表示
固定位置	左
固定位置の基準	上部
上部からの固定位置	15 VH（これはお好みで）
閉じるボタンを表示	有効
ブラウザを閉じるまで再表示しない 設定箇所が下の方にあります	有効

この設定により、閉じるボタンでかんたんにブロックを非表示にできて、作業終了するまで（ブラウザを閉じるまで）ブロックが表示されなくなります。

この記事に表示しているブロックは説明の都合上、ブラウザで再読み込みすればブロックが表示されるようにしてあります。

手順③ 表示したいコンテンツを作る

この記事の例ではグループブロックと枠線ボックスを以下のように使用しています。
表示する枠線ボックスの横位置を調整するために、グループブロックで囲んで、グループブロックの左パディングを 50px に設定してあります。

まとめ

ちょっと前まで、PHP と JavaScript と CSS で時間をかけてコーディングしなければこういうことができませんでした。

「ブラウザを閉じるまで再表示しない」って、手間がかかるんですよね。

アイディアを思いついても実装するところまでなかなか進まなかったのですが、いまは信じられないくらいかんたんに実装できます。

しかも、ブロックをコピペするだけで他のサイトで使い回せるなんて、いいどころか、最高ですよ！

ノーコードであっという間にこんなことができて…
WordPress とベクトル製品の進化はすごい！

アドベントカレンダーへのご参加をお待ちしてます！

アドベントカレンダーの枠がまだ少し空いてます。
「書いてみたいかも…」「これなら話せるかも？」って思ったら、ほんとに気軽に参加してOKです。
いっしょにカレンダー盛り上げてくれる人、待ってます〜！

VK Blocks Pro の入手方法

VK Blocks Pro は有料の WordPress プラグインですが、単体では販売されていなくて、Vektor Passport というライセンス製品に含まれて販売されています。

Vektor Passport は、コピペで使える豊富なプロ品質プレミアムパターンをはじめ、Lightning G3 Pro Unit、VK Blocks Pro などのベクトル主要製品・サービスを好きなだけ使える大変お得なライセンス製品です。ライセンス1つで自分が制作・管理する複数のサイトに使うことができます。ライセンス期間は 1年 / 3年 / 5年 から選べます。

サイト運営者プロフィール

対馬 俊彦魚沼情報サービス・ベクトル公式テクニカルパートナー

【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

≫メールでのお問い合わせはこちら

最新の投稿

この著者の記事一覧

• WordPress2025年12月26日スターターパックのトップページの新着表示のデザインが増えました
• WordPress2025年12月26日WordPress の音声ブロックの音量を設定するやり方
• WordPress2025年12月25日WordPress 6.9 の新機能 – 所要時間と単語数
• WordPress2025年12月25日最適なインライン画像のサイズを設定するには