アドベントカレンダー参加中！
この記事は「Vektor WordPress Solution Advent Calendar 2025」の12月3日の記事になります。
ブロックテーマでの制作案件が増えてきて、「トップページだけヘッダー変えたいんだけど、どうやるの？」「固定ページ一部だけ余白を消すって、テンプレート増やすしかないの？」とお悩みの普段制作をしている方を中心に、ブロックエディタを触れる方なら誰でも使える便利な条件分岐を、具体例とともに紹介していきます。
こんにちは、スタッフの久納です。
前回の、石川さんによる『ブロックエディタでここまでできる！レスポンシブでの見せ方の小技！』の記事は読まれましたか？
画面サイズによる細かなデザイン調整など、制作の裏側まで丁寧に紹介されていて、とても読み応えがあります。まだの方はぜひチェックしてみてください！
引き続き、『VK Dynamic If Block の痒い所に手が届く使い方紹介』を紹介していきたいと思います。
VK Dynamic If Block は、WordPress のブロックテーマで PHP の if 構文のような条件分岐をノーコードで実現できる、とても便利なプラグインです。機能が盛りだくさんすぎて全部は紹介しきれませんが、今回は 実案件でもよく使う「痒いところに手が届く」使い所をピックアップして紹介します。
なお、2023年にも 松田大＠ETBS合同会社代表 さんが素敵な紹介記事を書いてくださっていますので、まずはこちらをご紹介します！
VK Dynamic If Block とは
「VK Dynamic If Block」という名前は知っているけれど、具体的にどんなことができるの？という方も多いかもしれません。ここでは、公式ページの説明を一部引用しながら、その概要を簡単にご紹介します。
主にテーマの作成・カスタマイズにおいて、クラシックテーマでは PHP の If 構文を用いてページ毎に表示要素を切り替える手法が一般的でした。しかしながら、HTMLファイルで構成されるブロックテーマでは is_front_page() や is_single() といった PHP の関数は使う事ができません。
その結果、例えばサイドバーだけ違うだけのケースでも複数のテンプレートが必要となり、修正の際はテンプレートの数だけ調整が必要になってしまいます。
しかしながら、この VK Dynamic If Block プラグインがあれば、 PHP の If 構文のような条件分岐をノーコードで簡単に実現できます。
条件分岐をノーコードで簡単に実現できる VK Dynamic If Block
トップページ用のヘッダーの出しわけ
ウェブサイト制作をしていて、「トップページだけヘッダーのデザインを変えたい！」ということ、よくありますよね。
よくあるのは
- トップページだけヘッダーを透過にしたい
- ヒーローエリアに馴染むヘッダーにしたい
というケースです。
これをブロックテーマ側で実現しようとすると、追加テンプレートが必要になることもありますが、 VK Dynamic If Block ならブロックだけで OKです！（編集画面の微調整で少しcssは書きます）
使い方イメージ
VK FullSite Installer用のデモサイト、「ヘアサロン（ミニマル）」を例に、使い方を書きます。
12月3日（水）まで！パスポートユーザーは「ヘアサロン」サイトがインストール無料！
Vektor WordPress Advent Calendar 2025開始。12/3までベクトルパスポート会員は「ヘアサロン」デモを無料インストール可能。VK FullSite Installer対応。一般参加者も募集中。
トップページ用ヘッダーを作成して、 VK Dynamic If Block でフロントページのみの条件分岐
フロントページ用のテンプレートを開き、トップページ用のヘッダーを作成、VK Dynamic If Block でラップして、以下の条件で条件分岐します。
- 条件タイプ：ページタイプ
- ページタイプ：フロントページ ( is_front_page() )
トップページ以外のヘッダーを作成して、 VK Dynamic If Block で「除外指定」をオン
続けて、表示条件は「1」のままで、除外指定を「ON」にします。
そのほか、設定のポイント
透明背景のヘッダーなので、ヒーローエリアの上にヘッダーを被せるため、コンテンツのセクションはネガティブマージン（マイナス）を設定しています。
追加 CSS で編集画面を微調整
- 編集画面の背景が通常は白のため、ヘッダーの背景が透明で白文字ではヘッダーが真っ白になってしまうため、編集しやすいように「外観 > エディター > スタイル > 追加CSS」にCSSで編集画面にのみヘッダーの背景に色をつけています
- ヘッダーの下にヒーローエリアが埋まるようにするため、「STEP 3」でブロックスタイルでマイナスマージンでオフセットしていますが、編集画面では編集しにくくなってしまうため、margin-top:0 で上書きしています
固定ページテンプレートで、特定ページのみ表示／非表示
固定ページテンプレートを使っていると、
- 共通で余白（スペーサー）を入れている
- 共通でフッター上に CTA セクションを置いている
など「全ページ共通のデザイン」があると思います。
でも実際には、
- 特定ページだけ余白を消したい
- 特定ページだけ CTA を表示したくない
という微調整が必要な時があります。
テンプレートの余白編
例えば固定ページテンプレートに「ページ上下に大きめの余白（スペーサー）」を置いたとします。でも実際にページを作成していくと、特定のページだけデザインの都合上で下の余白が不要になることがあります。
そんな時に VK Dynamic If Block の特定の固定ページで表示・非表示を制御できる機能が便利です！
VK FullSite Installer用のデモサイト、「クリニック｜内科」を例に、使い方を書きます。
他のページはコンテンツの上下にスペーサーブロックで余白をつけていますが、デザインの都合で「当院について」ページには、コンテンツ下に余白をとっておらず、フッター部分との間には余白がありません。
実際の使い方を以下で説明していきます。
使い方イメージ
固定ページのテンプレートのコンテンツ下のスペーサーにVK Dynamic If Block で条件分岐
固定ページ用のテンプレートを開き、コンテンツ下のスペーサーをVK Dynamic If Block でラップして、以下の条件で分岐します。
- 条件タイプ：ページタイプ
- ページタイプ：固定ページ( is_page() )
- Select Pages：除外したいページをチェック（今回は 当院について にチェック）
- 除外指定を「ON」
指定した固定ページ下の余白が非表示になります
該当の固定ページを開くと、コンテンツ下の余白が非表示になりました。
フッターの CTA セクションの出しわけ
「フッターに採用ページへリンクするバナー（CTA）を設置したい！」という運用、よくあります。でも採用ページの中ではこのCTAを出す必要がない（被る）というパターン、多いですよね。こんな時も VK Dynamic If Block の「特定の固定ページで非表示」 が大活躍します。
使い方イメージ
共通フッターの採用ページCTA部分を VK Dynamic If Block で条件分岐
フッターテンプレートを開き、採用ページCTA を VK Dynamic If Block でラップして、以下の条件で分岐します。
- 条件タイプ：ページタイプ
- ページタイプ：固定ページ( is_page() )
- Select Pages：除外したいページをチェック（今回は 採用情報 にチェック）
- 除外指定を「ON」
採用情報ページの下に採用情報CTAが非表示になります
採用情報ページを開くと、採用情報CTAが非表示になりなりました。
投稿リストで「公開日からの日数」で NEW マークを表示
「公開から1週間以内の記事にだけ NEW マーク をつけたい！」という場面はとても多いです。
VK Blocks Proの「新着バッジ」ブロックで設置するのが一番シンプルですが、Pro 版をお持ちでない方は VK Dynamic If Block の「公開日からの経過日数」で条件分岐できます。
使い方イメージ
投稿タイトルブロックの横などに、段落ブロックで「NEW」のテキストを置き VK Dynamic If Block で条件分岐
ちょっと画像では見えづらいですが、横並びブロックでタイトルをと「NEW」のテキストを囲って横並びにして、「NEW」のテキストにVK Dynamic If Block で以下の条件で分岐します。
- 条件タイプ：表示期間
- 表示期間設定：公開日からの日数
- 期間の表示形式：このブロックから直接指定
- 指定する期間：7（お好みで変えてください）
投稿リストに「NEW」マークが表示されます
公開日から7日間は「NEW」マークが表示されるようになりました。
まとめ
ブロックテーマではテンプレート分岐が難しい分、 VK Dynamic If Block のような柔軟な条件制御ツールは制作効率を大きく高めてくれます。
トップページのヘッダー切り替え、テンプレートの微調整、NEW 表示など、案件でよく発生する「痒いところ」をコードなしで解決できるのはとても便利です。
このプラグインを使いこなすことで、テンプレートを増やしすぎず、メンテ性の高いサイト制作が実現できますので、ぜひ活用してみてください♪
参加特典あり！
ご参加をお待ちしてます
ベクトルスタッフ以外の
ユーザーの皆様の参加大歓迎です！
参加特典もありますのでぜひご参加
お待ちしています！
★参加賞あり★ ブログリレーに参加しませんか？ アドベントカレンダー2025のお知らせ
今年もアドベントカレンダーを開催します！「X-T9」「Lightning」「VK Blocks」など、ベクトル製テーマ・プラグインに関することならお気軽に登録してください。
この記事を書いた人
を購入して
特典をゲットしよう！
特典A
X-T9 工務店
（ ナチュラル ）
19,800円 (税込)
0円に！
特典B
Lightning ビジネス（Evergreen）
9,900円 (税込)
0円に！
特典C
Lightning 工務店
（ ナチュラル ）
19,800円 (税込)
0円に！
今なら！
Vektor Passport の
有効期間中、上記の
デモサイトデータを
何度でも素早くまるごと
インポートできます！
爆速!!１分でデモサイトと同じ
ホームページができる
選んだデモサイトと同じ状態の WordPress サイトを、わずか数ステップで再現できるインポート専用プラグインです。数クリックで、プロ品質のサイトがすぐに起動します。
フルサイト編集対応ブロックテーマ
WordPress テーマ X-T9 は、WordPress 5.9 から実装されたフルサイト編集機能に対応した「ブロックテーマ」と呼ばれる新しい形式のテーマです。
ヘッダーやフッターなど、今までのテーマではカスタマイズが難しかったエリアもノーコードで簡単・柔軟にカスタマイズする事ができます。
パターンを使って
よりクオリティの高いサイトに
パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中！コピペしながら高品質なサイトを簡単に作れます。
ブロックエディターで
ABテストを
自由に作成できる
VK AB Testing は、ABテストを実施するための WordPress 用プラグインです。ブロックエディターでテストパターンを自由に作成でき、ランダム表示とクリック計測が可能です。Webサイトや広告などの施策の改善にぜひご活用ください。