jQuery庫目前已經是非常流行且通用的前端開發js框架,而當下緊跟潮流的wordpress已經集成了全套的jquery庫與其他子庫,方便我們開發主題或是插件時可以方便的調用wordpress自帶的jquery庫,而且,這套wordpress內置的jquery庫也會隨著wordpress的升級而升級,讓我們能一直使用最新版本的jquery庫。當然使用wordpress的jquery庫也有一些需要注意的地方。
- 參考鏈接:詳情壹
方法一:
引用wordpress自帶的jquery.js
將以下代碼添加至 header.php 文件的<head>標簽內<?php wp_head();? >
之前,保存即可。
<?php wp_enqueue_script("jquery"); ?>
使用時需要注意的地方: wp_enqueue_script(“jquery”); 務必加在 wp_head(); 的前面,而且 js 的寫法是: ? jQuery(document).ready(function($) { // "$"符號在這里才能被識別 }); WP 的 jQuery 和原版唯一的不同, 就是在最后一行加了 jQuery.noConflict(); 這個noConflict()?就是為了與其它的library 兼容性, 如:Prototype, MooTools, 或 YUI.
方法二:
引入外部JS或者內部JS
這里提供了一些有趣的CDN
- 參考鏈接:BootCDN
一般的引用方法:(不推薦)
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
或者將以下代碼添加至主題根目錄下的functions.php
文件中的<?php
下面
function lifet_scripts() {
//引入jquery
wp_enqueue_script( 'jquery', 'https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js', array(), '20200506', true );
}
add_action( 'wp_enqueue_scripts', 'lifet_scripts' );
推薦的引用方法:
這是一處實例