在 WordPress 中使用 jQuery 程式碼

在 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 使用時和一般傳統的使用方式稍微有些差異。

  1. 首先要先確定,佈景主題是否已經允許並載入好 jQuery 含式庫。
    • 在主題編輯器中的”佈景函式庫 (functions.php)”,尋找內文是否有包含 jQuery 方法的關鍵字。
    • [code lang=”html”]wp_enqueue_script( ‘jquery’ );[/code]

    • 如果能找到上面這一行,表示佈景主題已經導入過 jQuery 的相關 JavaScript。
  2. 用 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 內的文字會修改成新的文字內容。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *