【ワードプレス】予約カレンダーの導入方法とデザイン編集方法

カレンダーの便利なプラグイン

The Events Calendar

The Events Calendarを使えばブログやHP上でイベントの開催日程を視覚的に分かりやすく告知することが可能になります。
The Events Calendarの設定方法

MTS Simple Booking C

MTS Simple Booking Cを使えば1時間ほどで予約システムが導入できます。
MTS Simple Booking Cの設定方法

Trust Form

Trust Formはお問い合わせ用のプラグインですが、予約フォームの日時をカレンダーから選択できるようにカスタマイズ可能です。
Trust Formの設定方法

カレンダーの見た目を編集する方法

カレンダーの色や形が気に入らなかったのでいろいろ探していたら
日にちを緑の丸に変えるスタイルシートがあったので、使ってみました。

下のコードをCSSの最後に記述するだけで変更可能です。
また、background-colorやborderを編集することで色も変えられますし、
一番下のborder-radiusの値を変えることで円の形も変えられます。

/* カレンダー comemo-theme-twenty-thirteen rev.0.1 */
#wp-calendar tbody td a {
    background-color: #2F7D3D;
    border-radius: 15px;
    color: white;
    display: block;
    height: 30px;
    width: 30px;
    margin: 2px auto;
}

#wp-calendar tbody td {
    width: 30px;
}

.widget_calendar table, .widget_calendar td {
    border-spacing: 5px;
}

#today {
    border: 1px solid green;
    border-radius: 2px;
}

関連