워드프레스에 jQuery 날짜 선택기 추가하기

jQuery UI를 사용하면 간단하게 날짜 선택기(달력)을 구현할 수 있다. 마찬가지로 워드프레스에서도 jQuery 함수를 후크(enqueuing)시키면 jQuery를 통해 날짜 선택기(Datepicker)를 쉽게 추가할 수 있습니다.

jQuery 날짜 선택기

jQuery 날짜 선택기(datepicker) 소스는 인터넷에서 쉽게 검색할 수 있습니다. 예를 들어 다음과 같은 간단한 jQuery 함수를 사용하여 양식(폼)에 달력을 추가할 수 있습니다.

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
<script>
$(function() {
$( "#datepicker1" ).datepicker({
dateFormat: 'yy-mm-dd'
});
});
</script>
<p>Date of Birth (DOB): <input type="text" id="datepicker1"></p>

위의 코드와 같이 크게 세 파트로 구성되어 있습니다. 헤더에 추가할 jQuery 파일 임포트 script와 jQuery함수, 그리고 실제 양식에 추가할 입력란(input 태그)입니다. jQuery css/js/라이브러리 파일 임포트 부분은 헤더에 추가하면 되고 input 태그는 실제 양식(Form)에 추가하면 됩니다. datepicker의 가장 기본적인 코드인 jQuery 함수 부분을 테마의 함수 파일에 등록(enqueue)시켜줘야 합니다.

참고: 위의 jQuery 스크립트 부분에서 $는 jQuery로 바꾸어주시기 바랍니다.

jQuery 스크립트 후크(enqueue)하기

jQuery 스크립트를 후크(hook)하여 워드프레스에서 사용할 수 있도록 하는 과정을 enqueue라고 합니다. enqueue의 사전적인 의미는 "add (an item of data awaiting processing) to a queue of such items"(어떤 처리 항목을 대기열에 추가하는 것)이라고 되어 있네요.

jQuery 스크립트 후크(enqueue) 방법은 ~~WordPress Codex 페이지에 자세히 설명되어 있습니다.~~ 워드프레스에서 js 스크립트 파일과 스타일시트를 올바르게 로드하는 방법을 참고하시기 바랍니다.

다음과 같은 순서로 jQuery 날짜 선택기를 워드프레스에 추가할 수 있습니다.

jQuery 파일 임포트 script를 헤더 파일(header.php)에 추가합니다.

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>

datepicker 함수 부분을 복사하여 js 파일로 저장합니다(예: datepicker.js).
위에서 만든 js 파일을 테마 폴더(자식 테마를 사용하는 경우 자식 테마 폴더) 아래의 js 폴더에 저장합니다. (예: wp-content > themes > 테마 폴더 > js 폴더 아래에 저장.)
사용 중인 워드프레스 테마 함수 파일(functions.php)에 함수 형태로 이 js 파일을 후크합니다. "워드프레스에서 js 스크립트 파일과 스타일시트를 올바르게 로드하는 방법"을 참고해보시기 바랍니다.
<input type="text" id="datepicker1"> 형식으로 원하는 곳에 날짜 선택기(달력)를 추가합니다. 이것도 입력 필드이기 때문에 다른 사용자 지정 입력 필드처럼 동일한 형식으로 name값과 value값을 추가해주어야 정상적으로 값이 저장되고 document.php에서 불러올 수 있습니다.

이상의 과정으로 jQuery 날짜 선택기(datepicker)를 워드프레스에 추가할 수 있습니다. 이와 동일한 과정을 통해 다른 jQuery 함수도 워드플러스에 후크하여 사용할 수 있습니다.

추가:

달력 2개를 추가해야 하는 경우

달력 2개를 추가해야 하는 경우 Id 부분에 #datepicker2를 추가로 추가합니다.

$(function() {
$( "#datepicker1, #datepicker2" ).datepicker({
dateFormat: 'yy-mm-dd'
});
});

달력 3개-4개를 추가해야 하는 경우 이름과 id를 달리하여 jQuery 함수를 하나 더 만들어 enqueue시키도록 합니다.

날짜 선택기 코드 샘플

jsfiddle에서 jQuery UI 날짜선택기 샘플을 확인할 수 있습니다. 이 샘플을 적절히 응용할 수 있습니다.

Datepicker 플러그인

위와 같은 작업이 용이하지 않은 경우 WP Datepicker와 같은 플러그인을 사용할 수 있습니다. "wordpress datepicker plugins"으로 구글에서 검색하면 더 많은 플러그인을 찾을 수 있을 것입니다.