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

Chia sẻ mạng xã hội:

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

Vẫn biết rằng, chúng ta có thể xem được giờ (ngày tháng năm) bằng chiếc đồ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 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 mã code hiển thị thời gian trên website là điều cần thiết, để giúp 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 các bạn đoạn mã code Javascript để 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

Hiện nay, các trang web/blog đa số đều sử dụng mã nguồn WordPress. Cho nên, mình sẽ hướng dẫn cho 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ử, mình sẽ 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.

Bước 3: Khi bạn đã 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ành công hay chưa? Code hiển thị ngày giờ này đã đúng như mong muốn của mình chưa?

Nếu bạn để ý thì website BkViet.Com hiện tại vẫn có hiển thị thứ, ngày tháng năm tại phần đầu tiên của Sidebar bên phải đấy (bạn ra Trang Chủ là sẽ thấy).

Ý bổ sung: 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 phần Sidebar. Vậy thì bạn nên tham khảo bài viết này nhé: Cách tạo widget cố định trượt 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 thú vị. Để bạn có thể chèn vào trang web của mình một mã code 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>

Tích hợp ngày giờ vào trang Blogspot (Google Blogger)

Việc tích hợp thời gian (ngày/tháng/năm) vào trang Blogspot như thế nào? Thật ra là rất đơn giản, vì nó cũng không khác với WP là mấy. Việc tích hợp này thì bạn cũng chỉ cần vào phần Bố cục của trang Blogspot của mình, sau đó tạo một Tiện ích Javascript/HTML. Rồi cuối cùng paste một trong những đoạn mã code mà mình đã chia sẻ cho bạn ở phía trên vào là được.

Kết luận

Như vậy, 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 của mình. Đây là cách không cần dùng Plugin mà vẫn có thể hiển thị ngày giờ trên trang web một cách dễ dàng. Tuy nhiên, nếu bạn muốn sử dụng Plugin để hiển thị thời gian, thì có thể tìm hiểu ở các Plugin đếm ngược thời gian xem sao nhé, đôi khi vẫn có trong những Plugin kiểu này.

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

Bài viết đăng lần đầu 03/2020, cập nhật & chỉnh sửa 01/2021   

Chia sẻ mạng xã hội:

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

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 ạ?