稼げる副業でお小遣いを稼ぐ方法

稼げる副業でお小遣いを稼ぐだけじゃなく、料理や映画アニメ、趣味などメモにも使っているブログ

副業で稼ぐ仕組みの作り方

Biz Calendarを使いやすくカスタマイズ

投稿日:2014年12月13日 更新日:

営業日カレンダーを導入したけれど、こんな機能が欲しい!って要望があったのでカスタマイズしてみました。

はじめに

営業日のカレンダーを乗せるのであれば、近くに注意事項や営業時間の情報もついでに掲載しておきたいですよね。今回は、私が使ったカスタマイズをご紹介いたします。

注意事項

まずはプラグインをインストールして下さい。ワードプレスのシンプルな営業日カレンダーBiz Calendar

プラグインファイルを直接いじるのでアップデートの際は気を付けてください。

店舗向けの方へ

Biz Calendarのプラグインを利用している場合、休みはわかるがそれ以外の情報がわからないと中途半端に不親切な気がしました。なので今回のカスタマイズに関して

営業時間
何時から何時までの営業なのか
電話番号
どこに連絡を擦れば良いのか
その他コメント
その他注意事項などを掲載する枠

以上3点を管理画面上から記載出来るようにします。

カスタマイズする際は現在のカレンダーの

clnd1

この赤枠辺りにカスタマイズした情報が掲載されるようにしました。

管理画面のカスタマイズをしよう

カスタマイズするファイル

/wp-content/plugins/biz-calendar/admin-ui.php

まずは17行目辺り

修正前

public function setUi(){
		register_setting($this->option_name, $this->option_name, array ( &$this, 'validate' ));
		add_settings_section('fixed_holiday', '定休日', array(&$this,'text_fixed_holiday'), $this->file_path);
		add_settings_field('id_holiday_title', '定休日の説明', array(&$this,'setting_holiday_title'), $this->file_path, 'fixed_holiday');
		add_settings_field('id_chk_sun', '日曜日', array(&$this,'setting_chk_sun'), $this->file_path, 'fixed_holiday');

修正後

public function setUi(){
		register_setting($this->option_name, $this->option_name, array ( &$this, 'validate' ));
		add_settings_section('fixed_holiday', '定休日', array(&$this,'text_fixed_holiday'), $this->file_path);
		add_settings_field('id_holiday_title', '定休日の説明', array(&$this,'setting_holiday_title'), $this->file_path, 'fixed_holiday');
		//ここから追加しました
		add_settings_field('business_time', '営業時間', array(&$this,'setting_business_time'), $this->file_path, 'fixed_holiday');
		add_settings_field('business_tel', '電話番号', array(&$this,'setting_business_tel'), $this->file_path, 'fixed_holiday');
		add_settings_field('other_comment', 'その他コメント', array(&$this,'setting_other_comment'), $this->file_path, 'fixed_holiday');
		//ここまで追加しました
		add_settings_field('id_chk_sun', '日曜日', array(&$this,'setting_chk_sun'), $this->file_path, 'fixed_holiday');

次はデフォルトでの40行目辺り、上記内容を追加した場合は45行目辺り

修正前

function validate($input) {
		$input["holiday_title"] = esc_html($input["holiday_title"]);
		$input["eventday_title"] = esc_html($input["eventday_title"]);
		$input["eventday_url"] = esc_url($input["eventday_url"]);
		return $input; // return validated input
	}

修正後

function validate($input) {
		$input["holiday_title"] = esc_html($input["holiday_title"]);
		$input["eventday_title"] = esc_html($input["eventday_title"]);
		$input["eventday_url"] = esc_url($input["eventday_url"]);
		//ここから追加しました
		$input["business_time"] = esc_html($input["business_time"]);
		$input["business_tel"] = esc_html($input["business_tel"]);
		$input["other_comment"] = esc_html($input["other_comment"]);
		//ここまで追加しました
		return $input; // return validated input
	}

最後にデフォルトでの110行目辺り、上記内容を追加した場合は131行目辺り

修正前

function setting_eventday_url() {
		$this->setting_inputtext("eventday_url", 60);
	}

修正後

function setting_eventday_url() {
		$this->setting_inputtext("eventday_url", 60);
	}
//ここから追加しました
function setting_business_time() {
$this->setting_inputtext("business_time", 40);
}
function setting_business_tel() {
$this->setting_inputtext("business_tel", 40);
}
function setting_other_comment() {
$this->setting_inputtext("other_comment", 60);
}
//ここまで追加しました

ここに記載されている数字はテキストボックスの横幅です。

管理画面を見てみよう

ファイルをアップロードすると一度管理画面を見てみましょう。

clnd2

このように追加した3っつが表示されているとテキストの入力欄が完成です。

フロント側をカスタマイズしよう

管理画面側が完了すると次はフロント側をカスタマイズします。

カスタマイズするファイル

/wp-content/plugins/biz-calendar/calendar.js

まずは100行目

修正前

	// 説明文
	html += getHolidayTitle();
	html += getEventdayTitle();
	return html;

修正後

	// 説明文
	html += getHolidayTitle();
	html += getEventdayTitle();
	//ここから追加しました
    html += getBusiness_time();
	html += getBusiness_tel();
	html += getOther_comment();
    //ここまで追加しました
	return html;

次はデフォルトでの105行目辺り、上記内容を追加した場合は110行目辺り

修正前

function getHolidayTitle() {
	if (currentSetting.options.holiday_title != "") {
		return "<p><span class='boxholiday'></span>"
				+ currentSetting.options.holiday_title + "</p>";
	}
	return "";
}

修正後

//ここから追加しました
function getBusiness_time() {
	if (currentSetting.options.business_time != "") {
		return "<p><span class='business_time'>営業時間</span>"
				+ currentSetting.options.business_time + "</p>";
	}
	return "";
}

function getBusiness_tel() {
	if (currentSetting.options.business_tel != "") {
		return "<p><span class='business_tel'>電話番号</span>"
				+ currentSetting.options.business_tel + "</p>";
	}
	return "";
}

function getOther_comment() {
	if (currentSetting.options.other_comment != "") {
		return "<p><span class='other_comment'></span>"
				+ currentSetting.options.other_comment + "</p>";
	}
	return "";
}
//ここまで追加しました
function getHolidayTitle() {
	if (currentSetting.options.holiday_title != "") {
		return "<p><span class='boxholiday'></span>"
				+ currentSetting.options.holiday_title + "</p>";
	}
	return "";
}

以上でフロント側の修正が完了しました。

この時点で管理画面から登録した情報が表示されるようになります。

デザインを装飾しよう

最後にcssを使ってデザインの装飾をしましょう。

カスタマイズするファイル

/wp-content/plugins/biz-calendar/biz-cal.css

一番最後に

#biz_calendar .business_time,
#biz_calendar .business_tel {
	font-weight:bold;
	margin-right:10px;}

この情報を追加する事で見やすいデザインにする事が出来ます。

確認してみよう

私が登録した内容

営業時間:10:00~17:00

電話番号:03-0000-0000

その他コメント:土曜日は10:00~14:00まで

フロント側

clnd3

以上でBiz Calendarを使いやすくカスタマイズする方法を終了致します。

さいごに

顧客に応じたカスタマイズより万能性

私は出来るだけ一人一人にあったカスタマイズよりも、色々なお客様向けのカスタマイズの方が良いかなと感じています。カスタマイズ関係もそうですが、毎日その方の情報を見ているわけではなく、たまにしか連絡が来ないのでやっぱり忘れてしまうんですよね。

なので、一人一人に合わせたカスタマイズではなく皆さんに使えるようなレベルのカスタマイズにとどめておく方が使い勝手が良いなと感じました。

後は使いながら「こんな事は出来ないの?」「こういった使い方がしたい」などの連絡があれば考えてみようかなと思います。

-副業で稼ぐ仕組みの作り方
-,

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

ワードプレスで画面が真っ白になった時の対処法

ワードプレスって結構画面を真っ白にしている人多いですよね笑 関連記事: カスタムフィールドで画像を出力する時のヒント【ワードプレス】 【WordPress】lightning proでカスタムフィール …

画像を簡単に軽く出来るサイト

画像を軽くさせるために縮小したり解像度を低くするのは時代遅れです。 関連記事: ネスタリゾートを100%遊びたい人へ【宿泊あり】 【2019年版】googleショッピングに掲載する方法 ECCUBE4 …

ホームページが重いと感じたらスピードチェック

ホームページを制作した際に何だか重いなぁって感じる事ありませんか?そんな時にお勧めなサイトを紹介いたします。 関連記事: Yahoo地図に掲載する方法 無料でECサイトが3分で作れる バリューコマース …

amazonのインスタントストアの作り方

誰でも簡単にamazonの商品を使ってECサイトを作る事が出来ます。今回はインスタントストアの作り方をご紹介いたします。 関連記事: もしもドロップシッピングの登録方法 シーサーブログにメニューを作る …

ECCUBE4でメールテンプレートを増やす方法

ECCUBE4はメール周りもカスタマイズしなければいけません。 関連記事: カスタムフィールドで画像を出力する時のヒント【ワードプレス】 ECCUBE2.12のカテゴリに子カテゴリを表示させる方法 【 …