本文へスキップ
Documentation · v1.0

Genva Carpenter
ドキュメント

Genva Carpenterは、施主から直接仕事を受ける、個人・少人数の大工向けのWordPressブロックテーマです。電話1本で受注できることを第一に設計しています。トップページの一番上に「いまの受付状況(いつから着手できるか)」を置き、電話番号はヘッダー・トップページ・フッター、そしてスマートフォンでは画面の下に固定した電話バーに表示します。施工事例は投稿で管理し、「施工事例」カテゴリーに投稿するだけでトップページに並びます。

主な特徴

  • トップページ用の10セクション(ヒーロー〜ご相談・お見積もり)
  • ヒーローに「いまの受付状況」を表示
  • 対応エリアを「すぐ伺えます」「ご相談ください」の2段で表示
  • 施工事例は投稿から自動で表示(地区はカテゴリー、工期・樹種はタグ)
  • 施工事例の本文の見本パターン「投稿:施工事例」
  • 施工事例の一覧ページ(トップページと同じカード)
  • 店舗情報の一括設定(外観 > 店舗情報)
  • スマートフォン用の電話バー(画面下に固定)
  • ダークモード切替ボタン(ヘッダー右端)
  • 文字サイズの下限を12px以上に設定
  • 日本語翻訳(ja.po / ja.mo)同梱・翻訳対応
  • 369theme.com経由の自動アップデート対応

動作要件

  • WordPress 6.7以上(7.1まで動作確認済み)
  • PHP 7.4以上
  • ブロックテーマ対応環境(サイトエディター)

テーマタイプ

単体で動く親テーマです。ほかのテーマをインストールする必要はありません(子テーマでもアドオンでもありません)。

プラグイン依存

必須プラグインはありません。すべてコアブロックで構成しています。お問い合わせフォームは付いていません。フォームを置く場合は、お使いのフォームプラグインのブロックを追加してください。

Installation

インストール

Genva Carpenterは単体で動くブロックテーマです。以下の手順でインストールしてください。

01

テーマのアップロード

WordPress管理画面の「外観」→「テーマ」→「新しいテーマを追加」→「テーマのアップロード」を選び、購入時にダウンロードした genva-carpenter.zip をアップロードします。

02

有効化

アップロードが完了したら「有効化」をクリックします。この時点でトップページに10セクションが並び、見本の文と灰色の仮画像が入った状態になります。

03

編集の入口

トップページの編集は「外観」→「エディター」→「テンプレート」→「フロントページ」から行います。ヘッダーとフッターは「外観」→「エディター」→「パターン」→「テンプレートパーツ」にあります。

Setup

初期設定

公開前に、次の順番でお店の情報に差し替えてください。

01

屋号とロゴを設定する

  • 屋号:「設定」→「一般」→「サイトのタイトル」
  • 屋号の下に出る一言(例:大工歴18年・岡山市):同じ画面の「キャッチフレーズ」
  • ロゴ:「外観」→「エディター」→「パターン」→「テンプレートパーツ」→「ヘッダー」。ロゴを設定しない場合は屋号だけが表示されます。フッターにも同じロゴが出ます
02

店舗情報を入力する(必須)

「外観」→「店舗情報」で、電話番号・受付時間・郵便番号・住所を入力します。次の場所の表示がまとめて変わります。空欄のままにすると、見本(090-0000-0000 など)がそのまま表示されます。

項目 反映される場所
電話番号 ヘッダー、ヒーロー、ご相談・お見積もり、フッター、スマホの電話バー(タップしたときの発信先も変わります)
受付時間 ヘッダー、ご相談・お見積もり、フッター、スマホの電話バー
住所 フッター(郵便番号と住所の両方を入力したときだけ変わります)

サイトエディターの画面では、見本の電話番号が表示されたままです。実際のサイトには入力した番号が表示されます。固定ページや投稿の中にご自身で書いた電話番号は変わらないので、それぞれの編集画面で直してください。

03

受付状況を書き換える

「外観」→「エディター」→「テンプレート」→「フロントページ」の一番上、「いまの受付状況」の右側の文字(例:11月中旬から着手できます)を書き換えます。いつ着手できるかをお客様に伝える場所です。予定が変わるたびに更新してください。

04

施工事例のカテゴリーを作る

「投稿」→「カテゴリー」で、次のとおりに作成します。

  1. 名前「施工事例」、スラッグ works のカテゴリーを作る
  2. 地区(例:岡山市、倉敷市、玉野市)を、親カテゴリーに「施工事例」を選んで登録する。スラッグはローマ字で入力

詳しい使い方は、下の「施工事例の運用」を参照してください。

05

写真を差し替える

ヒーローと大工紹介には、灰色の仮画像(カメラの印が入ったもの)が入っています。実際の写真に差し替えてください。

  • 大工紹介:フロントページのテンプレートで画像ブロックを選び、「置換」から差し替えます。代替テキスト(alt)も実際の写真に合わせて書き換えてください
  • ヒーロー:「カスタムHTML」ブロックの中にあります。img の src を、メディアライブラリにアップロードした画像のアドレスに書き換えます

ヒーローの背景に動画を使う

動画はテーマに含まれていません。メディアライブラリに動画をアップロードし、同じ「カスタムHTML」ブロックの video の data-src="" の中にアドレスを入れてください。幅800px以上の画面で、動きを減らす設定をしていない閲覧者にだけ再生されます。それ以外の閲覧者には写真が表示されます。data-src が空のままなら、動画は読み込まれません。

06

各セクションの内容を書き換える

選ばれる理由・対応業務・大工紹介・施工の流れ・対応エリア・よくある質問・職人募集には、見本の文が入っています。フロントページのテンプレートで文字をクリックして上書きしてください。

  • 対応エリア:カテゴリーとは別の手書きの欄です。「すぐ伺えます」には市町村を、「ご相談ください」には隣県など要相談の地域を書く想定です
  • よくある質問:質問のカード(見出しと段落のグループ)を1つ選んで複製します。2列に並び、5問目は自動で次の段に入ります
Works

施工事例の運用

施工事例は、ふつうの「投稿」で書きます。カテゴリー・タグ・アイキャッチ画像を決まった形で入れると、トップページと一覧ページに自動で並びます。

カテゴリー 施工事例+地区

「施工事例」と地区の両方にチェックを入れます。写真の上に「施工事例, 岡山市北区」のように両方が表示されます。

タグ 工期・樹種

「工期 7日」「吉野ヒノキ」のような情報はタグに入れます。写真の下に小さな枠で並びます。

アイキャッチ画像 完成写真

トップページと一覧ページの写真になり、記事の一番上にも大きく表示されます。横長(横4:縦3)の写真が収まりよく表示されます。本文には入れません。

トップページ 新しい4件

「施工事例」カテゴリーの新しい投稿から4件が並びます。下の「施工事例をすべて見る」から一覧ページへつながります(works カテゴリーが無いときは出ません)。

本文の見本「投稿:施工事例」

「投稿」→「新規投稿」を開くと、パターンを選ぶ画面が出ます。「投稿:施工事例」を選ぶと、本文に次の見本が入ります。

概要の表場所・工期・使った木・費用の目安
ご依頼の内容お客様が何に困っていたか
施工したことどのように直したか
細部の写真2枚納まりや仕上がりの寄りの写真
  • 概要の表で値を空欄にした行は、公開したページには表示されません(編集画面には残ります)。金額を載せない場合は「費用の目安」を空欄のままにしてください
  • 細部の写真は、灰色の仮画像を選んで「置換」から差し替えます。代替テキスト(alt)も書き換えてください
  • カテゴリーとタグは見本では設定されません。投稿ごとに選んでください
  • パターンの画面を閉じてしまったときは、左上の「+」→「パターン」→「投稿」から選べます

一覧ページをメニューに入れる

施工事例の一覧ページは、スラッグが works のカテゴリーのページです(テンプレート category-works)。メニューに入れたいときは、ナビゲーションにこのカテゴリーを追加してください。

Templates

テンプレート一覧

WordPressのテンプレート階層に沿って、自動で使い分けられます。選ぶ操作は要りません。

front-page フロントページ

10セクションのトップページ。サイトの表示設定にかかわらず、トップページに使われます。

category-works 施工事例の一覧

スラッグ works のカテゴリーのページ。トップページと同じカードで、10件ずつページ送りします。

single 投稿

施工事例・ブログの個別ページ。アイキャッチ画像を記事の先頭に大きく表示します。

page 固定ページ

プライバシーポリシーなど、一般的な固定ページ。

home 投稿一覧

「設定」→「表示設定」で投稿ページに指定したページ。

archive アーカイブ

works 以外のカテゴリー・タグ・日付別の一覧。地区(works の子カテゴリー)のページもこちらです。

search 検索結果

サイト内検索の結果。

404 ページが見つからない

存在しないアドレスを開いたときのページ。

index 予備

ほかのどれにも当てはまらないときに使われる、最後の受け皿です。

Patterns

パターン一覧

ブロックを追加する「+」→「パターン」から、いつでも挿入できます。

カテゴリー「Genva Carpenter」

  1. ヒーロー
  2. 選ばれる理由
  3. 対応業務
  4. 施工事例
  5. 大工紹介
  6. 施工の流れ
  7. 対応エリア
  8. よくある質問
  9. 協力業者・職人募集
  10. ご相談・お見積もり

番号はトップページに並んでいる順番です。

カテゴリー「投稿」

  • 投稿:施工事例(新規投稿の作成時に表示)

テーマの内部で使うもの

ヘッダー・フッター・投稿一覧・施工事例の一覧・投稿の本文・固定ページの本文・アーカイブの見出し・検索・コメント・404 は、テンプレートの中で使われます。挿入の一覧には出ません。

セクションの並べ替え・削除

フロントページのテンプレートで、セクション(外側のグループ)を選び、ツールバーの上下の矢印で並べ替え、「︙」メニューの「削除」で消せます。消したセクションは、上の「Genva Carpenter」カテゴリーからいつでも入れ直せます。

Design

デザイン設定

カラー

「外観」→「エディター」→「スタイル」で使える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などの外部のフォント配信サービスには接続しません。止める設定も必要ありません。

ダークモード

ヘッダー右端のボタンで切り替えます。パソコンやスマートフォンの設定には追従しません。訪問者が選んだ状態はその方のブラウザに保存され、次回も同じ状態で表示されます。暗い配色でも、朱と木肌の色は明るさを変えて保たれます。

Accessibility

アクセシビリティ機能

文字は12px以上

いちばん小さなラベルでも12px以上にしています。

コントラスト比 4.5:1 以上

明るい配色・暗い配色の両方で、文字と背景の組み合わせを測って決めています。

キーボードとスクリーンリーダー

キーボードで移動したときは、フォーカスの位置に枠が出ます。ダークモードのボタンは、いまの状態を読み上げソフトに伝えます。

動きは控えめに

パソコンやスマートフォンで「動きを減らす」設定をしている閲覧者には、ヒーローの動画を再生しません。

Auto Update

自動アップデート

Genva Carpenterは369theme.comのアップデートサーバーと連携しており、WordPress管理画面から最新版にアップデートできます。

アップデートの確認方法

更新の確認は最大1時間キャッシュされます。「外観」→「テーマ」の画面に表示される「今すぐ更新を確認」から、すぐに確認し直せます。新しいバージョンがあるときは、通知が表示されます。

アップデート時の注意

  • テーマのファイルを直接編集している場合、アップデートで上書きされます
  • サイトエディターで編集した内容はデータベースに保存されるため、テーマの更新では消えません
  • 一度保存したテンプレートには、テーマ側の変更が反映されません。反映させたいときは、そのテンプレートの「カスタマイズをクリア」を選びます(加えた変更はすべて消えます)
  • アップデートの前に、サイトのバックアップを取ることをおすすめします
FAQ

よくある質問

施工事例に、ブログの記事まで出てきます

スラッグが works のカテゴリーが無いと、すべての投稿が新しい順に並びます。初期設定の手順04のとおりにカテゴリーを作成してください。カテゴリーを作る前にフロントページのテンプレートを保存していた場合は、テンプレートの「カスタマイズをクリア」をしてから開き直してください。保存した時点の設定が残っているためです。

対応エリアの地区を増やしたい

対応エリアの欄は、カテゴリーとは別の手書きの欄です。フロントページのテンプレートの「対応エリア」で、直接書き換えてください。

よくある質問を増やしたい

フロントページのテンプレートの「よくある質問」で、質問のカード(見出しと段落のグループ)を1つ選んで複製し、文字を書き換えてください。

サイトエディターでは、見本の電話番号が表示されます

実際のサイトには、「外観」→「店舗情報」で入力した番号が表示されます。編集画面の表示と一致させるにはテーマ専用のブロックが必要で、そうするとテーマを変えたときにページへ壊れたブロックが残ります。そのため、この形にしています。

お問い合わせフォームを付けたい

テーマにはフォームは含まれていません。お使いのフォームプラグイン(Contact Form 7 など)のブロックを、固定ページやフロントページに追加してください。

デモサイトの写真は付いてきますか?

付いていません。デモサイトとスクリーンショットの写真は、AIで生成したイメージです。テーマに同梱しているのは、差し替え用の SVG の仮画像2点(ヒーロー用・大工紹介用)のみです。

サポートを受けるには?

購入者専用のサポートフォームからお問い合わせください。下の「サポート・リソース」にリンクがあります。

More from 369Theme

Genvaシリーズ

電話が鳴ることを第一に設計した、職人さん向けのテーマシリーズです。