Thêm tỷ giá ngoại tệ, giá vàng và mục thời tiết vào website

Chào các bạn, theo yêu cầu của một số bạn thì mình sẽ giới thiệu về cách thêm tỷ giá ngoại tệ USD, giá vàng và mục thời tiết hằng ngày vào trong website tin tức, blog của các bạn. Công việc này cũng khá là đơn giản tuy nhiên làm cho website tin tức của bạn chuyên nghiệp hơn.

Bài hôm nay sẽ chia ra làm 2 phần, một phần áp dụng cho web thông thường, một phần ứng dụng cho wordpress blog của chúng ta, thật ra đây cũng chỉ là HTML JavaScript.

Thêm mục tỷ giá vào website

Mình search trên google thì các bài hướng dẫn về các thêm tỷ giá ngoại tệ, giá vàng và mục thời tiết vào website cũng chỉ có một bài mà ra, hôm nay mình sẽ làm cách khác hơn một tí không theo các hướng dẫn đó nữa. Mục này thì bạn thường sẽ trình bày ở sidebar của blog tin tức, magazine web giống như vnexpress.net vậy.

 Download mã nguồn tỷ giá.

Thêm tỷ giá cho web

Đầu tiên bạn download mã ngồn mình share phía trên về máy. Bạn vào web mình cần thêm làm một số việc sau đây, giải nén thư gói vừa down về vào trong thu mục gốc website của bạn, bạn nhìn thấy trong đó có các thư mục và file như sau:

Cấu trúc file thư mục của tỷ giá vàng, USD

Trong đó thư mục images chứa các hình ảnh, thư mục css chứa các file css định dạng trong file, thư mục js chứ các file javascript. Bạn vào thẻ head của site import các file CSS và Javascript vào.

1 2 3 4

<!-- <link rel="stylesheet" href="css/mainstyle.css"  type="text/css" /> <script language="javascript" type="text/javascript" src="js/thuvien.js"></script> -->

Tùy vào nơi bạn đặt các file mà có đường dẫn cho hợp lý, bạn có thể xem lại cách sử dụng javascript ở các bài trước mình có đề cập, tiếp theo bạn tìm đến nơi nào cần hiển thị tỷ giá ngoại tệ, giá vàng và mục thời tiết thì bạn cho vào đó đoạn code sau:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58

<!-- <table border="0" cellpadding="0" cellspacing="0" class="block_green1" width="220px"> <tr> <td width="90%"><div class="redtitle">Tỷ giá ngoại tệ</div></td> <td width="10%"> <img id="AdTyGia" src="images/AdImgUp.gif" border="0" onclick='SetViewTableDiv(this.id);'/> </td> </tr> <tr> <td colspan="2"> <div id="AdTyGiaLoc"> <script type="text/javascript" language="JavaScript" src="http://www.vnexpress.net/Service/Forex_Content.js"></script> <script type="text/javascript" language="JavaScript" src="js/tygia.js"></script> </div> </td> </tr> </table> <img alt="" src="images/spacer.gif" width="220" height="8" /> <table border="0" cellpadding="0" cellspacing="0" class="block_green1" width="220px"> <tr> <td width="90%"><div class="redtitle">Giá vàng SBJ</div></td> <td width="10%"> <img id="AdGiaVang" src="images/AdImgUp.gif" border="0" onclick='SetViewTableDiv(this.id);'/>    </td> </tr> <tr> <td colspan="2"> <div id="AdGiaVangLoc"> <script type="text/javascript" language="JavaScript" src="http://www.vnexpress.net/Service/Gold_Content.js"></script> <script type="text/javascript" language="JavaScript" src="js/giavang.js"></script> </div> </td> </tr>         </table> <img alt="" src="images/spacer.gif" width="220" height="8" /> <table border="0" class="block_blue1" cellpadding="0" cellspacing="0" width="220px"> <tr> <td width="90%"> <div class="redtitle">Thời tiết</div> </td> <td width="10%"> <img id="AdThoiTiet" src="images/AdImgUp.gif" border="0" onclick='SetViewTableDiv(this.id);'/>    </td> </tr> <tr> <td colspan="2"> <div id="AdThoiTietLoc"> <script type="text/javascript" language="JavaScript" src="http://www.vnexpress.net/Service/Weather_Content.js"></script> <script type="text/javascript" language="JavaScript" src="js/thoitiet.js"></script> </div> </td> </tr> </table> -->

Vậy là OK, bây giờ chỉ việc ngồi test thử xem sao. Ở đây mỗi mục tương ứng với tỷ giá ngoại tệ, giá vàng, và dự báo thời tiết đều có js dropdown rất tiện lợi cho người sử dụng.

Demo tỷ giá ngoại tệ, giá vàng và dự báo thời tiết

Thêm tỷ giá vào trong WordPress

Làm tương tự như trên, bạn copy thư mục down về từ bên trên và đổi tên thành tygia cho nó gọn, sau đó mở file header.php lên trong thể head bạn code như sau:

1 2 3 4

<!-- <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/tygia/css/mainstyle.css"  type="text/css" /> <script language="javascript" type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/tygia/js/thuvien.js"></script> -->

Trong đó thì hàm bloginfo(‘stylesheet_directory’); sẽ lấy được địa chỉ gốc của theme bạn đang sử dụng trong WordPress phần này đã đươc đề cập ở bài làm việc với header.php, footer.php, index.php trong WordPress
Bây giờ bạn vào sidebar copy như đoạn code tỷ giá ngoại tệ, giá vàng và mục thời tiết như trên vào nơi bạn muốn hiển thị ở sidebar của wordpress và thay đổi địa chỉ hình và các file js lại cho hợp lý bằng cách thêm vào trước đó bloginfo(‘stylesheet_directory’); ?>/tygia/ … vậy là xong.
Kết luận: Công việc cũng khá đơn giản đúng không nào các bạn, bây giờ chỉ việc CSS lại cho phù hợp với mỗi người, bạn cần kết hợp việc xây dựng admin option panel cho wordpress để tùy chỉnh có nên hiển thị đoạn trên hay không, tạo sự tiện lợi cho người dùng! Tính năng tỷ giá ngoại tệ, giá vàng và mục thời tiết là một tính năng tốt, mong là sẽ giúp được blog của các bạn thêm phong phú, chúc thành công!