検索・予約・イベントカレンダー
など様々な機能を体験!

ユーザー目線で操作しながら、
WordPressで様々な機能を
体験
していただける
Lightningテーマのデモサイト
オープンいたしました。

色々な機能が気になるけど、実際にサイトに導入したときの具体的なイメージが湧かない。。

そんな皆様には一度、弊社のデモサイトで操作感をお試しいただきたいと考えています。

こちらの記事では、下記をご確認いただけます

  • デモサイトでどんな機能を体験することができるのか?
  • どういったシーンで活用できるのか?

スライドショー機能

トップページのメイン画像は、3枚の画像をスライドショーで表示させ、画像の大きさなどのカスタマイズをおこなっています。

→「スライドショー機能」が使われている「トップページ」を見る

アニメーションブロック(ACTIVITY部分)

スライドアップの効果でブロックが下から上に浮かび上がります。
アニメーションは他にも、フェードインなど様々な種類があり、サイトに動きを出すことが可能です。
何度かスクロールをして確認してみてください。

VK Brocks Proというプラグインを使用しています

→「アニメーションブロック」が使われている「トップページ」を見る

ACTIVITYの「ふれあう」「体験する」「食べる」「泊まる」の部分の各画像もしくはボタンをクリックすると、ポップアップが表示されます。

クリックしたときに情報を表示させられるため、スペースを節約してページを見やすくできます。

Popup Makerというプラグインを使用しています

→「ポップアップ機能」が使われている「トップページ」を見る

ポップアップ機能に関連する記事はこちら
簡単にポップアップを作成!「Popup Maker」の使い方

【個人情報保護】Cookieの利用同意のポップアップの作り方(Popup Maker)
→こちらの記事では、ページが開かれたときに表示するポップアップをご紹介しています

ページが見やすくスッキリ!~ポップアップとアコーディオン~

アコーディオン機能Q&A部分)

アコーディオンブロックを使用してQ&Aを作成しています。

各質問をクリックすると回答が表示されます。
コンテンツを折りたたんだ状態で表示しておけるため、画面がすっきりします

VK Brocks Proというプラグインを使用しています

→「アコーディオン機能」が使われている「トップページ」を見る

アコーディオン機能に関連する記事はこちら
ページが見やすくスッキリ!~ポップアップとアコーディオン~

イベントカレンダー

イベントカレンダーを設置し、その日のタイムスケジュールを掲載しています。
月次・週次・日次といった様々な用途に合わせたカレンダーを作成することができます。

左上のカテゴリの選択で、特定のイベントだけを表示させることも可能です。

Event Organiserというプラグインを使用しています

→「イベントカレンダー」が使われている「ふれあうのページ」を見る



イベントカレンダーに関連する記事はこちら
【Event Organiser】WordPressにイベントカレンダーを表示!ー基礎編ー
【Event Organiser】WordPressにイベントカレンダーを表示!ー応用編ー

時間帯予約システム(フルーツ狩り/BBQ広場の予約)

フルーツ狩りやBBQ広場の時間帯予約システムを体験いただけます。
カレンダーの日付を選択して、実際に予約をおこなうことができます。

MTS Simple Booking-Cというプラグインを使用しています

→フルーツ狩りの「時間帯予約システム」をお試しいただける「体験するのページ」を見る
→BBQ広場の「時間帯予約システム」をお試しいただける「食べるのページ」を見る

予約後、入力いただいたメールアドレスに受付完了メールが届きますが、実際には予約は受付されておりませんので、ご注意くださいませ。

時間帯予約システムに関連する記事はこちら
【MTS Simple Booking-C】の使い方~サイトに予約システムを導入!~

フルーツ狩りの予約システムを
各ステップに沿って
ご紹介いたします!

予約フォームへ

「体験する」のページを開きます。

「フルーツ狩り予約フォームはこちら」のボタンをクリックしてお進みください

STEP
1

予約カレンダーから日付を選択

カレンダーから、予約したい日を選択します。

※空き状況に合わせて◯△✕などの記号が表示されています。
(空き率30%以下になると、△マークを表示させるなど、設定が可能です)

STEP
2

時間の一覧から時間を選択

時間の一覧から、予約したい時間を選択します。

※空き状況に合わせて◯△✕などの記号が表示されています。

STEP
3

入力フォームへ情報を入力

入力フォームが表示されるので、入力をおこない、フォーム下部の「予約確認」ボタンをクリックします。

設定している人数以外で予約しようとすると、エラーが出ます
・フルーツ狩り:2名以上5名以下で設定
・BBQ広場:2名以上10名以下で設定
収容人数や予約件数で制限をすることが可能です。

STEP
4

入力フォームの確認画面が表示

確認画面が表示されるので、内容に問題がなければ、「予約する」ボタンをクリックします。

STEP
5

予約完了画面
(サンクスページ)の表示

予約完了後のサンクスページが表示されます。

予約完了時に送信される自動返信メールについて

  • 予約完了時に送信される自動返信メールについて
  • 予約完了後のサンクスページについて

などの内容が表示されるので、ご確認くださいませ

STEP
6

スライダー機能

いくつかの写真やアイテムを設定しておき、スライドショーで表示させることができます。
一度に表示しておくアイテム数や一度に遷移するアイテム数を設定することが可能です。

→「スライダー機能」が使われている「食べるのページ」を見る

検索システム

宿泊棟を様々な条件から検索していただける、検索システムを体験いただけます。
チェックボックス、ラジオボタン、プルダウンなどの選択形式での検索や、フリーワード検索が可能となっています。

VK Filter Search Proというプラグインを使用しています

→「検索システム」が使われている「泊まるのページ」を見る

検索システムに関連する記事はこちら
WordPressサイトに「検索機能」をつけるには?

検索システムを各ステップに
沿ってご紹介いたします!

検索フォームで条件を選択

「泊まる」のページを開きます。

予約フォームから条件を選択します。
ここでは、定員のところで2名を選択し、検索ボタンをクリックします。

STEP
1

検索結果一覧の表示

検索をおこなうと、条件にマッチしたものが一覧で表示されていることがわかります。

「詳細はこちら」ボタンをクリックしてみます。

STEP
2

宿泊棟の個別ページを確認

宿泊棟の個別ページが表示されます。

あらかじめ、カスタムフィールドで、

  • お部屋の種類
  • 定員
  • ベッド数

などを登録しておき、出力させています。

カスタムフィールドに関連する記事はこちら
ホームページの入力作業を効率化!!ワードプレスカスタムフィールド
Custom Post Type UIとAdvanced Custom Fieldsを使ったカスタム投稿の作成方法

STEP
3

宿泊予約システム

各宿泊棟の個別ページから、カレンダーで日付を選択して、宿泊予約をおこなうことができます。
2泊、3泊などの連泊の予約にも対応しています。

あらかじめ、基本料金や、大人・子どもの追加人数に応じた追加料金などを設定しておくことが可能です。

Booking Packageというプラグインを使用しています

→「宿泊予約システム」が使われている「宿泊棟個別ページ」を見る
宿泊棟の一覧からもお選びいただけます

宿泊予約システムを各ステップに
沿ってご紹介いたします!

日付・人数を選択

「あじさい棟」のページを開きます。

※ここでは例として、あじさい棟の予約カレンダーを使用しますが、宿泊棟の一覧ページや、検索システムを使用して検索結果に出てきたものから選んでいただけます。

ページを下の方にスクロールすると、予約カレンダーがあります。

チェックイン・チェックアウト日と人数を選択すると、料金が自動で計算されます。

デモサイトでは、
基本料金(この画像の例だと、1泊9,000円×2泊=18,000円)+
人数に応じた追加料金(2名以上での予約の場合、1人1泊5,000円の追加)
で計算されるように、設定をおこなっています。

子供料金を設定するなど、柔軟な対応が可能です。

※予約で埋まっているところは、カレンダーが✕印になっています。

選択できたら、「次のページへ」ボタンをクリックします。

STEP
1

検索結果一覧の表示

入力するフォームが出てくるので、情報を入力していきます。

ここで出てくる項目は、あらかじめ設定画面から設定しておくことが可能です。

すべて入力できたら、「予約する」ボタンをクリックします。
※このプラグインの有料版では、予約完了の前に、予約確認ページを挿入することができます。

STEP
2

予約完了画面
(サンクスページ)の表示

宿泊予約完了後のサンクスページが表示されます。

予約完了時に送信される自動返信メールについて

  • 予約完了時に送信される自動返信メールについて
  • 予約完了後のサンクスページについて

などの内容が表示されるので、ご確認くださいませ

STEP
3

機能体験型のLightningデモサイトをぜひ一度、チェックしてみてくださいね。

「サイトに動きを出したい、変化がほしい」といったビジュアル面から、「便利な機能を付けてサイト内で管理をおこないたい」といった機能面まで、弊社では、皆様の様々なご要望にお応えしてまいります。

何か気になることがございましたら、いつでもお気軽にお問い合わせくださいませ。

投稿者プロフィール

Mayu
Mayu
Webサイトに興味をもち、独学でHTMLやCSSの勉強を始め、その後、スクールでAdobeソフトの使い方やデザインについての知識を習得する。
同時に、様々なWebサイトがWordPressで作られていることを知り、お客さまに喜んでいただけるサイト作りができるよう、WordPressの仕組みやユーザー視点での文章表現、デザインスキルを日々学ぶ。
2022年10月より、株式会社ウェブロードに入社し、お客様のサイト制作、修正やページ追加、操作サポートを行っている。

お問合せフォームはこちら

(※営業電話が多いため留守電にしています。お急ぎの方は下記メールフォームをお使いください。)

お見積りのご依頼・打ち合わせはZOOM/GoogleMeet/お電話等、オンラインでも対応可能です。全国からお問い合わせを受付けています。
2営業日を過ぎても弊社からの連絡がない場合はメールが届いていませんので、大変お手数をお掛けしますが、下記メールアドレスにご連絡ください。

    お問い合わせの前に下記、ご確認をお願いいたします。

    任意貴社サイトURL

    必須お問い合わせ項目

    必須制作費のご予算はどれくらいですか?

    企画・設計、デザイン、画像・文章の作成、サイト内検索システムの導入等、
    ヒアリングを元にご予算やご希望に応じたお見積りをご提案させて頂きます。
    弊社制作費の費用感につきましてはこちらの記事をご参照ください。

    必須制作目的はどうお考えですか?(複数選択可)

    どこに力を抜きどこに力を入れるのか、
    ご予算とご要望の中から最適なご提案をさせていただきます。

    必須どのような機能が必要ですか?(複数選択可)

    SSL(https://~)対応、ブログ機能、スマホ対応(レスポンシブ)、
    ログイン等セキュリティ対策、ページタグSEOの最適化は標準搭載。

    必須どのような作り方がご希望でしょうか?(複数選択可)

    WordPressでの構築になりますので、お客様のご要望に比較的柔軟にお応えすることが可能です。
    企画ご提案する前に参考にさせていただく項目です。

    必須お問い合わせ内容を教えてください

    必須お名前

    必須フリガナ

    必須メールアドレス

    必須貴社名

    任意電話番号(ハイフン無し・半角数字)