WordPress 웹사이트에 날짜 및 시간 위젯을 추가하는 5가지 방법

날짜 및 시간 위젯을 표시하는 것은 신문 웹사이트에서 시작된 것입니다. 그들의 신문에서 오늘 날짜를 얻는 것은 항상 사람들의 삶의 일부였던 것입니다. 인쇄 저널리즘이 웹으로 옮겨갔을 때 그것은 바뀌지 않았습니다.

그러나 현재 날짜와 시간을 표시하는 것은 뉴스 웹사이트에만 해당되는 것은 아닙니다. 다른 사이트에서도 동일한 작업을 수행해야 하는 데에는 여러 가지 이유가 있습니다.

• 현재 시간을 시간대에 표시하여 고객이 고객 지원에 언제 연락할 수 있는지 알릴 수 있습니다.
• 콘텐츠가 조금 오래된 경우에도 사이트를 생생하고 관련성 있게 보이게 합니다. 이것은 우리 대부분이 최신 최신 정보를 찾고 있기 때문에 중요합니다.
• 페이지에 예정된 이벤트가 있는 경우 현재 시간과 날짜는 방문자가 얼마나 더 기다려야 하는지 이해하는 데 도움이 됩니다(또는 Divi 테마에 포함된 것과 같은 카운트다운 타이머 모듈 사용).

간단히 말해서 날짜 및 시간 위젯을 표시하면 청중을 묶는 데 도움이 되고 사이트가 더 매력적이며 최신 뉴스 및 정보 제공업체로 자리 잡을 수 있습니다. WordPress 사이트에서 구현하는 방법을 배우기에 충분한 이유입니다.

다음 기사에서는 웹사이트의 날짜 및 시간 위젯을 만드는 몇 가지 방법을 보여줍니다. 먼저 수동으로 수행하는 방법을 살펴본 다음 코딩 없이 동일한 작업을 수행할 수 있는 몇 가지 플러그인 솔루션에 대해 설명합니다.

좋은 소리? 그럼 성급하게 굴지 말고 바로 가자.

WordPress에서 수동으로 날짜 및 시간 위젯을 만드는 방법

사이트에 현재 시간과 날짜를 포함하는 한 가지 방법은 솔루션을 직접 코딩하는 것입니다. 이것이 우리가 먼저 할 일입니다. 사이트의 아무 곳에나 입력하면 방문자에게 시간과 날짜가 표시되는 간단한 단축 코드를 생성합니다.

단축 코드 생성

첫 번째 단계는 실제 단축 코드를 설정하는 것입니다. 이를 위해 먼저 현재 테마의 functions.php 를 엽니다. 상위 테마가 업데이트될 때 변경 사항을 잃지 않도록 하위 테마를 사용하는 것이 좋습니다.

파일을 열면 파일 끝에 다음 코드를 붙여넣습니다.

function current_time_date(){
return date('F jS, Y, H:i:s');
}

add_shortcode( 'time_date', 'current_time_date' );

이에 대한 몇 가지 정보: 위의 코드는 현재 날짜와 시간을 출력한 다음 [time_date] 라는 단축 코드에 할당하는 함수입니다. 사이트에 단축 코드를 입력하면 해당 기능이 실행됩니다.

위에서 사용한 형식에서 시간과 날짜는 2017년 7월 6일 12:35:41 형식으로 출력됩니다. 그러나 여기에서 배울 수 있는 다양한 형식을 사용할 수 있습니다.

이제 코드를 테스트하려면 사이트의 어딘가에 단축 코드를 복사하기만 하면 됩니다. 그러나 기본적으로 단축 코드는 위젯 내에서 작동하지 않습니다. 그것들을 사용하려면 Shortcode Widget 플러그인을 설치하거나 functions.php 에 이 라인을 추가해야 합니다 .

add_filter('widget_text','do_shortcode');

그 후 결과는 다음과 같습니다.

자바스크립트로 전환

여기까지는 괜찮아 보이죠? 그러나 위의 단계를 따르면 시계가 자체적으로 업데이트되지 않는다는 것을 빠르게 알 수 있습니다. 대신 페이지가 로드될 때 현재 시간을 한 번만 내보냅니다. 그 후에는 정적 상태로 유지되며 어떤 종류의 목적이 다소 실패합니다. 동의하지 않습니까?

PHP는 서버 측 언어이기 때문에 정보를 업데이트하려면 서버를 추가로 호출해야 합니다. 이러한 이유로 JavaScript와 같은 클라이언트 측 언어로 작업하는 것이 좋습니다.

운 좋게도 인터넷에서 사용할 수 있는 로드 JavaScript 시계가 있습니다. 짧은 Google 검색에는 많은 예가 표시됩니다. 이 서비스를 사용하여 원하는 형식의 JavaScript 코드를 생성했습니다. 그런 다음 테마 폴더에 복사한 clock.js 라는 파일에 코드를 입력합니다.

스크립트는 clockbox 라는 이름의 div를 호출합니다. 이러한 이유로 이전 기능을 다음과 같이 변경했습니다.

function current_time_date(){

echo '<div id="clockbox"></div>';

}

add_shortcode( 'time_date', 'current_time_date' );

이제 새 JavaScript 파일을 호출하는 일만 남았습니다.

wp_enqueue_script( 'clock', get_theme_file_uri('/clock.js'));

그리고 짜잔:

스타일링 추가

마지막으로, 전체 브랜딩에 맞도록 시간 및 날짜 위젯의 스타일을 지정할 수 있기를 원할 것입니다. 운 좋게도 우리가 사용한 함수가 CSS id를 생성했기 때문에 다음과 같이 날짜 및 시간 위젯에 고유한 스타일을 추가할 수 있습니다.

#clockbox {
font-size: 22px;
font-style: italic;
color: #999;
}

결과는 다음과 같습니다.

지금은 그렇게 어렵지 않았죠? 쉬울 거라고 말씀하셨습니다. 그러나 이것은 자신의 날짜 및 시간 위젯을 만드는 한 가지 방법일 뿐입니다. 추가 코딩 절단으로 더 많은 일을 할 수 있습니다.

그러나 수동 경로가 아닌 경우 WordPress 플러그인을 사용하여 유사한 결과를 얻을 수도 있습니다.

웹사이트를 위한 시간 및 날짜 위젯을 만드는 플러그인

WordPress 디렉토리에서 사용 가능한 플러그인의 수는 압도적이지 않지만, 충분히 좋은 작업을 수행하는 몇 가지 샘플이 있습니다.

실시간 시계 날짜

우리의 첫 번째 경쟁자는 이 플러그인입니다. 이름에서 알 수 있듯이 WordPress 웹 사이트에 시계와 날짜를 추가할 수 있습니다.

그들의 시간 및 날짜 위젯은 많은 사용자 정의 옵션을 제공합니다. 12시간 주기 또는 24시간 주기 중에서 선택하여 시계를 1분 또는 1초마다 업데이트할지, 날짜를 표시하거나 숨길지, 순서를 결정할 수 있습니다. 위젯에는 사용자 정의 CSS용 섹션도 있으므로 웹사이트와 같은 글꼴 등을 사용할 수 있습니다.

불행히도 서식 옵션은 다소 제한적입니다. 예를 들어 날짜에서 요일을 제거할 수 없습니다. 그러나 그 외에 플러그인은 해야 할 일을 합니다.

날짜 및 시간 위젯

먼저 약간의 경고. 이 플러그인은 약간 오래되었고 2년 전에 마지막으로 업데이트되었습니다. 결과적으로 모든 최신 테마 및 최신 버전의 WordPress에서 작동한다는 보장은 없습니다. 그러나 WordPress 4.8을 사용한 테스트에서 잘 작동하고 훌륭한 옵션 세트를 제공하므로 포함할 가치가 있다고 생각했습니다.

설치 후 플러그인은 위젯 메뉴에 새 날짜 및 시간 위젯을 추가합니다. 위젯화된 영역에 추가하면 다양한 방법으로 사용자화할 수 있습니다.

보시다시피 시간 및 날짜 형식을 구성(또는 완전히 비활성화)하고 글꼴 모음과 크기, 텍스트 색상 및 배경 색상(16진수 코드 포함)을 변경할 수 있습니다. 그렇게 하면 위젯을 테마에 맞게 쉽게 만들 수 있습니다. 그것으로 충분하지 않다면 위젯에 충분한 HTML 클래스가 있으므로 사용자 정의 CSS 규칙을 쉽게 구현할 수 있습니다.

현재 날짜 및 시간

이 목록의 최종 플러그인은 간단합니다. 설치하고 활성화하면 현재 날짜 및 시간 이라는 새 위젯을 얻을 수 있으며 이 위젯을 위젯 영역으로 끌어다 놓을 수 있습니다. 완료.

결과는 보기 좋고 자동으로 테마 스타일에 맞게 조정됩니다. 또한 모바일 반응형으로 요즘 필수품입니다. 반면에 아무것도 조정할 수 있는 옵션을 제공하지 않습니다. 한 번만 사용할 수 있으며 더 많이 사용하려면 프로 버전을 구입해야 합니다.

결론

WordPress 사이트에 시간 및 날짜 위젯을 표시하는 데는 여러 가지 이유가 있습니다. 고객이 언제 연락할 수 있는지, 콘텐츠가 얼마나 최신 상태인지 등을 알릴 수 있는 좋은 방법입니다.

위에서 보았듯이 WordPress에서 이를 구현하는 몇 가지 방법이 있습니다. 하나는 원하는 위치에 위젯을 구현하기 위해 자신의 단축 코드를 설정하는 것입니다. 물론 동일한 작업을 수행할 수 있는 플러그인도 있습니다. 압도적이지는 않지만 견고한 경쟁자가 있습니다.

이제 당신에게 넘어갑니다. 이전에 사이트에서 시간 및 날짜 위젯을 사용한 적이 있습니까? 그렇다면 무엇을 위해 필요했으며 어떻게 구현했습니까? 아래 의견 섹션에 알려주십시오.

Jane Kelly의 기사 축소판 이미지/Shutterstock.com