modern php

This article was sponsored by modern.IE Thank you for supporting the sponsors who make SitePoint possible!

这篇文章是由赞助modern.IE感谢您支持谁使SitePoint可能的赞助商！

There are dozens of popular tools to help theme developers test the quality of their code. Not only can this help reduce errors in your themes, but it also helps ensure that your theme is reliably rendered on multiple devices and browsers.

有许多流行的工具可以帮助主题开发人员测试其代码质量。 这不仅有助于减少主题中的错误，而且还有助于确保在多个设备和浏览器上可靠地呈现主题。

Also, with WordPress performance being such a hot topic, the ability to identify potential performance issues while you’re developing your theme is extremely useful.

另外，由于WordPress性能成为热门话题，在开发主题时识别潜在性能问题的功能非常有用。

In this article, I will explain what modern.IE is, and how it can assist you in your WordPress theme development, and provide some pointers to more information. I’ll also walk you through setting up a test virtual image so that you can test your WordPress theme on the complete family of Windows and IE (Internet Explorer) web browsers.

在本文中，我将解释什么是modern.IE，以及它如何帮助您进行WordPress主题开发，并提供一些指向更多信息的指针。 我还将引导您设置测试虚拟映像，以便您可以在完整的Windows和IE(Internet Explorer)网络浏览器系列中测试WordPress主题。

在WordPress主题中测试真实数据 (Testing Real Data in Your WordPress Themes)

There is a lot more to a WordPress theme than just the home page. Likewise, an empty theme with some placeholder text won’t really give your theme the workout it needs.

WordPress主题不仅有主页，还有更多内容。 同样，带有一些占位符文本的空主题不会真正为您的主题提供所需的锻炼。

Once your theme is being used by real users in production, they’ll find ways to use it that you might not have ever expected, let alone tested. Enter WP Test (wptest.io). WP Test provides exhaustive (you can’t ever test for everything) test data to help simulate real usage by creating all sorts of content; it’s quite impressive and perfect for testing themes (it’s also handy for testing plugins).

实际用户在生产中使用您的主题后，他们将找到您可能从未想到的使用主题的方法，更不用说对其进行测试了。 输入WP Test(wptest.io) 。 WP Test提供了详尽的(您不可能对所有内容进行测试)测试数据，以通过创建各种内容来帮助模拟实际使用情况。 它对于测试主题非常令人印象深刻且完美(对于测试插件也很方便)。

If you’re developing your own WordPress themes I’d highly recommend using WP Test.

如果您要开发自己的WordPress主题，则强烈建议使用WP Test 。

什么是modern.IE？ (What is modern.IE?)

Firstly, for those unfamiliar with modern.IE, it’s a collection of free tools and resources provided by Microsoft aimed at helping web developers. One nice feature of modern.IE is that it’s available in languages other than English.

首先，对于那些不熟悉modern.IE的人，它是Microsoft旨在帮助Web开发人员的免费工具和资源的集合。 modern.IE的一个不错的功能是它可以使用英语以外的其他语言。

I’ll give you a quick overview before drilling deeper into some of the testing tools that modern.IE provides.

在深入研究modern.IE提供的一些测试工具之前，我将为您提供快速概述。

Modern.IE工具 (Modern.IE Tools)

Modern.IE isn’t just about tools, it’s a resource for developers. That said, the tools are definitely the core features on offer and the most fun to play with.

Modern.IE不仅涉及工具，它还是开发人员的资源。 也就是说，这些工具绝对是所提供的核心功能，并且最有趣。

浏览器堆栈 (BrowserStack)

BrowserStack is a popular web application that allows you to test your theme on hundreds of virtual machines. It’s a third party service, however you can try BrowserStack for three months via modern.IE.

BrowserStack是一个流行的Web应用程序，允许您在数百个虚拟机上测试主题。 它是第三方服务，但是您可以通过modern.IE尝试使用BrowserStack三个月。

BrowserStack and similar tools save you time previewing your themes on different devices and browsers. But, if you already maintain your own testing environment, you’ll be interested in the next point.

BrowserStack和类似工具可节省您在不同设备和浏览器上预览主题的时间。 但是，如果您已经维护了自己的测试环境，那么您将对下一点感兴趣。

虚拟机映像 (Virtual Machine Images)

We all realize the importance of testing on multiple browser versions and unless you use a testing platform that offers this as a service (such as BrowerStack) you probably maintain your own set of virtual machine images. One nice resource modern.IE provides is various sets of Windows and IE versions which you can download to your own environments.

我们都意识到在多个浏览器版本上进行测试的重要性，除非您使用提供此功能作为服务的测试平台(例如BrowerStack)，否则您可能会维护自己的一组虚拟机映像。 IE提供了一个不错的资源。IE提供了各种Windows和IE版本，您可以将其下载到自己的环境中。

The virtualization library covers many different Windows versions, as well as IE from version 6 to 8. These images come in a variety of operating systems, virtualization platforms, with VirtualBox supported on Windows, Mac and Linux.

虚拟化库涵盖许多不同的Windows版本以及版本6到8的IE。这些映像来自各种操作系统，虚拟化平台，并且Windows，Mac和Linux支持VirtualBox。

Here are the host operating systems and virtualization platforms available at the time of writing:

以下是撰写本文时可用的主机操作系统和虚拟化平台：

视窗 (Windows)

• Hyper-V On Windows Server 2008 R2 SP1Windows Server 2008 R2 SP1上的Hyper-V
• Hyper-V On Windows Server 2012 & Windows 8 Pro w/Hyper-V带有Hyper-V的Windows Server 2012和Windows 8 Pro上的Hyper-V
• Virtual PC for Windows 7适用于Windows 7的虚拟PC
• VirtualBox on WindowsWindows上的VirtualBox
• VMWare Player for WindowsWindows版VMWare Player

苹果电脑 (Mac)

• VirtualBox for MacMac版VirtualBox
• VMWare Fusion for Mac适用于Mac的VMWare Fusion
• Parallels for MacMac版Parallels

的Linux (Linux)

• VirtualBox for LinuxLinux版VirtualBox

And here are the Windows and IE versions provided:

以下是提供的Windows和IE版本：

• IE11 – Windows 8.1IE11 – Windows 8.1
• IE10 – Windows 8IE10 – Windows 8
• IE11 – Windows 7IE11 – Windows 7
• IE10 – Windows 7IE10 – Windows 7
• IE9 – Windows 7IE9 – Windows 7
• IE8 – Windows 7IE8 – Windows 7
• IE7 – Windows VistaIE7 – Windows Vista
• IE8 – Windows XPIE8 – Windows XP
• IE6 – Windows XPIE6 – Windows XP

To install any of these, you must download self-extracting RAR archives. Due to the size of the images, they’re broken up into several files and are best downloaded using the command line tools wget or cURL. In the example below, I’ll be downloading Windows XP/IE6 for Parallels for OS X using cURL:

要安装其中的任何一个，必须下载自解压的RAR归档文件。 由于图像的大小，它们被分成几个文件，最好使用命令行工具wget或cURL下载 。 在下面的示例中，我将使用cURL下载适用于OS X的Parallels的Windows XP / IE6：

curl -O -L "https://www.modern.ie/vmdownload?platform=mac&virtPlatform=parallels&browserOS=IE6-WinXP&parts=0&filename=VMBuild_20131127/Parallels/IE6_WinXP/IE6.WinXP.For.MacParallels.sfx"

Next we need to run the self-extracting RAR file, but first it needs to made executable:

接下来，我们需要运行自解压缩的RAR文件，但首先需要使其具有可执行性：

chmod +x IE6.WinXP.For.MacParallels.sfx

Now we can run the file, this will extract the PVM files needed for our Parallels image:

现在我们可以运行该文件，这将提取Parallels图像所需的PVM文件：

./IE6.WinXP.For.MacParallels.sfx

The output should look like this:

输出应如下所示：

RAR SFX archive
Extracting from ./IE6.WinXP.For.MacParallels.sfx
Creating    IE6 - WinXP.pvm                                           OK
Extracting  IE6 - WinXP.pvm/config.pvs                                OK
Extracting  IE6 - WinXP.pvm/config.pvs.backup                         OK
Creating    IE6 - WinXP.pvm/IE6 - WinXP.hdd                           OK
Extracting  IE6 - WinXP.pvm/IE6 - WinXP.hdd/DiskDescriptor.xml        OK
Extracting  IE6 - WinXP.pvm/IE6 - WinXP.hdd/DiskDescriptor.xml.Backup  OK
Extracting  IE6 - WinXP.pvm/IE6 - WinXP.hdd/IE6 - WinXP.hdd           OK
Extracting  IE6 - WinXP.pvm/IE6 - WinXP.hdd/IE6 - WinXP.hdd.0.{5fbaabe3-6958-40ff-92a7-860e329aab41}.hds  OK
Extracting  IE6 - WinXP.pvm/IE6 - WinXP.hdd/IE6 - WinXP.hdd.drh       OK
Extracting  IE6 - WinXP.pvm/parallels.log                             OK
Extracting  IE6 - WinXP.pvm/statistic.log                             OK
Extracting  IE6 - WinXP.pvm/VmInfo.pvi                                OK
Creating    IE6 - WinXP.pvm/Snapshots                                 OK
Creating    IE6 - WinXP.pvm/Windows Disks                             OK
All OK

All we need to do now is import the image into Parallels and we’re ready to fire up Windows XP and IE6.

现在我们需要做的就是将图像导入Parallels，我们准备启动Windows XP和IE6。

It will take a while to set up all of the images, but in the end you’ll have coverage of all Windows and IE versions in your own testing environment.

设置所有图像将花费一些时间，但是最后您将覆盖自己的测试环境中的所有Windows和IE版本。

兼容性报告和站点扫描 (Compatibility Report and Site Scan)

The Compatibility Report/Site Scan (also referred to as the Compat Report) is a nifty tool that checks your HTML, CSS and JavaScript for problems or ways that you can improve your code in your theme. It also alerts you to obsolete versions of common JavaScript libraries. This is important if you’re using a starter theme that may be using older versions of a particular library.

兼容性报告/站点扫描(也称为兼容性报告)是一个漂亮的工具，可以检查HTML，CSS和JavaScript中是否存在问题或可以改进主题代码的方式。 它还会提醒您注意常用JavaScript库的过时版本。 如果您使用的入门主题可能正在使用特定库的旧版本，则这一点很重要。

To use the Compatibility Report, just enter a URL and click Scan.

要使用兼容性报告，只需输入URL并单击扫描。

The results are displayed in logical sections that can be expanded for more information. This is a great learning tool, since it tells you how your code can be improved.

结果显示在逻辑部分中，可以对其进行扩展以获取更多信息。 这是一个很棒的学习工具，因为它告诉您如何改进代码。

You can share completed reports as a PDF, by email or even on Facebook (I’m sure your friends will be relieved you’re sending compressed content :)).

您可以将已完成的报告以PDF格式，通过电子邮件甚至在Facebook上共享(我相信您发送压缩内容的朋友会感到放心:))。

Here’s what a report looks like:

报表如下所示：

Here’s a link to an example report:

这是示例报告的链接：

• https://moderniepdf.blob.core.windows.net/modernie-pdf/a21c0076-b92a-4af0-8c29-6a91562f6eb4.pdf

  https://moderniepdf.blob.core.windows.net/modernie-pdf/a21c0076-b92a-4af0-8c29-6a91562f6eb4.pdf

While using the online version of the Compatibility Report is handy, like most of these kinds of remote tools, they only work on publicly accessible URLs. This is a pain at times, but luckily for those who need private testing or if you just like to roll your own tools, the code is open source and available on GitHub here.

尽管使用在线版本的兼容性报告很方便，但像大多数此类远程工具一样，它们仅适用于可公开访问的URL。 有时这很痛苦，但是幸运的是，对于那些需要进行私人测试的人，或者如果您只是想滚动自己的工具，那么这些代码是开源的， 可以在GitHub上找到 。

You might have also noticed that along with the results shown on the main page, there are two additional tabs.

您可能还已经注意到，除了主页上显示的结果以外，还有两个其他选项卡。

• Get screenshots of your site across browsers and devices跨浏览器和设备获取您的网站的屏幕截图
• Scan for code no longer supported in modern IE扫描现代IE不再支持的代码

I’ll briefly cover what you’ll find in these sections.

我将简要介绍这些部分中的内容。

跨浏览器和设备获取您的网站的屏幕截图 (Get screenshots of your site across browsers and devices)

This is a nice, quick and easy way to get screenshots of your site on various platforms and devices. This feature uses BrowserStack to generate the images. Unlike the link to BrowserStack on the front page, these feature generates a sample of nine images within modern.IE.

这是一种在各种平台和设备上获取您的网站截图的好方法。 此功能使用BrowserStack生成图像。 与首页上的BrowserStack链接不同，这些功能在modern.IE中生成了九张图像的样本。

As with the Compatibility Report, you can also share these results.

与兼容性报告一样，您也可以共享这些结果。

扫描现代IE不再支持的代码 (Scan for code no longer supported in modern IE)

This is also referred to as the ‘Compat Inspector’. It’s essentially a JavaScript tool developed by the IE team that checks to make sure your code isn’t including anything known to have issues.

这也称为“ Compat Inspector”。 它本质上是IE团队开发JavaScript工具，可以检查以确保您的代码不包含任何已知的问题。

You can find out more information on using Compat Inspector here.

您可以在此处找到有关使用Compat Inspector的更多信息。

The use of Compat Inspector in modern.IE is automated using Sauce Labs. They offer a testing platform with over 130 browsers and can integrate with third party Continuous Integration services such as Jenkins and Travis CI.

使用Sauce Labs可在modern.IE中自动使用Compat Inspector。 他们提供了具有130多种浏览器的测试平台，并且可以与第三方持续集成服务(例如Jenkins和Travis CI)集成。

状态 (Status.IE)

Accessible at http://status.modern.ie, Status.IE publishes implementation details of current and future features supported by IE (and other browsers). You can view the source and get more information at the Status.IE GitHub repo.

可在http://status.modern.ie上访问 ，Status.IE可发布IE(和其他浏览器)支持的当前和将来功能的实施细节。 您可以在Status.IE GitHub存储库中查看源代码并获取更多信息。

IE开发人员社区 (IE Developer Community)

The IE Developer Community section is a launchpad for all things IE. It lists events, IE reference documentation, and links to IE-based discussions on Twitter and StackOverflow.

IE开发人员社区部分是适用于IE的所有内容的启动板。 它列出了事件，IE参考文档以及Twitter和StackOverflow上基于IE的讨论的链接。

文章和开发人员资源 (Articles and Developer Resources)

The ‘articles and developer resources‘ section is a handy curated list of best practices and web developer resources.

“ 文章和开发人员资源 ”部分是最佳实践和Web开发人员资源的精选清单。

IE开发人员频道 (The IE Developer Channel)

The IE Developer Channel lets you connect to the IE engineering team as well as download a version of IE that lets you test upcoming features.

IE开发人员频道使您可以连接到IE工程团队，还可以下载IE版本，以测试即将发布的功能。

摘要 (Summary)

If you’re developing your own WordPress themes, thorough testing should definitely be an important part of your workflow. Modern.IE gives you a wide range of tools to help you test your code, as well as community resources to help keep up with modern web development best practices.

如果您正在开发自己的WordPress主题，则彻底的测试绝对应该是工作流程中的重要组成部分。 Modern.IE为您提供了广泛的工具来帮助您测试代码，并提供社区资源来帮助您跟上现代Web开发的最佳实践。

There’s a lot more to modern.IE than what I’ve covered, but hopefully you’ve seen enough to get started. If you’re interested in further reading on modern.IE and WordPress Theme development below are some great starting points:

除了我已经介绍的内容外，modern.IE还有很多其他内容，但是希望您已经足够了解入门。 如果您有兴趣进一步阅读Modern.IE和WordPress主题开发，则以下是一些不错的起点：

• https://www.sitepoint.com/using-modern-ie-identify-common-coding-problems/

  https://www.sitepoint.com/using-modern-ie-identify-common-coding-problems/

• https://www.sitepoint.com/testing-internet-explorer-modern-ie/

  https://www.sitepoint.com/testing-internet-explorer-modern-ie/

• http://make.wordpress.org/themes/

  http://make.wordpress.org/themes/

• https://www.sitepoint.com/so-you-think-you-know-how-write-wordpress-theme/

  https://www.sitepoint.com/so-you-think-you-know-how-write-wordpress-theme/

• https://www.sitepoint.com/store/build-your-own-wicked-wordpress-themes/ (Book)

  https://www.sitepoint.com/store/build-your-own-wicked-wordpress-themes/(本书)

If you have any other useful resources for theme development, please feel free to share them in the comments section below.

如果您还有其他有用的主题开发资源，请随时在下面的评论部分中分享。

翻译自: https://www.sitepoint.com/modern-ie-can-improve-wordpress-theme-development/

modern php