如何在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加速頁面渲染？

🔗WordPress如何適當地引入JavaScript？自訂載入JS和CSS文件