在 WordPress 文章內執行 JavaScript

如果博客以往有設計網頁的經驗, 相信都會懂得編寫 JavaScript 程式。JavaScript 有很多現成的實用程式, 如果可以插入 WordPress 文章內, 必定可以增加文章的色彩。現在看看如何在 WordPress 文章內執行 JavaScript 程式。

在 WordPress 文章內執行 JavaScript 程式是十分方便的, 一般有兩個方法。

第一個方法是直接在 WordPress 文章內編寫 JavaScript。以下例子是要印出 Hello World! 的文字:

<script type="text/javascript">// <![CDATA[
    document.write("Hello World!")
// ]]></script>

JavaScript 在 WordPress 文章內執行的結果如下:

第二個方法是用 Text Editor 將 JavaScript 編寫在獨立的檔案內, 然後在 WordPress 文章內需要插入 JavaScript 的地方 Call JavaScript 的檔案。 以下例子同樣是要在 WordPress 文章中印出 Hello World! 的文字:

<script type=”text/javascript” src=”http://localhost/xampp/wordpress/javascript/hello.js”>// <![CDATA[

// ]]></script>

JavaScript 檔案 hello.js 的內容是:

document.write(“Hello World”);

JavaScript 在 WordPress 文章內執行的結果如下:

互聯網上有很多實用和有趣的現成 JavaScript 程式, 現在舉一例子來說明如何使用。我現在要在 WordPress 文章內列印出今天的日期。

在 WordPress 文章中插入以下 Call 出 JavaScript date.js 檔案:

<script type="text/javascript" src="https://localhost/xampp/wordpress/javascript/date.js"></script><script type="text/javascript">// <![CDATA[
     // call function if required.
// ]]></script>

JavaScript 檔案 date.js 的內容是:

var calendarDate = getCalendarDate();

document.write("Today is: " + calendarDate);

function getCalendarDate()
{
   var months = new Array(13);
   months[0]  = "January";
   months[1]  = "February";
   months[2]  = "March";
   months[3]  = "April";
   months[4]  = "May";
   months[5]  = "June";
   months[6]  = "July";
   months[7]  = "August";
   months[8]  = "September";
   months[9]  = "October";
   months[10] = "November";
   months[11] = "December";
   var now         = new Date();
   var monthnumber = now.getMonth();
   var monthname   = months[monthnumber];
   var monthday    = now.getDate();
   var year        = now.getYear();
   if(year < 2000) { year = year + 1900; }
   var dateString = monthname +
                    ' ' +
                    monthday +
                    ', ' +
                    year;
   return dateString;
} // function getCalendarDate()

JavaScript 在 WordPress 文章內執行的結果如下:

以下是JavaScript 檔案 date.js 在本文章執行的結果: