Genva Carpenter
ドキュメント
Genva Carpenterは、施主から直接仕事を受ける、個人・少人数の大工向けのWordPressブロックテーマです。電話1本で受注できることを第一に設計しています。トップページの一番上に「いまの受付状況(いつから着手できるか)」を置き、電話番号はヘッダー・トップページ・フッター、そしてスマートフォンでは画面の下に固定した電話バーに表示します。施工事例は投稿で管理し、「施工事例」カテゴリーに投稿するだけでトップページに並びます。
主な特徴
- トップページ用の10セクション(ヒーロー〜ご相談・お見積もり)
- ヒーローに「いまの受付状況」を表示
- 対応エリアを「すぐ伺えます」「ご相談ください」の2段で表示
- 施工事例は投稿から自動で表示(地区はカテゴリー、工期・樹種はタグ)
- 施工事例の本文の見本パターン「投稿:施工事例」
- 施工事例の一覧ページ(トップページと同じカード)
- 店舗情報の一括設定(外観 > 店舗情報)
- スマートフォン用の電話バー(画面下に固定)
- ダークモード切替ボタン(ヘッダー右端)
- 文字サイズの下限を12px以上に設定
- 日本語翻訳(ja.po / ja.mo)同梱・翻訳対応
- 369theme.com経由の自動アップデート対応
動作要件
- WordPress 6.7以上(7.1まで動作確認済み)
- PHP 7.4以上
- ブロックテーマ対応環境(サイトエディター)
テーマタイプ
単体で動く親テーマです。ほかのテーマをインストールする必要はありません(子テーマでもアドオンでもありません)。
プラグイン依存
必須プラグインはありません。すべてコアブロックで構成しています。お問い合わせフォームは付いていません。フォームを置く場合は、お使いのフォームプラグインのブロックを追加してください。
インストール
Genva Carpenterは単体で動くブロックテーマです。以下の手順でインストールしてください。
テーマのアップロード
WordPress管理画面の「外観」→「テーマ」→「新しいテーマを追加」→「テーマのアップロード」を選び、購入時にダウンロードした genva-carpenter.zip をアップロードします。
有効化
アップロードが完了したら「有効化」をクリックします。この時点でトップページに10セクションが並び、見本の文と灰色の仮画像が入った状態になります。
編集の入口
トップページの編集は「外観」→「エディター」→「テンプレート」→「フロントページ」から行います。ヘッダーとフッターは「外観」→「エディター」→「パターン」→「テンプレートパーツ」にあります。
初期設定
公開前に、次の順番でお店の情報に差し替えてください。
屋号とロゴを設定する
- 屋号:「設定」→「一般」→「サイトのタイトル」
- 屋号の下に出る一言(例:大工歴18年・岡山市):同じ画面の「キャッチフレーズ」
- ロゴ:「外観」→「エディター」→「パターン」→「テンプレートパーツ」→「ヘッダー」。ロゴを設定しない場合は屋号だけが表示されます。フッターにも同じロゴが出ます
店舗情報を入力する(必須)
「外観」→「店舗情報」で、電話番号・受付時間・郵便番号・住所を入力します。次の場所の表示がまとめて変わります。空欄のままにすると、見本(090-0000-0000 など)がそのまま表示されます。
| 項目 | 反映される場所 |
|---|---|
| 電話番号 | ヘッダー、ヒーロー、ご相談・お見積もり、フッター、スマホの電話バー(タップしたときの発信先も変わります) |
| 受付時間 | ヘッダー、ご相談・お見積もり、フッター、スマホの電話バー |
| 住所 | フッター(郵便番号と住所の両方を入力したときだけ変わります) |
サイトエディターの画面では、見本の電話番号が表示されたままです。実際のサイトには入力した番号が表示されます。固定ページや投稿の中にご自身で書いた電話番号は変わらないので、それぞれの編集画面で直してください。
受付状況を書き換える
「外観」→「エディター」→「テンプレート」→「フロントページ」の一番上、「いまの受付状況」の右側の文字(例:11月中旬から着手できます)を書き換えます。いつ着手できるかをお客様に伝える場所です。予定が変わるたびに更新してください。
施工事例のカテゴリーを作る
「投稿」→「カテゴリー」で、次のとおりに作成します。
- 名前「施工事例」、スラッグ
worksのカテゴリーを作る - 地区(例:岡山市、倉敷市、玉野市)を、親カテゴリーに「施工事例」を選んで登録する。スラッグはローマ字で入力
詳しい使い方は、下の「施工事例の運用」を参照してください。
写真を差し替える
ヒーローと大工紹介には、灰色の仮画像(カメラの印が入ったもの)が入っています。実際の写真に差し替えてください。
- 大工紹介:フロントページのテンプレートで画像ブロックを選び、「置換」から差し替えます。代替テキスト(alt)も実際の写真に合わせて書き換えてください
- ヒーロー:「カスタムHTML」ブロックの中にあります。
imgのsrcを、メディアライブラリにアップロードした画像のアドレスに書き換えます
ヒーローの背景に動画を使う
動画はテーマに含まれていません。メディアライブラリに動画をアップロードし、同じ「カスタムHTML」ブロックの video の data-src="" の中にアドレスを入れてください。幅800px以上の画面で、動きを減らす設定をしていない閲覧者にだけ再生されます。それ以外の閲覧者には写真が表示されます。data-src が空のままなら、動画は読み込まれません。
各セクションの内容を書き換える
選ばれる理由・対応業務・大工紹介・施工の流れ・対応エリア・よくある質問・職人募集には、見本の文が入っています。フロントページのテンプレートで文字をクリックして上書きしてください。
- 対応エリア:カテゴリーとは別の手書きの欄です。「すぐ伺えます」には市町村を、「ご相談ください」には隣県など要相談の地域を書く想定です
- よくある質問:質問のカード(見出しと段落のグループ)を1つ選んで複製します。2列に並び、5問目は自動で次の段に入ります
施工事例の運用
施工事例は、ふつうの「投稿」で書きます。カテゴリー・タグ・アイキャッチ画像を決まった形で入れると、トップページと一覧ページに自動で並びます。
カテゴリー 施工事例+地区
「施工事例」と地区の両方にチェックを入れます。写真の上に「施工事例, 岡山市北区」のように両方が表示されます。
タグ 工期・樹種
「工期 7日」「吉野ヒノキ」のような情報はタグに入れます。写真の下に小さな枠で並びます。
アイキャッチ画像 完成写真
トップページと一覧ページの写真になり、記事の一番上にも大きく表示されます。横長(横4:縦3)の写真が収まりよく表示されます。本文には入れません。
トップページ 新しい4件
「施工事例」カテゴリーの新しい投稿から4件が並びます。下の「施工事例をすべて見る」から一覧ページへつながります(works カテゴリーが無いときは出ません)。
本文の見本「投稿:施工事例」
「投稿」→「新規投稿」を開くと、パターンを選ぶ画面が出ます。「投稿:施工事例」を選ぶと、本文に次の見本が入ります。
| 概要の表 | 場所・工期・使った木・費用の目安 |
|---|---|
| ご依頼の内容 | お客様が何に困っていたか |
| 施工したこと | どのように直したか |
| 細部の写真2枚 | 納まりや仕上がりの寄りの写真 |
- 概要の表で値を空欄にした行は、公開したページには表示されません(編集画面には残ります)。金額を載せない場合は「費用の目安」を空欄のままにしてください
- 細部の写真は、灰色の仮画像を選んで「置換」から差し替えます。代替テキスト(alt)も書き換えてください
- カテゴリーとタグは見本では設定されません。投稿ごとに選んでください
- パターンの画面を閉じてしまったときは、左上の「+」→「パターン」→「投稿」から選べます
一覧ページをメニューに入れる
施工事例の一覧ページは、スラッグが works のカテゴリーのページです(テンプレート category-works)。メニューに入れたいときは、ナビゲーションにこのカテゴリーを追加してください。
テンプレート一覧
WordPressのテンプレート階層に沿って、自動で使い分けられます。選ぶ操作は要りません。
front-page フロントページ
10セクションのトップページ。サイトの表示設定にかかわらず、トップページに使われます。
category-works 施工事例の一覧
スラッグ works のカテゴリーのページ。トップページと同じカードで、10件ずつページ送りします。
single 投稿
施工事例・ブログの個別ページ。アイキャッチ画像を記事の先頭に大きく表示します。
page 固定ページ
プライバシーポリシーなど、一般的な固定ページ。
home 投稿一覧
「設定」→「表示設定」で投稿ページに指定したページ。
archive アーカイブ
works 以外のカテゴリー・タグ・日付別の一覧。地区(works の子カテゴリー)のページもこちらです。
search 検索結果
サイト内検索の結果。
404 ページが見つからない
存在しないアドレスを開いたときのページ。
index 予備
ほかのどれにも当てはまらないときに使われる、最後の受け皿です。
パターン一覧
ブロックを追加する「+」→「パターン」から、いつでも挿入できます。
カテゴリー「Genva Carpenter」
- ヒーロー
- 選ばれる理由
- 対応業務
- 施工事例
- 大工紹介
- 施工の流れ
- 対応エリア
- よくある質問
- 協力業者・職人募集
- ご相談・お見積もり
番号はトップページに並んでいる順番です。
カテゴリー「投稿」
- 投稿:施工事例(新規投稿の作成時に表示)
テーマの内部で使うもの
ヘッダー・フッター・投稿一覧・施工事例の一覧・投稿の本文・固定ページの本文・アーカイブの見出し・検索・コメント・404 は、テンプレートの中で使われます。挿入の一覧には出ません。
セクションの並べ替え・削除
フロントページのテンプレートで、セクション(外側のグループ)を選び、ツールバーの上下の矢印で並べ替え、「︙」メニューの「削除」で消せます。消したセクションは、上の「Genva Carpenter」カテゴリーからいつでも入れ直せます。
デザイン設定
カラー
「外観」→「エディター」→「スタイル」で使える8色です。濃い胡桃色の木地に、朱と藍を差し色にしています。
Deep Walnut#2C1D11
Aged Oak#8A5F2A
Vermilion#B03E26
Indigo#1E3A5F
Ecru#FAF7F2
Panel#F4EFE6
Sumi#1A1715
Muted#4A443F
文字と背景の組み合わせは、コントラスト比 4.5:1 以上になるよう測って決めています。個別の色を変更すると、読みにくくなる場合があります。
タイポグラフィ
- 見出し:Noto Serif JP(テーマに同梱。latin サブセット、400 / 500 / 700)
- 本文:閲覧者の端末にあるフォント(ヒラギノ角ゴ、游ゴシック、Noto Sans JP など)
同梱しているのは latin サブセットのため、日本語の見出しは閲覧者の端末にある明朝体で表示されます。
外部サービスへの接続
フォントはテーマに同梱しているため、Google Fontsなどの外部のフォント配信サービスには接続しません。止める設定も必要ありません。
ダークモード
ヘッダー右端のボタンで切り替えます。パソコンやスマートフォンの設定には追従しません。訪問者が選んだ状態はその方のブラウザに保存され、次回も同じ状態で表示されます。暗い配色でも、朱と木肌の色は明るさを変えて保たれます。
アクセシビリティ機能
文字は12px以上
いちばん小さなラベルでも12px以上にしています。
コントラスト比 4.5:1 以上
明るい配色・暗い配色の両方で、文字と背景の組み合わせを測って決めています。
キーボードとスクリーンリーダー
キーボードで移動したときは、フォーカスの位置に枠が出ます。ダークモードのボタンは、いまの状態を読み上げソフトに伝えます。
動きは控えめに
パソコンやスマートフォンで「動きを減らす」設定をしている閲覧者には、ヒーローの動画を再生しません。
自動アップデート
Genva Carpenterは369theme.comのアップデートサーバーと連携しており、WordPress管理画面から最新版にアップデートできます。
アップデートの確認方法
更新の確認は最大1時間キャッシュされます。「外観」→「テーマ」の画面に表示される「今すぐ更新を確認」から、すぐに確認し直せます。新しいバージョンがあるときは、通知が表示されます。
アップデート時の注意
- テーマのファイルを直接編集している場合、アップデートで上書きされます
- サイトエディターで編集した内容はデータベースに保存されるため、テーマの更新では消えません
- 一度保存したテンプレートには、テーマ側の変更が反映されません。反映させたいときは、そのテンプレートの「カスタマイズをクリア」を選びます(加えた変更はすべて消えます)
- アップデートの前に、サイトのバックアップを取ることをおすすめします
よくある質問
施工事例に、ブログの記事まで出てきます
スラッグが works のカテゴリーが無いと、すべての投稿が新しい順に並びます。初期設定の手順04のとおりにカテゴリーを作成してください。カテゴリーを作る前にフロントページのテンプレートを保存していた場合は、テンプレートの「カスタマイズをクリア」をしてから開き直してください。保存した時点の設定が残っているためです。
対応エリアの地区を増やしたい
対応エリアの欄は、カテゴリーとは別の手書きの欄です。フロントページのテンプレートの「対応エリア」で、直接書き換えてください。
よくある質問を増やしたい
フロントページのテンプレートの「よくある質問」で、質問のカード(見出しと段落のグループ)を1つ選んで複製し、文字を書き換えてください。
サイトエディターでは、見本の電話番号が表示されます
実際のサイトには、「外観」→「店舗情報」で入力した番号が表示されます。編集画面の表示と一致させるにはテーマ専用のブロックが必要で、そうするとテーマを変えたときにページへ壊れたブロックが残ります。そのため、この形にしています。
お問い合わせフォームを付けたい
テーマにはフォームは含まれていません。お使いのフォームプラグイン(Contact Form 7 など)のブロックを、固定ページやフロントページに追加してください。
デモサイトの写真は付いてきますか?
付いていません。デモサイトとスクリーンショットの写真は、AIで生成したイメージです。テーマに同梱しているのは、差し替え用の SVG の仮画像2点(ヒーロー用・大工紹介用)のみです。
サポートを受けるには?
購入者専用のサポートフォームからお問い合わせください。下の「サポート・リソース」にリンクがあります。
Genvaシリーズ
電話が鳴ることを第一に設計した、職人さん向けのテーマシリーズです。
Genva Carpenter
施主から直接仕事を受ける、個人・少人数の大工向け。
Genva Interior
クロス・床の張り替えの職人向け。工事メニュー・料金・会社概要・お問い合わせの固定ページをパターンから用意できます。