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

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 などのショップに任せる作りです。

Installation

インストール

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

01

テーマのアップロード

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

02

有効化

アップロードが完了したら「有効化」をクリックします。この時点では、トップページにはヘッダーとフッターしか表示されません。トップページの中身は、初期設定の手順04で固定ページとして作ります。

03

編集の入口

トップページは「固定ページ」の「ホーム」として、ふつうのページと同じように編集します。ヘッダーとフッターは「外観」→「エディター」→「パターン」→「テンプレートパーツ」にあります(画面の下のほうにあり、スクロールしないと出てきません)。作品一覧と作品ページの枠は「外観」→「エディター」→「テンプレート」から編集します。

Setup

初期設定

公開前に、次の順番で設定してください。手順06まで終えると、サイトの骨組みが完成します。

01

店舗情報を入力する

「外観」→「店舗情報」で、使っているサービスのアドレスを入力します。入力したものだけが、フッターにアイコンまたは名前で並びます。空欄のサービスは表示されません。

サービス入力の例
Instagramhttps://www.instagram.com/your_name/
Xhttps://x.com/your_name
Facebookhttps://www.facebook.com/your_page
LINE公式アカウントhttps://lin.ee/xxxxxxx(友だち追加のリンク)
minnehttps://minne.com/@your_name
BASEhttps://your-shop.base.shop/
Creemahttps://www.creema.jp/creator/0000000

サイトエディターの画面では、フッターのアイコンは見本のまま表示されます。実際のサイトには、入力したアドレスが入ります。固定ページの中のショップのリンク(お求めいただける場所の「minne」「BASE」など)は、ここでは変わりません。手順07で直します。

02

屋号を設定する

作家名や工房の名前は「設定」→「一般」→「サイトのタイトル」に入れます。ヘッダーの中央とフッターに表示されます。

03

パーマリンクを設定する

「設定」→「パーマリンク」で「投稿名」を選んで保存します。「基本」のままだと、ページのアドレスが ?page_id=12 のような形になり、次の手順で決めるスラッグが使われません。

04

トップページ(ホーム)を作る

この手順を終えるまで、トップページにはヘッダーとフッターしか表示されません。

  1. 「固定ページ」→「新規追加」。パターンを選ぶ画面が出るので、どちらかを選びます。
    • トップページ専用:作品を販売するサイト … 完成した作品を売る作家向け
    • トップページ専用:作品を受注するサイト … オーダーを受けて作る作家向け
  2. タイトルは「ホーム」、スラッグは home(右サイドバーの「URL」)にして公開します。
  3. 「設定」→「表示設定」の「ホームページの表示」で「固定ページ」を選び、ホームページに「ホーム」を指定して保存します。

トップページの中身は、すべて「ホーム」ページの本文に入っています。区画を並べ替えたり消したりするのも、文章を直すのも、ふつうのページと同じ編集画面で行います。

05

作品の一覧(Works)を作る

  1. 「固定ページ」→「新規追加」。パターンを選ぶ画面は、何も選ばずに閉じます。
  2. タイトルは「Works」、スラッグは works。本文は空のまま公開します。
  3. 「設定」→「表示設定」で、投稿ページに「Works」を指定して保存します。

作品(投稿)の一覧が /works/ に表示されます。本文を空にしておくのは、WordPress がこのページの本文の代わりに投稿の一覧を出すためです。

06

ほかの固定ページを作る

「固定ページ」→「新規追加」で、下の表のパターンを選び、スラッグを入れて公開します。

ページ名 スラッグ 選ぶパターン
お求めいただける場所shops固定ページ:お求めいただける場所
出店予定events固定ページ:出店予定
作り手about固定ページ:作り手
オーダーorder固定ページ:オーダー(オーダーを受ける場合)
お問い合わせcontact固定ページ:お問い合わせ

ページ名を日本語のまま公開すると、アドレスが %e3%82%aa... のような読めない文字列になります。右サイドバーの「URL」から、表のスラッグを入れてから公開してください。あとから変えるとリンク切れの原因になります。

07

リンク先を確かめる

ヘッダーのメニュー・フッター・各ページのボタンは、最初から上の表のスラッグ(/works/・/shops/・/events/・/about/・/contact/)を指しています。表のとおりに作れば、書き換えは要りません。

自分で書き換えるもの

  • お求めいただける場所の「minne」「BASE」
  • 作品ページの「minne で購入する」

仮のリンク(#)になっています。ご自身のショップのアドレスに変えるか、削除してください。

別のスラッグにしたとき

ヘッダーとフッターは「外観」→「エディター」→「パターン」→「テンプレートパーツ」から、各ページのボタンはそのページの編集画面から、リンク先を変えてください。

オーダーのページへのリンクは、メニューに入っていません。オーダーを受ける場合は、「外観」→「エディター」でヘッダーのメニューに足してください。

08

お問い合わせフォームを入れる

お問い合わせページの破線の枠の中に、お使いのフォームプラグインのブロックを置いてください。設置後、枠の中の案内文は削除して構いません。

09

写真と代替テキストを差し替える

仮画像を選び、ツールバーの「置換」から実際の写真に差し替えます。同梱の画像には「やわらかな昼の光の中、無地の台に置いた作品の全体」のように、入れるべき写真の説明が代替テキスト(alt)として入っています。目の見えない方が読み上げで聞く文章なので、実際の写真の内容に合わせて書き換えてください。

Works

作品の書き方

増えていくのは作品だけなので、作品は「投稿」で書きます。一覧は、初期設定の手順05で投稿ページに指定した「Works」ページです。

01

雛形「作品」を選ぶ

「投稿」→「新規追加」で、パターン「作品」を選びます。左に写真、右にカテゴリー・作品名・詳細の表・説明・ボタンが並んだ形が本文に入ります。

02

写真を4枚差し替える

大きい写真1枚と、小さい写真3枚です。訪問者が小さい写真を押すと、大きい写真と入れ替わります。大きい写真を押すと、画面いっぱいに拡大されます。それぞれの代替テキストは、実際の写真に合わせて書いてください。

03

詳細の表を埋める

素材(Material)・サイズ(Size)・制作年(Year)・価格(Price)の表です。値が空の行は、公開したページに表示されません。価格を見せたくない作品は、価格の欄を空のままにしてください。価格を入れると、その行が表示されます。

04

ボタンを直す

1つめのボタン「minne で購入する」は、ご自身のショップの作品ページのアドレスと名前(「BASE で購入する」など)に変えるか、削除します。2つめの「この作品について問い合わせる」は、最初からお問い合わせページ(/contact/)につながっています。

05

一覧に出る内容を設定する

  • アイキャッチ画像:一覧に表示される写真
  • 抜粋:作品名の下に出る短い一行(例:K18 / 11号)
  • タグ:「Sold」「Made to order」など。カードに小さな札で表示されます
  • カテゴリー:「リング」「ピアス」など。作品名の上に表示され、作品一覧の絞り込みにも使われます

作品一覧の並べ方は2種類

スタイル並べ方
デフォルト(メイソンリー)写真の高さに合わせて、すき間なく詰めて並べる
ベント大小の枠を組み合わせて並べる

「外観」→「エディター」→「テンプレート」で作品一覧のテンプレート(ブログのホーム)を開き、投稿テンプレートのブロックを選んで、右サイドバーの「スタイル」から選びます。

Pages

固定ページのパターン

固定ページを新規作成すると、パターンを選ぶ画面が出ます。選んだ内容は本文にコピーされるので、ふつうのブロックとして自由に編集できます。

トップページ専用:作品を販売するサイト home

ヒーロー、新作(投稿から新しい6点)、お求めいただける場所、出店予定、作り手、教室。

トップページ専用:作品を受注するサイト home

ヒーロー、オーダーの受付状況、これまでの作品、オーダーの流れ、リフォーム・修理、工房、オーダーのご相談。

お求めいただける場所 shops

オンラインショップ・取扱店・オーダーの窓口を、3列にまとめたページ。

出店予定 events

これからのイベント・展示の予定。日付を大きく見せます。

作り手 about

作り手の紹介と、教室のご案内。

オーダー order

オーダーの受付状況、オーダーの流れ、リフォーム・修理、最後にご相談への案内。

お問い合わせ contact

短いご案内、フォームのプラグインのブロックを置く破線の枠、よくある質問。フォームの送信処理はプラグインの役割です。

パターン選択の画面を閉じてしまったとき

左上の「+」から「パターン」を開き、テーマのパターンの中から選んでください。

Templates

テンプレート一覧

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

front-page フロントページ

ホームページに指定した「ホーム」ページの本文を、そのまま表示します。

home 作品の一覧

投稿ページに指定した「Works」ページ。カテゴリーの絞り込みと、作品のカード。

single 作品のページ

投稿1件ずつのページ。下に「ほかの作品」が並びます。

page 固定ページ

お求めいただける場所・作り手など、固定ページ全般。

archive アーカイブ

カテゴリー・タグ・日付別の一覧。

search 検索結果

サイト内検索の結果。

404 ページが見つからない

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

index 予備

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

Patterns

パターン一覧

ブロックを追加する「+」→「パターン」から挿入できるものと、テーマの内部で使うものがあります。

単独で挿入できるセクション(13種類)

  • ヒーロー専用:作品を販売するサイト
  • ヒーロー専用:作品を受注するサイト
  • 新作
  • お求めいただける場所
  • 出店予定
  • 作り手
  • 教室
  • オーダーの受付状況
  • これまでの作品
  • オーダーの流れ
  • リフォーム・修理
  • 工房
  • オーダーのご相談

トップページの雛形に入っている区画と同じものです。あとから区画を1つだけ足したいときに使います。

ページの雛形

  • トップページ専用:作品を販売するサイト/作品を受注するサイト
  • 固定ページ:お求めいただける場所/出店予定/作り手/オーダー/お問い合わせ
  • 作品(投稿用)

テーマの内部で使うもの

ヘッダー・フッター・作品一覧・作品一覧の見出し・作品の本文・ほかの作品・検索フォーム・コメント・ページが見つかりません は、テンプレートの中で使われます。

テンプレートを保存したら、テーマの更新が反映されなくなります

テンプレートを一度でも保存すると、そのページはテーマのファイルを見なくなります。保存した内容がデータベースに残り、そちらが使われるためです。元に戻したいときは、同じ画面で「カスタマイズをクリア」を選んでください。ただし、そのテンプレートに加えた変更はすべて消えます。

Design

デザイン設定

スタイルバリエーション

標準の配色に加えて、「外観」→「エディター」→「スタイル」から「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 は淡いボルドー)。パソコンやスマートフォンの設定には追従しません。訪問者が選んだ状態はその方のブラウザに保存され、次回も同じ状態で表示されます。

Accessibility

アクセシビリティ機能

読みやすい文字の大きさ

本文は16px、いちばん小さい注記でも13pxです。

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

明るい配色・暗い配色の両方で、すべての文字の色を測って決めています。

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

キーボードで移動したときは、フォーカスの位置に枠が出ます。ダークモードのボタンは、いまの状態を読み上げソフトに伝えます。作品ページの写真の入れ替えと拡大も、キーボードで操作できます。

写真の説明文

同梱の仮画像には、入れるべき写真の説明が代替テキストとして入っています。差し替えるときの手本になります。

Auto Update

自動アップデート

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

アップデートの確認方法

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

アップデート時の注意

  • テーマのファイルを直接編集している場合、アップデートで上書きされます
  • サイトエディターで編集した内容はデータベースに保存されるため、テーマの更新では消えません
  • 固定ページ(ホームを含む)の本文は作成時にページ側へコピーされているので、テーマを更新しても変わりません
  • 一度保存したテンプレートには、テーマ側の変更が反映されません(上の「パターン一覧」の注意を参照)
  • アップデートの前に、サイトのバックアップを取ることをおすすめします
FAQ

よくある質問

オーダーの受付を止めているときは?

受付状況の帯がある箇所(トップページやオーダーのページ)で、「オーダー受付中」の文字を「3月まで受付を休止しています」のように書き換えてください。

終わったイベントは、どう表示しますか?

そのイベントのグループを選び、右サイドバーの「高度な設定」→「追加 CSS クラス」に events__item--past と入れます。日付が灰色になり、日に取り消し線が付きます。

価格を出したくない作品があります

作品の詳細の表で、価格(Price)の欄を空のままにしてください。公開したページでは、その行ごと表示されません。

ネットショップの機能は付いていますか?

付いていません。決済や在庫の管理は、minne・BASE・Creema などのショップに任せる作りです。作品ページの「購入する」ボタンから、そのショップの作品ページへ案内してください。

フォームは付いていますか?

付いていません。メールの送信はプラグインの担当で、テーマに含めるとプラグインを変えた日にフォームが動かなくなります。お問い合わせページには、フォームを置く枠だけを用意しています。

サイトエディターの画面では、フッターのアイコンが見本のままです

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

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

付いていません。デモサイトとスクリーンショットの写真は、AIで生成したイメージと、自由に使える写真素材です。テーマに同梱しているのは、差し替え用の SVG の仮画像3点のみです。

管理画面が英語で表示されます

テーマは英語で書かれていて、日本語の翻訳ファイルを同梱しています。「設定」→「一般」の「サイトの言語」が日本語なら、パターンの名前なども日本語で表示されます。ヘッダーのメニュー(Works・Shops など)は、飾りとして英語のままにしています。

サポートを受けるには?

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