Cách chèn ngày giờ vào website, thêm thời gian cho WordPress

CHIA SẺ MẠNG XÃ HỘI:

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

Vẫn biết rằng, chúng ta có thể xem giờ (ngày tháng năm) thông qua chiếc đồng hồ. Hoặc bằng điện thoại, máy tính hay sử dụng. Có rất nhiều cách để xem được ngày giờ nhanh chóng. Nhưng nếu trường hợp bạn không xem được một cách đầy đủ. Chẳng hạn như muốn biết hôm nay là thứ mấy? thì lại rất khó khăn. Bởi vậy, tích hợp code hiển thị ngày giờ trên website, có thể cho bạn và những người khác biết được 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 để hiển thị ngày giờ cho website WordPress CMS.

Hướng dẫn cách chèn ngày giờ vào website WordPress

Đa số các trang web/blog hiện nay đều sử dụng mã nguồn WordPress. Bởi vậy, bài viết này sẽ hướng dẫn cách thêm thời gian bằng code Javascript cho trang web WordPress.

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

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. Tức là bạn có thể chèn ở vị trí (Header, Sidebar, Footer…), miễn sao bạn cảm thấy chèn ở vị trí hợp lý nhất để hiển thị thời gian.

<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 sẽ chèn đoạn mã code tại phần Header (phần đầu của website) trên website của tôi.

chèn ngày giờ vào website
Code hiển thị thời gian trên website WordPress.
Cách chèn Fanpage Facebook vào WordPress. Cách chống sao chép nội dung bài viết WordPress hiệu quả.

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

PS: Hiện tại website của tôi đang cho hiển thị ngày tháng năm tại phần đầu Sidebar bên phải ở ngoài Trang Chủ. Còn khi truy cập vào bài viết, thì lại không còn cho hiển thị ngày tháng năm nữa. Mục đích là để cho bài viết được load nhanh hơn.

PPS: Nếu bạn muốn độc giả khi vào đọc nội dung bài viết lúc nào cũng nhìn thấy được ngày tháng năm mà bạn đã gắn tại phần Sidebar trang web của mình. Thì có thể tham khảo bài viết này “Cách tạo widget cố định trên Sidebar WordPress” để biết cách thực hiện nhé.

Sử dụng code khác để hiển thị ngày tháng năm trên WordPress

Có một đoạn mã code Javascript khác cũng rất tuyệt vời, giúp bạn chèn vào trang web của mình để hiển thị ngày giờ trên website WordPress.

<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ó nhiều bạn thắc mắc việc tích hợp code tạo đồng hồ trong Blogspot (Google Blogger) thì như thế nào? Rất đơn giản, 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 là paste những đoạn code phía trên vào là xong.

Kết luận

Bài viết hướng dẫn 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 mã nguồn WordPress. Đây là cách không dùng Plugin mà vẫn có thể dễ dàng hiển thị ngày giờ. Nhưng nếu bạn đang muốn tham khảo cách sử dụng Plugin, vậy thì có thể tìm hiểu từ các bài viết Plugin đếm ngược thời gian xem sao. Rất có thể sẽ có tính năng hiển thị thời gian trên những Plugin đó.

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

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. Độc giả 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 ạ?