在 WordPress 中使用響應式圖像

直到最近，在 WordPress 中使用響應式圖像還是一個真正的挑戰。 除非用戶願意自己編寫功能，否則他們就不走運了。 另一種選擇是購買插件或尋找其他解決方法，但沒有可供開發人員利用的核心功能。 在不支持響應式圖像的情況下創建的主題通常執行緩慢，並且在不同的屏幕尺寸下可用性有時不穩定。 這些並不完全是客戶和用戶與良好功能相關聯的屬性。

幸運的是，隨著 WordPress 4.4 的發布，這一切都改變了。 現在，響應式圖像的功能直接包含在 WordPress 中，允許開發人員在主題中使用它。 這是通過採用響應式圖像插件並使其成為 WordPress 核心的一部分來實現的。

這一切是如何運作的

顯然，除非您已經這樣做了，否則您的第一步是更新到 WordPress 4.4。 完成更新後，如果您查看站點的源代碼，您會注意到站點上的圖像現在具有兩個新屬性： sizes和srcset 。 這些屬性被過濾，這意味著所有可用的圖像尺寸都存在，但尺寸與原始圖像保持一致。 在縱橫比與圖像原始版本不同的情況下，srcset 屬性將不允許自定義裁剪。 這是為了確保圖像質量在用戶屏幕上顯示時不會受到影響。

深入了解並做出改變

WordPress 添加了響應式圖像作為背景功能，這意味著該過程會自動發生。 當您使用媒體上傳器上傳圖像時，這些屬性將應用於這些圖像，而無需您進行任何干預。 這對於圖像優化也很有用。

因為它是一個背景功能，響應式圖像不帶有用戶界面——它們只是發生。 作為開發人員，您可以修改每個主題中的functions.php文件，以確保為您的圖像提供準確的sizes屬性。 請記住：當您要引用響應式圖像時，這意味著srcset sizes圖像標記屬性。

默認屬性

當您開始使用此功能時，您會注意到 WordPress 非常擅長查找所有可能的大小並將它們添加到srcset屬性中。 不幸的是，當涉及到sizes屬性的可預測性時，問題可能會出現。 這是用於將圖像寬度傳達給瀏覽器的屬性，以便圖像在任何顯示屏上都可用和可見。

將此屬性設置為默認值有多種方式。 第一個是它強制將sizes屬性應用於每個圖像。 考慮到它現在是強制性要求，這很有幫助。 第二個是它不允許瀏覽器使用比圖像原始大小更寬的圖像源。 不幸的是，用於根據顯示屏幕寬度（例如媒體查詢）調整圖像大小的 CSS 代碼會使這個默認值變得不那麼有用。

主題開發人員的過濾器掛鉤

由於此默認屬性僅適用於未經 CSS 代碼修改的圖像，因此 WordPress 已創建過濾器掛鉤供主題開發人員使用。 您只需使用此鉤子調整所有圖像的sizes屬性。 因此，您可以確定所提供的sizes屬性在任何情況下都是理想的。

一個警告

在繼續之前，讓我們花一點時間說明默認屬性選項並不是提供良好響應式圖像功能的最佳方式。 事實上，您應該努力避免創建依賴此默認值的主題。 這樣做的原因是默認屬性會阻止瀏覽器在顯示區域沒有原始圖像大小的情況下修改圖像源。 如果源代碼經過 CSS 調整併且需要更大的圖像，瀏覽器也無法修改源代碼。

圖像過濾

作為主題開發人員，您可以在圖像中使用過濾，以獲取準確的sizes屬性。 這可以通過使用 WordPress 函數的鉤子wp_calculate_image_sizes來完成。 您可以使用此功能，使其適用於您當前的主題。 您可以進行更改，將不同的sizes屬性應用於不同類型的圖像。

此版本附帶的新功能現在可以將sizes和srcset屬性應用於您使用 WordPress 媒體上傳器添加的所有圖像。 它還允許您將屬性添加到帖子中的圖像。 看看wp_get_attachment_image_sizes 。 這將返回一個sizes屬性，您可以通過functions.php文件中的過濾器為您的主題捕獲和更改該屬性。 同樣， wp_get_attachment_image_srcset做同樣的事情，只針對srcset屬性。

響應式圖像和您的自定義主題

此最新版本附帶的新功能伴隨著許多掛鉤，您可以使用這些掛鉤為主題中的響應式圖像提供有效支持。 這些鉤子包括以下內容：

Wp_calculate_image_sizes – 主題開發人員可以用來調整sizes屬性以處理主題中存在的斷點的鉤子。

Max_srcset_image_width – 主題開發人員可以用來根據srcset屬性中圖像的最大寬度進行過濾的鉤子。

W_calculate_image_srcset – 一個鉤子，使開發人員能夠根據srcset屬性進行過濾。

了解有關響應式圖像支持的更多信息

在有效使用這些鉤子時，WordPress 開發人員手冊可以提供更多指導。 您需要做的研究將根據您在進行此類幕後調整時的舒適程度而有所不同。 如果你是一個將這個作為嚴格愛好的主題開發者，你可能會選擇做一些實驗。 另一方面，如果您是職業主題開發人員，您可能希望投入真正掌握此更新所需的時間和資源。

更新的好處

如果您尚未更新 WordPress（或者您的託管 WordPress 主機尚未為您更新），您的用戶將在您更新時受益於一些巨大的好處。 響應式圖像支持可以提高頁面性能，因為他們的頁面不會浪費時間拉下太大的圖像。 用戶還將注意到圖像質量的顯著提高。 他們不會看到融入一切的“香腸製作”。 相反，他們只會看到它運行良好。

作為開發人員，您必須為所有主題調整每個functions.php文件中的sizes屬性。 但是，一旦您做出了初步努力，事情就會變得容易得多。 在您解決了學習曲線之後，您會發現使用這個新功能非常自然。

可能需要一些研究和實踐才能掌握這一新功能，並獲得響應式圖像支持以適用於您的自定義主題。 但是，如果您願意深入研究開發人員手冊並弄清楚，您的客戶將真正欣賞性能和功能的改進。 這已經是很長一段時間了，經驗豐富的主題開發人員和負責維護自定義主題的人員對此更新感到非常興奮。