Kboard Quote Request Form Bootstrap skin

[KBoard 스킨 다운로드] 견적요청서 – Bootstrap 스킨

 

워드프레스 게시판 플러그인인 KBoard의 Avatar 스킨을 견적서 양식으로 개조한 버전입니다. [Bootstrap 스킨] (파일명: requestform_bootstrap_modified7.zip / 비밀번호: 2015)

Kboard Quote Request Form Bootstrap skin

자세한 내용은 여기를 참고하세요.

설치 방법:

  1. 위의 파일을 다운로드합니다.
  2. Avatar 스킨을 사용하여 새로운 스킨을 만듭니다. 스킨을 만드는 방법은 여기를 참고하시기 바랍니다.
  3. 다운로드한 파일의 압축을 풀고 새로 만든 스킨 폴더에 업로드합니다.
  4. 이외의 과정은 일반적인 KBoard 스킨 사용과 동일합니다.
  5. 입력 필드 안의 아이콘이 제대로 표시되도록 하려면 Awesome 폰트를 설치해야 합니다. (여기 참고)
  6. 이 그림 파일을 다운로드받아 미디어에 업로드하고, style.css에서 다음 두 라인의 그림 파일 경로를 수정합니다.
    background: #FFF url('http://www.thewordcracker.com/wp-content/uploads/2015/06/down-arrow.png') no-repeat right!important;
    background: #FFF url('http://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를 통해 레이아웃 조정이 필요할 수 있습니다.

 

* 주의: 충분한 테스트를 거치지 않았습니다. 혹시 오류가 있거나 개선 사항이 있으면 알려주시기 바랍니다.

 



기부를 통해 이 블로그를 후원하실 수 있습니다.
워드프레스 설치/제작/문제해결이 필요한 경우 서비스(유료)를 요청해주세요.