Jamgyeol テーマ(宿泊予約プラットフォーム)
宿泊予約プラットフォームのための Zittme 公式テーマ Jamgyeol(jamgyeol)の詳細マニュアルです。宿泊(lodging)モジュールと組み合わせて使うよう設計されており、地域・日付・人数で宿を探す検索がトップページの中心です。料金・空室カレンダー、宿泊・デイユースの切り替え、クーポン、レビュー、非会員の予約照会まで、予約の流れ全体をアプリのようにまとめました。コマースモジュールを一緒に使うと、宿泊券・グッズを販売するショップも同じデザインで開けます。ダークモードとレスポンシブに標準対応し、標準フォントは Pretendard です。
この文書の画面は実際のデモサイトをそのままキャプチャしたものです。デモは jamgyeol-demo.zitt.me で直接ご覧いただけます。

構成
| 構成要素 | 場所 | 役割 |
|---|---|---|
| レイアウト | themes/jamgyeol/layouts/jamgyeol | サイトの骨格・ヘッダー検索・下部タブバー・フッター |
| 宿泊スキン | themes/jamgyeol/modules/lodging | トップページ・宿一覧・宿詳細・予約・結果・マイ予約・クーポン・ポイント |
| コマーススキン | themes/jamgyeol/modules/commerce | ショップホーム・一覧・詳細・カート・注文・マイショッピング |
| 掲示板スキン | themes/jamgyeol/modules/board | リスト型・カード型・ウェブマガジン型・FAQ型・イベント型 |
| 会員スキン | themes/jamgyeol/modules/member | ログイン・会員登録・マイページ(今後の予約・クーポン・ポイント) |
| メッセージ・通知センター・システムメッセージスキン | themes/jamgyeol/modules/{communication, ncenterlite, message} | メッセージボックス・通知一覧・システム案内画面 |
| 予約・zittme Pay・お問い合わせ・知識Q&Aスキン | themes/jamgyeol/modules/{reservation, zittme_pay, contact, kin} | 該当モジュールがインストールされたサイトでのみ適用 |
すべての構成要素が同じデザイントークン(紫のポイントカラー・フォント・角丸・余白)を共有します。ポイントカラーはレイアウト設定の一か所で変更すれば全画面に一緒に反映され、ダークモードでは文字のコントラストが保たれるよう専用トークンが自動で計算されます。
インストールと適用
- テーマファイルを
themes/jamgyeolに置きます。(ストアからのインストールまたは圧縮ファイルの展開) - 管理者 > デザイン設定で Jamgyeol テーマを選んで適用します。レイアウトとモジュールスキンが一度に適用されます。
- 宿泊モジュールで宿泊用の mid(例:
stay)を作成し、サイトのトップページ に指定すると、トップページに検索・人気の宿・地域・最安値・デイユース・イベント・お知らせが 1 画面に表示されます。 - イベント掲示板(
event)とお知らせ(notice)を作成すると、トップページの下部に自動でつながります。 - コマースモジュールがインストールされていれば、ショップメニューとカートボタンがヘッダーに一緒に表示されます。
- レスポンシブへの切り替え:このテーマはレスポンシブなので、モバイル専用ビューをオフにすることをおすすめします。オンのままだと、モバイルでは別のモバイルレイアウトが代わりに表示されます。
- XE 互換ボタンスタイルをオフにする:コア共通 CSS にある XE 時代の
.btnスタイルがスキンのボタンを上書きすることがあります。config/config.user.inc.phpに次の 1 行を入れ、files/cache/assets内のファイルを空にすると取り除けます。 - 統合検索:地域や宿の名前で、すぐに宿一覧を開きます。
- お気に入り・最近見た宿:訪問者のブラウザに保存されるため、ログインしなくても動作し、数字のバッジで件数を表示します。
- メニューバー:サイトマップの上部メニューが表示され、右側にはイベント・お知らせのような補助メニューが付きます。
- 検索ボックスで 宿泊 / デイユース を切り替え、地域・チェックイン・チェックアウト・人数を選びます。デイユースは利用日 1 日だけを選びます。
- タイプのチップ(ホテル・モーテル・ペンション・ゲストハウス・リゾート)と人気地域のチップで絞り込み、おすすめ順・価格の安い順・価格の高い順・評価順・レビューの多い順で並べ替えます。
- 日付を選ぶと、その日付に空室がある宿だけを、1 泊の最安値を基準に表示します。
- 写真は枚数に合わせて配置が変わります(1 枚・2〜3 枚・4 枚以上)。押すと大きく表示してめくって見られます。
- 客室ごとに基準・最大人数、残りの客室数、1 泊の料金が表示され、予約する からそのまま予約に進めます。
- 右側のカレンダーで客室を選ぶと、日付ごとの料金と空室・満室が表示されます。1 回押すとチェックイン、もう一度押すとチェックアウトが決まります。カレンダーの月の表記と曜日はサイトの言語に従います。
- この宿で使えるクーポンコード、キャンセル規定、レビューと施設からの返信、所在地が続きます。
- クーポン・特典:開催中のクーポンをチケットの形で表示し、会員は受け取ってマイクーポンに入れられます。
- マイ予約:会員は今後の予約と過去の予約を分けて確認し、非会員は予約番号 + 照会用パスワードで照会します。
- マイページ:会員スキンのマイページに、今後の予約 3 件とクーポン・ポイントの概要が一緒に表示されます。
- 下部に ホーム・検索・マイ予約・マイページ のタブバーが固定されます。
- ヘッダーは、ロゴ・非会員の予約照会・お気に入り・最近見た宿・メニューボタンの 1 行と検索ボックスに縮まります。
- メニューのドロワーには、アカウントボタン・メニュー一覧・ダークモード・言語ツールが入ります。
- テーマの文言は、韓国語・英語・日本語を含む 12 言語の言語ファイルを備えています。
- 宿の名前・客室の名前・メニューの名前・レイアウト設定のロゴテキスト・フッターの文言には、管理者 > 多言語で作成した
$user_lang->codeを入れることができ、訪問者の言語に合わせて切り替わって表示されます。 - 日付・金額の表記は、宿泊モジュールの言語ファイル(
lodging_date_fmt、lodging_money)に従います。
推奨環境:Zittme 1.0.2 以上、宿泊 1.0.0 以上、コマース 1.1.1 以上。事前決済を使うには zittme Pay が必要で、zittme Pay がない場合は現地決済のみ表示されます。
あわせて推奨するサイト設定
define('DISABLE_XE_BTN_STYLES', true);ヘッダー
ヘッダーは上から ユーティリティバー(ログイン・会員登録・言語・ダークモード)→ ロゴ・統合検索・非会員の予約照会・お気に入り・最近見た宿 → メニューバー の 3 段です。
宿を探す

宿の詳細


予約と結果

予約画面は、予約者情報 → クーポン・ポイント → 決済方法 → キャンセル規定への同意の順で、右側の概要で決済金額がすぐに再計算されます。非会員は 照会用パスワード を決めておくと、非会員の予約照会 で予約番号と一緒に再度確認できます。

結果画面は、予約の状態によって表示が変わります。
| 状態 | 表示 |
|---|---|
| 予約確定 | チェックマーク、フロントで見せる予約番号、キャンセルボタンと今キャンセルした場合の返金額 |
| 決済待ち | 時計マーク、決済期限の案内、zittme Pay の注文が有効なら決済を続けるボタン |
| 決済期限切れ・キャンセル・ノーショー | X マークと案内文 |
| 利用完了 | レビュー投稿フォーム |
クーポン・ポイント・マイ予約
掲示板スキン
掲示板スキン設定の 一覧の形式 で、掲示板ごとに見た目を選びます。
| 形式 | 用途 |
|---|---|
| リスト型 | お知らせなどの一般的な掲示板 |
| ウェブマガジン型 | サムネイル + 要約のあるコミュニティ |
| カード型 | サムネイル中心のギャラリー |
| FAQ型 | 質問を押すと回答が展開されるアコーディオン |
| イベント型 | 期間・開催中・予定・終了のバッジと D-day が付くイベントカード |

イベント型は、掲示板の拡張変数のうち入力名が event_start・event_end の日付欄(開始日・終了日)で状態を計算します。ウェブマガジン型・カード型・FAQ型は、掲示板の一覧設定に 要約 カラムがあると要約と回答が表示されます。
モバイル

多言語
フッター
レイアウト設定 > フッター タブで構成します。項目を空欄にすると、そのブロックは表示されません。
| 項目 | 説明 |
|---|---|
| サイト紹介文 | ロゴの下の短い紹介 |
| カスタマーセンターの電話番号 / 営業時間 | カスタマーセンターブロック。営業時間は 1 行ずつ表示 |
| お問い合わせメール | メールでのお問い合わせリンク |
| 事業者・連絡先情報 | 改行した各行が 1 項目として表示 |
| Instagram・Facebook・YouTube・ブログのアドレス | 入力したものだけアイコンで表示 |
| 下部の案内文 | 通信販売仲介者の告知のような免責・案内文 |
| 著作権表記 | 最下部の表記 |
レイアウト設定の全項目
基本
| 項目 | 標準値 | 説明 |
|---|---|---|
| ロゴ画像 / ダークモード用ロゴ | なし | 空欄ならロゴテキストを使用 |
| ロゴテキスト | なし | 空欄ならサイトタイトル |
| ポイントカラー | 紫 | ボタン・リンク・アクティブ表示・スキンの強調色をまとめて決定 |
| 本文の最大幅 | 1180px | 1060 / 1180 / 1320 |
| メニューバーの幅・色 | 本文幅・ダーク | 全幅、ポイントカラー・ライトも選択可能 |
| モバイルのダークモード・言語ボタンの位置 | メニューのドロワー内 | ヘッダー・フッターに移動可能 |
| カラーモード | デバイスの設定に合わせる | 自動 / 常にライト / 常にダーク |
ファーストビュー
ビジュアルスライダーの表示条件・自動切り替えの間隔・スライド一覧(繰り返しフィールド)。宿泊モジュールがトップページのときは、宿泊スキンが宿の写真でファーストビューを直接描画します。
メイン構成
ショップモジュールのアドレス(mid)・カテゴリアイコン・メインページセクション(繰り返しフィールド)。トップページを宿泊ではなくショップとして使うときに使用します。
本文・サイド
統合検索の使用有無・(旧互換)サイドのログインボックス。
フッター
上の「フッター」の表を参照してください。