如何以正确的方式在您的WordPress网站上安装jQuery Mobile

So, you want to start taking advantage of some of the fantastic new jQuery Mobile features on your WordPress site, but you could use some guidance as to the best way to get up and running fast. No problem! With this quick walkthrough, I’ll show you the “right way” to get WordPress to load jQuery Mobile for you.

因此，您想开始利用WordPress网站上一些出色的jQuery Mobile新功能，但是您可以使用一些指导来快速启动和运行最佳方法。 没问题！ 通过此快速演练，我将向您展示“正确的方法”，让WordPress为您加载jQuery Mobile。

One of the main features I wanted to utilize was the new popups that you can build using jQuery Mobile. These are great for sharp-looking situational dialogues and other user-friendly ways to communicate to site visitors via prompts or forms. But, implementing them properly in WordPress can be a little challenging. Just as the security and dependability of WordPress means we get a powerful, robust framework; this also means we have to take a few extra steps when implementing new tools.

我要利用的主要功能之一是可以使用jQuery Mobile构建的新弹出窗口。 这些非常适合进行清晰的情境对话以及其他通过提示或表单与网站访问者进行交流的用户友好方式。 但是，在WordPress中正确实现它们可能会有些挑战。 正如WordPress的安全性和可靠性意味着我们获得了一个强大而强大的框架； 这也意味着我们在实施新工具时必须采取一些额外的步骤。

wp_enqueue_script (wp_enqueue_script)

First and foremost, the only recommended method of calling a JavaScript function or statement in WordPress is through the wp_enqueue_script function, which is built into WordPress for the purpose. This simply lets your WordPress installation know that you have a file that you want loaded, and it makes sure that it becomes integrated without any conflicts or other issues. In the big picture, this is wonderful, keeps your WordPress installation organized, and saves us a lot of potential headaches. In the short term, though, it can be a pain.

首先，唯一推荐的在WordPress中调用JavaScript函数或语句的方法是通过wp_enqueue_script函数，该函数内置于WordPress中。 这只是让您的WordPress安装知道您有要加载的文件，并确保该文件可以集成在一起而没有任何冲突或其他问题。 从总体上看，这很棒，可以使您的WordPress安装井井有条，并为我们节省了很多潜在的麻烦。 从短期来看，这可能会很痛苦。

Here’s the breakdown of what you need to do in order to get the JavaScript loaded:

以下是要加载JavaScript所需要做的事情的分解：

1. Create a function
   创建一个功能
2. Call the wp_enqueue_script with the proper arguments
   用适当的参数调用wp_enqueue_script
3. Use the add_action function to properly call your function that contains wp_enqueue_script
   使用add_action函数正确调用包含wp_enqueue_script的函数

Here’s what it looks like within the code itself:

这是代码本身的外观：

[sourcecode language=”php”] <?php function get_jqm() { wp_enqueue_script( ‘jqm_js’, ‘https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js’, array(‘jquery’), ‘1.2.0’ ); } add_action(‘wp_enqueue_scripts’, ‘get_jqm’); ?> [/sourcecode]

[源代码语言=“ php”] <？php函数get_jqm(){wp_enqueue_script('jqm_js'，'https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js '，array('jquery')，'1.2.0'); } add_action('wp_enqueue_scripts'，'get_jqm'); ？> [/源代码]

The wp_enqueue_script function has only two requirements: the unique name of the script you want to call (give it any name you want, preferably a sensible, semantic one) and the source of the script. In our case, we’re calling the JS file from the jQuery.com CDN.

wp_enqueue_script函数仅具有两个要求：要调用的脚本的唯一名称(为它提供所需的任何名称，最好是明智的语义名称)和脚本的来源。 在我们的例子中，我们从jQuery.com CDN调用JS文件。

I’ve also included a little extra information. Specifically, I included the version number, which is optional but a good practice nonetheless. When a new version comes out, you can update your code with the new information and the browser will download the latest release of jQuery Mobile. Otherwise, it will cache it and save the visitor that much bandwidth, resulting in quicker, snappier page loads for your WordPress website. So, include version numbers when you can, if you can.

我还提供了一些额外的信息。 具体来说，我包括了版本号，该版本号是可选的，但是还是一个很好的实践。 当出现新版本时，您可以使用新信息更新代码，浏览器将下载最新版本的jQuery Mobile。 否则，它将缓存它并为访问者节省大量带宽，从而为您的WordPress网站加载更快，更简单的页面。 因此，请尽可能添加版本号。

wp_register_style和wp_enqueue_style (wp_register_style and wp_enqueue_style)

jQuery Mobile isn’t complete without its CSS! I see this mistake happen quite a bit. The JavaScript is in place, but the customized CSS file designed specifically to work with jQuery Mobile is not. So, let’s make sure this tragedy does not happen to you.

没有CSS，jQuery Mobile就不完整！ 我看到这个错误发生了很多。 JavaScript已经存在，但是专门设计用于jQuery Mobile的自定义CSS文件却没有。 因此，让我们确保您不会发生这种悲剧。

CSS files are a bit different and require even more steps to get right. You have to first register the style and then enqueue it:

CSS文件有些不同，需要更多步骤才能正确处理。 您必须先注册样式，然后将其入队：

[sourcecode language=”php”]

[源代码语言=“ php”]

wp_register_style( ‘jqm_css’, ‘https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css’, ”, ‘1.2.0’ ); wp_enqueue_style( ‘jqm_css’, ‘https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css’, ”, ‘1.2.0’ ); [/sourcecode]

wp_register_style('jqm_css'，'https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css'，''，'1.2.0'); wp_enqueue_style('jqm_css'，'https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css'，''，'1.2.0'); [/源代码]

You’ll notice the pattern, I’m sure. It’s pretty much the same technique, but this method gives us the flexibility to determine the conditions in which the file is actually loaded in the browser. So we can register the CSS within WordPress, but we won’t require the user to download it until a specified event occurs and they truly need the CSS. I’m not going to get into these contingencies and dependencies in this article, but suffice it to say, this can be a powerful feature that few developers take full advantage of.

我敢肯定，您会注意到这种模式。 几乎是同一技术，但是这种方法使我们可以灵活地确定在浏览器中实际加载文件的条件。 因此，我们可以在WordPress中注册CSS，但是直到指定事件发生并且他们确实需要CSS时，我们才要求用户下载它。 我不会在本文中介绍这些意外情况和依赖关系，但是可以说，这可能是一项功能强大的功能，很少有开发人员可以充分利用。

将代码放在一起 (Putting the Code Together)

Now that you see how the parts come together to properly enqueue the JavaScript while also registering and enqueueing the CSS, let’s look at the final code:

现在您已经了解了如何将各部分组合在一起以正确地使JavaScript入队，同时还注册和入队CSS，让我们看一下最终代码：

[sourcecode language=”php”] function get_jqm() { wp_enqueue_script( ‘jqm_js’, ‘https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js’, array(‘jquery’), ‘1.2.0’ );

[源代码语言=“ php”]函数get_jqm(){wp_enqueue_script('jqm_js'，'https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js'，数组('jquery')，'1.2.0');

wp_register_style( ‘jqm_css’, ‘https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css’, ”, ‘1.2.0’ ); wp_enqueue_style( ‘jqm_css’, ‘https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css’, ”, ‘1.2.0’ ); } add_action(‘wp_enqueue_scripts’, ‘get_jqm’); [/sourcecode]

wp_register_style('jqm_css'，'https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css'，''，'1.2.0'); wp_enqueue_style('jqm_css'，'https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css'，''，'1.2.0'); } add_action('wp_enqueue_scripts'，'get_jqm'); [/源代码]

You can copy and paste this code into your WordPress installation’s functions.php file or use this to set up your own plugin. Either way, this will properly connect your code to WordPress so that you can take full advantage of the latest, greatest jQuery Mobile features and functions for your WordPress website.

您可以将此代码复制并粘贴到WordPress安装的functions.php文件中，或使用它来设置自己的插件 。 无论哪种方式，这都可以将您的代码正确地连接到WordPress，以便您可以充分利用WordPress网站的最新，最出色的jQuery Mobile功能。

翻译自: https://www.sitepoint.com/how-to-install-jquery-mobile-on-your-wordpress-site-the-right-way/