1 WordPress文章內(nèi)添加JS代碼方法
系統(tǒng)學(xué)過(guò)建站技術(shù)的SEO高手，都知道如何簡(jiǎn)單使用JavaScript程序。
網(wǎng)絡(luò)上有很多別人分享出來(lái)的、好用的JavaScript代碼。
如果你可以在WordPress文章里添加JS代碼，必能讓文章生色不少。
在WordPress文章中，添加JavaScript代碼是非常簡(jiǎn)單的。
接下來(lái)，我們將會(huì)為你分享：如何在WordPress文章中，添加 JavaScript 代碼程序？
通常有2種添加JS代碼的方式：
第一種方法，直接在WordPress文章中編寫JavaScript。
以下是打印“Hello World！”文字的示例?▼
<script type="text/javascript">// <![CDATA[
document.write("Hello World!")
// ]]></script>
這是在WordPress文章中，執(zhí)行JavaScript后顯示“Hello World！” ▼
第二種方法，將JavaScript代碼寫入單獨(dú)的文件。
然后在需要插入JavaScript的WordPress文章中，通過(guò)WordPress文本編輯器調(diào)用JavaScript文件。
以下示例是在WordPress文章中，打印“Hello World”文本?▼
<script type="text/javascript" src="https://img.wordpressx.com/javascript/hello.js">// <![CDATA[ // ]]></script>
JavaScript文件hello.js的內(nèi)容?▼
document.write("Hello World");
在WordPress文章中添加JavaScript代碼所顯示的結(jié)果?▼
互聯(lián)網(wǎng)上有許多好玩又有用JavaScript代碼。
現(xiàn)在舉例說(shuō)明如何使用它們？
在WordPress文章中打印今天的日期。
將以下JavaScript date.js文件，插入到WordPress文章中?▼
<script type="text/javascript" src="https://img.wordpressx.com/javascript/date.js"></script>
<script type="text/javascript">// <![CDATA[
// call function if required.
// ]]></script>
以下是 date.js 文件的 JavaScript 內(nèi)容?▼
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執(zhí)行今天的日期的結(jié)果?▼
以下是本文中執(zhí)行的JavaScript文件date.js的結(jié)果?▼
要將JS代碼插入到文章中，你需要WordPress編輯器切換到文本模式。
需特別注意<script>和</ script>之間不能有換行。
如果有換行，WordPress將自動(dòng)處理為段落，自動(dòng)加上導(dǎo)致JS腳本代碼失效的p標(biāo)簽。
這里還有更多關(guān)于WordPress?JavaScript代碼的文章?▼
WordPress如何指定文章頁(yè)面加載JavaScript/CSS代碼？
在制作WordPress主題時(shí)，如果有一個(gè)特定的JavaScript或CSS代碼，出現(xiàn)在WordPress的特定頁(yè)面上，它只會(huì)被使用一次。應(yīng)該把代碼放在哪里？ Style.css還是base.js？但這樣做的成本有點(diǎn)大?！?/p>
如何讓W(xué)ordPress延遲加載JavaScript加速頁(yè)面渲染？
WordPress延遲加載JavaScript，來(lái)加速頁(yè)面渲染方法。什么是JavaScript的Defer屬性？每個(gè)人都可能遇到過(guò)這種情況：head中有N個(gè)腳本，在加載腳本時(shí)，會(huì)阻塞頁(yè)面渲染，這通常是空白的。 ……
WordPress如何適當(dāng)引入JavaScript？自定義加載JS和CSS文件
用WordPress建站的程序員，在開發(fā)WordPress插件或定制WordPress主題時(shí)，會(huì)引用一些JavaScript和CSS腳本資源。通常，人們直接為HTML使用link、script標(biāo)記。 實(shí)際上，WordPress內(nèi)……
希望我們網(wǎng)站（ http://news.qtyiliao.cn/ ） 分享的《如何在WordPress文章內(nèi)添加JavaScript代碼？》，對(duì)您有幫助。
1 有缺點(diǎn)的引用方法
用WordPress建站的程序員，在開發(fā)WordPress插件或定制WordPress主題時(shí)，會(huì)引用一些JavaScript和CSS腳本資源。
有兩種常見的引用方法，它沒(méi)有問(wèn)題，只是它不完美或不合理。
第1種：link 標(biāo)簽引用CSS文件
第2種：使用wp_head函數(shù)
<?php
add_action('wp_head', 'wpcwl_normal_script');
function wpcwl_normal_script() {
echo '資源文件的鏈接';
}
?>
大家都知道，WordPress有非常多插件：
使用wp_enqueue_script函數(shù)
wp_enqueue_script函數(shù)，該函數(shù)在排隊(duì)或排序的函數(shù)名中有一個(gè)單詞enqueue。此外，一些常用的庫(kù)（如jQuery，jQuery UI等）內(nèi)置于WordPress中。
我們可以使用wp_enqueue_script函數(shù)直接調(diào)用內(nèi)置庫(kù)，這樣可以節(jié)省代碼和更清晰的規(guī)范。
此處提供了內(nèi)置定義庫(kù)和標(biāo)識(shí)符（handle）的列表
若用此函數(shù)引用自己的JS和CSS文件，則需先使用wp_register_script函數(shù)注冊(cè)一個(gè)標(biāo)識(shí)（handle），然后使用wp_enqueue_script函數(shù)調(diào)取與此標(biāo)志對(duì)應(yīng)的資源。
WordPress提供JS和CSS方法的合理引入方法。
你可以使用以下代碼給插件引入plugin.css文件?▼
<?php
function wpcwl_add_styles() {
wp_register_script('plugin_stylesheet', plugins_url('plugin.css', __FILE__));
wp_enqueue_script('plugin_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wpcwl_add_styles' );
?>
以上使用wp_register_script函數(shù)，創(chuàng)建具有標(biāo)識(shí)符plugin_stylesheet的資源。
然后，將其排隊(duì)的請(qǐng)求添加到wp_enqueue_scriptsactions操作中。
雖然函數(shù)名稱是一個(gè)腳本，但它與資源文件的類型無(wú)關(guān)，并且對(duì)CSS和JS都有效。
wp_register_script函數(shù)，確實(shí)并不那么簡(jiǎn)單，它可有五個(gè)參數(shù)：
1）$handle：資源標(biāo)識(shí)符。
wp_enqueue_script調(diào)用。2）$src：資源的位置。
plugins_url、get_template_directory_uri等。3）$deps：依賴。
4）$ver：資源版本，可選。
5）$in_footer：是否將它放在底部？
讓我們看一個(gè)更完善的JavaScript文件引用示例?▼
<?php
function wpcwl_add_scripts() {
wp_register_script('plugin_script', plugins_url('plugin_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('plugin_script');
}
add_action( 'wp_enqueue_scripts', 'wpcwl_add_scripts' );
?>
程序員在WordPress主題開發(fā)中，使用wp_enqueue_script引入資源。
主要區(qū)別是使用相應(yīng)的函數(shù)，用于獲取主題目錄，以獲取主題下的資源文件地址。
你可以使用get_template_directory_uri函數(shù)來(lái)獲取當(dāng)前主題目錄。
如果你使用的是子主題，則需要使用get_stylesheet_directory_uri函數(shù)獲取父主題的目錄以獲取相應(yīng)的資源。
希望我們網(wǎng)站（ https://www.wordpressx.com/ ） 分享的《WordPress如何適當(dāng)引入JavaScript？自定義加載JS和CSS文件》，對(duì)您有幫助。
