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 để khiến độc giả thường xuyên quay lại website của bạn. Khi nhận thấy website có hiển thị thứ, ngày tháng năm, họ sẽ xem luôn trên website cho tiện.

Vẫn biết rằng, chúng ta có thể xem giờ (ngày/tháng/năm) bằng chiếc đồng hồ hoặc đ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, việc 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 bản thân và người khác biết được về thông tin thời gian 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ị 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, bài viết này sẽ hướng dẫn 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 phần 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 đã nhúng được mã code vào khung “HTML Tùy chỉnh”, chúng ta sẽ 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 chưa? Code hiển thị ngày giờ này đã đúng như mong muốn chưa?

Nếu bạn để ý thì website BkViet.Com bấy lâu nay vẫn cho hiển thị thứ, ngày tháng năm tại phần đầu tiên của Sidebar bên phải.

Ý 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: Cách tạo widget cố định trượt trên Sidebar WordPress.

Xem bài viết: Cách chèn Fanpage Facebook vào website 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 hữu ích không kém. Để 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>

Xem bài viết: Cách chống copy bài viết WordPress, hiệu quả nhất.

Tích hợp ngày giờ vào 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 cũng 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 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 này.

Trong bài viết này 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!

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

Các bài viết liên quan