在 WordPress 中使用 JavaScript,有一定機會使用 jQuery 方法來完成需求。
以 Google 的 CDN 為例,在網頁上導入的方式如下。
[code lang=”html”]<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js></script>[/code]
不過在導入之前,這個自由開源的 WordPress 難道本身沒有使用 jQuery ,是否能直接調用 WordPress 內的 jQuery 呢?
其實 WordPress 本身是有 jQuery 的,但是考慮到多種不同的 Plugin 所使用的 jQuery 版本一定會有所差異。
所以避免不同版本之前的 jQuery 衝突問題,在 WordPress 使用時和一般傳統的使用方式稍微有些差異。
- 首先要先確定,佈景主題是否已經允許並載入好 jQuery 含式庫。
- 在主題編輯器中的”佈景函式庫 (functions.php)”,尋找內文是否有包含 jQuery 方法的關鍵字。
-
[code lang=”html”]wp_enqueue_script( ‘jquery’ );[/code]
- 如果能找到上面這一行,表示佈景主題已經導入過 jQuery 的相關 JavaScript。
- 用 WordPress 的撰寫方式寫一個測試程式。
- 由於無法在文章編輯器中,透過發布文章的方式來測試 JavaScript,因此必須在佈景主題中的某個項目內測試,在這裡可以選擇使用”單篇文章 (single.php)”。
-
-
[code lang=”html”]
<div id = "msgid">jQuery 方法並未生效…</div>
<script>
jQuery(document).ready( function () {
jQuery( ‘#msgid’ ).html(‘jQuery 方法是有效的!’ );
});
</script>
[/code] - 注意,這邊的 jQuery 不是使用 $ 方法,而是要使用上面的這種描述方式來進行。
- 如果 JavaScript 能正常使用 msgid 內的文字會修改成新的文字內容。
-