HBookはホテル予約なんかにとても便利なWordpressプラグインですね。極端なことを言ってしまえば、1日単位で貸し出すスペースであれば全部このプラグインでなんとかなりそうな気がしています。

さて、今回は部屋検索フォームの設置です。

全部屋検索をする場合、テーマ内に以下の記載をするだけでOKです。

<div id="room_search">
	<?php echo do_shortcode('[hb_booking_form all_accom="yes"]'); ?>
</div>

#room_search {
	margin: 20px auto;
	padding: 0 20px;
}

#room_search .hb-select-accom-wrapper.hb-clearfix {
	padding-bottom: 20px;
}

.hbook-wrapper input[type="text"] {
    display: block;
    padding: 10px;
    border: 1px solid #d8d8d8;
}

.hb-people-wrapper select {
    border: 1px solid #d8d8d8;
    padding: 10px;
	 cursor: pointer;
}

.hb-search-button-wrapper input {
    text-align: center;
    white-space: normal;
    background: #ff9900;
    padding: 7px;
    color: #fff;
    border-bottom: 2px solid #8e5c00;
	cursor: pointer;
}

.hb-select-accom input, .hb-confirm-button input {
    text-align: center;
    white-space: normal;
    background: #ff9900;
    padding: 7px;
    color: #fff;
    border-bottom: 2px solid #8e5c00;
	cursor: pointer;
}

.hb-view-accom input {
    text-align: center;
    white-space: normal;
    background: #1486B8;
    padding: 7px;
    color: #fff;
    border-bottom: 2px solid #0C5676;
	cursor: pointer;
}

.side_widget .hb-accom-list-item h2 {
    clear: both;
}

.post-type-archive-hb_accommodation .inner:nth-child(n+2) {
    border-top: 3px solid #d8d8d8;
	  padding-top: 10px;
}

ついでなのでCSSも書いてしまいましょう。

searchオンリーだとリダイレクトを考えないといけないのでもう部屋の申込みまで出来るようにしておけばいいかなと思いますね。