WordPress 使用特色影像進行響應式網頁設計的最佳方式是什麼？

問題描述

我有一個輝煌的想法，由於 WordPress 已經處理了一些工作，我只需要找到一個很好的方法來使這項工作。

我正在處理一個需要響應所有裝置的專案，無論是臺式 PC 還是移動小工具。因此，我想要的影像也是響應，這意味著移動裝置不應該載入 50KB +影像。

對於每個頁面或帖子，我可以使用 Post Thumbnails 新增一個精選影像，在 full-size 中，影像大約為 950×250 〜 60KB 。如果我在 iPhone /Android 上載入網站，我不希望載入約 60KB 的圖片，而是希望將小縮圖載入到其中。

響應影像的預設方法是使影像的寬度為父容器的 100％，因此如果父容器也被調整大小，它將自動調整大小。不是更大影像的最佳方法。

我想過嘗試 Filament Group’s responsive image script，但我嘗試了，它沒有正常工作。一個方法可以透過 user-agent 檢測來實現，但是我不想這樣做，因為 user-agents 可以被欺騙。

Here’s another method for resizing images on the fly，但這似乎是 WordPress 已經做的重複。

如果有一種方法可以使用 WordPress 預設的 Media Gallery 影像，所有已調整大小的縮圖已經被建立，那將是更可取的。

最佳解決方案

步驟 1：

定義兩個自定義影像大小，例如：

<?php
add_image_size( 'normal-thumbnail', 400, 300, false ); // Default image size
add_image_size( 'mobile-device-thumbnail', 200, 150, false ); // Mobile-device image size
?>

第 2 步：

實施您選擇的手段來確定客戶。有幾種方法，您使用哪種方法不在此問題的範圍之內。但是，假設您有一個適用於您的方法，將結果輸出到某個變數，如 $mobile_device = true;

步驟 3：

在您的模板檔案中，根據客戶端有條件地輸出影像。

<?php
if ( true = $mobile_device ) { // client is mobile; be responsive
    the_post_thumbnail( 'mobile-device-thumbnail' );
} else {
    the_post_thumbnail( 'normal-thumbnail' );
}
?>

注意：您可以重複 if/else(或做一個 switch) 的多種形式因素 (即螢幕尺寸) 。只需新增多個自定義影像大小，並有條件地測試您想要支援的每個螢幕尺寸。

參考文獻

• What’s the best way to use the Featured Image for responsive web design?

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。