Cách chèn thời gian (ngày/tháng/năm) vào website WordPress

Chèn thời gian vào website WordPress là cách rất hay để khiến độc giả có thể quay trở lại website của bạn nhiều lần hơn. Khi họ cảm thấy website của bạn có hiển thị ngày tháng năm, họ sẽ xem trên website cho tiện.

Dẫu biết rằng, chúng ta có thể xem giờ (ngày tháng năm) thông qua trên đồng hồ (hoặc bằng điện thoại, máy tính). Nhưng trường hợp mà không xem được một cách cụ thể, chẳng hạn muốn biết hôm nay là thứ mấy?… Bởi vậy, tích hợp code hiển thị thời gian trên website là điều cần thiết, để cho mình và người đọc biết được về thông tin này.

Trong bài viết này, mình sẽ chia sẻ cho bạn đoạn mã code Javascript giúp hiển thị thời gian cho website WordPress.

Cách chèn thời gian (ngày tháng năm) vào website WordPress

Đa số các trang web/blog hiện nay đều sử dụng mã nguồn WordPress. Cho nên, mình sẽ hướng dẫn các bạn cách thêm thời gian bằng code Javascript cho trang web WordPress.

Bước 1: Bạn đăng nhập vào trang quản trị website WordPress của mình.

Bước 2: Sau đó, sử dụng đoạn mã code dưới đây để nhúng vào khung chứa tính năng code HTML có sẵn trong trang quản trị website WordPress.

<font color="0000FF"><span style="font-size: 13px"><b>&nbsp; XEM NGÀY GIỜ:
<span style="color: 0000FF">
<script language="" type="text/javascript">
//<![CDATA[
<!--   // Array ofmonth Names
<!-- var monthNames = new Array("một","hai","ba","bốn","năm","sáu","bảy","tám","chín","mười","mười một","mười hai"); -->
var monthNames = new Array("1","2","3","4","5","6","7","8","9","10","11","12");
var dayNames = new Array("CN -","THỨ 2 -","THỨ 3 -","THỨ 4 -","THỨ 5 -","THỨ 6 -","THỨ 7 -")
var now = new Date();
thisYear = now.getYear();
thisDay = dayNames[now.getDay()];
if(thisYear < 1900) {thisYear += 1900}; // corrections if Y2K display problem
document.write("" + thisDay +""+""+" "+ now.getDate() + "/" + monthNames[now.getMonth()] + "/" + thisYear);
// -->
//]]>
</script>
</span>
</b></span></font>

Giả sử, tôi chèn đoạn mã code tại phần Header trên website.

chèn ngày giờ vào website
Code hiển thị thời gian trên WordPress.
Cách chèn Fanpage Facebook vào WordPress. Cách chống copy bài viết WordPress, hiệu quả nhất.

Bước 3: Khi đã nhúng được mã code vào khung “HTML Tùy chỉnh”, bạn nhấn Đăng bài viết. Sau đó, mở một tab mới của trình duyệt để kiểm tra xem việc chèn ngày giờ đã thực sự thành công chưa? code hiển thị ngày giờ này đã đúng như mong muốn của mình chưa?

Hiện tại website BkViet.Com của tôi cũng đang cho hiển thị ngày tháng năm tại phần đầu Sidebar bên phải (bạn ra Trang Chủ là sẽ nhìn thấy).

P/s: Nếu bạn muốn độc giả khi vào đọc nội dung lúc nào cũng nhìn thấy ngày tháng năm gắn tại Sidebar. Thì có thể tham khảo bài viết này nhé: Cách tạo widget cố định trên Sidebar WordPress.

Sử dụng code khác hiển thị ngày giờ cho WordPress

Có một đoạn mã code Javascript khác cũng rất hữu ích. Để bạn có thể chèn vào trang web của mình hiển thị ngày giờ.

<script language="JavaScript">
<!--
// Store the date In avarlable
d = new Date()
dateText = ""
// Get the cuurent day and convert it to the name of the day
dayValue = d.getDay()
if(dayValue == 0)
dateText += "Chủ Nhật"
else if (dayValue == 1)
dateText += "Thứ hai"
else if (dayValue == 2)
dateText += "Thứ Ba"
else if (dayValue == 3)
dateText += "Thứ Tư"
else if (dayValue == 4)
dateText += "Thứ Năm"
else if (dayValue == 5)
dateText += "Thứ Sáu"
else if (dayValue == 6)
dateText += "Thứ Bảy"
// Get the current date; if it's before 2000,add 1900
dateText += ", Ngày " + d.getDate()
monthValue = d.getMonth()
dateText += " "
if (monthValue == 0)
dateText += "Tháng 1"
if (monthValue == 1)
dateText += "Tháng 2"
if (monthValue == 2)
dateText += "Tháng 3"
if (monthValue == 3)
dateText += "Tháng 4­"
if (monthValue == 4)
dateText += "Tháng 5"
if (monthValue == 5)
dateText += "Tháng 6"
if (monthValue == 6)
dateText += "Tháng 7"
if (monthValue == 7)
dateText += "Tháng 8"
if (monthValue == 8)
dateText += "Tháng 9"
if (monthValue == 9)
dateText += "Tháng 10"
if (monthValue == 10)
dateText += "Tháng 11"
if (monthValue == 11)
dateText += "Tháng 12"
// Get the current year; if it's before 2000, add 1900
if (d.getYear() < 2000)
dateText += ", Năm " + (1900 + d.getYear())
else
dateText += ", Năm " + (d.getYear())
// Get the current minutes
minuteValue = d.getMinutes()
if (minuteValue < 10)
minuteValue = "0" + minuteValue
// Get the current hours
hourValue = d.getHours()
// Customize the greeting based on the current hours
if (hourValue >=5 && hourValue <= 10)
{
timeText =  " Chào buổi sáng và chúc một ngày tốt lành!"
}
else if (hourValue > 10 && hourValue <= 12)
{
timeText =  " Chào buổi trưa - Bạn ăn cơm chưa vậy?"
}
else if (hourValue >= 13 && hourValue <17)
{
timeText = " Chào buổi chiều! "
}
else if (hourValue >=17 && hourValue <18)
{
timeText = " Chào buổi chiều bạn nhé!"
}
else if (hourValue >=18 && hourValue<21)
{
timeText =  " Chào buổi tối!"
}
else if( hourValue >=21 && hourValue <=24)
{
timeText =  "  Chúc bạn ngủ ngon và có giấc mơ đẹp!"
}
else if(hourValue >=1 && hourValue <5 )
{
timeText = "Chúc bạn một ngày vui vẻ!"
}
document.write(  dateText + "" + timeText + "")
-->
</script>

– Còn việc tích hợp code tạo đồng hồ trong Blogspot (Google Blogger) như thế nào? Đối với vấn đề này thì bạn chỉ cần vào phần Bố cục, sau đó tạo Tiện ích Javascript/HTML. Và cuối cùng paste đoạn code phía trên vào là được.

Kết luận

Bài viết này mình đã hướng dẫn cho bạn cách sử dụng code tạo đồng hồ hiển thị thứ/ngày/tháng/năm gắn vào website WP. Đây là cách không cần dùng Plugin mà vẫn có thể dễ dàng hiển thị ngày giờ trên trang web của mình. Tuy nhiên, nếu muốn sử dụng Plugin thì có thể tìm hiểu ở các Plugin đếm ngược xem sao nhé, có thể sẽ có tính năng này.

Như vậy mình đã share cho bạn 2 đoạn mã code hiển thị ngày tháng năm cho website WP. Nhưng bạn cũng có thể tìm kiếm thêm rất nhiều đoạn mã code khác (Javascript, CSS), để hiển thị thời gian theo phong cách của riêng mình. Chúc bạn thành công!

Cập nhật mới vào lúc 15:53 ngày 21/08/2020 

Có thể bạn quan tâm?

GIỚI THIỆU: LÂM SINH

Trang web này được mình thành lập để mong muốn chia sẻ nhiều kiến thức hữu ích đến với mọi người. Nếu bạn đang gặp khó khăn trong quá trình tìm hiểu bài viết và cần sự giúp đỡ, thì có thể để lại comment phía dưới mỗi bài viết để mình có thể hỗ trợ cho bạn được tốt nhất. Cảm ơn các bạn đã đón đọc những bài viết trên website.

5
Bình luận trong bài viết này. Bạn đọc phản hồi vui lòng gõ tiếng Việt có dấu. Xin cảm ơn!

avatar
Mới nhất Cũ nhất
gia khánh đức phong
Độc giả
gia khánh đức phong

Ad ơi , em thử mà có hiện được thứ ngày tháng lên web được đâu ạ?