ความสำคัญของภาพที่ตอบสนองใน WordPress Core

ความนิยมของภาพที่ตอบสนองเพิ่มขึ้นและเป็นสิ่งที่ไม่มีใครมองข้ามได้ อย่างไรก็ตาม การใช้ฟังก์ชันเดียวกันใน CMS ยอดนิยมอย่าง WordPress อาจเป็นประสบการณ์ที่ท้าทาย งานนี้อาจใช้เวลานานแม้ว่าจะเป็นไปได้ที่ผู้ใช้จะเขียนคุณลักษณะภายในธีมเองก็ตาม แต่สิ่งต่างๆ ได้เปลี่ยนไปอย่างมากนับตั้งแต่มีการเปิดตัว WordPress 4.4 ทำให้นักพัฒนาและผู้ดูแลระบบสามารถฝังฟังก์ชันรูปภาพที่ตอบสนองในธีมได้ง่ายขึ้น

ไฮไลท์สำคัญรวมถึงความพร้อมใช้งานของปลั๊กอิน Responsive Images ภายในแกนหลักของ WordPress ซึ่งหมายความว่าขณะนี้ผู้ใช้สามารถเพลิดเพลินกับการสนับสนุนรูปภาพที่ตอบสนองซึ่งเป็นคุณสมบัติเริ่มต้นใน WordPress มาดูกันว่าฟีเจอร์นี้ใช้งานได้จริงอย่างไรและใช้งานอย่างระมัดระวังเพื่อควบคุมศักยภาพของไซต์ WordPress ได้อย่างไร

การทำงานของคุณสมบัติ

เนื้อหาและรูปภาพทั้งหมดจะประกอบด้วย แอตทริบิวต์ srcset และ ขนาด เมื่อคุณอัปเดตใน WordPress 4.4 โดยหลักแล้วเพื่อให้แน่ใจว่ามีขนาดรูปภาพทุกขนาดพร้อมใช้ เพื่อรักษาขนาดรูปภาพที่ร้องขอจริง ในระหว่างกรณีที่อัตราส่วนภาพแตกต่างกันไปเมื่อเทียบกับภาพต้นฉบับที่ร้องขอ การ ครอบตัด แบบกำหนดเองจะไม่รวมอยู่ในแอตทริบิวต์ srcset ในเวลาเดียวกัน รูปภาพที่ตอบสนองจะถูกส่งกลับเมื่อมีการเรียกรูปภาพผ่านฟังก์ชัน wp-get-attachment-image

รูปภาพที่ปรับเปลี่ยนตามอุปกรณ์ทำหน้าที่เป็นคุณสมบัติพื้นหลังใน WordPress 4.4 เนื่องจากมีฟังก์ชันการทำงานอัตโนมัติที่เกิดขึ้นเมื่ออัปโหลดรูปภาพใน WordPress ผ่านตัวอัปโหลดสื่อ ผลการดำเนินการพื้นหลังนี้โดยอัตโนมัติใน srcset และขนาดแอตทริบิวต์การแสดงภาพเมื่อใดก็ตามที่ปรากฏในหน้าเว็บ ซึ่งหมายความว่าไม่มีอินเทอร์เฟซที่มองเห็นได้ในคุณลักษณะรูปภาพที่ตอบสนองใหม่ ไม่มีตัวเลือกใดๆ เช่น การมีอยู่ของแบบฟอร์มสำหรับวัตถุประสงค์ในการกรอก หรือกล่องสำหรับการตรวจสอบวัตถุประสงค์ และตัวเลือกสำหรับการสลับการใช้งาน เนื่องจากขาดอินเทอร์เฟซที่มองเห็นได้

ผู้พัฒนาธีมจะต้องตรวจสอบให้แน่ใจว่าแอตทริบิวต์ size ที่ถูกต้องนั้นมีอยู่ในรูปภาพโดยการแก้ไขไฟล์ functions.php ของธีม สิ่งสำคัญที่ต้องพิจารณาคือ เนื่องจาก แอตทริบิวต์ srcset และ size ที่ มี อยู่ในแท็กรูปภาพคือสิ่งที่แสดงถึงรูปภาพที่ตอบสนองใน WordPress สิ่งที่คาดเดาได้ยากที่สุดคือแอตทริบิวต์ size แม้ว่า WordPress จะทำงานได้ดีเมื่อต้องการรวมขนาดที่มีอยู่ทั้งหมดไว้ในแอตทริบิวต์ srcset เป็นหน้าที่ของแอตทริบิวต์ size เพื่ออธิบายเบราว์เซอร์เกี่ยวกับความกว้างของรูปภาพในแต่ละวิวพอร์ตที่มี อย่างไรก็ตาม ผลลัพธ์อาจแตกต่างกันไปตามสไตล์ที่มีในธีมของผู้ใช้ โดยค่าเริ่มต้นที่เหมาะสมคือ 'sizes=” (ความกว้างสูงสุด: {{image-width}}) 100 vw, {{image-width}}”

ด้วยแอตทริบิวต์ ขนาด ผู้ใช้สามารถทำได้โดยเฉพาะอย่างยิ่งสองสิ่ง ประการแรก ช่วยให้มั่นใจถึงความพร้อมใช้งานของแอตทริบิวต์ size ที่ถูกต้องในรูปภาพ ซึ่งตอนนี้กลายเป็นข้อกำหนดเบื้องต้นสำหรับข้อกำหนดที่เกี่ยวข้อง ประการที่สอง จะป้องกันไม่ให้เบราว์เซอร์จัดหาแหล่งที่มาของภาพที่เปรียบเทียบกับความกว้างเดิมที่มีการร้องขอมากกว่า อย่างไรก็ตาม ประโยชน์ของแอตทริบิวต์ขนาดเริ่มต้นจะน้อยลงเมื่อใดก็ตามที่ CSS จัดการกับขนาดของรูปภาพที่ความกว้างของวิวพอร์ตซึ่งแตกต่างไปจากเดิมอย่างสิ้นเชิง

นักพัฒนาธีมสามารถปรับแอตทริบิวต์ ขนาดที่ สอดคล้องกับแต่ละภาพด้วยความช่วยเหลือของตะขอตัวกรองเพื่อให้แน่ใจว่ามีการส่งแอตทริบิวต์ ขนาดที่ สมบูรณ์แบบในทุกเบรกพอยต์ ดังนั้นจึงควรตรวจสอบให้แน่ใจว่าธีมไม่พึ่งพาแอตทริบิวต์ ขนาด เริ่มต้นเมื่อต้องเสนอการสนับสนุนรูปภาพที่ตอบสนองได้อย่างแม่นยำ สาเหตุหลักคือความจริงที่ว่าเบราว์เซอร์ไม่ได้รับอนุญาตให้แก้ไขหรือเปลี่ยนแหล่งที่มาของภาพโดยใช้แอตทริบิวต์ขนาดเริ่มต้นในระหว่างกรณีที่ขนาดของวิวพอร์ตมีขนาดเล็กลงเมื่อเทียบกับขนาดภาพที่ร้องขอดั้งเดิม อย่างไรก็ตาม หากรูปภาพถูกแก้ไขด้วย CSS ที่จุดพักแล้ว แหล่งที่มาจะไม่สามารถเปลี่ยนแปลงได้

หากคุณเป็นบุคคลธรรมดาที่มีสิทธิ์เข้าถึงฐานโค้ด WordPress หรือหากคุณเป็นผู้พัฒนาธีม คุณจำเป็นต้องกรองรูปภาพในธีมเพื่อส่งแอตทริบิวต์ ขนาด ที่แม่นยำยิ่งขึ้น นี่ควรเป็นสิ่งที่สำคัญที่สุดที่ต้องทำหลังจากเวอร์ชันใหม่ออกวางจำหน่าย

การกำหนดค่ารูปภาพที่ปรับเปลี่ยนตามอุปกรณ์สำหรับธีมของคุณ

มีการแนะนำ hooks ใหม่จำนวนหนึ่งพร้อมกับฟังก์ชันใหม่ที่สามารถใช้สำหรับการให้การสนับสนุนรูปภาพที่ตอบสนองในระดับหนึ่งซึ่งปรับให้เข้ากับธีมของคุณ ความกว้างสูงสุดของรูปภาพที่ต้องรวมอยู่ในแอตทริบิวต์ srcset สามารถกรองโดยผู้พัฒนาธีมได้ผ่าน hook max_srcset_image_width แอตทริบิวต์ srcset ของภาพจะถูกกรองโดย hooking ในขณะที่ wp_calculate_image_srcset แอตทริบิวต์ขนาดสามารถปรับแต่งโดยนักพัฒนารูปแบบเพื่อให้เหมาะสมกับจุดพักภาพในรูปแบบของพวกเขาด้วยวิธีการกรอง wp_calculate_image_sizes

รูปภาพเนื้อหาสามารถกรองด้วย wp_calculate_image_sizes ในขณะที่โพสต์ภาพขนาดย่อ/รูปภาพเด่นสามารถกรองด้วยฟังก์ชัน wp_get_attachment_image_attributes จำเป็นต้องมีฟังก์ชันที่แตกต่างกันสองอย่าง เนื่องจากธีมจะเปลี่ยนวิธีการแสดงรูปภาพเด่นในจุดสั่งหยุดที่แตกต่างกัน และแตกต่างไปจากเดิมอย่างสิ้นเชิงเมื่อเปรียบเทียบกับวิธีการแสดงรูปภาพเนื้อหาในสถานการณ์เดียวกัน ดังนั้น WordPress 4.4 จึงเสนอให้ผู้พัฒนาธีมเพิ่มโอกาสในการกรองภาพในรูปแบบต่างๆ และด้วยเหตุนี้จึงมีความเฉพาะเจาะจงมากที่สุด

ทั้งหมดนี้เน้นถึงประโยชน์ทันทีที่ผู้ใช้และนักพัฒนาธีมจะสามารถทำได้ด้วยการสนับสนุนรูปภาพที่ตอบสนองผ่านการอัปเดต WordPress 4.4 นอกจากนี้ยังช่วยให้นักพัฒนาธีมสามารถใส่ภาพที่ชัดเจนและคมชัดโดยไม่คำนึงถึงขนาดของวิวพอร์ตและความหนาแน่นของพิกเซล และปรับปรุงประสิทธิภาพของเว็บไซต์ เนื่องจากหน้าเว็บสามารถหลีกเลี่ยงเวลาเพิ่มเติมที่จำเป็นสำหรับการโหลดภาพขนาดใหญ่ แม้ว่าจะเป็นขั้นตอนอัตโนมัติสำหรับผู้ใช้ ผู้พัฒนาธีมมีหน้าที่ในการปรับแอตทริบิวต์ขนาดรูปภาพโดยใช้เวลาในไฟล์ functions.php ภายในธีม นอกจากนี้ ยังต้องจำไว้ว่าการสร้างและการรวมปลั๊กอิน Responsive Images นั้นต้องใช้ความพยายามของทีมมากกว่า