創建 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 像素寬的圖像來最大化它們。