创建 Retina Ready WordPress 主题的 5 个技巧

如果 WordPress 主题考虑到视网膜显示器的高像素密度并提供适合这些显示器大小的图像，则它是视网膜就绪的。 准备好 WordPress 主题视网膜时需要考虑一些事项： 1. 使用高分辨率图像。 Retina 显示屏的像素密度是标准显示屏的 2 或 3 倍，因此您的图像需要两倍或三倍大才能在这些设备上看起来清晰。 2. 使用响应式设计。 响应式设计将确保您的主题在所有设备上看起来都不错，包括视网膜显示器。 3.使用像WP Retina 2x这样的插件。 该插件将自动生成您的图像的高分辨率版本并将它们提供给视网膜设备。 4.优化您的图像。 确保优化您的图像以加快加载速度。 5.使用缓存插件。 缓存插件将有助于加快页面在所有设备上的加载速度，包括视网膜显示器。 通过遵循这些提示，您可以确保您的 WordPress 主题已准备好视网膜。

因为Retina 支持将在未来几周内用于我们的 WordPress 主题，所以我想与您分享我们是如何创建它们的。 通过渲染两倍大小（但具有相同尺寸）的图像，翻新您的主题将使 Retina 设备的尺寸（具有相同尺寸）翻倍。 要显示 100×200 的图像，浏览器必须将其压缩到 100×400。 CSS 背景图片和 Sprite 不能被 Retina.js 替换，因为它们不使用 HTML 标签。 必须更新图标和按钮，以使您的网站在视网膜显示屏上看起来清晰且响应迅速。 Font Awesome 的文档非常好，它是最强大的字体图标库之一。 大多数字体图标都是通过简单地上传文件并添加@Font-face 声明来安装的。

您还可以在此模板中添加酷字体图标，例如 Facebook 徽标，该模板具有可扩展性和可定制性。 制作 Retina-ready favicon 的最简单方法是使用简单的 Java 脚本。 只需创建一个 32×32 的 Photoshop 文档，添加您的图像，然后使用 Photoshop 保存为 png24（具有透明度）。

如何使图像为 Retina 做好准备？

为了使图像视网膜就绪，您需要创建一个两倍于原始大小的图像版本。 这可以在任何图像编辑软件中完成，例如 Photoshop。 创建较大版本的图像后，您需要将其另存为单独的文件。 当您将图像上传到您的网站时，您需要使用代码来告诉浏览器加载更大版本的图像。

FooGallery 可以在图像选项卡中启用以显示视网膜就绪图像。 选择 Retina 尺寸并单击将默认值应用到所有画廊时，将为所有现有画廊生成准备好以 Retina 格式显示的图像。 如果您添加一个新画廊，它将自动生成视网膜大小的图像。 当 FooGallery 图像显示在普通或 Retina 屏幕上时，图像的 HTML 会自动优化为显示为 300*300 像素。 如果您为您的画廊启用了 Retina 图像大小，请确保您将在 FooGallery 中显示的任何图像都足够大以显示在 Retina 设备上。 例如，如果您想在二维 Retina 设备上清晰显示 600600 的图像，则需要上传分辨率为 12001,200 的图库图像。 当您启用视网膜设置 2x 和 3x 时，您将能够创建三个版本的拇指。

让您的网站为 Retina 做好准备

在查看支持视网膜的网站时，图像以比在高清设备上的标准清晰度显示器上更高的分辨率显示。 这种更高的分辨率可以更详细地呈现图像，使其更易于理解和查看。
如果您打算为您的网站使用支持视网膜的软件，建议您尽可能使用可缩放矢量图形 (SVG)。 这种图形格式是基于 XML 的并且具有高质量的图像。 要查看 SVG 图像，可以通过 Internet 浏览器访问 XML 文件或显示这些文件的移动电话。
建议您在使用之前使用视网膜就绪的图像。 您可以通过使用 1920×1920 像素的图像来实现这一点，这就是所谓的“2x”。 由于图像将在网站上保持 640 像素宽，因此您通过使用两倍大小的图像来增加像素密度。
如果您使用的图像不是视网膜就绪的，请优化它以在视网膜上显示。 这可以通过使用 4 倍分辨率图像来实现，也称为“4 倍分辨率”。 尽管图形的宽度为 1024 像素，但它仍会出现在您的站点上，因为它的大小是原来的四倍。

什么是支持 Retina 的 WordPress 主题？

支持视网膜的 WordPress 主题是一个设计用于具有高分辨率视网膜显示屏的设备的主题。 这意味着主题将在 iPhone 和 iPad 等设备上看起来清晰明了。 随着越来越多的人使用视网膜设备，支持视网膜的主题变得越来越流行。

如果您正在寻找响应式或视网膜就绪的 WordPress 主题，请在下面找到列表。 总体而言，这些主题易于使用，在台式机、平板电脑和智能手机上看起来不错，并且不需要您付出太多努力。 您可以使用任何想要使用它们创建任何布局的页面构建器。 Inovado 是一个支持视网膜的 WordPress 主题，带有大量强大的自定义选项。 另一个高级 WordPress 主题是 Superhero，专为企业家和初创公司设计。 由于干净的网格系统，这个 WordPress 主题是视网膜就绪和响应式的。 Wiz 是一个多功能主题，可供各种规模的企业、初创公司和小型组织使用。

主题定制器使设置和定制 Pin Maker –响应式 WordPress 博客主题变得简单。 这个 WordPress 主题有 HTML5 / CSS3 内容，基于 Twitter Bootstrap。 它是视网膜就绪、跨浏览器兼容和完全响应的。 Prothoma – Business WordPress 主题可供各种企业使用，包括数字机构和企业。 Pin Auto Spa 是一个自动详细说明 WordPress 主题。 这个视网膜就绪的 WordPress 主题非常适合洗车业务、汽车维修和机械车间以及汽车服务。 Legatus 是博客、在线杂志、在线报纸和其他出版物的理想选择，因为它提供响应式设计。

为清晰的网站启用 Retina 图像

在 WordPress 管理面板中安装插件后，单击“外观”选项卡。 “ Retina Images ”选项位于页面的“WP Retina 2x”部分。 要启用视网膜图像，请转到“启用”按钮。

如何将视网膜图像添加到 WordPress？

将视网膜图像添加到 WordPress 是一个两步过程：首先，您需要将更高分辨率的图像添加到您的媒体库中，然后您需要在主题的 functions.php 文件中添加一行代码。 要将更高分辨率的图像添加到您的媒体库，只需上传两倍于正常图像大小的图像副本。 例如，如果您的普通图像是 400x300 像素，那么您的视网膜图像应该是 800x600 像素。 一旦你的媒体库中有你的视网膜图像，你需要在你的主题的functions.php文件中添加一行代码。 这行代码将告诉 WordPress 将视网膜图像提供给视网膜设备： add_filter( 'wp_get_attachment_image_src', 'retina_support_src' ); 函数retina_support_src( $image ) { $image[0] = str_replace( '.jpg', '@2x.jpg', $image[0] ); 返回$图像； 使用此代码，WordPress 将自动将视网膜图像提供给访问您网站的任何视网膜设备。

WordPress 视网膜图像

假设您需要有关如何为 WordPress 制作视网膜图像的提示：为您的 WordPress 网站创建图像时，请确保创建的版本是标准图像的两倍。 例如，如果您的标准图像是 400 像素宽，则创建一个 800 像素宽的视网膜图像。 根据它们的名称命名您的图像，然后将“@2x”附加到视网膜图像文件名。 因此，如果您的标准图像被命名为“logo.jpg”，那么您的视网膜图像将被命名为“[email protected]”。 确保压缩您的视网膜图像，以免它们降低您的网站速度。 而已！ 通过遵循这些简单的提示，您可以确保您的图像在所有设备（包括 Retina 设备）上看起来都很棒。

如果您不实施 Retina 图像，您的网站对于所有用户来说都会变慢。 像素的面积与标准图像中的相同，从而产生更清晰、更明亮的图像。 当非 Apple 现代设备显示 @2x 图像时，它会将其视为更大的图像。 Retina 图像是使用 WP Retina 2X 生成的，它是 WordPress 网站使用最广泛的Retina 图像生成器。 该服务还为没有 Retina 屏幕的用户提供常规图像。 如果您没有 Apple 设备来测试图像，您如何知道图像是否在专用显示器上可用？ Chrome 开发工具可以帮助您做到这一点。

可缩放矢量图形 - 为您的网站创建 Retina 图像的最佳方式。

WordPress 视网膜图像是可以在 4K 显示器、Windows 10 笔记本电脑或平板电脑上看到的高分辨率图像。 您可以尽可能使用可缩放矢量图形 (SVG) 轻松创建网站的视网膜图像。 在针对视网膜显示器优化图像时，您可以使用经过优化的 1920×130 像素宽的图像来最大化它们。