[KBoardスキンダウンロード]見積もりリクエスト - Bootstrapスキン

WordPress 掲示板プラグインKBoardのAvatarスキンを見積もりフォームに改造したバージョンです。 [Bootstrapスキン]（ファイル名： requestform_bootstrap_modified7.zip)

2017年1月29日アップデート： ここにあげた資料は、1年以上過ぎてもはや新しいバージョンと互換性がないとします。 希望の方は ここからダウンロードして修正して使用することができますが、他の方法を講じて見ればいいようです。

• 直接 KBoard スキンの変更
• KBoardで提供されるCotact Formスキン利用。 最近 KBoardが更新されContact Formスキンが追加されました。 それを活用してみてもいいようです。
• Contact Form 7やQuformでお問い合わせを受けて、提出されたお問い合わせを KBoard経由で出力します。 この方法ではコーディング操作が必要です。 開発者は簡単に可能ですが、一般の人は簡単ではないようです。 詳しくは「Contact Form 7で提出したお文をKboardに自動投稿する「または」Quformで提出した文章を KBoard スレッドに登録する"文を参照してください。

ご不便をお掛けします。

もっと詳しく ここを参照してください。

インストール方法：

1. 上記のファイルをダウンロードします。
2. Avatarスキンを使用して、新しいスキンを作成します。 スキンを作成する方法は、 ここを参照してください。
3. ダウンロードしたファイルを解凍して、新しく作成されたスキンフォルダにアップロードします。
4. 以外のプロセスは、一般的なKBoardスキンを使用と同じです。
5. 入力フィールド内のアイコンが正しく表示されるようにするAwesomeフォントをインストールする必要があります。 （ここ 参考）
6. この画像ファイルをダウンロードして、メディアにアップロードして、style.cssで次のXNUMXつの行の画像ファイルのパスを変更します。

   background: #FFF url('https://www.thewordcracker.com/wp-content/uploads/2015/06/down-arrow.png') no-repeat right!important;
   background: #FFF url('https://www.thewordcracker.com/wp-content/uploads/2015/06/down-arrow.png')

日付セレクタを使用するには、次のコードをコピーしてjsファイル（たとえばdatepicker.js）にし、テーマフォルダの下にjsフォルダを作成してコピーします（例：wp-content /themes/テーマフォルダ名/js)。

$(document).ready(function () {
var select = function () {
var d1 = $('#datepicker3').datepicker('getDate');
var d2 = $('#datepicker4').datepicker('getDate');
var diff = 0;
if (d1 && d2) {
diff = Math.floor((d2.getTime() - d1.getTime()) / 86400000); // ms per day
}
$('#calculated').val(diff);
}
$("#datepicker3").datepicker({
dateFormat: 'yy-mm-dd',
prevText: '이전 달',
nextText: '다음 달',
monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
dayNames: ['일','월','화','수','목','금','토'],
dayNamesShort: ['일','월','화','수','목','금','토'],
dayNamesMin: ['일','월','화','수','목','금','토'],
showMonthAfterYear: true,

numberOfMonths: 1,
minDate: 0,
onSelect: function (selected) {
$("#datepicker4").datepicker("option", "minDate", selected);
select();
}
});
$("#datepicker4").datepicker({
dateFormat: 'yy-mm-dd',
prevText: '이전 달',
nextText: '다음 달',
monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
dayNames: ['일','월','화','수','목','금','토'],
dayNamesShort: ['일','월','화','수','목','금','토'],
dayNamesMin: ['일','월','화','수','목','금','토'],
showMonthAfterYear: true,
numberOfMonths: 1,
onSelect: function (selected) {//you have a syntax issue here the select method has to be called inside the default handler
$("#datepicker3").datepicker("option", "maxDate", selected)
select();
}
});
});

 （*重要：上記のコードでエラーが出る場合$をjQueryを使って一括変更した後にテストしてみてください。）

そしてテーマファイルでjsファイルをフック（enqueue）させます。 詳細については、 WordPress Codexページを参照してください。

jsフックサンプル：

function iconicchild_scripts() {
wp_enqueue_script( 'wpb_loadmore', get_stylesheet_directory_uri() . '/js/datepicker.js', array('jquery'), '20150435', true );
}
add_action( 'wp_enqueue_scripts', 'iconicchild_scripts' );

テーマに沿ってレイアウトが違って表示されることがあります。 CSSを使用してレイアウト調整が必要な場合があります。

*注意：十分なテストを経ていない。 もしかしたら、エラーがあるかの改善点があれば教えてください。