워드프레스에 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"으로 구글에서 검색하면 더 많은 플러그인을 찾을 수 있을 것입니다.