การทำงานกับภาพที่ตอบสนองใน WordPress

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

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

มันทำงานอย่างไร

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

อยู่ภายใต้ประทุนและทำการเปลี่ยนแปลง

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

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

แอตทริบิวต์เริ่มต้น

เมื่อคุณเริ่มทำงานกับคุณลักษณะนี้ คุณจะสังเกตเห็นว่า 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 เท่านั้น

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

ฟังก์ชันใหม่ที่มาพร้อมกับรีลีสล่าสุดนี้มาพร้อมกับ hooks มากมายที่คุณสามารถใช้เพื่อให้การสนับสนุนอย่างมีประสิทธิภาพสำหรับรูปภาพที่ตอบสนองภายในธีมของคุณ ตะขอเหล่านี้มีดังต่อไปนี้:

Wp_calculate_image_sizes – ตะขอที่นักพัฒนาธีมสามารถใช้เพื่อปรับแอตทริบิวต์ sizes เพื่อทำงานกับเบรกพอยต์ที่มีอยู่ในธีมของตน

Max_srcset_image_width – ตะขอที่ผู้พัฒนาธีมจะสามารถใช้กรองตามความกว้างสูงสุดของรูปภาพที่อยู่ในแอตทริบิวต์ srcset

W_calculate_image_srcset – ตะขอที่ช่วยให้นักพัฒนาสามารถกรองตามแอตทริบิวต์ srcset

เรียนรู้เพิ่มเติมเกี่ยวกับการสนับสนุนรูปภาพที่ตอบสนอง

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

ประโยชน์ของการอัปเดต

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

ในฐานะนักพัฒนา คุณจะต้องปรับแอตทริบิวต์ sizes ในแต่ละไฟล์ functions.php สำหรับธีมทั้งหมดของคุณ อย่างไรก็ตาม เมื่อคุณได้ใช้ความพยายามครั้งแรกนี้แล้ว สิ่งต่างๆ จะง่ายขึ้นมาก หลังจากที่คุณจัดการกับช่วงการเรียนรู้แล้ว คุณจะพบว่าการทำงานกับฟังก์ชันใหม่นี้ค่อนข้างเป็นธรรมชาติ

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