WordPressのインストール（ない場合のみ）

オリジナルカレンダーは、Wordpressの「Business Calendar」というプラグインを使用します。
そのため、Wordpressが入っていない案件では、Wordpressのインストールから始めてください。

WordPressがすでに使われている案件（下層CMS、シスオリ、シスプレ、ブログなど）では、既存のWordpressにプラグインをインストールすればOKです。

プラグインをインストール

過去案件からダウンロード

過去にオリジナルカレンダーを入れた案件（下記どちらでもOK）のプラグインフォルダ（/ドメイン/public_html/wp/wp-content/plugins）にある「business-calendar」をフォルダごとFTPでダウンロードしてください。

※「Business Calendar」の公式サイトからもダウンロードできますが、色々とカスタムする必要があるので、過去案件から取ってきた方が早いです。

インストールして有効化

カレンダーを入れたい案件のサーバーにFTP接続
先ほどダウンロードした「business-calendar」フォルダを、プラグインのディレクトリ（/ドメイン/public_html/wp/wp-content/plugins）にアップ
WordPressの管理画面にログイン
※可能な限り、SSL化したURL（https://～）でアクセスしてください。
サイドメニューの「プラグイン」をクリック
「Business Calendar」を有効化

ウィジェットにカレンダーを追加・編集

WordPressの管理画面で、「外観」→「ウィジェット」を開く
※管理画面のURLがSSL化（https://～）していないと、更新ボタンが押せない場合があります。
「＋」ボタンをクリック→「すべて表示」をクリック
表示される一覧から、「営業日カレンダー」を選択（クリックまたはドラッグ&ドロップで「Main Sidebar」欄に追加）
必要事項を入力（画像は一例です）
※祝日は手入力する必要があります。なるべくたくさん入れた上で、お客様に未入力分は手入力する必要がある旨をお伝えください。
参考：国民の祝日について - 内閣府

function.phpに必要なコードを記述

カレンダーを定義

function.phpの「my_theme_widgets_init」部分を下記コードに差し替えてください。

function my_theme_widgets_init()
{
    register_sidebar(array(
        'name' => 'ホームカレンダー',
        'id' => 'widget_home_calendar',
        'before_widget' => '<div class="main_calendar">',
        'after_widget' => '</div>'
    ));
}
add_action('widgets_init', 'my_theme_widgets_init');

function my_theme_widgets_init()

{

register_sidebar(array(

'name' => 'ホームカレンダー',

'id' => 'widget_home_calendar',

'before_widget' => '<div class="main_calendar">',

'after_widget' => '</div>'

));

}

add_action('widgets_init', 'my_theme_widgets_init');

お客様がカレンダーを編集できるように変更

function.phpに下記コードを追加すると、編集者の管理画面にも外観メニューが表示されます。

function add_theme_edit_role(){
    $role = get_role( 'editor' );
    $role->add_cap( 'edit_theme_options' );
}
add_action( 'admin_init', 'add_theme_edit_role' );

function add_theme_edit_role(){

$role = get_role( 'editor' );

$role->add_cap( 'edit_theme_options' );

}

add_action( 'admin_init', 'add_theme_edit_role' );

これだけだと、テーマなども編集できるようになってしまうので、メニューエディターで編集者の管理画面からウィジェット以外を非表示にしてください。

設定＞ Menu Editor
※ Menu Editorが入っていなければインストールしてください。
（プラグイン＞新規追加＞「Admin Menu Editor」を検索して追加＞有効化）
外観の下部メニュー（外観を選択して、右側に表示される項目）について、ウィジェット以外の全ての項目の「Extra capability」欄を「administrator」にする
Save Changesで保存

コードの埋め込み

ホームページ上で、カレンダーを埋め込みたい場所に下記コードをコピペすると、その部分にカレンダーが出力されます。

<?php dynamic_sidebar('widget_home_calendar'); ?>

1	<?php dynamic_sidebar('widget_home_calendar'); ?>

▼ 例

シスオリでMVに入れるならparts-mainvisual.phpに下記のような形で記述（PCエリア）。
※クラス名などこのまま使うと、後述のCSSの「例」のコードをそのままコピペできます。
※こちらはPC用なので、divのclassの「pc」を削除して、spにも入れてください。
参考：https://yukiko-ladies.jp/

<!-- ▼診療時間 PCエリア -->
<div class="main_calendar_wrap pc">
 <?php dynamic_sidebar('widget_home_calendar'); ?>
</div>

<?php dynamic_sidebar('widget_home_calendar'); ?>

</div>

CSSでデザインを調整

色は、/ドメイン/public_html/wp/wp-content/plugins/business-calendar/business-calendar.css で変更できます。
全体のレイアウトなどは基本的にstyle.css（およびsp.css）で調整します。

▼ style.cssの例（MVに入れる場合）

一度このままコピペしてみて、サイトに合わせて微調整すると楽かもしれません。

PC

/*MVのカレンダー*/
.main_calendar_wrap {
	pointer-events: auto;
	min-width: 400px;
	background: rgba(255, 255, 255, 0.9);
	padding: 5px 20px;
	border-radius: 15px;
	position: absolute;
	top: 420px;
	right: 340px;
}
.main_calendar {
	line-height: 1.4;
	font-size: 13px;
}

/*MVのカレンダー*/

.main_calendar_wrap {

pointer-events: auto;

min-width: 400px;

background: rgba(255, 255, 255, 0.9);

padding: 5px 20px;

border-radius: 15px;

position: absolute;

top: 420px;

right: 340px;

}

.main_calendar {

line-height: 1.4;

font-size: 13px;

}

スマホ

.main_calendar_wrap {
	position: static;
	width: 100%;
	min-width: auto;
	height: auto;
	margin: 40px auto;
	padding: 0;
	background: none;
	border-radius: 0;
}

.main_calendar_wrap {

position: static;

width: 100%;

min-width: auto;

height: auto;

margin: 40px auto;

padding: 0;

background: none;

border-radius: 0;

}

注意事項

未公開サイトで、SSL化ができていなかったり、http://でアクセスすると、カレンダーが表示されません。（要検証）
ウィジェットの編集画面も、http://だと更新できない場合があります。