如何將jQuery添加到WordPress

本教程中，我們將使用排隊過程添加jQuery腳本文件，并將jQuery添加到您的WordPress頁腳和標題中。

如果您在線搜索如何將jQuery腳本添加到WordPress，您將獲得大量的結果。但是，如果你不是程序員或者不熟悉WordPress，你可能會發現在線資源有點難以理解。這是我們進來的地方。在今天的文章中，我們將展示如何將jQuery腳本添加到WordPress。但是，在開始之前，我們來看看jQuery和WordPress。

jQuery

jQuery的流行是驚人的。那么為何不？它為開發人員開發Web應用程序提供了額外的優勢。它也是最受歡迎的JavaScript庫之一。這是一個較小的圖書館，也減少了加載時間。總之，為了加速WordPress，你需要使用jQuery。

使用jQuery可以快速完成諸如DOM操作，AJAX調用，動畫和其他任務。簡而言之，它有助于網站的發展。它是輕量級的，提供了更全面的插件，也適用于WordPress。

最初，WordPress不支持jQuery。然而，jQuery的普及和開發者的需求使得WordPress最終在他們的平臺中包含了jQuery。它首次在WordPress 3.8.1中引入。之后，它幾乎用于所有主題和插件。

如果您不確定如何開始使用jQuery，或者不知道如何將jQuery腳本添加到WordPress，我們將幫助您做到這一點。所以，沒有任何進一步的延遲，讓我們開始吧。

注意：我們建議不要在實時網站上嘗試此操作。在上線之前試用你的本地WordPress安裝。您也可以在嘗試更改您網站上的任何代碼之前創建備份！

如何添加jQuery腳本到WordPress

1.了解兼容模式

在WordPress中使用jQuery之前，我們需要了解兼容模式。由于WordPress是一個內容管理系統，它必須考慮整個系統內不同插件和主題之間的兼容性。為了確保jQuery按照預期工作并且不干擾其他插件，我們使用兼容模式。換句話說，它是確保它不與其他圖書館沖突的一種方法。

為了使兼容性有效，您不能$ 在代碼中使用符號。相反，你需要使用 jQuery。我們來看看下面的例子。

jQuery(document).ready(function($) {
$('#nav a').last().addClass('last');
})

下面給出了在沒有兼容模式的情況下編寫相同的代碼。

$(document).ready(function($) {
$('#nav a').last().addClass('last');
})

基本上，該$ 標志的任何實例都應該替換 jQuery 為使代碼能夠與Wordpress一起使用。

2.如何帶回$符號來寫WordPress的jQuery

這是一個眾所周知的事實，使用jQuery 每一次，而不是 $ 一個開發人員可能是一個令人沮喪的經歷。此外，它使代碼不必要的長。不過，$如果我們做一些調整，我們可以使用這個標志。

在我們分享這個調整之前，讓我們回顧一下jQuery sytax是如何工作的。如下所示。

$(selector).action()

$：美元符號告訴解釋器它是jQuery。
(selector)：它表示它需要找到的HTML元素。它充當查詢。
action()：將在元素上執行的函數

現在，我們了解基本語法，讓我們看看映射jQuery到的代碼 $。

(function($) {
$('.hideable').on('click', function() {
$(this).hide();
})
})( jQuery );

您需要將代碼包裝在匿名函數中。它只能在頁腳中使用。

您需要將整個代碼封裝在文檔就緒函數中，如下所示，以使jQuery在標頭中工作。

jQuery(document).ready(function( $ ) {
$('.hideable').on('click', function() {
$(this).hide();
})
});

但是，我們不建議在標題中使用jQuery插件，因為這可能會降低您的網站速度。

3.創建您的腳本文件

由于每次都無法將jQuery推送到頁腳和頭文件，因此應該創建腳本文件并將它們集成到一起。為此，您首先需要創建一個JavaScript文件。該文件需要放入您打算使用的主題文件夾中。您還可以將文件保存在“.js”文件夾中，以保持干凈和易于訪問。

對于本教程，讓我們命名文件“script_new.js”。它需要放置在主題文件夾的子文件夾中。那么，路徑將如何看待？它將是theme / js / script_new.js。

該腳本可以是任何操作簡單的HTML元素，以在屏幕上打印出“Hello，World”。這一切都取決于你想要做什么。

4.找到functions.php文件

在我們繼續前進之前，我們建議您創建一個兒童主題。兒童主題將確保您的主要主題文件保持安全。但是，在創建它之前，請檢查父主題是否已包含jQuery函數。

一旦完成，我們需要找到functions.php文件。這是所有魔法都會發生的文件。如果您無法找到任何名為“functions.php”的文件，請隨時創建一個。

現在，將script_new.js文件加載到每個頁面的標題; 您還需要在您的functions.php文件中添加以下代碼。

<?php
function add_custom_script() {
wp_register_script('custom_script', home_url() . '/wp-content/themes/theme/js/script_new.js', array( 'jquery' ), ‘1.0.0’, true);
wp_enqueue_script('custom_script');
}
add_action( 'wp_enqueue_scripts', 'add_custom_script' );
?>

上面的代碼拉你的腳本文件并將其排入WordPress。這個過程被稱為排隊。

5.使用插件來實現結果

盡管我們建議手動集成jQuery，但您也可以使用插件來實現。我們建議的插件是Posts帖子中的jQuery。該插件是輕量級和直接的。您將可以毫無困難地使用它。使用此插件，您可以將自定義jQuery和JavaScript代碼添加到您網站的任何頁面，帖子或自定義帖子類型中。

您只需將自定義代碼添加到插件代碼編輯器即可。免費版本只支持jQuery和JavaScript，但你也可以試用PRO版本，它有更多的功能，包括CSS。

結論

我們希望你喜歡這個教程。在本教程中，我們使用排隊過程添加了jQuery腳本文件。我們還討論了如何在WordPress主題的頁眉和頁腳中添加jQuery代碼。此外，我們還介紹了使用稱為“帖子頁面中的jQuery”的簡單插件添加jQuery代碼。

不多說，還是先看看效果圖吧：

國際化效果圖

如圖所示，通過改變地址欄 local 的值即可切換語言，下面我貼一下具體的代碼：

html

<div>
	<span class="ch-i18n" data-i18nkey="today">今天</span>
</div>
<div>
	<input type="text" class="ch-i18n" data-i18nkey="emailLabel" placeholder="請輸入郵箱">
</div>
<div>
	<input type="submit" class="ch-i18n" data-i18nkey="submit" value="提交">
</div>
<div>
	<label>
		<input type="radio"><span class="ch-i18n" data-i18nkey="man">男</span>
	</label>
	<label>
		<input type="radio"><span class="ch-i18n" data-i18nkey="woman">女</span>
	</label>
</div>
<div>
	<label>
		<input type="checkbox"><span class="ch-i18n" data-i18nkey="apple">蘋果</span>
	</label>
	<label>
		<input type="checkbox"><span class="ch-i18n" data-i18nkey="banana">香蕉</span>
	</label>
</div>
<div id="insert"></div>
<input type="button" id="btn1" class="ch-i18n" data-i18nkey="button" value="插入HTML">
<div id="placeholder"></div>
<input type="button" id="btn2" value="替換文本中的占位符">
<script src="./js/jquery-1.8.1.js"></script>
<script src="./js/i18n.js"></script>
<script>
	$(function () {
		var chI18n = CHI18n("login");
		// 動態插入數據
		$("#btn1").click(function () {
			$("#warning").show();
			$("#insert").html('<span>'+chI18n.get("insert")+'</span>');
		});
		$("#btn2").click(function () {
			$("#placeholder").html(chI18n.get("msg" , {name:'king',age:24,sex:'男'}));
		});
	})
</script>

如代碼所示，需要國際化的標簽，需要注意下面這幾點：

需要國際化的標簽class中必須包含 ‘ch-i18n’ 類名, 必須有 data-i18nkey 屬性
如果input有placeholder屬性，則會對placeholder進行國際化顯示
如果input有value屬性，則會對value進行國際化顯示
對于2,3這兩種情況，一般 input 的type為 text,submit,button

zh-cn.json

{
	"login":{
		"today":"今天",
		"submit":"提交",
		"emailLabel":"請輸入郵箱",
		"apple":"蘋果",
		"banana":"香蕉",
		"woman":"女",
		"man":"男",
		"button":"按鈕",
		"insert":"動態插入信息",
		"msg":"我叫{{name}},今年{{age}}歲,性別{{sex}}"
	}
}

這是我們一個簡單的國際化語言文件的格式（英文的跟這個一樣，我就不貼出來了），我們通過 data-i18nkey 屬性綁定這些 key ，然后 i18n.js 就能自動去解析，并顯示每個標簽所需要顯示的文本。

i18n.js

(function () {
	var i18n = null ;
	var SELECTOR = ".ch-i18n";
	var ATTR = "data-i18nkey";				
	var LANGUAGE_ARRAY = ['zh-cn','en-us'];	
	var lang = LANGUAGE_ARRAY[0];
	var LOCAL = "local"; 					
	var CHI18n = {
		get : function (key , obj) {
			var text = i18n[key] ;
			if(obj) {
				for(k in obj) {
					text = text.replace(new RegExp("\\{\\{" + k + "\\}\\}", "g"), obj[k]); 
				}
			}
			return text ;
		}
	}
	// 我這里根據頁面為單位，通過頁面的唯一標識，去獲取相應的國際化翻譯
	function CHI18nFactory (pageName) {
		if(!pageName || pageName == "") throw new Error("參數不能為空");
		loadLanguage(pageName); 
		return CHI18n ;
	}
	/**
	 * 加載語言文件
	 */
	function loadLanguage (pageName) {
		
		var search = window.location.search.replace("?","");
		var param = search.split("&");
		var index = param.findIndex(function (item) { 
			return item.indexOf(LOCAL) != -1 ;
		});
		if(index != -1) {
			var value = param[index].replace(LOCAL+"=","");
			if(LANGUAGE_ARRAY.indexOf(value) != -1) {
				lang = value ;
			}
		}
		
		// 加載國際化文本
		$.ajax({
			url:'./i18n/'+lang+'.json',
			async:false,
			dataType:'json',
			success:function (data) {
				i18n = data[pageName] ; 
				setLanguage();
			}
		});
	}
	/**
	 * 替換帶有 .ch-i18n[data-i18nkey] 類名和屬性的標簽內容
	 */
	function setLanguage () {
		$(SELECTOR+'['+ATTR+']').each(function () {
			var value = $(this).attr(ATTR);
			if(value && value != "") {
				if(this.tagName.toLowerCase() === 'input') {
					if( $(this).attr("placeholder")) {
						$(this).attr("placeholder",i18n[value]);
					} else if($(this).attr("value")){
						$(this).attr("value",i18n[value]);
					}
				} else {
					$(this).html(i18n[value]);
				}
			}
		});
	}
	window.CHI18n = CHI18nFactory ;
})();

對于i18n.js的實現其實很簡單，就是通過 jquery 加載所有 class="ch-i18n" 的元素，然后獲取該元素的 data-i18nkey 屬性值，然后通過瀏覽器地址欄參數 local 的值去加載對應的國際化文件，通過 data-i18nkey 的值去獲取對應的文本顯示即可。

當然有時候國際化文本中的數據可能是動態的，存在占位符的情況，比如:

{
msg："我叫{{name}},今年{{age}}歲,性別{{sex}}"
}

這里的name，age，sex 占位符的值需要我們在設置的時候手動傳值進去，因此可以給 get 方法傳遞一個參數即可，如下:

chI18n.get("msg" , {name:'king',age:24,sex:'男'})

如上只是一種簡單的國際化方案，如果你有其他更好的方式，歡迎留言交流。

言

最近寫博客真的是太痛苦了，倒不是寫博客本身，而是寫完之后往多個平臺發布的過程，一不注意就是十多分鐘往上的時間消耗。

為了解決這個問題，之前立項的“解決自媒體一鍵多平臺發布”項目必須得立刻著手完善了，爭取早日讓自己從發布這件事情上解脫出來專心寫文章。

【hxsfx的JavaScript庫】這個系列基本上是為“一鍵多平臺發布”項目打基礎用的。之所以把各個功能模塊拆分出來，是為了盡量讓小伙伴能夠復制即用（在兼容性方面，因為個人能力的原因，幾乎只會兼容Chrome瀏覽器）。

hxsfx.ajax庫

（一）介紹

AJAX 是異步的 JavaScript 和 XML（Asynchronous JavaScript And XML），開發hxsfx.ajax庫的主要目的就是希望通過異步加載HTML，從而盡量避免直接在js中寫HTML來刷新頁面內容。

hxsfx.ajax這個庫與jquery的ajax功能基本一致，不過短時間內應該是寫不到人家那么完善的。哈哈~

各位小伙伴別問，為什么不用jquery的ajax而要自己再寫一個呢？

問就是，博主喜歡造輪子。開玩笑了~

其實原因是為了減少三方庫的依賴，達到對項目的全面掌控。

項目地址：https://github.com/hxsfx/hxsfx_web_tools

（二）代碼

要自己開發一個ajax庫，需要借助Web API接口中的XMLHttpRequest（XHR）對象。

XMLHttpRequest（XHR）對象用于與服務器交互。通過 XMLHttpRequest 可以在不刷新頁面的情況下請求特定 URL，獲取數據。這允許網頁在不影響用戶操作的情況下，更新頁面的局部內容。

1、在window對象上新建一個hxsfx對象，本系列的所有庫基本都會在hxsfx對象之中：

//hxsfx.js
(function () {
    window.hxsfx = {};
})();

2、在hxsfx對象的基礎上新建一個ajax對象：

//ajax.js
(function () {
    window.hxsfx.ajax = {
    };
})();

3、在ajax對象中新建loadHTML方法，設置兩個參數，分別是ele準備加載HTML的容器元素和url加載HTML的地址：

//ajax.js
(function () {
    window.hxsfx.ajax = {
        loadHTML: function (ele, url) {
        }
    };
})();

4、在loadHTML方法中新建XMLHttpRequest對象：

//ajax.js
(function () {
    window.hxsfx.ajax = {
        loadHTML: function (ele, url) {
            const httpRequest = new XMLHttpRequest();
            httpRequest.open('GET', url, true);
            httpRequest.onreadystatechange = function () {
                //為了讓代碼更健壯，使用try...catch來捕獲返回狀態判斷和處理HTML代碼的異常
                try {
                    if (httpRequest.readyState === XMLHttpRequest.DONE) {
                        if (httpRequest.status === 200) {
                              //在這處理返回的HTML
                            }
                        }
                        else {
                            console.log("【ajax.get(" + url + ")請求出錯】");
                        }
                    }
                }
                catch (ex) {
                    console.log("【ajax.get(" + url + ")異常】" + ex.message);
                }
            };
            httpRequest.send();
        }
    };
})();

5、為了解決加載HTML緩存的問題，將loadHTML方法中傳入的URL參數后面加上一個時間戳：

//ajax.js
//時間戳用來解決加載頁面緩存的問題
var urlTimeStamp = "timeStamp=" + new Date().getTime();
url += ((url.indexOf('?') >= 0) ? "&" : "?") + urlTimeStamp;

6、【重點】在這處理返回的HTML時，如果直接將HTML加載到容器中，會出現HTML中Javascript代碼不執行的問題。解決這個問題，需要將加載的script標簽替換為script元素：

//ajax.js
ele.innerHTML = httpRequest.responseText;
var scriptElements = ele.getElementsByTagName("script");
for (var i = 0; i < scriptElements.length; i++) {
    var scriptElement = document.createElement("script");
    scriptElement.setAttribute("type", "text/javascript");
    var src = scriptElements[i].getAttribute("src");
    if (src) {
        //因為加載的src路徑是之前相對加載HTML頁面的，需要修改為當前頁面的引用路徑
        src = url.substring(0, url.lastIndexOf('/') + 1)  + src;
        src += ((src.indexOf('?') >= 0) ? "&" : "?") + urlTimeStamp;
        scriptElement.setAttribute("src", src);
    }
    var scriptContent = scriptElements[i].innerHTML;
    if (scriptContent) {
        scriptElement.innerHTML = scriptContent;
    }
    //用生成的script元素去替換html中的script標簽，以此來激活script代碼
    ele.replaceChild(scriptElement, scriptElements[i]);
}

7、最后ajax.js完整代碼：

//ajax.js
(function () {
    window.hxsfx.ajax = {
        loadHTML: function (ele, url) {
            //時間戳用來解決加載頁面緩存的問題
            var urlTimeStamp = "timeStamp=" + new Date().getTime();
            url += ((url.indexOf('?') >= 0) ? "&" : "?") + urlTimeStamp;
            const httpRequest = new XMLHttpRequest();
            httpRequest.open('GET', url, true);
            httpRequest.onreadystatechange = function () {
                //為了讓代碼更健壯，使用try...catch來捕獲返回狀態判斷和處理HTML代碼的異常
                try {
                    if (httpRequest.readyState === XMLHttpRequest.DONE) {
                        if (httpRequest.status === 200) {
                            ele.innerHTML = httpRequest.responseText;
                            var scriptElements = ele.getElementsByTagName("script");
                            for (var i = 0; i < scriptElements.length; i++) {
                                var scriptElement = document.createElement("script");
                                scriptElement.setAttribute("type", "text/javascript");
                                var src = scriptElements[i].getAttribute("src");
                                if (src) {
                                    //因為加載的src路徑是之前相對加載HTML頁面的，需要修改為當前頁
                                    src = url.substring(0, url.lastIndexOf('/') + 1) + src;
                                    src += ((src.indexOf('?') >= 0) ? "&" : "?") + urlTimeStamp;
                                    scriptElement.setAttribute("src", src);
                                }
                                var scriptContent = scriptElements[i].innerHTML;
                                if (scriptContent) {
                                    scriptElement.innerHTML = scriptContent;
                                }
                                //用生成的script元素去替換html中的script標簽，以此來激活script代
                                ele.replaceChild(scriptElement, scriptElements[i]);
                            }
                            }
                        }
                        else {
                            console.log("【ajax.get(" + url + ")請求出錯】");
                        }
                    }
                }
                catch (ex) {
                    console.log("【ajax.get(" + url + ")異常】" + ex.message);
                }
            };
            httpRequest.send();
        }
    };
})();

（三）調用文檔

1、將hxsfx.js和ajax.js放入Scripts文件夾中的hxsfx文件夾

2、在Scripts文件夾同級目錄新建index.html頁面

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>js庫測試</title>
    <script src="Scripts/hxsfx/hxsfx.js"></script>
    <script src="Scripts/hxsfx/ajax.js"></script>
    <script>
        window.onload = function () {
                //調用ajax中的loadHTML方法
            window.hxsfx.ajax.loadHTML(document.getElementById("ContentContainer"), "Views/test/testPage.html");
        };
    </script>
</head>
<body>
    <div id="ContentContainer"></div>
</body>
</html>

3、在Scripts文件夾同級目錄，首先新建Views文件夾，接著其中新建test文件夾，最后在test文件夾中新建testPage.html

<style>
    div#TestPageContainer {
        height: 300px;
        width: 300px;
        background-color: #F0F0F0;
    }
</style>
<script src="../../Scripts/hxsfx/test/test.js"></script>
<script>
    function updateBackgroundColor() {
        try {
            var backgroundColor = '#' + (Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0'));
            document.getElementById("TestPageContainer").style.backgroundColor = backgroundColor;
        }
        catch (ex) {
            console.log(ex.message);
        }
    }
</script>
<div id="TestPageContainer">
    <button onclick="updateBackgroundColor()">更改背景色</button>
    <button onclick="modifyPFontColor()">更改下面一句話的字體顏色</button>
    <p id="P">這兒是一句話。</p>
</div>

最后

以上內容只是hxsfx.ajax庫的開始，后續的內容更新小伙伴可以通過訪問Github項目地址進行獲取。

在線咨詢

上一篇：看看瀏覽器如何解析我們寫的頁面？
下一篇：16個超牛逼的HTML5和JavaScript特效

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商