Genva Craft
ドキュメント
Genva Craftは、ひとりで制作する個人のアクセサリー作家のためのWordPressブロックテーマです。写真を主役にし、ネットショップ・取扱店・オーダーの窓口を1つのセクションにまとめます。作品は投稿で書き、作品ごとにショップへの「購入する」ボタンと「問い合わせる」ボタンを置けます。トップページは「作品を販売するサイト」と「作品を受注するサイト」の2種類から選べます。
主な特徴
- トップページの雛形2種類(作品を販売するサイト/作品を受注するサイト)
- 固定ページ5種類の雛形(お求めいただける場所、出店予定、作り手、オーダー、お問い合わせ)
- 作品の雛形「作品」(写真4枚、素材・サイズ・制作年・価格の表、購入と問い合わせのボタン)
- 価格を空にすると、価格の行ごと表示しない
- 作品ページの写真は、押すと大きい写真と入れ替わる。大きい写真は拡大表示
- 作品一覧はメイソンリー、ブロックスタイル「ベント」で切り替え
- SNS・ショップのリンクの一括設定(外観 > 店舗情報。7サービス)
- ダークモード切替ボタン(ヘッダー右端)
- スタイルバリエーション2種類(Noir/Bordeaux)
- 日本語の翻訳ファイルを同梱
- 369theme.com経由の自動アップデート対応
動作要件
- WordPress 6.7以上(7.1まで動作確認済み)
- PHP 7.4以上
- ブロックテーマ対応環境(サイトエディター)
テーマタイプ
単体で動く親テーマです。ほかのテーマをインストールする必要はありません(子テーマでもアドオンでもありません)。
プラグイン依存
必須プラグインはありません。すべてコアブロックで構成しています。お問い合わせフォームを動かす場合のみ、お使いのフォームプラグイン(Contact Form 7 など)を利用してください。決済や在庫の管理は、minne・BASE・Creema などのショップに任せる作りです。
インストール
Genva Craftは単体で動くブロックテーマです。以下の手順でインストールしてください。
テーマのアップロード
WordPress管理画面の「外観」→「テーマ」→「新しいテーマを追加」→「テーマのアップロード」を選び、購入時にダウンロードした genva-craft.zip をアップロードします。
有効化
アップロードが完了したら「有効化」をクリックします。この時点では、トップページにはヘッダーとフッターしか表示されません。トップページの中身は、初期設定の手順04で固定ページとして作ります。
編集の入口
トップページは「固定ページ」の「ホーム」として、ふつうのページと同じように編集します。ヘッダーとフッターは「外観」→「エディター」→「パターン」→「テンプレートパーツ」にあります(画面の下のほうにあり、スクロールしないと出てきません)。作品一覧と作品ページの枠は「外観」→「エディター」→「テンプレート」から編集します。
初期設定
公開前に、次の順番で設定してください。手順06まで終えると、サイトの骨組みが完成します。
店舗情報を入力する
「外観」→「店舗情報」で、使っているサービスのアドレスを入力します。入力したものだけが、フッターにアイコンまたは名前で並びます。空欄のサービスは表示されません。
| サービス | 入力の例 |
|---|---|
https://www.instagram.com/your_name/ | |
| X | https://x.com/your_name |
https://www.facebook.com/your_page | |
| LINE公式アカウント | https://lin.ee/xxxxxxx(友だち追加のリンク) |
| minne | https://minne.com/@your_name |
| BASE | https://your-shop.base.shop/ |
| Creema | https://www.creema.jp/creator/0000000 |
サイトエディターの画面では、フッターのアイコンは見本のまま表示されます。実際のサイトには、入力したアドレスが入ります。固定ページの中のショップのリンク(お求めいただける場所の「minne」「BASE」など)は、ここでは変わりません。手順07で直します。
屋号を設定する
作家名や工房の名前は「設定」→「一般」→「サイトのタイトル」に入れます。ヘッダーの中央とフッターに表示されます。
パーマリンクを設定する
「設定」→「パーマリンク」で「投稿名」を選んで保存します。「基本」のままだと、ページのアドレスが ?page_id=12 のような形になり、次の手順で決めるスラッグが使われません。
トップページ(ホーム)を作る
この手順を終えるまで、トップページにはヘッダーとフッターしか表示されません。
- 「固定ページ」→「新規追加」。パターンを選ぶ画面が出るので、どちらかを選びます。
- トップページ専用:作品を販売するサイト … 完成した作品を売る作家向け
- トップページ専用:作品を受注するサイト … オーダーを受けて作る作家向け
- タイトルは「ホーム」、スラッグは
home(右サイドバーの「URL」)にして公開します。 - 「設定」→「表示設定」の「ホームページの表示」で「固定ページ」を選び、ホームページに「ホーム」を指定して保存します。
トップページの中身は、すべて「ホーム」ページの本文に入っています。区画を並べ替えたり消したりするのも、文章を直すのも、ふつうのページと同じ編集画面で行います。
作品の一覧(Works)を作る
- 「固定ページ」→「新規追加」。パターンを選ぶ画面は、何も選ばずに閉じます。
- タイトルは「Works」、スラッグは
works。本文は空のまま公開します。 - 「設定」→「表示設定」で、投稿ページに「Works」を指定して保存します。
作品(投稿)の一覧が /works/ に表示されます。本文を空にしておくのは、WordPress がこのページの本文の代わりに投稿の一覧を出すためです。
ほかの固定ページを作る
「固定ページ」→「新規追加」で、下の表のパターンを選び、スラッグを入れて公開します。
| ページ名 | スラッグ | 選ぶパターン |
|---|---|---|
| お求めいただける場所 | shops | 固定ページ:お求めいただける場所 |
| 出店予定 | events | 固定ページ:出店予定 |
| 作り手 | about | 固定ページ:作り手 |
| オーダー | order | 固定ページ:オーダー(オーダーを受ける場合) |
| お問い合わせ | contact | 固定ページ:お問い合わせ |
ページ名を日本語のまま公開すると、アドレスが %e3%82%aa... のような読めない文字列になります。右サイドバーの「URL」から、表のスラッグを入れてから公開してください。あとから変えるとリンク切れの原因になります。
リンク先を確かめる
ヘッダーのメニュー・フッター・各ページのボタンは、最初から上の表のスラッグ(/works/・/shops/・/events/・/about/・/contact/)を指しています。表のとおりに作れば、書き換えは要りません。
自分で書き換えるもの
- お求めいただける場所の「minne」「BASE」
- 作品ページの「minne で購入する」
仮のリンク(#)になっています。ご自身のショップのアドレスに変えるか、削除してください。
別のスラッグにしたとき
ヘッダーとフッターは「外観」→「エディター」→「パターン」→「テンプレートパーツ」から、各ページのボタンはそのページの編集画面から、リンク先を変えてください。
オーダーのページへのリンクは、メニューに入っていません。オーダーを受ける場合は、「外観」→「エディター」でヘッダーのメニューに足してください。
お問い合わせフォームを入れる
お問い合わせページの破線の枠の中に、お使いのフォームプラグインのブロックを置いてください。設置後、枠の中の案内文は削除して構いません。
写真と代替テキストを差し替える
仮画像を選び、ツールバーの「置換」から実際の写真に差し替えます。同梱の画像には「やわらかな昼の光の中、無地の台に置いた作品の全体」のように、入れるべき写真の説明が代替テキスト(alt)として入っています。目の見えない方が読み上げで聞く文章なので、実際の写真の内容に合わせて書き換えてください。
作品の書き方
増えていくのは作品だけなので、作品は「投稿」で書きます。一覧は、初期設定の手順05で投稿ページに指定した「Works」ページです。
雛形「作品」を選ぶ
「投稿」→「新規追加」で、パターン「作品」を選びます。左に写真、右にカテゴリー・作品名・詳細の表・説明・ボタンが並んだ形が本文に入ります。
写真を4枚差し替える
大きい写真1枚と、小さい写真3枚です。訪問者が小さい写真を押すと、大きい写真と入れ替わります。大きい写真を押すと、画面いっぱいに拡大されます。それぞれの代替テキストは、実際の写真に合わせて書いてください。
詳細の表を埋める
素材(Material)・サイズ(Size)・制作年(Year)・価格(Price)の表です。値が空の行は、公開したページに表示されません。価格を見せたくない作品は、価格の欄を空のままにしてください。価格を入れると、その行が表示されます。
ボタンを直す
1つめのボタン「minne で購入する」は、ご自身のショップの作品ページのアドレスと名前(「BASE で購入する」など)に変えるか、削除します。2つめの「この作品について問い合わせる」は、最初からお問い合わせページ(/contact/)につながっています。
一覧に出る内容を設定する
- アイキャッチ画像:一覧に表示される写真
- 抜粋:作品名の下に出る短い一行(例:K18 / 11号)
- タグ:「Sold」「Made to order」など。カードに小さな札で表示されます
- カテゴリー:「リング」「ピアス」など。作品名の上に表示され、作品一覧の絞り込みにも使われます
作品一覧の並べ方は2種類
| スタイル | 並べ方 |
|---|---|
| デフォルト(メイソンリー) | 写真の高さに合わせて、すき間なく詰めて並べる |
| ベント | 大小の枠を組み合わせて並べる |
「外観」→「エディター」→「テンプレート」で作品一覧のテンプレート(ブログのホーム)を開き、投稿テンプレートのブロックを選んで、右サイドバーの「スタイル」から選びます。
固定ページのパターン
固定ページを新規作成すると、パターンを選ぶ画面が出ます。選んだ内容は本文にコピーされるので、ふつうのブロックとして自由に編集できます。
トップページ専用:作品を販売するサイト home
ヒーロー、新作(投稿から新しい6点)、お求めいただける場所、出店予定、作り手、教室。
トップページ専用:作品を受注するサイト home
ヒーロー、オーダーの受付状況、これまでの作品、オーダーの流れ、リフォーム・修理、工房、オーダーのご相談。
お求めいただける場所 shops
オンラインショップ・取扱店・オーダーの窓口を、3列にまとめたページ。
出店予定 events
これからのイベント・展示の予定。日付を大きく見せます。
作り手 about
作り手の紹介と、教室のご案内。
オーダー order
オーダーの受付状況、オーダーの流れ、リフォーム・修理、最後にご相談への案内。
お問い合わせ contact
短いご案内、フォームのプラグインのブロックを置く破線の枠、よくある質問。フォームの送信処理はプラグインの役割です。
パターン選択の画面を閉じてしまったとき
左上の「+」から「パターン」を開き、テーマのパターンの中から選んでください。
テンプレート一覧
WordPressのテンプレート階層に沿って、自動で使い分けられます。選ぶ操作は要りません。
front-page フロントページ
ホームページに指定した「ホーム」ページの本文を、そのまま表示します。
home 作品の一覧
投稿ページに指定した「Works」ページ。カテゴリーの絞り込みと、作品のカード。
single 作品のページ
投稿1件ずつのページ。下に「ほかの作品」が並びます。
page 固定ページ
お求めいただける場所・作り手など、固定ページ全般。
archive アーカイブ
カテゴリー・タグ・日付別の一覧。
search 検索結果
サイト内検索の結果。
404 ページが見つからない
存在しないアドレスを開いたときのページ。
index 予備
ほかのどれにも当てはまらないときに使われる、最後の受け皿です。
パターン一覧
ブロックを追加する「+」→「パターン」から挿入できるものと、テーマの内部で使うものがあります。
単独で挿入できるセクション(13種類)
- ヒーロー専用:作品を販売するサイト
- ヒーロー専用:作品を受注するサイト
- 新作
- お求めいただける場所
- 出店予定
- 作り手
- 教室
- オーダーの受付状況
- これまでの作品
- オーダーの流れ
- リフォーム・修理
- 工房
- オーダーのご相談
トップページの雛形に入っている区画と同じものです。あとから区画を1つだけ足したいときに使います。
ページの雛形
- トップページ専用:作品を販売するサイト/作品を受注するサイト
- 固定ページ:お求めいただける場所/出店予定/作り手/オーダー/お問い合わせ
- 作品(投稿用)
テーマの内部で使うもの
ヘッダー・フッター・作品一覧・作品一覧の見出し・作品の本文・ほかの作品・検索フォーム・コメント・ページが見つかりません は、テンプレートの中で使われます。
テンプレートを保存したら、テーマの更新が反映されなくなります
テンプレートを一度でも保存すると、そのページはテーマのファイルを見なくなります。保存した内容がデータベースに残り、そちらが使われるためです。元に戻したいときは、同じ画面で「カスタマイズをクリア」を選んでください。ただし、そのテンプレートに加えた変更はすべて消えます。
デザイン設定
スタイルバリエーション
標準の配色に加えて、「外観」→「エディター」→「スタイル」から「Noir」または「Bordeaux」を選べます。どのスタイルも、ダークモード用の色を持っています。
標準(生成りと金)
#F7F3EC
#1F1C18
#B08D57
Noir
#141414
#ECE9E4
#D27A8C
Bordeaux
#FFFFFF
#1A1A1A
#9E3149
配色の組み合わせは、文字と背景のコントラスト比が 4.5:1 以上になるよう確認して決めてあります。個別の色を変更すると、読みにくくなる場合があります。標準の金は線と飾りにだけ使い、文字には使っていません。
タイポグラフィ
- 見出し:しっぽり明朝(テーマに同梱、500)
- 英字のラベル・数字:Cormorant Garamond(テーマに同梱、400 / 500)。数字は高さのそろった形(ライニング数字)で表示します
- 本文:閲覧者の端末の書体(ヒラギノ角ゴ、游ゴシック など)
外部サービスへの接続
フォントはテーマに同梱しているため、Google Fontsなどの外部のフォント配信サービスには接続しません。
ダークモード
ヘッダー右端のボタンで切り替えます。暗い配色では、ボタン・英字のラベル・線の色が変わります(標準は金、Noir は銀、Bordeaux は淡いボルドー)。パソコンやスマートフォンの設定には追従しません。訪問者が選んだ状態はその方のブラウザに保存され、次回も同じ状態で表示されます。
アクセシビリティ機能
読みやすい文字の大きさ
本文は16px、いちばん小さい注記でも13pxです。
コントラスト比 4.5:1 以上
明るい配色・暗い配色の両方で、すべての文字の色を測って決めています。
キーボードとスクリーンリーダー
キーボードで移動したときは、フォーカスの位置に枠が出ます。ダークモードのボタンは、いまの状態を読み上げソフトに伝えます。作品ページの写真の入れ替えと拡大も、キーボードで操作できます。
写真の説明文
同梱の仮画像には、入れるべき写真の説明が代替テキストとして入っています。差し替えるときの手本になります。
自動アップデート
Genva Craftは369theme.comのアップデートサーバーと連携しており、WordPress管理画面から最新版にアップデートできます。
アップデートの確認方法
更新の確認は最大1時間キャッシュされます。「外観」→「テーマ」の画面に表示される「今すぐ更新を確認」から、すぐに確認し直せます。新しいバージョンがあるときは、通知が表示されます。
アップデート時の注意
- テーマのファイルを直接編集している場合、アップデートで上書きされます
- サイトエディターで編集した内容はデータベースに保存されるため、テーマの更新では消えません
- 固定ページ(ホームを含む)の本文は作成時にページ側へコピーされているので、テーマを更新しても変わりません
- 一度保存したテンプレートには、テーマ側の変更が反映されません(上の「パターン一覧」の注意を参照)
- アップデートの前に、サイトのバックアップを取ることをおすすめします
よくある質問
オーダーの受付を止めているときは?
受付状況の帯がある箇所(トップページやオーダーのページ)で、「オーダー受付中」の文字を「3月まで受付を休止しています」のように書き換えてください。
終わったイベントは、どう表示しますか?
そのイベントのグループを選び、右サイドバーの「高度な設定」→「追加 CSS クラス」に events__item--past と入れます。日付が灰色になり、日に取り消し線が付きます。
価格を出したくない作品があります
作品の詳細の表で、価格(Price)の欄を空のままにしてください。公開したページでは、その行ごと表示されません。
ネットショップの機能は付いていますか?
付いていません。決済や在庫の管理は、minne・BASE・Creema などのショップに任せる作りです。作品ページの「購入する」ボタンから、そのショップの作品ページへ案内してください。
フォームは付いていますか?
付いていません。メールの送信はプラグインの担当で、テーマに含めるとプラグインを変えた日にフォームが動かなくなります。お問い合わせページには、フォームを置く枠だけを用意しています。
サイトエディターの画面では、フッターのアイコンが見本のままです
実際のサイトには、「外観」→「店舗情報」で入力したアドレスが入ります。編集画面の表示と一致させるにはテーマ専用のブロックが必要で、そうするとテーマを変えたときにページへ壊れたブロックが残ります。そのため、この形にしています。
デモサイトの写真は付いてきますか?
付いていません。デモサイトとスクリーンショットの写真は、AIで生成したイメージと、自由に使える写真素材です。テーマに同梱しているのは、差し替え用の SVG の仮画像3点のみです。
管理画面が英語で表示されます
テーマは英語で書かれていて、日本語の翻訳ファイルを同梱しています。「設定」→「一般」の「サイトの言語」が日本語なら、パターンの名前なども日本語で表示されます。ヘッダーのメニュー(Works・Shops など)は、飾りとして英語のままにしています。
サポートを受けるには?
購入者専用のサポートフォームからお問い合わせください。下の「サポート・リソース」にリンクがあります。
Genvaシリーズ
ひとりで、または少人数で仕事を受ける作り手のためのテーマシリーズです。