このサイトについて

  1. このサイトについて

選ばれる理由が、
ここにある。
工務店のために設計された WordPress サイト。

このデモサイトの特徴

このデモサイトは、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 NameDescription
Advanced Custom Fields
パワフル、プロフェッショナル、直感的なフィールドで WordPress をカスタマイズ。
Version: 6.4.3 | Author: WP Engine
Advanced Database Cleaner
Clean database by deleting unused data such as ‘old revisions’, ‘old drafts’, ‘orphan options’, etc. Optimize database and more.
Version: 3.1.6 | Author: Younes JFR.
Category Order and Taxonomy Terms Order
ドラッグ & ドロップで並べ替えを可能にする JavaScript の機能を使って、カテゴリーとすべての (階層的) カスタムタクソノミーと子タームを並べ替えます。
Version: 1.9 | Author: Nsp-Code
Simple Page Ordering
ドラッグ & ドロップを使用して、選択したページや階層化された投稿タイプをビルトインページリストで並び替えます。 詳細な手順については、固定ページの画面で「ヘルプ」タブを開いてください。
Version: 2.7.4 | Author: 10up
Snow Monkey Forms
Snow Monkey Forms はブロックエディターのためのメールフォームプラグインです。
Version: 11.0.0 | Author: inc2734
VK All in One Expansion Unit
このプラグインは、Webサイトを強力にするさまざまな機能を備えた統合プラグインです。 多くの機能は個別に停止できます。 Facebookページプラグインやソーシャルブックマーク、OGタグ、Twitterカードタグ、Google Analyticsタグなどの出力や、最新記事投稿ウィジェット、関連する投稿の挿入、各種ブロックなどがあります。
Version: 9.110.1.1 | Author: Vektor,Inc.
VK Block Patterns
独自のブロックパターンを作成して登録する事ができます。
Version: 1.33.2.1 | Author: Vektor,Inc.
VK Blocks Pro
ブロックエディタを拡張するプラグインです。
Version: 1.108.0.0 | Author: Vektor,Inc.
VK Dynamic If Block
VK Dynamic If Block は、現在のページがフロントページまたは単一の投稿であるか、投稿タイプやカスタムフィールドの値などの指定された条件に基づいて、そのインナーブロックを表示します。
Version: 1.1.0 | Author: Vektor,Inc.
VK Link Target Controller
最近の投稿リストからの投稿タイトルを実際の投稿ページではなく、別のページ(内部リンクまたは外部リンク)にリンクさせることを許可します。
Version: 1.7.8.0 | Author: Vektor,Inc.
WP Multibyte Patch
WP Multibyte Patch は、本家版、日本語版 WordPress のマルチバイト文字の取り扱いに関する不具合の累積的修正と強化を行うプラグインです。 » 詳しい説明を読む
Version: 2.9.2 | Author: Seisuke Kuraishi
Yoast Duplicate Post
強力な書き換えと再公開機能を含む、投稿と固定ページ複製用の頼りになるツール。
Version: 4.5 | Author: Enrico Battocchi & Team Yoast
zipaddr-jp
The input convert an address from a zip code automatically.
Version: 1.40 | Author: Tatsuro, Terunuma

イベント関連の設定について

このデモサイトでは、工務店サイトに欠かせない「イベント情報」を効率よく発信・管理できるよう、「イベント」のカスタム投稿タイプを設けて対応しています。

さらに、開催日・時間・場所といったイベント情報を簡単に入力できるように、カスタムフィールド(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」から呼び出すことができます。

「パターン」タブの「VK Block Patterns」から呼び出すことができます

お客様の声のページのテンプレートは、「ランディングページ」になっていますので、新規で作成する場合はここを変更してください。

テンプレートは、「ランディングページ」になっています

お問い合わせを後押しするCTA機能

CTA機能

フッター上にある「お問い合わせ(お問い合わせと採用情報)」部分は、ExUnit(VK All in One Expansion Unit)プラグインのCTAの機能で表示しています。編集する場合は、編集画面の「CTA」の項目をクリックして、該当の「CTA」の記事を「編集」してください。

各ページでの CTA 表示設定

また、「お問い合わせ」ページでは(同じお問い合わせページへのリンクになる為)、「CTA」を非表示にしています。編集画面下にある「CTA設定」のボックスにて表示設定が可能です。

編集画面下にある「CTA設定」のボックスにて表示設定が可能

X-T9 について

基本設定について

X-T9テーマの基本設定については、以下のページで詳しく解説しておりますので、ぜひご確認ください。

お問い合わせフォーム(Snow Monkey Forms)のメール設定について

このデモサイトでは、お問い合わせフォームに「Snow Monkey Forms」プラグインを使用しています。シンプルかつ柔軟な設定が可能で、ちょっとしたフォームに最適です。以下の作成手順をもとに、必須のメールアドレスなど入力してください。

もちろん、普段お使いのフォームプラグイン(Contact Form 7など)に差し替えていただくことも可能です。お好みや運用スタイルに合わせてご自由にカスタマイズしてください。

サポート・お問合せ

デモサイトのサポート・お問い合わせ先は販売形態によって異なります。下記リンクからご確認ください。

PAGE TOP