WordPress サイトの上部に現在の日時を表示したい場合があります。この場合、JavaScriptを使用して WordPress 関数ファイルにショートコード（ショートコード）関数を追加して表示できます。訪問者の現在時刻を表示したい場合は、JavaScriptメソッドを使用できます。
WordPress 上部領域に現在の日時を表示する
日付を表示する方法として、大きく2つのことを考えることができます。 1つはショートコードで作成してトップウィジェット領域に表示する方法、もう1つはJavaScriptを使用する方法です。
ショートコードで作成して表示する場合はサーバー時間に基づいているため、使用する訪問者の現地時刻を表示する場合はJavaScriptを使用するようにしてください。ショートコードを使用する場合、ソウル時刻（東京時刻）またはLA時刻などのように特定の時間帯を特定できます。
まず、JavaScriptを使用して訪問者のブラウザの時間情報を取得して表示する方法について説明します。
JavaScript（JavaScript）を使用して現在の日時を表示する
以下のJavaScriptコード、HTMLタグ、およびCSSを使用して、現在の日付と時刻をサイトのトップバーに表示できます。
1 次のJavaScriptを使用して、ユーザーのブラウザの現在時刻を検出して表示します。このコードは 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>JavaScriptコードはいくつかの方法で追加できます。 GeneratePress テーマの場合は、フックを使用して追加できます。
フック에 wp_footerを指定して 表示ルールでサイト全体を指定するようにします。 GPテーマでフックを使用する詳細については、次の記事を参照してください。
Kadenceテーマを使用している場合は、次の記事を参照してフックを追加できます。
テーマでフックを提供していない場合 WPコードなどのプラグインを使用して、フッタ領域にJavaScriptコードを追加できます。サイトに影響を最小限に抑えるようにしたい場合は、次の記事に示すようにJascodeをロードしてください。
現在の日付と時/分/秒を表示し、リアルタイムで時間を更新できるようにしたい場合は、次のジャスを使用できます。
<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）の内容のみを更新します。
- クライアントサイドの実行：このコードは（サーバー上で実行されず）クライアント側でのみ実行されるため、サーバーに追加の負担をかけません。これはブラウザ内でのみ発生し、サーバーとの追加の通信なしで行われます。
- この方法は、リアルタイムで時間を更新しながら、Webページの完全な更新（リフレッシュ）なしで動作します。
2 トップバー領域に次のHTMLコードを追加します。
<div id="current-date"></div>テーマによってコードを追加する方法が異なる場合があります。 エレメンページビルダーを使用している場合は、ヘッダーテンプレートを作成してTopbar領域にHTMLコードを追加できます。 Avadaナ 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; /* 텍스트 중앙 정렬 */
}背景色、テキストカラーなどは適切に変更します。
ショートコード（ショートコード）を使用してサイトの上部に特定のタイムゾーンの日付と時刻を表示する
ショートコードを使用して、ページ上部に特定のタイムゾーン（ソウルなど）の日付と時刻を表示できます。この方法はサーバー側で時間情報を取得するため、サイトに接続するユーザーの現地時間帯の時間情報を取得したい場合は、上記のJavaScriptを使用する方法をご利用ください。
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ブロックを追加してショートコードを入力できます。
ショートコードブロックを使用する場合...タグが追加され、トップバーに不要な余白が発生する可能性があります。そのような場合は、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）に追加することもできます。スタイルは状況に合わせて適切に変更してください。
最後に、
Naver 知識人へ WordPress 上部ウィジェット領域に現在時刻を表示する方法に関する質問が上がり、ここについてまとめました。
JavaScript方式 WordPress ショートコードに比べてサーバーへの負担を軽減し、サイトの速度にも影響を及ぼさないという。 WordPress ショートコード（ショートコード）はサーバーに追加の負荷を与える可能性があり、リアルタイムの更新が難しいという欠点があります。
コメントを残す