衢州高端網站開發：如何在WordPress中集成Pictureill 2.0并使您的圖像具有響應性

WordPress非常適合接受響應性圖像的挑戰。它的默認媒體上傳程序是復雜的，并支持圖像大小調整、縮略圖裁剪和對ALT文本和標題的精細控制。在插件的幫助下，圖像優化也是小菜一碟?，F在是開始利用這些特性的時候了。有反應的圖像已經進入了HTML標準規范有了PictuRefill的填充，我們衢州高端網站開發今天就可以開始使用響應性的圖像了。

反應意象的簡史

響應圖像是適應屏幕大小和顯示密度的圖像。例如，手機不應該下載192 px寬的圖像，比屏幕本身寬6倍。我們需要一種方法來為所有設備提供適當的圖像大小，同時仍然對帶寬和質量負責。

在移動設備、各種尺寸的平板電腦和巨大的智能電視普及之前，關于響應性圖像的討論幾乎沒有意義。然而，在伊森·馬爾科特(Ethan Marcotte)的標志性著作“響應式Web設計”(ResponsiveWebDesign)之后，開發者開始認真考慮如何確保設備只下載他們需要的字節。因為圖片平均來說是你頁面中最重要的部分，所以它們是一個很好的起點。

談話發生了。成立了工作組。開發人員似乎更喜歡圖片，照片,新創建的元素，基于視頻元素，該元素使用媒體查詢指定應該下載哪個圖像。另一方面，瀏覽器開發人員更喜歡現有瀏覽器的擴展。IMG標記的形式是srcset，這是一種語法，讓開發人員列出可用的映像，由瀏覽器來決定下載哪個。

這件事持續了很長一段時間。與此同時，FilityGroup的開發人員開始組裝一個名為“PictuRefill”的填充，包含了前一種語法。

但你瞧，已經找到了解決辦法?；蛘哒f是妥協。HTML規范現在有了兩個語法的稍微修改的版本，它們已經在瀏覽器中實現了。就在最近，PictuRefill 2.0發布以反映規范中的變化。

衢州高端網站開發在本文中，我們將介紹如何根據HTML規范實現響應性圖像的兩個版本，使用PictuRefill2.0來確保完全的瀏覽器支持和WordPress內置的媒體特性。我們還將介紹一個插件，它可以幫助您完成此任務。

下面有很多代碼。我把它都匯編成了供日后參考的要點.

開始

首先，只有在使用響應主題。來自優雅主題的大多數主題在默認情況下都是響應性的。我將在整個教程中使用Divi主題，但是對于任何響應性的主題，只要做一些修改，這段代碼都可以工作。

您要做的第一件事是找出您的響應斷點當前存在的位置。這些是布局將更改的屏幕大小，并在主題的CSS樣式表中指定。對于Divi，這些主要斷點存在于：

1405 px，981 px，768 px，479 px

如果您不知道主題的斷點，請嘗試在“style.css”文件中搜索@媒體。以上斷點在優雅的主題上應該能很好地工作。

下一步是確保正在創建這些不同大小的圖像。當您上傳圖片到WordPress時，將自動創建多個大小。我們可以利用這個功能來創建為Pictureill做好準備的圖像。

改變這些媒體大小的最簡單的方法是設置->媒體。在這里，你會看到三個圖像大?。嚎s略圖，中號和大號?？s略圖經常在不同的上下文中使用，所以保持原樣。但中型和大型可以用來開始。

在“大尺寸”框中，我們將在“最大寬度”文本字段中指定最大斷點：1405。對于最大高度，輸入“9999”。這讓WordPress知道，您希望高度與寬度成比例，而不是裁剪寬度。我們可以為我們的下一個斷點981 px使用中等大小，再次將最大高度設置為“9999”。

編輯媒體設置

我們遇到了第一個問題。WordPress中沒有足夠的默認大小來容納所有斷點。我們得自己創造幾個。

創建圖像大小

是時候進入一些實際的代碼了。這段代碼應該添加到主題的Functions.php文件的底部。當然，以下所有代碼也可以在自定義插件中指定，并將同樣工作。

我們將使用add_Image_size WordPress函數為其余斷點創建圖像大小。當新圖像上傳到WordPress時，這些大小將自動創建。

衢州高端網站開發在這里，我創建了三個新的圖像大小來反映剩下的較小的斷點。對于每個名稱，我都指定了一個名稱，后面跟著一個寬度和高度(我在9999中保留了這個寬度和高度)。您會注意到，我指定的“最大”大小不對應于任何斷點。這是一種捕獲所有大小的圖像大于1405像素。

這也是安裝再生指甲插件，它將根據添加的大小重新創建現有圖像的縮略圖。

排隊PictuRefill

PictuRefill是一種能確保響應性的圖像在任何地方都能工作的多邊形填充，即使是在不執行新標準的舊瀏覽器中。它使用Javascript來實現它的魔力，因此我們必須確保將腳本文件排入主題中。首先，到圖片更新下載頁面，并下載庫的壓縮版本。然后，將該文件添加到主題的“js”文件夾中。

之后，轉到主題的函數s.php文件并對腳本進行排隊。在優雅主題的主題中，只需將這一行代碼添加到現有的腳本和樣式加載函數中即可。在Divi主題中，將其添加到Functions.php的第153行。

如果使用的是不同的主題，則需要創建一個新函數并添加wp_enQueue_script操作來注冊它。

這只是將Pictureill庫添加到頁面的頁腳，這樣您就可以開始使用它了。

獲取圖像Alt標簽

在修改媒體輸出時，我們希望確保檢索分配給圖像的ALT文本，并將其放在代碼中。我們將通過設置一個函數來實現這一點，該函數檢索ALT文本并為我們返回它。

我們在這里所做的就是使用get_post_meta WordPress函數來獲取圖像的alt文本并對其進行格式化。在任何時候，我們都可以簡單地使用get_Image_alt($Image_ID)，并輸出指定的圖像的ALT文本。我們很快就會用到這個。

使用圖片，照片元素

好了，現在是開始使用Pictureill的時候了。我們將首先使用圖片，照片元素語法稍后，我們將介紹如何使用IMG語法。

當將圖片元素與PictuRefill一起使用時，HTML應該如下所示。

基本上，對于每個圖像，我們引入一個來源元素，其中指定圖像和相應的媒體查詢。當屏幕大小與指定的媒體查詢匹配時，該圖像將被提取和使用。在本例中，“Large.jpg”將在800像素以上的屏幕上提供，“medium.jpg”將在400到799像素之間的屏幕上提供。這，這個，那，那個IMG標記用于所有其他情況，通常是最小的圖像。

如果你想知道為什么有一個奇怪的視頻標記中的標記，這是InternetExplorer 9中一個bug的修復。它不會影響任何其他瀏覽器，但確保代碼在那里工作。

構建我們的源陣列

我們將通過構建一個源srcset標簽基于WordPress創建的圖像大小。讓我們創建一個函數，在傳遞圖像ID時，構建一個包含所有圖像大小和媒體查詢的字符串。

對于每個圖像大小，我們使用內置的WordPress函數wp_get_附件_Image_src檢索圖像的源URL，并將其存儲在變量中。然后，我們創建一個新的字符串$srcset，它包含來自wp_get_附件_Image_src的每個圖像URL和相應的媒體查詢。您會注意到，我沒有得到“最小”圖像大小的URL。那是故意的。稍后再談。

對于每個圖像大小的媒體查詢，我使用它下面的大小作為最小寬度。您還記得，“小”圖像大小會創建一個768像素的圖像。對于與$img_size關聯的媒體查詢，我使用的是“Min-Width：468px”。因此，一旦屏幕大小達到468像素，768 px圖像就會被加載，依此類推。這將確保始終加載下一個大小。

可以隨意調整這些值以匹配您的站點，或者從不需要的字符串中刪除圖像大小。

構建響應圖像短代碼

衢州高端網站開發下一步是使用我們創建的函數來實際實現圖片元素。最有效的方法是創建一個短代碼，給定圖像ID和標題，為圖片，照片元素。原因我們使用一個短代碼是為了確保HTML輸出不會被WordPress自動修改，并且是相對未來的證明。

我們最終希望我們的短代碼看起來像這樣：

為此，我們創建一個函數，將短代碼屬性傳遞給函數，然后構建所需的HTML并為其創建一個短代碼?？偠灾?，它看起來是這樣的：

這里的add_hostcode操作接受一個屬性變量。使用該變量，我們提取短代碼屬性，為兩者提供默認值，然后將id屬性轉換為變量$id，并將標題轉換為$caption。

然后，我們傳遞這個ID，以添加_圖片_源，這是我們在最后一步中創建的函數，并在語法本身中輸出字符串。接下來，我們添加一個IMG標記，再次使用wp_get_附件_Image_src檢索最小的映像，以便將其用于所有無關的情況。之后，我們在標記中輸出標題，并使用get_img_alt函數從EALLER輸出ALT文本。

我們都準備好了?？紤]到[resp_Image]的縮寫，帶有一個ID和可選的標題，我們將能夠輸出一個完整的結構和工作的圖片實現。

修改后編輯器輸出

最后一步是在POST編輯器中插入新圖像時使用此短代碼。我們將使用Image_Send_to_Editor過濾器來修改MediaUploader的輸出。

這個函數只做一件事。它從上傳的圖像中獲取$id和$caption，并填充我們在最后一步中創建的短代碼。

保存此代碼后，您可以創建一個新的帖子，并使用媒體上傳器像任何其他文件一樣上傳圖像。而不是正常的圖像輸出，您將看到您的短代碼插入。當你發布或預覽這篇文章時，你會在你的網站上看到相應的圖片。將頁面縮放到不同大小，以查看媒體查詢對加載哪個圖像的影響。

使用IMG句法

當然了!,圖片，照片不是在頁面中包含響應性圖像的唯一方法。還有一個實現使用IMG srcset標記提供一系列圖像及其相應的大小。這允許瀏覽器選擇要下載的圖像。PictuRefill的輸出HTML如下所示。

這似乎有點陌生，但實際上相對簡單。第一個屬性是“大小”。在這里，我們告訴瀏覽器我們的圖像占用了多少空間。單元“VW”描述視口的百分比。在上面的例子中，我是說當屏幕大小超過1405像素時，圖像占我們布局中視圖的大約50%(因為邊欄和填充占據了其余的50%)。在稍小的屏幕上，在981 px和1405 px之間，圖像占屏幕的75%，最后在屏幕尺寸最低的時候，它們占90%。

在.。srcset我們只是提供了一個圖像的清單，他們的寬度在他們旁邊。根據這些信息，瀏覽器根據屏幕的大小和像素密度來決定要使用的圖像。因此，您不是作為開發人員指定要使用哪個映像，而是向瀏覽器提供盡可能多的有關圖像的信息，并由它來決定。

這種語法實際上更適合WordPress，除非您需要細粒度的控制，否則這可能是可行的方法。它允許瀏覽器對視網膜顯示器、低帶寬情況和不尋常的環境做出智能決策。

構建我們的Srcset陣列

與前面的示例非常相似，我們將構建一個可以用于“srcset”屬性的圖像數組。我們需要做的是列出每一個圖像的寬度旁邊的圖像，并輸出為一個列表。

就像圖片元素一樣，我們正在創建一個函數，并向它傳遞一個圖像ID。從那以后，情況就有點不一樣了。我們首先列出我們想要在一個簡單數組中使用的大小，從最小的開始移動到最大的。從這里，我們使用wp_get_附件_元數據來獲取與映像關聯的元數據信息。

然后，使用foreach循環，我們檢查鍵以確保給定圖像的大小存在，然后從wp_get_附件_Image_src提取圖像源(使用wp_get_附件_Image_src)和圖像的寬度。最后一步是構建一個新的圖像數組，一個接一個，指定圖像URL和寬度，然后返回數組，我們將在我們的短代碼函數中使用該數組。

最后，我們的函數輸出如下：

構建短代碼

下一步是創建一個短代碼，它將輸出正確的HTML我們將使用與前面相同的短代碼語法：

我們還將使用類似的函數來創建我們的短代碼，但是返回不同的HTML。

再次，我們將提取必要的短代碼參數作為變量。然后，我們將圖像ID傳遞給我們在最后一步中創建的add_srcset_Element函數，以獲取圖像列表和相關寬度。

從這里開始，我們將創建實際的HTML，從SIZES屬性開始，您應該根據自己的斷點和大小來修改它。在使用方便的get_img_alt函數輸出srcset屬性中的圖像列表和ALT文本之后，我們將標題添加到圖形說明元素。最后，我們使用add_action創建短代碼本身。

修改后編輯器輸出

由于我們的短代碼語法與以前完全相同，所以我們現有的函數沒有什么可更改的。

我們只需過濾出媒體編輯器的輸出來插入我們創建的短代碼?，F在，您可以轉到POST編輯器，插入一個新圖像，并查看IMGsrcset語法。

不同尺寸的圖像

使用Pictureill.WP插件

響應圖像仍然是相當新的，所以我們還沒有看到廣泛的應用。但是，如果您正在尋找一個具有PictuRefill良好實現的插件，那么我只看到一個插件：PictuRefill.WP。

這個插件的版本在WordPress.org上仍然使用Pictureill的舊實現，但是有一個GitHub實驗碩士它使用PictuRefill2.0。bug仍在被解決，但我沒有遇到任何重大問題。

要使用它，請從GitHub下載該文件，然后將其作為一個新插件上傳到您的站點上。WP使用上面第二個示例中的IMGsrcset語法。為了使一切正常工作，您需要正確地注冊大小和srcset屬性，使用插件提供給您訪問的pictuRefill_wp_冊_srcset函數。只需將此代碼片段添加到Functions.php文件中即可：

這將注冊我們希望在插件中使用的圖像大小數組，包括我們創建的自定義圖像大小。它還將修改輸出HTML的size屬性。每個文件中的最后一個參數是“Full”，這表示應該將這些參數賦值給作為“完整”附加到POST的任何圖像。

PictuRefill.WP最重要的一點是，它可以追溯地處理帖子中現有的圖像，并使用一些智能緩存來確保頁面仍然快速加載。

如果您對使用beta版本有些猶豫，那么當前穩定的插件版本仍然工作得很好，并且很可能在不久的將來看到更新。