워드프레스 사이트 상단에 현재 날짜와 시간을 표시하고 싶은 경우가 있을 수 있습니다. 이 경우 자바스크립트를 사용하여 워드프레스 함수 파일에 쇼트코드(단축코드) 함수를 추가하여 표시할 수 있습니다. 방문자의 현재 시간을 표시하고 싶은 경우에는 JavaScript 방법을 사용할 수 있습니다.
워드프레스 상단 영역에 현재 날짜와 시간 표시하기
날짜를 표시하는 방법으로 크게 두 가지를 생각할 수 있습니다. 하나는 쇼트코드로 만들어서 상단 위젯 영역에 표시하는 방법과 다른 하나는 자바스크립트를 사용하는 방법입니다.
숏코드로 만들어 표시하는 경우 서버 시간을 기준으로 하므로 사용하는 방문자의 현지 시각을 표시하려는 경우에는 자바스크립트를 사용하도록 합니다. 숏코드를 사용할 경우 서울 시각 (도쿄 시각) 혹은 LA 시각 등과 같이 특정 시간대를 특정할 수 있습니다.
먼저 자바스크립트를 사용하여 방문자 브라우저의 시간 정보를 가져와서 표시하는 방법에 대하여 살펴보겠습니다.
자바스크립트(JavaScript)를 사용하여 현재 날짜와 시간 표시하기
아래의 자바스크립트 코드, HTML 태그, 그리고 CSS를 사용하여 현재 날짜와 시각을 사이트 상단 표시줄에 표시할 수 있습니다.
1 다음과 같은 자바스크립트를 사용하여 사용자 브라우저의 현재 시간을 감지하여 표시합니다. 이 코드는 new Date() 객체를 사용하여 사용자 브라우저의 현재 날짜 및 시간을 가져오고, 이를 지정된 형식("YYYY년 M월 D일 오전/오후 h시 m분")으로 포맷하여 HTML 요소에 표시하는 기능을 합니다.
<script>
// Function to format the date and time as "YYYY년 M월 D일 오전/오후 h시 m분"
// 날짜와 시간을 "YYYY년 M월 D일 오전/오후 h시 m분" 형식으로 포맷하는 함수
function formatDateTime(date) {
const year = date.getFullYear(); // Get the year / 년도를 가져옴
const month = date.getMonth() + 1; // getMonth() returns 0-based month / 월을 가져오고 0부터 시작하기 때문에 +1
const day = date.getDate(); // Get the day / 일을 가져옴
const hours = date.getHours(); // Get the hour / 시간을 가져옴
const minutes = date.getMinutes(); // Get the minutes / 분을 가져옴
// Determine AM or PM / 오전 또는 오후 결정
const ampm = hours < 12 ? '오전' : '오후';
// Convert hours to 12-hour format / 시간을 12시간 형식으로 변환
const hours12 = hours % 12 || 12; // 0 should be displayed as 12 / 0시는 12시로 표시
// Format minutes to always have two digits / 분을 항상 두 자리 숫자로 포맷
const formattedMinutes = minutes < 10 ? '0' + minutes : minutes;
return `${year}년 ${month}월 ${day}일 ${ampm} ${hours12}시 ${formattedMinutes}분`;
}
// Get the current date / 현재 날짜를 가져옴
const now = new Date();
// Format the date and time / 날짜와 시간을 포맷
const formattedDateTime = formatDateTime(now);
// Display the date and time in the div / div 요소에 날짜와 시간을 표시
document.getElementById('current-date').textContent = formattedDateTime;
</script>자바스크립트 코드는 여러 가지 방법으로 추가할 수 있습니다. GeneratePress 테마의 경우 훅(Hook)을 사용하여 추가할 수 있습니다.
Hook에 wp_footer를 지정하고 Display Rules에서 전체 사이트를 지정하도록 합니다. GP 테마에서 훅을 사용하는 자세한 정보는 다음 글을 참고해보세요.
Kadence 테마를 사용하는 경우에는 다음 글을 참고하여 후크를 추가할 수 있습니다.
테마에서 훅을 제공하지 않는 경우 WPCode와 같은 플러그인을 사용하여 푸터 영역에 자바스크립트 코드를 추가할 수 있습니다. 사이트에 영향을 최소한으로 미치도록 하고 싶은 경우에는 다음 글에서 제시하는 방법으로 자스 코드를 로드하도록 합니다.
현재 날짜와 시/분/초를 표시하고 실시간으로 시간이 업데이트되도록 하고 싶은 경우에는 다음과 같은 자스를 사용할 수 있습니다.
<script>
// 날짜와 시간을 "YYYY년 M월 D일 오전/오후 h시 m분 s초" 형식으로 포맷하는 함수
function formatDateTime(date) {
const year = date.getFullYear(); // 년도를 가져옴
const month = date.getMonth() + 1; // 월을 가져오고 0부터 시작하기 때문에 +1
const day = date.getDate(); // 일을 가져옴
const hours = date.getHours(); // 시간을 가져옴
const minutes = date.getMinutes(); // 분을 가져옴
const seconds = date.getSeconds(); // 초를 가져옴
// 오전 또는 오후 결정
const ampm = hours < 12 ? '오전' : '오후';
// 시간을 12시간 형식으로 변환
const hours12 = hours % 12 || 12; // 0시는 12시로 표시
// 분과 초를 항상 두 자리 숫자로 포맷
const formattedMinutes = minutes < 10 ? '0' + minutes : minutes;
const formattedSeconds = seconds < 10 ? '0' + seconds : seconds;
return `${year}년 ${month}월 ${day}일 ${ampm} ${hours12}시 ${formattedMinutes}분 ${formattedSeconds}초`;
}
// 날짜와 시간을 업데이트하는 함수
function updateDateTime() {
const now = new Date(); // 현재 날짜와 시간을 가져옴
const formattedDateTime = formatDateTime(now); // 날짜와 시간을 포맷
document.getElementById('current-date').textContent = formattedDateTime; // div 요소에 날짜와 시간을 표시
}
// 1초마다 updateDateTime 함수를 호출하여 시간을 업데이트
setInterval(updateDateTime, 1000);
// 페이지 로드 시 초기 시간을 설정
updateDateTime();
</script>참고:
- setInterval(updateDateTime, 1000): 이 코드는 1초마다 updateDateTime 함수를 호출하여 시간을 업데이트합니다.
- DOM 업데이트: HTML 페이지 전체를 새로 고침하지 않고, 특정 'div' 요소 (#current-date)의 내용만 갱신합니다.
- 클라이언트 사이드 실행: 이 코드는 (서버에서 실행되지 않고) 클라이언트 측에서만 실행되므로 서버에 추가적인 부담을 주지 않습니다. 이 작업은 브라우저 내에서만 발생하며, 서버와의 추가적인 통신 없이 진행됩니다.
- 이 방식은 실시간으로 시간을 업데이트하면서도 웹 페이지의 전체 새로 고침(리프레시) 없이 동작합니다.
2 상단 표시줄 영역에 다음과 같은 HTML 코드를 추가합니다.
<div id="current-date"></div>테마에 따라 코드를 추가하는 방법이 다를 수 있습니다. 엘리멘터 페이지 빌더를 사용하는 경우 헤더 템플릿을 만들어서 Topbar 영역에 HTML 코드를 추가할 수 있습니다. 아바다 테마나 Divi 테마를 사용하는 경우에도 헤더 섹션을 커스텀하여 원하는 영역에 코드를 입력할 수 있습니다.
GeneratePress 테마 사용자인 경우 디자인 » 위젯 » Top Bar 위젯 영역에서 사용자 정의 HTML 블록을 추가하여 HTML 태그를 입력할 수 있습니다.
사용자 정의 HTML 블록이 추가되면 다음과 같이 HTML 요소를 입력합니다.
아스트라(Astra) 테마 사용자인 경우에는 헤더 빌더에서 Top Bar 영역에 HTML 엘리먼트를 배치할 수 있습니다.
이제 사이트를 새로 고침하면 상단에 현재 날짜와 시간이 표시될 것입니다. 표시되지 않으면 캐시 플러그인의 캐시를 삭제하여 체크해보시기 바랍니다.
3 표시되는 날짜/시간 부분의 스타일을 CSS로 조정할 수 있습니다. 예를 들어, 다음과 같은 코드를 디자인 » 사용자 정의하기 » 추가 CSS 섹션에 추가할 수 있습니다.
/* 사이트 상단에 표시되는 현재 날짜와 시간 스타일 예시 */
#current-date {
font-size: 0.9em; /* 글꼴 크기 */
color: #ffffff; /* 글꼴 색상 */
background-color: #333333; /* 배경 색상 */
padding: 5px 10px; /* 패딩 */
border-radius: 5px; /* 테두리 반경 */
display: inline-block; /* 인라인 블록으로 표시 */
text-align: center; /* 텍스트 중앙 정렬 */
}배경색, 텍스트 컬러 등은 적절히 수정합니다.
숏코드(단축코드)를 사용하여 사이트 상단에 특정 시간대의 날짜와 시간 표시하기
쇼트코드를 사용하여 페이지 상단에 특정 시간대(예: 서울)의 날짜와 시간을 표시할 수 있습니다. 이 방법은 서버단에서 시간 정보를 가져오므로 사이트에 접속하는 사용자의 현지 시간대의 시간 정보를 가져오고 싶다면 상기의 자바스크립트를 이용하는 방법을 이용하시기 바랍니다.
1 차일드 테마가 설치되어 있지 않다면 차일드 테마를 만들고, 차일드 테마(자식 테마) 내의 함수 파일(functions.php)에 다음 코드를 입력합니다.
// 서울 시간대의 날짜와 시간을 "YYYY년 M월 D일 오전/오후 h시 m분" 형식으로 반환하는 함수
function display_seoul_datetime() {
// 서울 시간대 설정
$timezone = new DateTimeZone('Asia/Seoul');
$date = new DateTime('now', $timezone);
// 날짜와 시간을 원하는 형식으로 변환합니다.
$year = $date->format('Y');
$month = $date->format('n');
$day = $date->format('j');
$hour = $date->format('G');
$minute = $date->format('i');
// 오전/오후 결정
$ampm = $hour < 12 ? '오전' : '오후';
// 12시간 형식으로 변환
$hour12 = $hour % 12;
$hour12 = $hour12 ? $hour12 : 12; // 0시를 12시로 표시
// 최종 형식으로 변환
$formatted_datetime = "<span class='seoul-datetime'>{$year}년 {$month}월 {$day}일 {$ampm} {$hour12}시 {$minute}분</span>";
return $formatted_datetime;
}
// 숏코드 등록
add_shortcode('seoul_datetime', 'display_seoul_datetime');2 상단 위젯 영역에 다음과 같은 단축코드를 입력합니다.
[seoul_datetime]GeneratePress 테마를 사용하는 경우 디자인 » 위젯 » Top Bar 위젯 영역에서 단축코드 블록이나 사용자 정의 HTML 블록을 추가하여 숏코드를 입력할 수 있습니다.
단축코드 블록을 사용할 경우 <p>...</p> 태그가 추가로 입력되어 상단 표시줄에서 원치 않는 여백이 생길 수 있습니다. 그런 경우 CSS를 사용하여 여백을 조정하거나 사용자 정의 HTML 블록으로 추가하는 것을 고려할 수 있습니다.
3 CSS를 사용하여 날짜/시간 부분의 스타일을 조정합니다. 예시:
/* 스타일 예시: WordPress topbar에 표시할 서울 날짜와 시간 */
.seoul-datetime {
font-size: 14px; /* 글꼴 크기 */
color: #ffffff; /* 글꼴 색상 */
background-color: #333333; /* 배경 색상 */
padding: 5px 10px; /* 패딩 */
border-radius: 5px; /* 테두리 반경 */
display: inline-block; /* 인라인 블록으로 표시 */
margin: 0 5px; /* 좌우 여백 */
}마찬가지로 디자인 » 사용자 정의하기 » 추가 CSS에 추가할 수 있습니다. 또는 차일드 테마 내의 스타일시트 파일(style.css)에 추가하는 것도 가능합니다. 스타일은 상황에 맞게 적절히 변경하세요.
마치며
네이버 지식인에 워드프레스 상단 위젯 영역에 현재 시간을 표시하는 방법에 대한 질문이 올라와서 여기에 대하여 정리해보았습니다.
JavaScript 방식이 워드프레스 숏코드에 비해 서버에 부담을 덜 주고 사이트 속도에도 영향을 덜 미친다고 합니다. 워드프레스 숏코드(단축코드)는 서버에 추가적인 부하를 줄 수 있으며 실시간 업데이트가 어렵다는 단점이 있습니다.
댓글 남기기