如何在WordPress文章內添加JavaScript代碼？

系統學過蓋站技術的SEO高手，都知道如何簡單使用JavaScript程序。

網絡上有很多別人分享出來的、好用的JavaScript代碼。

如果你可以在WordPress文章裡添加JS代碼，必能讓文章生色不少。

WordPress文章內添加JS代碼方法

在WordPress文章中，添加JavaScript代碼是非常簡單的。

接下來，陳溈亮將會為你分享：如何在WordPress文章中，添加JavaScript 代碼程序？

通常有2種添加JS代碼的方式：

1. 直接在WordPress文章裡添加JS代碼
2. 寫入JS文件後WordPress文章中調用JS代碼

1）直接在WordPress文章裡添加JS代碼

第一種方法，直接在WordPress文章中編寫JavaScript。

以下是打印“Hello World！”文字的示例 ▼

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

這是在WordPress文章中，執行JavaScript後顯示“Hello World！” ▼

2）寫入JS文件後WordPress文章中調用JS代碼

第二種方法，將JavaScript代碼寫入單獨的文件。

然後在需要插入JavaScript的WordPress文章中，通過WordPress文本編輯器調用JavaScript文件。

以下示例是在WordPress文章中，打印“Hello World”文本 ▼

<script type="text/javascript" src="https://img.chenweiliang.com/javascript/hello.js">// <![CDATA[
// ]]></script>

JavaScript文件hello.js的內容 ▼

document.write("Hello World");

在WordPress文章中添加JavaScript代碼所顯示的結果 ▼

WordPress調用今天日期的JS代碼

互聯網上有許多好玩又有用JavaScript代碼。

現在舉例說明如何使用它們？

在WordPress文章中列印今天的日期。

將以下JavaScript date.js文件，插入到WordPress文章中 ▼

<script type="text/javascript" src="https://img.chenweiliang.com/javascript/date.js"></script>
<script type="text/javascript">// <![CDATA[
     // call function if required.
// ]]></script>

以下是date.js 文件的JavaScript 內容 ▼

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()

以下是WordPress文章中JavaScript執行今天的日期的結果 ▼

以下是本文中執行的JavaScript文件date.js的結果 ▼

注意事項

要將JS代碼插入到文章中，你需要WordPress編輯器切換到文本模式。

需特別注意和之间不能有换行。

如果有換行，WordPress將自動處理為段落，自動加上導致JS腳本代碼失效的p標籤。

這裡還有更多關於WordPress JavaScript代碼的文章 ▼

WordPress如何指定文章頁面加載JavaScript/CSS代碼？

在製作WordPress主題時，如果有一個特定的JavaScript或CSS代碼，出現在WordPress的特定頁面上，它只會被使用一次。應該把代碼放在哪裡？ Style.css還是base.js？但這樣做的成本有點大。 ……

如何讓WordPress延遲加載JavaScript加速頁面渲染？

WordPress延遲加載JavaScript，來加速頁面渲染方法。什麼是JavaScript的Defer屬性？每個人都可能遇到過這種情況：head中有N個腳本，在加載腳本時，會阻塞頁面渲染，這通常是空白的。 ……

WordPress如何適當引入JavaScript？自定義加載JS和CSS文件

用WordPress建站的程序員，在開發WordPress插件或定制WordPress主題時，會引用一些JavaScript和CSS腳本資源。通常，人們直接為HTML使用link、script標記。實際上，WordPress內……