選ばれる理由が、
ここにある。
工務店のために設計された WordPress サイト。
- 1. このデモサイトの特徴
- 1.1. デザインのこだわり
- 2. 使用したプラグインリストとその概要
- 3. イベント関連の設定について
- 3.1. イベントの開催日 / 開催日時 / 開催場所の設定
- 3.2. イベント予約フォームの募集締め切りの設定方法
- 4. 全ページで一貫したデザインを実現
- 4.1. よく使うパーツのデザイン
- 4.1.1. カスタムブロックスタイル設定
- 4.2. 個別ブロックのデザイン調整
- 4.2.1. カスタムCSS
- 5. 独自パターン登録機能
- 5.1. 施工事例・イベント用テンプレート
- 5.2. お客様の声テンプレート
- 6. お問い合わせを後押しするCTA機能
- 6.1. CTA機能
- 6.1.1. 各ページでの CTA 表示設定
- 7. X-T9 について
- 7.1. 基本設定について
- 8. お問い合わせフォーム（Snow Monkey Forms）のメール設定について
- 9. サポート・お問合せ
このデモサイトの特徴
このデモサイトは、WordPressの次世代ブロックテーマ「X‑T9」と、拡張プラグイン「VK Blocks Pro」「VK All in One Expansion Unit」などを組み合わせることで、コードを書かずに、柔軟で洗練された工務店サイトを構築しています。
ブロックエディタに最適化された設計により、見たまま編集・即時プレビューが可能。
施工実績の投稿やイベント告知、相談会の誘導といった業種特有の導線も、テンプレートやパターンを活用することで簡単に実現できます。
また、X‑T9が採用するフルサイト編集（FSE）機能によって、ヘッダーやフッター、投稿一覧の構成までビジュアル編集が可能。ノーコードでありながら、これまで以上に細やかな調整やデザインの自由度を叶えています。
WordPress 公式ディレクトリ登録
ブロックテーマ「X‑T9」
本デモサイトは、WordPressの次世代ブロックテーマ「X‑T9」をベースに作られています。
フルサイト編集（FSE）に対応しており、ヘッダー・フッター・投稿一覧などのサイト全体をブロックエディタで柔軟にカスタマイズ可能。
洗練されたデザインと操作性を両立した、モダンな工務店サイトの新しいかたちです。
ブロック拡張プラグイン VK Blocks Proとの連携で表現力アップ
ブロック拡張プラグイン「VK Blocks Pro」を組み合わせることで、高度なレイアウトやデザイン表現もノーコードで実現。はじめての方でも使いやすい操作感が魅力です。
イベントの情報もスマートに管理・公開
本デモサイトでは、イベント投稿に力を入れた構成になっています。
開催日や時間・場所などをカスタムフィールド（ACF）で簡単に入力でき、表示内容も自動で整います。
さらに、「イベントが終了したらフォームを非表示にする」などの出し分けも、VK Dynamic If Block ブロックでノーコード対応。
デザインのこだわり
本デモサイトは、ナチュラルで親しみやすい配色と、スマートフォンでの見やすさにも配慮したデザインが特長です。
シンプルなボタンや余白感、フォント設計により、訪問者に安心感を与え、お問い合わせやイベント予約にもつながる導線設計を意識しています。
メインカラーには落ち着いたグリーン#717135を使用し、補色として #B26464 のアクセントカラーを配置。
温かみと視認性を両立しながら、全体のトーンを崩さず、必要な箇所に自然なメリハリを加えています。
使用したプラグインリストとその概要
| Plugin Name | Description |
|---|---|
| Advanced Custom Fields | パワフル、プロフェッショナル、直感的なフィールドで WordPress をカスタマイズ。 |
| Advanced Database Cleaner | The most advanced Database Cleaner for WordPress. Clean database by deleting orphaned items such as old “revisions”, “old drafts”, optimize database, and more. |
| Akismet Anti-spam: Spam Protection | 何百万もの利用実績がある Akismet はあなたのブログをスパムから保護する最良の方法といえるでしょう。あなたが眠りについている時間でさえ、Akismet は常時サイトを守り続けます。始めるのは簡単。Akismet プラグインを有効化したら設定ページで API キーを設定するだけです。 |
| All-in-One WP Migration and Backup | All-in-One WP Migration を使用すると、WordPress サイト全体の移行が簡単になります。数回クリックするだけで、データベース、メディア、プラグイン、テーマをエクスポートまたはインポートできます。 |
| All in One SEO | WordPress 用 SEO。XML サイトマップ、カスタム投稿タイプ用 SEO、ブログ、ビジネスサイト、eコマースサイトの SEO などの機能を利用できます。2007年以降、1億以上ダウンロードされています。 |
| Autoptimize | CSS、JS、画像、Google フォントなどを最適化することでサイトの応答を高速化します。 |
| Better Search Replace | WordPress データベースで検索/置換を実行するための小さなプラグイン。 |
| Broken Link Checker by AIOSEO | サイトのすべての内部リンクと外部リンクでリンク切れをモニターし、テストします。AIOSEO による WordPress 用のオリジナル SEO プラグインです。 |
| Category Order and Taxonomy Terms Order | ドラッグ & ドロップで並べ替えを可能にする JavaScript の機能を使って、カテゴリーとすべての (階層的) カスタムタクソノミーと子タームを並べ替えます。 |
| Classic Widgets | 「外観」 > 「ウィジェット」とカスタマイザーで表示される旧来のウィジェット設定画面を有効化します。ウィジェット管理のブロックエディターを無効化します。 |
| Code Snippets | サイトにコードスニペットを追加するための、簡単、クリーン、そしてシンプルな方法。もう、テーマの functions.php を編集する必要はありません ! |
| Contact Form 7 | お問い合わせフォームプラグイン。シンプル、でも柔軟。 |
| Enable Media Replace | WordPress メディアライブラリの「メディアの編集」セクションで新しいファイルをアップロードして、メディアファイルの置換を有効にしてください。 |
| FileBird Lite | 何千もの WordPress メディアファイルをフォルダー / カテゴリーに簡単に整理します。 |
| Google Analytics for WordPress by MonsterInsights | WordPress のための最高な Google アナリティクスプラグイン。訪問者がサイトをどのように見つけ、使用しているかを確認することで、彼らが再訪してくれるようにしましょう。 |
| Instant Indexing | Get your website crawled immediately by Google using their NEW Indexing APIs. |
| LoginPress | LoginPress is the best wp-login Login Page Customizer plugin by WPBrigade which allows you to completely change the layout of login, register and forgot password forms. |
| OptinMonster | OptinMonster is the best WordPress popup builder plugin that helps you grow your email newsletter list and sales with email popups, exit intent popups, floating bars and more! |
| Simple Page Ordering | ドラッグ & ドロップを使用して、選択したページや階層化された投稿タイプをビルトインページリストで並び替えます。
詳細な手順については、固定ページの画面で「ヘルプ」タブを開いてください。 |
| TJT Journey Tracker | 流入元・初回LP・ページ履歴をContact Form 7のhidden fieldへ自動セットし、検索キーワード・滞在時間・送信成功・サンキューページ到達を記録する軽量トラッカー |
| TSK Sitewide Search (News/Guide/Case/Pages + Tags) | 「新着情報」「解決ガイド」「調査事例」「固定ページ」を横断検索。さらに「調査事例」専用検索ショートコード [jirei_search] を提供。 |
| VK All in One Expansion Unit | このプラグインは、Webサイトを強力にするさまざまな機能を備えた統合プラグインです。 多くの機能は個別に停止できます。 Facebookページプラグインやソーシャルブックマーク、OGタグ、Twitterカードタグ、Google Analyticsタグなどの出力や、最新記事投稿ウィジェット、関連する投稿の挿入、各種ブロックなどがあります。 |
| VK Block Patterns | 独自のブロックパターンを作成して登録する事ができます。 |
| VK Blocks Pro | ブロックエディタを拡張するプラグインです。 |
| VK Dynamic If Block | VK Dynamic If Block は、現在のページがフロントページまたは単一の投稿であるか、投稿タイプやカスタムフィールドの値などの指定された条件に基づいて、そのインナーブロックを表示します。 |
| VK Filter Search | 絞り込み検索が行えるプラグインです。 |
| VK Link Target Controller | 最近の投稿リストからの投稿タイトルを実際の投稿ページではなく、別のページ（内部リンクまたは外部リンク）にリンクさせることを許可します。 |
| WordPress Importer | 投稿、ページ、コメント、カスタムフィールド、カテゴリー、タグなどを WordPress エクスポートファイルからインポートします。 |
| WP Multibyte Patch | WP Multibyte Patch は、本家版、日本語版 WordPress のマルチバイト文字の取り扱いに関する不具合の累積的修正と強化を行うプラグインです。 » 詳しい説明を読む |
| Yoast Duplicate Post | 強力な書き換えと再公開機能を含む、投稿と固定ページ複製用の頼りになるツール。 |
| zipaddr-jp | The input convert an address from a zip code automatically. |
イベント関連の設定について
このデモサイトでは、工務店サイトに欠かせない「イベント情報」を効率よく発信・管理できるよう、「イベント」のカスタム投稿タイプを設けて対応しています。
さらに、開催日・時間・場所といったイベント情報を簡単に入力できるように、カスタムフィールド（ACF）を活用。
VK Dynamic If Block ブロックと組み合わせることで、イベント終了後には自動的にフォームを非表示にするなどの出し分けも可能です。
ここでは、そうしたイベント投稿の仕組みと設定方法について解説します。
イベントの開催日 / 開催日時 / 開催場所の設定
「イベント」投稿の編集画面の下部の方に、「イベント予約期間」と「イベント情報」が表示されます。
まずは「イベント情報」について説明していきます。
「イベント情報」の開催日 / 開催時間 / 開催場所 を入力しますと、詳細ページの本文の前に、入力した情報が表示されます。
トップページの「イベント情報」セクションの一覧にも表示されるようになっています。
イベント予約フォームの募集締め切りの設定方法
次に「イベント予約期間」の説明をしていきます。
編集画面の下部に「イベント予約期間」>「イベント予約締め切り」が表示されています。
入力欄をクリックすると年月日時間を入力できます。
時間を設定すると、これまで表示されていたイベントフォームの内容が
設定した時間を過ぎると以下のように表示されます。
また、「イベント」から新規投稿をした時に、「イベント用テンプレート」（フォーム部分）が候補に表示されるようになっています。この説明は下の「施工事例・イベント用テンプレート」をご確認ください。
全ページで一貫したデザインを実現
よく使うパーツのデザイン
カスタムブロックスタイル設定
見出しやボタンなど、よく使うパーツのデザインは「VK Blocks Pro」のカスタムブロックスタイル設定で管理画面からまとめて登録しています。デザインの統一感を保ちながら、更新や調整もラクラクです。
個別ブロックのデザイン調整
カスタムCSS
さらに、ページ内で数回しか使わないような個別のデザイン調整は、「VK Blocks Pro」の「カスタムCSS」機能を使ってブロック単位で柔軟に対応しています。
美しさと実用性を両立したサイト構築が、コード知識ゼロでも実現できます。
独自パターン登録機能
施工事例・イベント用テンプレート
カスタム投稿タイプの「施工事例」と「イベント」から新規投稿をした時に、「施工事例」の場合は施工事例用のテンプレート、「イベント」の場合は「イベント用テンプレート」が候補に表示されます。このテンプレートは「VK Block Patterns」で独自のブロックパターンを登録して、パターン追加方式を「候補に表示」にして表示させています。※パターン追加方式を「自動挿入」で自動に挿入することもできます。
このように独自のブロックパターンを登録しておくと、新規作成時にテンプレートから作成できるので大変便利です。
テンプレートを編集する場合は、編集画面の「VK Block Patterns」> 「VK Block Patterns」の該当のテンプレート記事を編集してください。
お客様の声テンプレート
「お客様の声」はカスタム投稿タイプではなく、あえて固定ページで個別に作成しています。
インタビュー形式の読み物として、通常の投稿とは異なる「特集コンテンツ」として扱いたい意図があるためです。
そのため、掲載件数が増えていく場合は、カスタム投稿タイプへ切り替えることで管理がしやすくなります。
お客様の声のテンプレートは、編集画面の「ブロックインサーター」を展開して「パターン」タブの「VK Block Patterns」から呼び出すことができます。
お客様の声のページのテンプレートは、「ランディングページ」になっていますので、新規で作成する場合はここを変更してください。
お問い合わせを後押しするCTA機能
CTA機能
フッター上にある「お問い合わせ（お問い合わせと採用情報）」部分は、ExUnit（VK All in One Expansion Unit）プラグインのCTAの機能で表示しています。編集する場合は、編集画面の「CTA」の項目をクリックして、該当の「CTA」の記事を「編集」してください。
各ページでの CTA 表示設定
また、「お問い合わせ」ページでは（同じお問い合わせページへのリンクになる為）、「CTA」を非表示にしています。編集画面下にある「CTA設定」のボックスにて表示設定が可能です。
X-T9 について
基本設定について
X-T9テーマの基本設定については、以下のページで詳しく解説しておりますので、ぜひご確認ください。
お問い合わせフォーム（Snow Monkey Forms）のメール設定について
このデモサイトでは、お問い合わせフォームに「Snow Monkey Forms」プラグインを使用しています。シンプルかつ柔軟な設定が可能で、ちょっとしたフォームに最適です。以下の作成手順をもとに、必須のメールアドレスなど入力してください。
もちろん、普段お使いのフォームプラグイン（Contact Form 7など）に差し替えていただくことも可能です。お好みや運用スタイルに合わせてご自由にカスタマイズしてください。
サポート・お問合せ
デモサイトのサポート・お問い合わせ先は販売形態によって異なります。下記リンクからご確認ください。