如何将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小时内与您取得联系。

整合营销服务商